From bc3447a9fef17fd62a38aa1c7b83993211c2eb10 Mon Sep 17 00:00:00 2001
From: Matthew Taylor <mewtaylor@gmail.com>
Date: Mon, 13 Nov 2017 15:15:18 -0500
Subject: [PATCH] Make selector column responsive to paint editor width
This is for https://github.com/LLK/scratch-paint/pull/194, making the selector area smaller on tablet so as to create more space for the paint editor
---
src/components/asset-panel/selector.css | 12 ++++++++++++
src/css/units.css | 4 ++++
src/lib/layout-constants.js | 3 ++-
3 files changed, 18 insertions(+), 1 deletion(-)
diff --git a/src/components/asset-panel/selector.css b/src/components/asset-panel/selector.css
index 2a4de1a25..63e686832 100644
--- a/src/components/asset-panel/selector.css
+++ b/src/components/asset-panel/selector.css
@@ -1,4 +1,5 @@
@import "../../css/colors.css";
+@import "../../css/units.css";
.wrapper {
width: 150px;
@@ -51,3 +52,14 @@
min-height: 5rem;
margin: 1rem auto;
}
+
+@media only screen and (max-width: $full-size-paint) {
+ .wrapper {
+ width: 80px;
+ }
+
+ .list-item {
+ width: 4rem;
+ min-height: 4rem;
+ }
+}
diff --git a/src/css/units.css b/src/css/units.css
index 3de6174a2..3e7f73f36 100644
--- a/src/css/units.css
+++ b/src/css/units.css
@@ -9,3 +9,7 @@ $stage-menu-height: 2.75rem;
$library-header-height: 4.375rem;
$form-radius: calc($space / 2);
+
+/* layout contants from `layout-constants.js` */
+$full-size: 1095px;
+$full-size-paint: 1249px;
diff --git a/src/lib/layout-constants.js b/src/lib/layout-constants.js
index 672c8013f..67c2ae44c 100644
--- a/src/lib/layout-constants.js
+++ b/src/lib/layout-constants.js
@@ -3,5 +3,6 @@ export default {
fullStageHeight: 360,
smallerStageWidth: 480 * 0.85,
smallerStageHeight: 360 * 0.85,
- fullSizeMinWidth: 1096
+ fullSizeMinWidth: 1096,
+ fullSizePaintMinWidth: 1250
};
--
GitLab