Merge branch 'issue-344-css-refactor' into 'develop'

#344 - replace float: with flexbox, clean up

See merge request pleroma/pleroma-fe!566

4 files changed, 20 insertions, 9 deletions

diff --git a/src/App.scss b/src/App.scss
index e7784329..7c6970c1 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -181,8 +181,7 @@ input, textarea, .select {
       color: $fallback--text;
       color: var(--text, $fallback--text);
     }
-    &:disabled,
-    {
+    &:disabled {
       &,
       & + label,
       & + label::before {
@@ -649,10 +648,6 @@ nav {
     color: var(--lightText, $fallback--lightText);
   }
 
-  .text-format {
-    float: right;
-  }
-
   div {
     padding-top: 5px;
   }
diff --git a/src/components/chat_panel/chat_panel.vue b/src/components/chat_panel/chat_panel.vue
index bf65efc5..b37469ac 100644
--- a/src/components/chat_panel/chat_panel.vue
+++ b/src/components/chat_panel/chat_panel.vue
@@ -3,8 +3,8 @@
     <div class="panel panel-default">
       <div class="panel-heading timeline-heading" :class="{ 'chat-heading': floating }" @click.stop.prevent="togglePanel">
         <div class="title">
-          {{$t('chat.title')}}
-          <i class="icon-cancel" style="float: right;" v-if="floating"></i>
+          <span>{{$t('chat.title')}}</span>
+          <i class="icon-cancel" v-if="floating"></i>
         </div>
       </div>
       <div class="chat-window" v-chat-scroll>
@@ -98,4 +98,11 @@
     resize: none;
   }
 }
+
+.chat-panel {
+  .title {
+    display: flex;
+    justify-content: space-between;
+  }
+}
 </style>
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index bc81d45c..b3364afc 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -103,6 +103,7 @@
     flex: 1 1 0;
     display: flex;
     flex-wrap: nowrap;
+    justify-content: space-between;
 
     .name-and-action {
       flex: 1;
@@ -123,8 +124,8 @@
         object-fit: contain
       }
     }
+
     .timeago {
-      float: right;
       font-size: 12px;
     }
 
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 6ed5d92e..b3cc0ce6 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -118,6 +118,14 @@
   }
 }
 
+.post-status-form {
+  .visibility-tray {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row-reverse;
+  }
+}
+
 .post-status-form, .login {
   .form-bottom {
     display: flex;