From 78fcb67c12f326650d3147d46a712d0f19dfdc15 Mon Sep 17 00:00:00 2001
From: Thibaut Girka <thib@sitedethib.com>
Date: Wed, 11 Jul 2018 18:06:52 +0200
Subject: [PATCH] [Glitch] Add follow button to detailed status, add gradient
 to mask bio cut-off (fixes #566)

Port 5294f3a1d2ed0ddf06b1d2d140c197a7553244d1 to glitch-soc
---
 .../flavours/glitch/styles/accounts.scss      | 14 ++++
 .../flavours/glitch/styles/modal.scss         |  6 ++
 .../glitch/styles/stream_entries.scss         | 72 +++++++++----------
 3 files changed, 56 insertions(+), 36 deletions(-)

diff --git a/app/javascript/flavours/glitch/styles/accounts.scss b/app/javascript/flavours/glitch/styles/accounts.scss
index efff59ff68..133250822d 100644
--- a/app/javascript/flavours/glitch/styles/accounts.scss
+++ b/app/javascript/flavours/glitch/styles/accounts.scss
@@ -443,6 +443,20 @@
       overflow: hidden;
       text-overflow: ellipsis;
       height: 5.5em;
+      position: relative;
+
+      &::after {
+        display: block;
+        content: "";
+        width: 100%;
+        height: 100px;
+        position: absolute;
+        bottom: 0;
+        background: linear-gradient(to bottom, rgba($simple-background-color, 0.01) 0%, rgba($simple-background-color, 1) 100%);
+        left: 0;
+        border-radius: 0 0 4px 4px;
+        pointer-events: none;
+      }
     }
   }
 }
diff --git a/app/javascript/flavours/glitch/styles/modal.scss b/app/javascript/flavours/glitch/styles/modal.scss
index ceb79bbb99..10de454c69 100644
--- a/app/javascript/flavours/glitch/styles/modal.scss
+++ b/app/javascript/flavours/glitch/styles/modal.scss
@@ -18,3 +18,9 @@
     background: url('~images/elephant_ui_plane.svg') no-repeat left bottom / contain;
   }
 }
+
+@media screen and (max-width: 600px) {
+  .account-header {
+    margin-top: 0;
+  }
+}
diff --git a/app/javascript/flavours/glitch/styles/stream_entries.scss b/app/javascript/flavours/glitch/styles/stream_entries.scss
index 40963ae848..ec7f60014c 100644
--- a/app/javascript/flavours/glitch/styles/stream_entries.scss
+++ b/app/javascript/flavours/glitch/styles/stream_entries.scss
@@ -312,53 +312,53 @@
 .embed {
   .activity-stream {
     box-shadow: none;
+  }
+}
 
-    .entry {
-
-      .detailed-status.light {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
-        align-items: flex-start;
+.entry {
 
-        .detailed-status__display-name {
-          flex: 1;
-          margin: 0 5px 15px 0;
-        }
+  .detailed-status.light {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: flex-start;
 
-        .button.button-secondary.logo-button {
-          flex: 0 auto;
-          font-size: 14px;
+    .detailed-status__display-name {
+      flex: 1;
+      margin: 0 5px 15px 0;
+    }
 
-          svg {
-            width: 20px;
-            height: auto;
-            vertical-align: middle;
-            margin-right: 5px;
+    .button.button-secondary.logo-button {
+      flex: 0 auto;
+      font-size: 14px;
 
-            path:first-child {
-              fill: $ui-primary-color;
-            }
+      svg {
+        width: 20px;
+        height: auto;
+        vertical-align: middle;
+        margin-right: 5px;
 
-            path:last-child {
-              fill: $simple-background-color;
-            }
-          }
+        path:first-child {
+          fill: $ui-primary-color;
+        }
 
-          &:active,
-          &:focus,
-          &:hover {
-            svg path:first-child {
-              fill: lighten($ui-primary-color, 4%);
-            }
-          }
+        path:last-child {
+          fill: $simple-background-color;
         }
+      }
 
-        .status__content,
-        .detailed-status__meta {
-          flex: 100%;
+      &:active,
+      &:focus,
+      &:hover {
+        svg path:first-child {
+          fill: lighten($ui-primary-color, 4%);
         }
       }
     }
+
+    .status__content,
+    .detailed-status__meta {
+      flex: 100%;
+    }
   }
 }