瀏覽代碼

Finishing touches on mobile responsiveness

Kirk Trombley 5 年之前
父節點
當前提交
b686c70224

+ 20 - 9
client/src/App.css

@@ -239,23 +239,22 @@
   justify-content: space-around;
 }
 
-.guess-pane__timer {
-  flex: 1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
 .guess-pane__map {
   flex: 6;
   height: 100%;
   width: 100%;
-  margin: 5px;
+}
+
+.guess-pane__timer-submit-wrapper {
+  flex: 1;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
 }
 
 .guess-pane__submit {
   flex: 1;
-  margin: 5px;
+  margin: 2px;
 }
 
 @media only screen and (min-width: 600px) {
@@ -271,12 +270,24 @@
   .guess-pane {
     flex-flow: column nowrap;
   }
+
+  .guess-pane__map {
+    margin: 5px;
+  }
+  
+  .guess-pane__submit {
+    margin: 5px;
+  }
 }
 
 .timer {
   display: inline;
 }
 
+.timer__time {
+  display: inline-block;
+}
+
 .timer--timeout {
   color: red;
 }

+ 10 - 10
client/src/components/screens/game-panel.component/guess-pane.component.jsx

@@ -10,18 +10,18 @@ export default ({
   submitDisabled,
 }) => (
   <div className="guess-pane">
-    <div className="guess-pane__timer">
-      <RoundTimer seconds={roundSeconds} onTimeout={onTimeout} />
-    </div>
     <div className="guess-pane__map">
       <ClickMarkerMap onMarkerMoved={onSelectPoint} />
     </div>
-    <button
-      className="btn guess-pane__submit"
-      onClick={onSubmitGuess}
-      disabled={submitDisabled}
-    >
-      Submit Guess
-    </button>
+    <div className="guess-pane__timer-submit-wrapper">
+      <RoundTimer seconds={roundSeconds} onTimeout={onTimeout} />
+      <button
+        className="btn guess-pane__submit"
+        onClick={onSubmitGuess}
+        disabled={submitDisabled}
+      >
+        Submit Guess
+      </button>
+    </div>
   </div>
 );

+ 1 - 1
client/src/components/screens/game-panel.component/round-timer.component.jsx

@@ -15,6 +15,6 @@ export default ({ seconds, onTimeout }) => {
   });
 
   return remaining > 0 
-    ? <span className="timer">Time: {ms(remaining * 1000)}</span> 
+    ? <span className="timer">Time: <span className="timer__time">{ms(remaining * 1000)}</span></span> 
     : <span className="timer timer--timeout">Time's up!</span>
 }