From 65f30f65a2816d5b25c096be0f237bbca17608e5 Mon Sep 17 00:00:00 2001
From: Akihiko Odaki <akihiko.odaki.4i@stu.hosei.ac.jp>
Date: Wed, 27 Dec 2017 11:31:30 +0900
Subject: Move the mastodon on Getting Started column to drawer column (#6109)

Getting Started column obtained many links, and it became much taller.
Because of its height, Getting Started column required long scrolling on
devices with small screen, such as 4 inch phones and 10 inch laptops.

This change moves the mastodon which took large space on the column to
drawer column. The drawer column has only the compose form and has more
space.
---
 app/javascript/styles/mastodon/components.scss | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

(limited to 'app/javascript/styles')

diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 63664d607..3240b38a4 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -1758,7 +1758,7 @@
   position: absolute;
   top: 0;
   left: 0;
-  background: lighten($ui-base-color, 13%);
+  background: lighten($ui-base-color, 13%) url('../images/wave-drawer.png') no-repeat bottom / 100% auto;
   box-sizing: border-box;
   padding: 0;
   display: flex;
@@ -1771,6 +1771,11 @@
   &.darker {
     background: $ui-base-color;
   }
+
+  > .mastodon {
+    background: url('../images/mastodon-drawer.png') no-repeat left bottom / contain;
+    flex: 1;
+  }
 }
 
 .pseudo-drawer {
@@ -2072,15 +2077,8 @@
   overflow-y: auto;
 }
 
-.getting-started__footer {
-  display: flex;
-  flex-direction: column;
-}
-
 .getting-started {
-  box-sizing: border-box;
-  padding-bottom: 235px;
-  background: url('../images/mastodon-getting-started.png') no-repeat 0 100%;
+  background: $ui-base-color;
   flex: 1 0 auto;
 
   p {
-- 
cgit