Fix mobile styles nerdakademie#27:

no sticky header and footer on small screens; fix card-width on small screens; fix form-width on small screen; Add link for Google Font Roboto
philipszalla · Mar 1, 2017 · e042a2b · e042a2b
1 parent 0c969ec
commit e042a2b
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 52 deletions.
diff --git a/resources/server/view/index.pug b/resources/server/view/index.pug
@@ -2,6 +2,7 @@ html
   head
     title= title
     meta(name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=no')
+    link(rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto')
     link(rel='stylesheet' href=rootPath + '/css/main.css')
   body
     div(id="app")

diff --git a/src/client/component/pages/App.jsx b/src/client/component/pages/App.jsx
@@ -40,7 +40,9 @@ export default React.createClass({
                     <NavLink to='/edit'><FlatButton label='Bearbeiten' /></NavLink>
                     </div>}
                 />
-                {this.props.children || <Home />}
+                <div className='appContent'>
+                  {this.props.children || <Home />}
+                </div>
                 <Footer>(c) 2017 <a className='nerdakademie' href='https://nerdakademie.xyz'>Nerdakademie</a> | <a className='nerdakademie' href='https://github.com/nerdakademie/stupa-wahltool'>v1.1.2</a></Footer>
             </div>
         );

diff --git a/src/client/component/pages/ContestantList.jsx b/src/client/component/pages/ContestantList.jsx
@@ -38,17 +38,23 @@ class ContestantList extends Component {
       this.setState({
         contestants
       });
+
+      this.updateContainerSize();
     });
   }
 
+  updateContainerSize() {
+    if (ReactDOM.findDOMNode(this.AutoResponsiveContainer) !== null) {
+      this.setState({
+        containerWidth: ReactDOM.findDOMNode(this.AutoResponsiveContainer).clientWidth
+      });
+    }
+  }
+
   componentDidMount() {
     this.loadContestants();
     window.addEventListener('resize', () => {
-      if (ReactDOM.findDOMNode(this.AutoResponsiveContainer) !== null) {
-        this.setState({
-          containerWidth: ReactDOM.findDOMNode(this.AutoResponsiveContainer).clientWidth
-        });
-      }
+      this.updateContainerSize();
     }, false);
   }
 

diff --git a/src/client/style/_reset.scss b/src/client/style/_reset.scss
@@ -3,6 +3,10 @@ html {
   font-family: 'Roboto', sans-serif;
 }
 
+body {
+  margin: 0;
+  padding: 0;
+}
 
 hgroup {
   text-align:center;
@@ -15,15 +19,6 @@ h1 { color: #636363; }
 
 h3 { color: #4a89dc; }
 
-form {
-  width: 380px;
-  margin: auto auto;
-  padding: 2em 2em 2em 2em;
-  background: #fafafa;
-  border: 1px solid #ebebeb;
-  box-shadow: rgba(0,0,0,0.14902) 0px 1px 1px 0px,rgba(0,0,0,0.09804) 0px 1px 2px 0px;
-}
-
 footer { text-align: center; }
 
 footer p {

diff --git a/src/client/style/main.scss b/src/client/style/main.scss
@@ -1,62 +1,57 @@
 @import 'reset';
 
 /* Topbar */
-@media screen and (max-width: 750px) {
-  .topbar {
-    display: block !important;
-  }
-
-  #app {
-    padding-top: 115px !important;
-  }
-
-}
-
-@media screen and (max-width: 530px) {
-  #app {
-    padding-top: 151px !important;
-  }
-}
-
-@media screen and (max-width: 290px) {
-  #app {
-    padding-top: 186px !important;
-  }
-}
-
-@media screen and (max-width: 281px) {
-  #app {
-    padding-top: 222px !important;
-  }
-}
-
 .topbar div div a.active button div {
   color: #999999;
 }
 
 .topbar div div a button div {
   color: #ffffff;
 }
-
 /* END Topbar */
 
 .contestantList {
   overflow-wrap: break-word;
 }
 
-#app {
-  padding-top: 70px;
-  padding-bottom: 70px;
-  overflow-y: auto;
-}
-
 /* Scrollbar */
 body {
   overflow-y: scroll;
   background-color: #ecf0f1;
 }
 /* END Scrollbar */
 
+/* Content */
+#app {
+  padding-top: 78px;
+  padding-bottom: 78px;
+  overflow-y: auto;
+}
+
+.appContent {
+  margin: 0 8px;
+}
+/* END Content */
+
+/* Forms */
+.appContent form {
+  width: 380px;
+  margin: auto auto;
+  padding: 2em;
+  background: #fafafa;
+  border: 1px solid #ebebeb;
+  box-shadow: rgba(0,0,0,0.14902) 0px 1px 1px 0px,rgba(0,0,0,0.09804) 0px 1px 2px 0px;
+}
+
+/* max-width = form-width + appContent-margin */
+@media screen and (max-width: 390px) {
+  .appContent form {
+    width: 100%;
+    box-sizing: border-box;
+  }
+}
+/* END Forms */
+
 /* Footer */
 .footer {
   background-color: #011F53;
@@ -70,6 +65,39 @@ body {
   color: #ffffff;
   width: 100%;
   z-index: 300;
+  box-sizing: border-box;
 }
-
 /* END Footer */
+
+@media screen and (max-width: 750px) {
+  /* Non-sticky */
+  #app {
+    padding: 0 !important;
+  }
+
+  .topbar {
+    display: block !important;
+    position: relative !important;
+  }
+
+  .footer {
+    position: relative !important;
+  }
+
+  .appContent {
+    margin-top: 14px;
+    margin-bottom: 14px;
+  }
+  /* END Non-sticky */
+}
+
+/* Fix cards on thin devices (max-width = card-width + appContent-margin) */
+@media screen and (max-width: 370px) {
+  .appContent .contestantList .rc-autoresponsive-container > div,
+  .appContent .contestantList .rc-autoresponsive-container > div > div {
+    width: 100% !important;
+  }
+}
+/* END Fix cards on thin devices */
+
+/* Fix forms on thin devices */