From 8ae4b431f916b911613b89aa82bd533939172d54 Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Fri, 11 Aug 2017 13:40:51 -0400
Subject: [PATCH] Fix flex layout in safari
---
src/components/gui/gui.css | 7 +--
.../stage-selector/stage-selector.css | 28 +++--------
.../stage-selector/stage-selector.jsx | 46 ++++++++-----------
src/components/target-pane/target-pane.css | 14 +-----
4 files changed, 31 insertions(+), 64 deletions(-)
diff --git a/src/components/gui/gui.css b/src/components/gui/gui.css
index 5146c84f1..6fce08e8c 100644
--- a/src/components/gui/gui.css
+++ b/src/components/gui/gui.css
@@ -123,13 +123,10 @@
}
.target-wrapper {
- /* Take all the available vertical space available.
- Works in tandem with height: 100%; which is set on the child: .targetPane
- @todo: Not working in Safari, not great in FFx
- */
+ display: flex;
flex-grow: 1;
flex-basis: 0;
-
+
padding-top: $space;
padding-left: $space;
padding-right: $space;
diff --git a/src/components/stage-selector/stage-selector.css b/src/components/stage-selector/stage-selector.css
index 7df9279f4..9d3149625 100644
--- a/src/components/stage-selector/stage-selector.css
+++ b/src/components/stage-selector/stage-selector.css
@@ -4,10 +4,13 @@
$header-height: calc($stage-menu-height - 2px);
.stage-selector {
- position: relative; /* for the child element border */
- height: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ position: relative; /* For the add backdrop button */
+ flex-grow: 1;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
- background-color: white;
+ background-color: #f9f9f9;
color: #575e75;
border-top-left-radius: $space;
border-top-right-radius: $space;
@@ -30,16 +33,15 @@ $header-height: calc($stage-menu-height - 2px);
align-items: center;
justify-content: center;
height: $header-height;
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: white;
color: #575e75;
border-top-left-radius: $space;
border-top-right-radius: $space;
border-bottom: 1px solid #eaeaea;
+ width: 100%;
}
.header-title {
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 0.625rem;
font-weight: bold;
color: #575e75;
@@ -48,16 +50,8 @@ $header-height: calc($stage-menu-height - 2px);
user-select: none;
}
-.body {
- justify-content: space-around;
- height: calc(100% - $header-height);
- min-height: 282px; /* Safari flex doesn't set height correctly, this is the min for 1024x768 */
- background-color: #f9f9f9;
-}
-
.count {
padding: 0.3rem 0.75rem;
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 0.625rem;
color: #575e75;
background: white;
@@ -68,19 +62,11 @@ $header-height: calc($stage-menu-height - 2px);
.label {
margin: 0.75rem 0 0.25rem;
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 0.6rem;
color: #575e75;
user-select: none;
}
-.flex-wrapper {
- display: flex;
- flex-direction: column; /* makes rows */
- align-items: center;
- overflow: hidden;
-}
-
.costume-canvas {
display: block;
width: 100%;
diff --git a/src/components/stage-selector/stage-selector.jsx b/src/components/stage-selector/stage-selector.jsx
index 5739899f8..93002f9ef 100644
--- a/src/components/stage-selector/stage-selector.jsx
+++ b/src/components/stage-selector/stage-selector.jsx
@@ -37,34 +37,28 @@ const StageSelector = props => {
<div className={styles.header}>
<div className={styles.headerTitle}>Stage</div>
</div>
- <div className={styles.body}>
- <div
- className={styles.flexWrapper}
- >
- {url ? (
- <CostumeCanvas
- className={styles.costumeCanvas}
- height={42}
- url={url}
- width={56}
- />
- ) : null}
- <div className={styles.label}>
- <FormattedMessage
- defaultMessage="Backdrops"
- description="Label for the backdrops in the stage selector"
- id="stageSelector.backdrops"
- />
- </div>
- <div className={styles.count}>{backdropCount}</div>
- </div>
- <IconButton
- className={styles.addButton}
- img={backdropIcon}
- title={addBackdropMessage}
- onClick={onNewBackdropClick}
+ {url ? (
+ <CostumeCanvas
+ className={styles.costumeCanvas}
+ height={42}
+ url={url}
+ width={56}
+ />
+ ) : null}
+ <div className={styles.label}>
+ <FormattedMessage
+ defaultMessage="Backdrops"
+ description="Label for the backdrops in the stage selector"
+ id="stageSelector.backdrops"
/>
</div>
+ <div className={styles.count}>{backdropCount}</div>
+ <IconButton
+ className={styles.addButton}
+ img={backdropIcon}
+ title={addBackdropMessage}
+ onClick={onNewBackdropClick}
+ />
</Box>
);
};
diff --git a/src/components/target-pane/target-pane.css b/src/components/target-pane/target-pane.css
index 380200ff5..404283d19 100644
--- a/src/components/target-pane/target-pane.css
+++ b/src/components/target-pane/target-pane.css
@@ -4,22 +4,12 @@
/* Makes columns for the sprite library selector + and the stage selector */
display: flex;
flex-direction: row;
-
- height: 100%;
+ flex-grow: 1;
}
.stage-selector-wrapper {
+ display: flex;
flex-basis: 72px;
flex-shrink: 0;
margin-left: calc($space / 2);
}
-
-.add-button-wrapper {
- position: absolute;
- z-index: 1;
- bottom: 0.5rem;
- border: 0;
- transition: all 0.15s ease-out; /* @todo: standardize with var */
- cursor: pointer;
- user-select: none;
-}
--
GitLab