Fix mobile CSS #1531
Fix mobile CSS #1531
Conversation
| @@ -1173,8 +1169,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 { | |||
There was a problem hiding this comment.
note: there was an extra comma that needed removal -_-
| data-url="https://www.electricitymap.org" | ||
| data-via="electricitymap" | ||
| data-lang="<%= locale %>"> | ||
| <p> |
| </div> | ||
| <div class="mobile-faq"></div> |
There was a problem hiding this comment.
moved closing brace to upper line
| @@ -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; | |||
web/src/styles.css
Outdated
| @@ -430,10 +429,7 @@ body { | |||
| } | |||
|
|
|||
| .mobile-info-tab, .left-panel-zone-details { | |||
| display: flex; | |||
There was a problem hiding this comment.
required for mobile "about" tab to show correctly. Not sure why there was a column flex there.
| @@ -1746,7 +1741,6 @@ div.highscore-button:hover { | |||
| } | |||
| .left-panel { | |||
| position: relative; | |||
| height: auto; | |||
web/views/pages/index.ejs
Outdated
| @@ -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#adding-a-new-country') %>. | |||
| </div> | ||
| <div class="left-panel-zone-details"> | ||
|
|
||
| <div class="left-panel-zone-details-toolbar"> |
There was a problem hiding this comment.
moved the toolbar (country name and flag) into the header (which is always visible).
Not sure why this wasn't done before.
There was a problem hiding this comment.
I think I remember this being a bit of a compromise to not have too much vertical space being taken up by fixed content, reducing the amount of info visible on smaller screens.
| @@ -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'; | |||
There was a problem hiding this comment.
moved around and changed the list of elements that are hidden when a country has no parser associated.
| @@ -312,6 +306,10 @@ co2Sub = function(str) { | |||
| <div class="country-table-container"></div> | |||
| </div> | |||
|
|
|||
| <div class="zone-details-no-parser-message"> | |||
There was a problem hiding this comment.
Moved the "no parser message" under the header
| padding-right: calc(2rem - 6px); | ||
| padding-left: 2rem; | ||
| margin: 0; | ||
| -webkit-overflow-scrolling: touch; | ||
| } | ||
| .country-panel-wrap { | ||
| position: relative; | ||
| padding-top: 160px; | ||
| padding-top: 200px; |
There was a problem hiding this comment.
now that the header is included, more padding must be applied to left panel content
| @@ -111,15 +111,15 @@ line, path { | |||
| } | |||
|
|
|||
| .country-panel{ | |||
| overflow-y: auto; | |||
| overflow-y: scroll; | |||
There was a problem hiding this comment.
scroll the country panel instead of the container
There was a problem hiding this comment.
Did you test this on desktop? I think there was a specific reason for scrolling the container versus the panel. I think it would be nice to redo the html structure for the panel if we have time, now it's a bit of a patchwork and the lack of consistency is making it difficult to bugfix.
There was a problem hiding this comment.
yes I tested it. I actually think it's better structured now. But let's review together
web/src/styles.css
Outdated
| .left-panel-zone-details .detail-bottom-section{ | ||
| padding: 0rem 1rem 1.25rem; | ||
| .detail-bottom-section{ | ||
| flex: 1 0 auto; |
web/src/styles.css
Outdated
| @@ -1151,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: 1 0 auto; | |||
|
Now additionally tested in Safari and Firefox desktop + responsive mode |
Tested on:
On mobile devices, when WebGL isn't available, the "map" tab shouldn't be available.
There was a CSS bug that prevented that.
Also fixed some layout errors when clicking on an area without a parser.
Also addressed (hopefully) a layout bug on Android 5.1.