Merge pull request #148 from glitch-soc/better-header

Improvements to status headers and content

1 files changed, 46 insertions, 69 deletions

diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
index 03f4f0800..fb1922113 100644
--- a/app/javascript/styles/components.scss
+++ b/app/javascript/styles/components.scss
@@ -550,6 +550,7 @@
 .status__content,
 .reply-indicator__content {
   position: relative;
+  padding: 5px 12px;
   font-size: 15px;
   line-height: 20px;
   color: $primary-text-color;
@@ -660,7 +661,6 @@
 
 .status {
   padding: 8px 10px;
-  padding-left: 68px;
   position: relative;
   height: auto;
   min-height: 48px;
@@ -736,7 +736,7 @@
       content: "";
     }
 
-    .status__display-name:hover strong {
+    .display-name:hover .display-name__html {
       text-decoration: none;
     }
 
@@ -752,7 +752,7 @@
   }
 
   .notification__message {
-    margin: -10px 0 10px;
+    margin: -10px -10px 10px;
   }
 }
 
@@ -780,26 +780,21 @@
 }
 
 .status__display-name {
+  margin: 0 auto 0 0;
   color: $ui-base-lighter-color;
 }
 
-.status__info .status__display-name {
-  display: block;
-  max-width: 100%;
-}
-
 .status__info {
-  margin: 2px 0 0;
+  display: flex;
+  margin: 2px 0 5px;
   font-size: 15px;
   line-height: 24px;
 }
 
 .status__info__icons {
-  display: inline-block;
+  flex: none;
   position: relative;
-  float: right;
   color: lighten($ui-base-color, 26%);
-  z-index: 5; // to make it clickable
 
   .status__visibility-icon {
     padding-left: 6px;
@@ -842,15 +837,7 @@
 .status__action-bar {
   align-items: center;
   display: flex;
-  margin-top: 10px;
-  margin-left: -58px;
-
-  &::before {
-    display: block;
-    flex: 1 1 0;
-    max-width: 58px;
-    content: "";
-  }
+  margin: 10px 12px 0;
 }
 
 .status__action-bar-button {
@@ -983,8 +970,7 @@
 
 .account__avatar-wrapper {
   float: left;
-  margin-left: 12px;
-  margin-right: 12px;
+  margin: 6px 16px 6px 6px;
 }
 
 .account__avatar {
@@ -1000,6 +986,7 @@
 }
 
 .account__avatar-overlay {
+  position: relative;
   @include avatar-size(48px);
 
   &-base {
@@ -1020,7 +1007,7 @@
 
 .account__relationship {
   height: 18px;
-  padding: 10px;
+  padding: 12px 10px;
   white-space: nowrap;
 }
 
@@ -1268,15 +1255,6 @@
   }
 }
 
-.status__display-name,
-.reply-indicator__display-name,
-.detailed-status__display-name,
-.account__display-name {
-  &:hover strong {
-    text-decoration: underline;
-  }
-}
-
 .account__display-name strong {
   display: block;
 }
@@ -1312,8 +1290,8 @@
 }
 
 .status__avatar {
-  position: absolute;
-  margin-left: -58px;
+  flex: none;
+  margin: 0 10px 0 0;
   height: 48px;
   width: 48px;
 }
@@ -1344,9 +1322,7 @@
 }
 
 .notification__message {
-  margin-left: 68px;
-  padding: 8px 0;
-  padding-bottom: 0;
+  padding: 8px 10px 0;
   cursor: default;
   color: $ui-primary-color;
   font-size: 15px;
@@ -1358,8 +1334,10 @@
 }
 
 .notification__favourite-icon-wrapper {
-  left: -26px;
-  position: absolute;
+  float: left;
+  margin: 0 10px 0 0;
+  width: 48px;
+  text-align: right;
 
   .star-icon {
     color: $gold-star;
@@ -1383,28 +1361,37 @@
 
 .display-name {
   display: block;
-  position: relative;
+  padding: 6px 0;
   max-width: 100%;
-  //overflow: hidden;
-  //text-overflow: ellipsis;
-  //white-space: nowrap;
-}
+  height: 36px;
+  overflow: hidden;
 
-.display-name__html {
-  font-weight: 500;
-}
+  strong {
+    display: block;
+    height: 18px;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 18px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
 
-.display-name__account {
-  font-size: 14px;
-  display: block;
-  line-height: 1.1; // reduce the distance from the display name
-  padding-bottom: 3px;
+  span {
+    display: block;
+    height: 18px;
+    font-size: 15px;
+    line-height: 18px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
 
-  // block ellipsis
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  &:hover {
+    strong {
+      text-decoration: underline;
+    }
+  }
 }
 
 .status__relative-time,
@@ -3896,17 +3883,7 @@ button.icon-button.active i.fa-retweet {
   flex-direction: column;
 
   .status__display-name {
-    display: block;
-    max-width: 100%;
-    padding-right: 25px;
-  }
-
-  .status__avatar {
-    height: 28px;
-    left: 10px;
-    position: absolute;
-    top: 10px;
-    width: 48px;
+    display: flex;
   }
 }