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
This commit is contained in:
Tom Hughes
parent
e68b5db140
commit
4dceacdeba
10 changed files with 219 additions and 197 deletions
|
|
@ -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");
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
/*
|
||||
*= require ltr/common
|
||||
*= require bootstrap
|
||||
*= require large
|
||||
*/
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
/*
|
||||
*= require rtl/common
|
||||
*= require bootstrap
|
||||
*= require large
|
||||
*/
|
||||
|
|
@ -1 +0,0 @@
|
|||
/* Styles specific to large screens */
|
||||
|
|
@ -2,191 +2,195 @@
|
|||
|
||||
/* Styles specific to a small screen, such as iPhone, Android, etc... */
|
||||
|
||||
input[type="submit"],
|
||||
input[type="text"] {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
body.small {
|
||||
|
||||
.column-1 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#menu-icon {
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
nav.primary,
|
||||
nav.secondary {
|
||||
float: none !important;
|
||||
position: relative;
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
header {
|
||||
height: auto;
|
||||
min-height: $headerHeight;
|
||||
background: #fff;
|
||||
|
||||
h1 {
|
||||
padding-bottom: 15px;
|
||||
input[type="submit"],
|
||||
input[type="text"] {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
&.closed nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.search_forms {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
#sidebar .search_forms,
|
||||
#edit_tab,
|
||||
#export_tab {
|
||||
display: none;
|
||||
}
|
||||
|
||||
nav.primary {
|
||||
padding: 0;
|
||||
|
||||
ul, li {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
.column-1 {
|
||||
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;
|
||||
}
|
||||
}
|
||||
#menu-icon {
|
||||
display: inline-block !important;
|
||||
}
|
||||
}
|
||||
|
||||
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-secondary-nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.compact-hide {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.map-layout {
|
||||
#sidebar, #map {
|
||||
nav.primary,
|
||||
nav.secondary {
|
||||
float: none !important;
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.overlay-sidebar {
|
||||
#sidebar {
|
||||
width: 300px;
|
||||
header {
|
||||
height: auto;
|
||||
min-height: $headerHeight;
|
||||
background: #fff;
|
||||
|
||||
h1 {
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
#map {
|
||||
height: 100%;
|
||||
&.closed nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.search_forms {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
#map-ui {
|
||||
z-index: 9999;
|
||||
width: 100%;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
}
|
||||
|
||||
#sidebar .welcome {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/* Rules for the login form */
|
||||
|
||||
#login_login input#user_email {
|
||||
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_openid_buttons td {
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
/* Rules for the user view */
|
||||
|
||||
.user_map {
|
||||
width: 100% !important;
|
||||
height: 300px !important;
|
||||
}
|
||||
|
||||
#userinformation .deemphasize {
|
||||
position: relative;
|
||||
right: auto; left: auto;
|
||||
margin-top: 10px;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
/* Rules for the sign-up page */
|
||||
|
||||
.user-new,
|
||||
.user-create {
|
||||
.col6 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.aside {
|
||||
#sidebar .search_forms,
|
||||
#edit_tab,
|
||||
#export_tab {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.site-about #content .attr h1 {
|
||||
font-size: 28px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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-secondary-nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.compact-hide {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.map-layout {
|
||||
#sidebar, #map {
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.overlay-sidebar {
|
||||
#sidebar {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
#map {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#map-ui {
|
||||
z-index: 9999;
|
||||
width: 100%;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
}
|
||||
|
||||
#sidebar .welcome {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/* Rules for the login form */
|
||||
|
||||
#login_login input#user_email {
|
||||
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_openid_buttons td {
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
/* Rules for the user view */
|
||||
|
||||
.user_map {
|
||||
width: 100% !important;
|
||||
height: 300px !important;
|
||||
}
|
||||
|
||||
#userinformation .deemphasize {
|
||||
position: relative;
|
||||
right: auto; left: auto;
|
||||
margin-top: 10px;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
/* Rules for the sign-up page */
|
||||
|
||||
.user-new,
|
||||
.user-create {
|
||||
.col6 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.aside {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.site-about #content .attr h1 {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,8 +3,7 @@
|
|||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"/>
|
||||
<!--[if lt IE 9]><%= javascript_include_tag "html5shiv" %><![endif]-->
|
||||
<%= 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" %>
|
||||
<!--[if IE]>
|
||||
|
|
|
|||
|
|
@ -13,8 +13,8 @@ Rails.application.config.assets.manifest = Rails.root.join("tmp/manifest.json")
|
|||
# application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
|
||||
Rails.application.config.assets.precompile += %w( index.js browse.js welcome.js fixthemap.js )
|
||||
Rails.application.config.assets.precompile += %w( user.js diary_entry.js )
|
||||
Rails.application.config.assets.precompile += %w( large-ltr.css small-ltr.css print-ltr.css )
|
||||
Rails.application.config.assets.precompile += %w( large-rtl.css small-rtl.css print-rtl.css )
|
||||
Rails.application.config.assets.precompile += %w( screen-ltr.css print-ltr.css )
|
||||
Rails.application.config.assets.precompile += %w( screen-rtl.css print-rtl.css )
|
||||
Rails.application.config.assets.precompile += %w( leaflet-all.css leaflet.ie.css )
|
||||
Rails.application.config.assets.precompile += %w( id.js id.css )
|
||||
Rails.application.config.assets.precompile += %w( embed.js embed.css )
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue