Fix mobile CSS (#1531)

* Fix mobile CSS * Fix Android 5.1 bugs * Moving around * Restore * More fixes * Fix flex android * Fix flex * More flex fixes
electricitymaps · Jul 30, 2018 · 2e0a6c8 · 2e0a6c8
1 parent 7961baa
commit 2e0a6c8
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 69 deletions.
diff --git a/web/src/components/countrytable.js b/web/src/components/countrytable.js
@@ -15,8 +15,6 @@ var moment = require('moment');
 var flags = require('../helpers/flags');
 var translation = require('../helpers/translation');
 
-const allChildrenSelector = '.country-table-header,.country-show-emissions-wrap,.country-table-container,.country-history';
-
 // TODO:
 // All non-path (i.e. non-axis) elements should be drawn
 // with a % scale.
@@ -600,6 +598,7 @@ CountryTable.prototype.exchangeKeys = function(arg) {
 };
 
 CountryTable.prototype.showNoParserMessageIf = function(condition) {
+  const allChildrenSelector = 'p,.country-table-header-inner,.country-show-emissions-wrap,.country-panel-wrap,.country-history';
     d3.selectAll(allChildrenSelector).classed('all-screens-hidden', condition);
     d3.select('.zone-details-no-parser-message').classed('visible', condition);
 }

diff --git a/web/src/store.js b/web/src/store.js
@@ -2,7 +2,7 @@ const redux = require('redux');
 const reduxLogger = require('redux-logger').logger;
 const reducer = require('./reducers');
 
- const isProduction = window.location.href.indexOf('electricitymap') !== -1;
+const isProduction = window.location.href.indexOf('electricitymap') !== -1;
 
 const store = isProduction ?
   redux.createStore(

diff --git a/web/src/styles.css b/web/src/styles.css
@@ -111,15 +111,16 @@ line, path {
 }
 
 .country-panel{
-    overflow-y: auto;
+    overflow-y: scroll;
     padding-right: calc(2rem - 6px);
     padding-left: 2rem;
     margin: 0;
     -webkit-overflow-scrolling: touch;
+    flex: 1 1 0px;
 }
 .country-panel-wrap {
     position: relative;
-    padding-top: 160px;
+    padding-top: 200px;
 }
 .country-panel-wrap .bysource {
     font-size: smaller;
@@ -276,7 +277,6 @@ body {
     flex-direction: row;
     align-items: stretch;
     position: relative;
-    overflow-y: auto;
     flex: 1 1 auto;
 }
 
@@ -343,7 +343,6 @@ body {
 .left-panel {
     padding: 0;
     width: 24rem;
-    height: 100vh;
     background-color: #FAFAFA;
     position: fixed;
     box-shadow: 0 24px 15px rgba(0,0,0,0.2);
@@ -396,7 +395,7 @@ body {
 .left-panel-toolbar,
 .left-panel-zone-details-toolbar {
     position: relative;
-    padding: 1rem 1.25rem 0 1.25rem;
+    padding: 1rem 1.25rem 1rem 1.25rem;
 }
 .left-panel-toolbar .left-panel-toolbar-back,
 #left-panel-highscore-back {
@@ -427,19 +426,20 @@ body {
     width: 2.875rem;
 }
 
-.mobile-info-tab, .left-panel-zone-details {
+.left-panel-zone-details {
     display: flex;
     line-height: 1.2rem;
     flex-direction: column;
     flex: 1;
-    overflow: hidden;
+    overflow-y: hidden;
 }
 
 .mobile-info-tab {
     padding: 1rem;
     line-height: normal !important;
     overflow-y:scroll;
     -webkit-overflow-scrolling: touch;
+    flex: 1 1 0px;
 }
 
 .mobile-info-tab p{
@@ -450,11 +450,11 @@ body {
     margin: 0.6rem 0;
 }
 
-.left-panel-zone-details .detail-bottom-section{
-    padding: 0rem 1rem 1.25rem;
+.detail-bottom-section{
+    flex: 0 0 auto;
 }
 
-.left-panel-zone-details .detail-bottom-section .social-buttons{
+.detail-bottom-section .social-buttons{
     padding: 0 1rem;
 }
 
@@ -489,7 +489,7 @@ body {
 .country-table-header {
     position: absolute;
     width:100%;
-    padding: 1rem 0 0.5rem 0;
+    padding: 0 0 0.5rem 0;
     position: absolute;
     left: 0;
     background-color: #FAFAFA;
@@ -982,7 +982,7 @@ div.highscore-button:hover {
     padding: 1rem;
     display: flex;
     flex-direction: column;
-    flex: 1;
+    flex: 1 1 0px;
     overflow-y: hidden;
 }
 
@@ -1149,8 +1149,7 @@ div.highscore-button:hover {
     -moz-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.10);
     box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.10);
     z-index: 2;
-    border-top-right-radius: 8px;
-    border-top-left-radius: 8px;
+    flex: 0 0 auto;
 
 }
 #tab-content {
@@ -1171,8 +1170,7 @@ div.highscore-button:hover {
     padding-top: 8px;
     font-family: "Open Sans", sans-serif;
 }
-#tab.nomap #tab-content .list-item.map-button,
-{
+#tab.nomap #tab-content .list-item.map-button {
     display: none;
 }
 #tab #tab-content .list-item.active {
@@ -1438,7 +1436,7 @@ div.highscore-button:hover {
     background-color:#FAFAFA;
     height: 100%;
     width: 100%;
-    padding: 1rem 0; 
+    padding-top: 80px;
 }
 
 .all-screens-hidden {
@@ -1698,6 +1696,10 @@ div.highscore-button:hover {
     .mobile-info-tab {
         padding-top: 0.5rem;
     }
+
+    .left-panel {
+        height: 100vh; /* Should only be set on desktop */
+    }
 
 }
 
@@ -1714,6 +1716,7 @@ div.highscore-button:hover {
         -webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.10);
         -moz-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.10);
         box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.10);
+        z-index: 999; /* required for the box-shadow to overlay everything */
     }
     #mobile-header .header-content{
         display: flex;
@@ -1744,7 +1747,6 @@ div.highscore-button:hover {
     }
     .left-panel {
         position: relative;
-        height: auto;
     }
     .left-panel, #map-container {
         width: 100%;

diff --git a/web/views/pages/index.ejs b/web/views/pages/index.ejs
@@ -149,7 +149,7 @@ co2Sub = function(str) {
 
                         <div class="info-text small-screen-hidden">
                             <p>
-                                    <%- __('panel-initial-text.thisproject') %> <a href="https://github.com/tmrowco/electricitymap-contrib" target="_blank"><%- __('panel-initial-text.opensource') %></a> (<%- __('panel-initial-text.see') %> <a href="https://github.com/tmrowco/electricitymap-contrib#data-sources" target="_blank"><%- __('panel-initial-text.datasources') %></a>). <%- __('panel-initial-text.contribute', 'https://github.com/tmrowco/electricitymap#adding-a-new-country') %>.
+                                    <%- __('panel-initial-text.thisproject') %> <a href="https://github.com/tmrowco/electricitymap-contrib" target="_blank"><%- __('panel-initial-text.opensource') %></a> (<%- __('panel-initial-text.see') %> <a href="https://github.com/tmrowco/electricitymap-contrib#data-sources" target="_blank"><%- __('panel-initial-text.datasources') %></a>). <%- __('panel-initial-text.contribute', 'https://github.com/tmrowco/electricitymap-contrib#adding-a-new-country') %>.
                             </p>
 
                             <p>
@@ -186,7 +186,7 @@ co2Sub = function(str) {
                                         </a>
                                     </span>
                                 </p>
-                        </div>
+                            </div>
                         </div>
 
 
@@ -211,7 +211,7 @@ co2Sub = function(str) {
                                 </div>
                             </div>
                         <div class="info-text">
-                                <%- __('panel-initial-text.thisproject') %> <a href="https://github.com/tmrowco/electricitymap-contrib" target="_blank"><%- __('panel-initial-text.opensource') %></a> (<%- __('panel-initial-text.see') %> <a href="https://github.com/tmrowco/electricitymap-contrib#data-sources" target="_blank"><%- __('panel-initial-text.datasources') %></a>). <%- __('panel-initial-text.contribute', 'https://github.com/tmrowco/electricitymap#adding-a-new-country') %>.
+                            <%- __('panel-initial-text.thisproject') %> <a href="https://github.com/tmrowco/electricitymap-contrib" target="_blank"><%- __('panel-initial-text.opensource') %></a> (<%- __('panel-initial-text.see') %> <a href="https://github.com/tmrowco/electricitymap-contrib#data-sources" target="_blank"><%- __('panel-initial-text.datasources') %></a>). <%- __('panel-initial-text.contribute', 'https://github.com/tmrowco/electricitymap-contrib#adding-a-new-country') %>.
                             <p>
                                 <%- __('footer.foundbugs') %> <a href="https://github.com/tmrowco/electricitymap-contrib/issues/new" target="_blank"><%- __('footer.here') %></a>.<br />
                             </p>
@@ -224,60 +224,54 @@ co2Sub = function(str) {
                             </p>
                         </div>
                         <div class="social-buttons large-screen-hidden">
-                                <p>
-                                    <!-- Facebook share -->
-                                    <div class="fb-share-button"
-                                        data-href="https://www.electricitymap.org/"
-                                        data-layout="button_count">
-                                    </div>
-                                    <!-- Twitter share -->
-                                    <a class="twitter-share-button"
-                                        data-url="https://www.electricitymap.org"
-                                        data-via="electricitymap"
-                                        data-lang="<%= locale %>">
+                            <p>
+                                <!-- Facebook share -->
+                                <div class="fb-share-button"
+                                    data-href="https://www.electricitymap.org/"
+                                    data-layout="button_count">
+                                </div>
+                                <!-- Twitter share -->
+                                <a class="twitter-share-button"
+                                    data-url="https://www.electricitymap.org"
+                                    data-via="electricitymap"
+                                    data-lang="<%= locale %>">
+                                </a>
+                                <!-- Slack -->
+                                <span class="slack-button">
+                                    <a href="https://slack.tmrow.co" target="_blank" class="slack-btn">
+                                        <span class="slack-ico"></span>
+                                        <span class="slack-text">Slack</span>
                                     </a>
-                                    <!-- Slack -->
-                                    <span class="slack-button">
-                                        <a href="https://slack.tmrow.co" target="_blank" class="slack-btn">
-                                            <span class="slack-ico"></span>
-                                            <span class="slack-text">Slack</span>
-                                        </a>
-                                    </span>
-                                </p>
+                                </span>
+                            </p>
                         </div>
 
                         <div class="mobile-faq-header">
-                                <%- __('misc.faq') %>
-                        </div>
-                        <div class="mobile-faq">
+                            <%- __('misc.faq') %>
                         </div>
+                        <div class="mobile-faq"></div>
                     </div>
                     <div class="left-panel-zone-details">
 
-                        <div class="left-panel-zone-details-toolbar">
-                            <span class="left-panel-back-button">
-                                <i class="material-icons" aria-hidden="true">arrow_back</i>
-                            </span>
-                            <div class="country-name-time">
-                                <div class="country-name-time-table">
-                                    <div style="display: table-cell">
-                                        <img id="country-flag" class="flag"></img>
-                                    </div>
-
-                                    <div style="display: table-cell">
-                                        <div class="country-name"></div>
-                                        <div class="country-time">?</div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-
-
                         <div class="country-panel">
-                            <div class="zone-details-no-parser-message">
-                                    <%- __('country-panel.noParserInfo', 'https://github.com/tmrowco/electricitymap#adding-a-new-country') %>
-                            </div>
                             <div class="country-table-header">
+                                <div class="left-panel-zone-details-toolbar">
+                                    <span class="left-panel-back-button">
+                                        <i class="material-icons" aria-hidden="true">arrow_back</i>
+                                    </span>
+                                    <div class="country-name-time">
+                                        <div class="country-name-time-table">
+                                            <div style="display: table-cell">
+                                                <img id="country-flag" class="flag"></img>
+                                            </div>
+
+                                            <div style="display: table-cell">
+                                                <div class="country-name"></div>
+                                                <div class="country-time">?</div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
                                 <div class="country-table-header-inner">
                                     <div class="country-col country-emission-intensity-wrap">
                                         <div id="country-emission-rect" class="country-col-box emission-rect emission-rect-overview">
@@ -312,6 +306,10 @@ co2Sub = function(str) {
                                 <div class="country-table-container"></div>
                             </div>
 
+                            <div class="zone-details-no-parser-message">
+                                <%- __('country-panel.noParserInfo', 'https://github.com/tmrowco/electricitymap-contrib#adding-a-new-country') %>
+                            </div>
+
                             <hr />
                             <div class="country-history">
                                 <div class="loading overlay"></div>
@@ -346,7 +344,7 @@ co2Sub = function(str) {
                             <p>
 
                                 <%- __('country-panel.source')%>:
-                                <a href="https://github.com/tmrowco/electricitymap-contrib#real-time-electricity-data-sources" target="_blank"><span class="country-data-source"></span></a><small> (<%- __('country-panel.addeditsource', 'https://github.com/tmrowco/electricitymap/tree/master/parsers') %>)</small> <%- __('country-panel.helpfrom')%>
+                                <a href="https://github.com/tmrowco/electricitymap-contrib#real-time-electricity-data-sources" target="_blank"><span class="country-data-source"></span></a><small> (<%- __('country-panel.addeditsource', 'https://github.com/tmrowco/electricitymap-contrib/tree/master/parsers') %>)</small> <%- __('country-panel.helpfrom')%>
                                 <p class="contributors">
                                 </p>