From 65f30f65a2816d5b25c096be0f237bbca17608e5 Mon Sep 17 00:00:00 2001 From: Akihiko Odaki 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/images/mastodon-drawer.png | Bin 0 -> 32449 bytes app/javascript/images/mastodon-getting-started.png | Bin 34539 -> 0 bytes app/javascript/images/wave-drawer.png | Bin 0 -> 3269 bytes app/javascript/mastodon/features/compose/index.js | 1 + .../mastodon/features/getting_started/index.js | 24 ++++++++++----------- app/javascript/styles/mastodon/components.scss | 16 ++++++-------- 6 files changed, 19 insertions(+), 22 deletions(-) create mode 100644 app/javascript/images/mastodon-drawer.png delete mode 100644 app/javascript/images/mastodon-getting-started.png create mode 100644 app/javascript/images/wave-drawer.png (limited to 'app/javascript') diff --git a/app/javascript/images/mastodon-drawer.png b/app/javascript/images/mastodon-drawer.png new file mode 100644 index 000000000..a1fb642a0 Binary files /dev/null and b/app/javascript/images/mastodon-drawer.png differ diff --git a/app/javascript/images/mastodon-getting-started.png b/app/javascript/images/mastodon-getting-started.png deleted file mode 100644 index e05dd493f..000000000 Binary files a/app/javascript/images/mastodon-getting-started.png and /dev/null differ diff --git a/app/javascript/images/wave-drawer.png b/app/javascript/images/wave-drawer.png new file mode 100644 index 000000000..ca9f9e1d8 Binary files /dev/null and b/app/javascript/images/wave-drawer.png differ diff --git a/app/javascript/mastodon/features/compose/index.js b/app/javascript/mastodon/features/compose/index.js index 0c66585c9..c3e936ab9 100644 --- a/app/javascript/mastodon/features/compose/index.js +++ b/app/javascript/mastodon/features/compose/index.js @@ -94,6 +94,7 @@ export default class Compose extends React.PureComponent {
+
diff --git a/app/javascript/mastodon/features/getting_started/index.js b/app/javascript/mastodon/features/getting_started/index.js index 11fb6d365..2f02f245f 100644 --- a/app/javascript/mastodon/features/getting_started/index.js +++ b/app/javascript/mastodon/features/getting_started/index.js @@ -98,19 +98,17 @@ export default class GettingStarted extends ImmutablePureComponent {
-
-
-

- -

-

- tootsuite/mastodon }} - /> -

-
+
+

+ +

+

+ tootsuite/mastodon }} + /> +

); 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