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");
|
||||
|
|
|
|||
|
|
@ -444,7 +444,7 @@ nav.secondary {
|
|||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width:960px) {
|
||||
body.compact {
|
||||
#compact-secondary-nav {
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
@ -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