Hide some components rather than unmounting (#2271)

Hide some components rather than unmounting them to allow to show again
quickly and keep the view state such as the scrolled offset.

2 files changed, 18 insertions, 7 deletions

diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss
index feab81366..0c8379be4 100644
--- a/app/assets/stylesheets/components.scss
+++ b/app/assets/stylesheets/components.scss
@@ -89,11 +89,11 @@
   border: none;
   background: transparent;
   cursor: pointer;
-  transition: all 100ms ease-in;
+  transition: color 100ms ease-in;
 
   &:hover, &:active, &:focus {
     color: lighten($color1, 33%);
-    transition: all 200ms ease-out;
+    transition: color 200ms ease-out;
   }
 
   &.disabled {
@@ -152,11 +152,11 @@
   padding: 0 3px;
   line-height: 27px;
   outline: 0;
-  transition: all 100ms ease-in;
+  transition: color 100ms ease-in;
 
   &:hover, &:active, &:focus {
     color: lighten($color1, 26%);
-    transition: all 200ms ease-out;
+    transition: color 200ms ease-out;
   }
 
   &.disabled {
@@ -1100,6 +1100,7 @@ a.status__content__spoiler-link {
   flex-direction: row;
   justify-content: flex-start;
   overflow-x: auto;
+  position:   relative;
 }
 
 @media screen and (min-width: 360px) {
@@ -1257,11 +1258,11 @@ a.status__content__spoiler-link {
   flex-direction: row;
 
   a {
-    transition: all 100ms ease-in;
+    transition: background 100ms ease-in;
 
     &:hover {
       background: lighten($color1, 3%);
-      transition: all 200ms ease-out;
+      transition: background 200ms ease-out;
     }
   }
 }
diff --git a/app/assets/stylesheets/containers.scss b/app/assets/stylesheets/containers.scss
index 43705b19c..6f339f998 100644
--- a/app/assets/stylesheets/containers.scss
+++ b/app/assets/stylesheets/containers.scss
@@ -9,6 +9,16 @@
   }
 }
 
+.mastodon-column-container {
+  display: flex;
+  height: 100%;
+  width: 100%;
+
+  // 707568 - height 100% doesn't work on child of a flex item - chromium - Monorail
+  // https://bugs.chromium.org/p/chromium/issues/detail?id=707568
+  flex: 1 1 auto;
+}
+
 .logo-container {
   max-width: 400px;
   margin: 100px auto;
@@ -40,7 +50,7 @@
 
       img {
         opacity: 0.8;
-        transition: all 0.8s ease;
+        transition: opacity 0.8s ease;
       }
 
       &:hover {