From 4dceacdeba42039a61f9bc9f56293f5652620e5b Mon Sep 17 00:00:00 2001 From: Tom Hughes Date: Wed, 22 Jul 2015 19:02:31 +0100 Subject: [PATCH 1/1] Make switch to compact and small modes dynamic The point where we need to switch between normal mode, compact mode and small mode varies due to different string lengths in different languages, but that can't be expressed by a media query, so use some javascript to update as the window size changes. Fixes #1014 --- app/assets/javascripts/application.js | 31 ++ app/assets/stylesheets/common.scss | 27 +- app/assets/stylesheets/large-ltr.css | 5 - app/assets/stylesheets/large-rtl.css | 5 - app/assets/stylesheets/large.css | 1 - .../{small-ltr.css => screen-ltr.css} | 0 .../{small-rtl.css => screen-rtl.css} | 0 app/assets/stylesheets/small.scss | 284 +++++++++--------- app/views/layouts/_head.html.erb | 3 +- config/initializers/assets.rb | 4 +- 10 files changed, 191 insertions(+), 169 deletions(-) delete mode 100644 app/assets/stylesheets/large-ltr.css delete mode 100644 app/assets/stylesheets/large-rtl.css delete mode 100644 app/assets/stylesheets/large.css rename app/assets/stylesheets/{small-ltr.css => screen-ltr.css} (100%) rename app/assets/stylesheets/{small-rtl.css => screen-rtl.css} (100%) diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 354cfe66e..5064d115b 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -76,6 +76,37 @@ window.minimiseMap = function () { }; $(document).ready(function () { + var headerWidth = 0, + compactWidth = 0; + + $("header").children(":visible").each(function (i,e) { + headerWidth = headerWidth + $(e).outerWidth(); + }); + + $("body").addClass("compact"); + + $("header").children(":visible").each(function (i,e) { + compactWidth = compactWidth + $(e).outerWidth(); + }); + + $("body").removeClass("compact"); + + function updateHeader() { + var windowWidth = $(window).width(); + + if (windowWidth < compactWidth) { + $("body").removeClass("compact").addClass("small"); + } else if (windowWidth < headerWidth) { + $("body").addClass("compact").removeClass("small"); + } else { + $("body").removeClass("compact").removeClass("small"); + } + } + + updateHeader(); + + $(window).resize(updateHeader); + $("#menu-icon").on("click", function(e) { e.preventDefault(); $("header").toggleClass("closed"); diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index 61975d5f6..6706aa6ed 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -228,7 +228,7 @@ table { /* Rules for the header */ -#menu-icon { +#menu-icon { display: none !important; float: right; background: image-url("menu-icon.png") no-repeat; @@ -290,7 +290,7 @@ nav.primary { > li { border-right: $border; float: left; - &:last-child { + &:last-child { border-right: 0; } > a:hover { background: lighten($green, 30%); } @@ -371,12 +371,12 @@ nav.secondary { > li { border-right: $border; float: left; - &:last-child { + &:last-child { border-right: 0; > a { border-radius: 0 $border-radius $border-radius 0; - } + } } &:first-child > a { border-radius: $border-radius 0 0 $border-radius; } &:hover a { background: lighten($darkgrey, 30%); } @@ -444,7 +444,7 @@ nav.secondary { } } -@media only screen and (max-width:960px) { +body.compact { #compact-secondary-nav { display: inline-block; } @@ -616,7 +616,7 @@ nav.secondary { &.query-disabled { cursor: not-allowed; } - + .leaflet-marker-draggable { cursor: move; } @@ -677,7 +677,7 @@ nav.secondary { margin-bottom: 8px; position: relative; transition: border-color 0.08s ease-in; - + label { position: absolute; top: 0; @@ -813,10 +813,10 @@ nav.secondary { padding: $lineheight/2 $lineheight; // background: $offwhite; // border-bottom: 1px solid #ccc; - > .close { + > .close { float: right; margin-top: 2px; - cursor: pointer; + cursor: pointer; } } @@ -1296,7 +1296,7 @@ tr.turn:hover { .content-heading { background: $lightgrey; - + h1 { font-size: 22px; } } @@ -1892,7 +1892,7 @@ tr.turn:hover { padding-top: $lineheight; border-top: 1px solid $lightgrey; } - .horizontal-list .form-row { + .horizontal-list .form-row { float: left; padding-right: 10px; } @@ -2460,7 +2460,7 @@ input.richtext_title[type="text"] { .site-welcome, .site-fixthemap { .center { text-align: center; - .sprite { + .sprite { float: none; margin: auto; } @@ -2473,7 +2473,7 @@ input.richtext_title[type="text"] { float: left; } - .icon-list { + .icon-list { padding-bottom: 20px; div { margin-bottom: 10px; @@ -2681,4 +2681,3 @@ input.richtext_title[type="text"] { display: none; } } - diff --git a/app/assets/stylesheets/large-ltr.css b/app/assets/stylesheets/large-ltr.css deleted file mode 100644 index a02924a84..000000000 --- a/app/assets/stylesheets/large-ltr.css +++ /dev/null @@ -1,5 +0,0 @@ -/* - *= require ltr/common - *= require bootstrap - *= require large - */ diff --git a/app/assets/stylesheets/large-rtl.css b/app/assets/stylesheets/large-rtl.css deleted file mode 100644 index ae512fd42..000000000 --- a/app/assets/stylesheets/large-rtl.css +++ /dev/null @@ -1,5 +0,0 @@ -/* - *= require rtl/common - *= require bootstrap - *= require large - */ diff --git a/app/assets/stylesheets/large.css b/app/assets/stylesheets/large.css deleted file mode 100644 index 050272b77..000000000 --- a/app/assets/stylesheets/large.css +++ /dev/null @@ -1 +0,0 @@ -/* Styles specific to large screens */ diff --git a/app/assets/stylesheets/small-ltr.css b/app/assets/stylesheets/screen-ltr.css similarity index 100% rename from app/assets/stylesheets/small-ltr.css rename to app/assets/stylesheets/screen-ltr.css diff --git a/app/assets/stylesheets/small-rtl.css b/app/assets/stylesheets/screen-rtl.css similarity index 100% rename from app/assets/stylesheets/small-rtl.css rename to app/assets/stylesheets/screen-rtl.css diff --git a/app/assets/stylesheets/small.scss b/app/assets/stylesheets/small.scss index 950e1214d..1865572a3 100644 --- a/app/assets/stylesheets/small.scss +++ b/app/assets/stylesheets/small.scss @@ -2,191 +2,195 @@ /* Styles specific to a small screen, such as iPhone, Android, etc... */ -input[type="submit"], -input[type="text"] { - -webkit-appearance: none; -} - -.column-1 { - width: 100%; -} - -#menu-icon { - display: inline-block !important; -} +body.small { -nav.primary, -nav.secondary { - float: none !important; - position: relative; - display: block; - clear: both; -} - -header { - height: auto; - min-height: $headerHeight; - background: #fff; + input[type="submit"], + input[type="text"] { + -webkit-appearance: none; + } - h1 { - padding-bottom: 15px; + .column-1 { + width: 100%; } - &.closed nav { - display: none; + #menu-icon { + display: inline-block !important; } - .search_forms { + nav.primary, + nav.secondary { + float: none !important; + position: relative; display: block; + clear: both; } -} -#sidebar .search_forms, -#edit_tab, -#export_tab { - display: none; -} + header { + height: auto; + min-height: $headerHeight; + background: #fff; -nav.primary { - padding: 0; + h1 { + padding-bottom: 15px; + } - ul, li { - border: none; - border-radius: 0; - width: 100%; - } + &.closed nav { + display: none; + } - ul { - border-top: 1px solid #eee; - li { - border-bottom: 1px solid #eee; - border-right: none; - > a { - border-radius: 0; - width: 100%; - text-align: center; - font-size: 15px; - } + .search_forms { + display: block; } } -} -nav.secondary { - border-bottom: 1px solid #eee; + #sidebar .search_forms, + #edit_tab, + #export_tab { + display: none; + } - .user-menu { - display: block; - width: 100%; - margin-left: 0; - > li { - width: 49%; - > a { - width: 100%; - text-align: center; + nav.primary { + padding: 0; + + ul, li { + border: none; + border-radius: 0; + width: 100%; + } + + ul { + border-top: 1px solid #eee; + li { + border-bottom: 1px solid #eee; + border-right: none; + > a { + border-radius: 0; + width: 100%; + text-align: center; + font-size: 15px; + } } } } -} -#compact-secondary-nav { - display: none; -} + nav.secondary { + border-bottom: 1px solid #eee; + + .user-menu { + display: block; + width: 100%; + margin-left: 0; + > li { + width: 49%; + > a { + width: 100%; + text-align: center; + } + } + } + } -.compact-hide { - display: inline-block; -} + #compact-secondary-nav { + display: none; + } -.map-layout { - #sidebar, #map { - position: relative; - overflow-x: hidden; - width: 100%; - height: 50%; + .compact-hide { + display: inline-block; } - .overlay-sidebar { - #sidebar { - width: 300px; + .map-layout { + #sidebar, #map { + position: relative; + overflow-x: hidden; + width: 100%; + height: 50%; } - #map { - height: 100%; + .overlay-sidebar { + #sidebar { + width: 300px; + } + + #map { + height: 100%; + } + } + + #map-ui { + z-index: 9999; + width: 100%; + overflow-y: scroll; } } - #map-ui { - z-index: 9999; - width: 100%; - overflow-y: scroll; + #sidebar .welcome { + display: none !important; } -} -#sidebar .welcome { - display: none !important; -} + .leaflet-top.leaflet-right { + top: 10px !important; + z-index: 0; + } -.leaflet-top.leaflet-right { - top: 10px !important; - z-index: 0; -} + .content_map { + width: 100%; + border: none; + float: none; + height: 200px; + max-height: none; + min-height: auto; + } -.content_map { - width: 100%; - border: none; - float: none; - height: 200px; - max-height: none; - min-height: auto; -} + /* Rules for the login form */ -/* Rules for the login form */ + #login_login input#user_email { + width: 100%; + max-width: 18em; + } -#login_login input#user_email { - width: 100%; - max-width: 18em; -} + #login_login input#user_password { + width: 100%; + max-width: 18em; + } -#login_login input#user_password { - width: 100%; - max-width: 18em; -} + #login_login input#openid_url { + width: 100%; + max-width: 18em; + } -#login_login input#openid_url { - width: 100%; - max-width: 18em; -} + #login_openid_buttons td { + padding: 2px; + } -#login_openid_buttons td { - padding: 2px; -} + /* Rules for the user view */ -/* Rules for the user view */ + .user_map { + width: 100% !important; + height: 300px !important; + } -.user_map { - width: 100% !important; - height: 300px !important; -} + #userinformation .deemphasize { + position: relative; + right: auto; left: auto; + margin-top: 10px; + top: auto; + } -#userinformation .deemphasize { - position: relative; - right: auto; left: auto; - margin-top: 10px; - top: auto; -} + /* Rules for the sign-up page */ -/* Rules for the sign-up page */ + .user-new, + .user-create { + .col6 { + width: 100%; + } -.user-new, -.user-create { - .col6 { - width: 100%; + .aside { + display: none; + } } - .aside { - display: none; + .site-about #content .attr h1 { + font-size: 28px; } -} -.site-about #content .attr h1 { - font-size: 28px; } diff --git a/app/views/layouts/_head.html.erb b/app/views/layouts/_head.html.erb index 320737274..ee23358ce 100644 --- a/app/views/layouts/_head.html.erb +++ b/app/views/layouts/_head.html.erb @@ -3,8 +3,7 @@ <%= javascript_include_tag "application" %> - <%= stylesheet_link_tag "small-#{dir}", :media => "only screen and (max-width:721px)" %> - <%= stylesheet_link_tag "large-#{dir}", :media => "screen and (min-width: 722px)" %> + <%= stylesheet_link_tag "screen-#{dir}", :media => "screen" %> <%= stylesheet_link_tag "print-#{dir}", :media => "print" %> <%= stylesheet_link_tag "leaflet-all", :media => "screen, print" %>