Merge branch 'glitch' into production

9 files changed, 62 insertions, 45 deletions

diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss
index b354e7acf..7f3c21163 100644
--- a/app/javascript/flavours/glitch/styles/components/columns.scss
+++ b/app/javascript/flavours/glitch/styles/components/columns.scss
@@ -43,7 +43,7 @@
       display: flex;
       flex-direction: column;
 
-      @media screen and (min-width: 360px) {
+      @media screen and (min-width: $no-gap-breakpoint) {
         padding: 0 10px;
       }
     }
@@ -466,14 +466,14 @@
 }
 
 .auto-columns.navbar-under {
-  @media screen and (max-width: 360px) {
+  @media screen and (max-width: $no-gap-breakpoint) {
     @include fix-margins-for-navbar-under;
   }
 }
 
 .auto-columns.navbar-under .react-swipeable-view-container .columns-area,
 .single-column.navbar-under .react-swipeable-view-container .columns-area {
-  @media screen and (max-width: 360px) {
+  @media screen and (max-width: $no-gap-breakpoint) {
     height: 100% !important;
   }
 }
diff --git a/app/javascript/flavours/glitch/styles/components/composer.scss b/app/javascript/flavours/glitch/styles/components/composer.scss
index 3eb5551c6..1044b13c1 100644
--- a/app/javascript/flavours/glitch/styles/components/composer.scss
+++ b/app/javascript/flavours/glitch/styles/components/composer.scss
@@ -605,7 +605,7 @@
 
   & > .side_arm {
     display: inline-block;
-    margin: 0 2px 0 0;
+    margin: 0 2px;
     padding: 0;
     width: 36px;
     text-align: center;
diff --git a/app/javascript/flavours/glitch/styles/components/drawer.scss b/app/javascript/flavours/glitch/styles/components/drawer.scss
index 0994a9b43..93a3f62ed 100644
--- a/app/javascript/flavours/glitch/styles/components/drawer.scss
+++ b/app/javascript/flavours/glitch/styles/components/drawer.scss
@@ -78,7 +78,7 @@
   margin-bottom: 10px;
   flex: none;
 
-  @include limited-single-column('screen and (max-width: 360px)') { margin-bottom: 0 }
+  @include limited-single-column('screen and (max-width: #{$no-gap-breakpoint})') { margin-bottom: 0 }
   @include single-column('screen and (max-width: 630px)') { font-size: 16px }
 }
 
diff --git a/app/javascript/flavours/glitch/styles/components/single_column.scss b/app/javascript/flavours/glitch/styles/components/single_column.scss
index e0f3d62a7..83c5d351b 100644
--- a/app/javascript/flavours/glitch/styles/components/single_column.scss
+++ b/app/javascript/flavours/glitch/styles/components/single_column.scss
@@ -98,7 +98,7 @@
     top: 15px;
   }
 
-  @media screen and (min-width: 360px) {
+  @media screen and (min-width: $no-gap-breakpoint) {
     padding: 10px 0;
   }
 
@@ -184,7 +184,7 @@
   }
 }
 
-@media screen and (min-width: 360px) {
+@media screen and (min-width: $no-gap-breakpoint) {
   .tabs-bar {
     margin: 10px auto;
     margin-bottom: 0;
diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss
index 4ffbb2c21..ccc6da594 100644
--- a/app/javascript/flavours/glitch/styles/components/status.scss
+++ b/app/javascript/flavours/glitch/styles/components/status.scss
@@ -193,10 +193,8 @@
 }
 
 .status__prepend-icon-wrapper {
-  float: left;
-  margin: 0 10px 0 -58px;
-  width: 48px;
-  text-align: right;
+  left: -26px;
+  position: absolute;
 }
 
 .notification-follow {
@@ -370,9 +368,7 @@
 
 .status__relative-time {
   display: inline-block;
-  margin-left: auto;
-  padding-left: 18px;
-  width: 120px;
+  flex-grow: 1;
   color: $dark-text-color;
   font-size: 14px;
   text-align: right;
@@ -382,7 +378,6 @@
 }
 
 .status__display-name {
-  margin: 0 auto 0 0;
   color: $dark-text-color;
   overflow: hidden;
 }
@@ -394,6 +389,7 @@
 
 .status__info {
   display: flex;
+  justify-content: space-between;
   font-size: 15px;
 
   > span {
@@ -407,25 +403,23 @@
 }
 
 .status__info__icons {
-  margin-left: auto;
   display: flex;
   align-items: center;
   height: 1em;
   color: $action-button-color;
 
-  .status__media-icon {
-    padding-left: 6px;
-    padding-right: 1px;
-  }
-
-  .status__visibility-icon {
-    padding-left: 4px;
+  .status__media-icon,
+  .status__visibility-icon,
+  .status__reply-icon {
+    padding-left: 2px;
+    padding-right: 2px;
   }
 }
 
 .status__info__account {
   display: flex;
   align-items: center;
+  justify-content: flex-start;
 }
 
 .status-check-box {
@@ -465,9 +459,12 @@
 }
 
 .status__prepend {
-  margin: -10px -10px 10px;
+  margin-top: -10px;
+  margin-bottom: 10px;
+  margin-left: 58px;
   color: $dark-text-color;
-  padding: 8px 10px 0 68px;
+  padding: 8px 0;
+  padding-bottom: 2px;
   font-size: 14px;
   position: relative;
 
diff --git a/app/javascript/flavours/glitch/styles/containers.scss b/app/javascript/flavours/glitch/styles/containers.scss
index dc60dd14b..130e1461c 100644
--- a/app/javascript/flavours/glitch/styles/containers.scss
+++ b/app/javascript/flavours/glitch/styles/containers.scss
@@ -147,6 +147,10 @@
     min-height: 100%;
   }
 
+  .flash-message {
+    margin-bottom: 10px;
+  }
+
   @media screen and (max-width: 738px) {
     grid-template-columns: minmax(0, 50%) minmax(0, 50%);
 
diff --git a/app/javascript/flavours/glitch/styles/index.scss b/app/javascript/flavours/glitch/styles/index.scss
index 323b2e7fe..af73feb89 100644
--- a/app/javascript/flavours/glitch/styles/index.scss
+++ b/app/javascript/flavours/glitch/styles/index.scss
@@ -14,7 +14,7 @@
 @import 'widgets';
 @import 'forms';
 @import 'accounts';
-@import 'stream_entries';
+@import 'statuses';
 @import 'components/index';
 @import 'polls';
 @import 'about';
diff --git a/app/javascript/flavours/glitch/styles/rtl.scss b/app/javascript/flavours/glitch/styles/rtl.scss
index 11fae3121..8a275d82f 100644
--- a/app/javascript/flavours/glitch/styles/rtl.scss
+++ b/app/javascript/flavours/glitch/styles/rtl.scss
@@ -28,6 +28,15 @@ body.rtl {
     margin-left: 4px;
   }
 
+  .composer--publisher {
+    text-align: left;
+  }
+
+  .boost-modal__status-time,
+  .favourite-modal__status-time {
+    float: left;
+  }
+
   .navigation-bar__profile {
     margin-left: 0;
     margin-right: 8px;
@@ -50,8 +59,8 @@ body.rtl {
   .column-header__buttons {
     left: 0;
     right: auto;
-    margin-left: -15px;
-    margin-right: 0;
+    margin-left: 0;
+    margin-right: -15px;
   }
 
   .column-inline-form .icon-button {
@@ -87,11 +96,14 @@ body.rtl {
   }
 
   .status__avatar {
+    margin-left: 10px;
+    margin-right: 0;
+
+    // Those are used for public pages
     left: auto;
     right: 10px;
   }
 
-  .status,
   .activity-stream .status.light {
     padding-left: 10px;
     padding-right: 68px;
@@ -110,7 +122,7 @@ body.rtl {
 
   .status__prepend {
     margin-left: 0;
-    margin-right: 68px;
+    margin-right: 58px;
   }
 
   .status__prepend-icon-wrapper {
@@ -136,17 +148,7 @@ body.rtl {
   .status__relative-time,
   .activity-stream .status.light .status__header .status__meta {
     float: left;
-  }
-
-  .activity-stream .detailed-status.light .detailed-status__display-name > div {
-    float: right;
-    margin-right: 0;
-    margin-left: 10px;
-  }
-
-  .activity-stream .detailed-status.light .detailed-status__meta span > span {
-    margin-left: 0;
-    margin-right: 6px;
+    text-align: left;
   }
 
   .status__action-bar {
@@ -182,6 +184,10 @@ body.rtl {
     margin-right: 0;
   }
 
+  .detailed-status__display-name .display-name {
+    text-align: right;
+  }
+
   .detailed-status__display-avatar {
     margin-right: 0;
     margin-left: 10px;
@@ -195,7 +201,6 @@ body.rtl {
   }
 
   .fa-ul {
-    margin-left: 0;
     margin-left: 2.14285714em;
   }
 
diff --git a/app/javascript/flavours/glitch/styles/stream_entries.scss b/app/javascript/flavours/glitch/styles/statuses.scss
index de9c2612c..611d5185b 100644
--- a/app/javascript/flavours/glitch/styles/stream_entries.scss
+++ b/app/javascript/flavours/glitch/styles/statuses.scss
@@ -205,9 +205,20 @@
 }
 
 .rtl {
-  .embed, .public-layout {
-    .status .status__relative-time {
-      float: left;
+  .embed,
+  .public-layout {
+    .status {
+      padding-left: 10px;
+      padding-right: 68px;
+
+      .status__info .status__display-name {
+        padding-left: 25px;
+        padding-right: 0;
+      }
+
+      .status__relative-time {
+        float: left;
+      }
     }
   }
 }