From 988446c307db7bb0ba4d9a7f7d73c88bdcb124c0 Mon Sep 17 00:00:00 2001 From: Andy Allan Date: Wed, 15 Jul 2020 10:35:19 +0200 Subject: [PATCH 1/8] Remove dead CSS code - nothing has the user_map class --- app/assets/stylesheets/common.scss | 7 ------- app/assets/stylesheets/small.scss | 7 ------- 2 files changed, 14 deletions(-) diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index e3b79c5913..6e112691c6 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -1511,13 +1511,6 @@ tr.turn:hover { /* Rules for the account settings page */ -#accountForm .user_map { - position: relative; - width: 500px; - height: 400px; - border: 1px solid $grey; -} - #accountForm .user_image { margin-bottom: 0; } diff --git a/app/assets/stylesheets/small.scss b/app/assets/stylesheets/small.scss index 701d104658..a67f7a536b 100644 --- a/app/assets/stylesheets/small.scss +++ b/app/assets/stylesheets/small.scss @@ -121,13 +121,6 @@ body.small { padding: 2px; } - /* Rules for the user view */ - - .user_map { - width: 100% !important; - height: 300px !important; - } - &.site-about #content .attr h1 { font-size: 28px; } From 3f6fd290d759a2352105dce6b80c176177974803 Mon Sep 17 00:00:00 2001 From: Andy Allan Date: Wed, 15 Jul 2020 10:47:58 +0200 Subject: [PATCH 2/8] Rework the about header size change to be based on the screen width, not the menu state Also reworks to be mobile-first --- app/assets/stylesheets/common.scss | 8 +++++++- app/assets/stylesheets/small.scss | 5 ----- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index 6e112691c6..9ffca27e38 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -2211,12 +2211,18 @@ input.richtext_title[type="text"] { display: block; color: white; font-weight: 300; - font-size: 34px; + font-size: 28px; span { color: $vibrant-green; } } + @include media-breakpoint-up(sm) { + h1 { + font-size: 34px; + } + } + .user-image { position: absolute; top: 0px; diff --git a/app/assets/stylesheets/small.scss b/app/assets/stylesheets/small.scss index a67f7a536b..aa2dc323c9 100644 --- a/app/assets/stylesheets/small.scss +++ b/app/assets/stylesheets/small.scss @@ -120,11 +120,6 @@ body.small { #login_openid_buttons td { padding: 2px; } - - &.site-about #content .attr h1 { - font-size: 28px; - } - } @media (max-width: 767.98px) { From 46bd1a9a2ed7f72fbc5cefa5174aaf40408b5349 Mon Sep 17 00:00:00 2001 From: Andy Allan Date: Wed, 15 Jul 2020 11:18:56 +0200 Subject: [PATCH 3/8] Remove webkit-appearance: none This is the default anyway, and we don't need this for anything specific. --- app/assets/stylesheets/common.scss | 1 - app/assets/stylesheets/small.scss | 6 ------ 2 files changed, 7 deletions(-) diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index 9ffca27e38..5bbaf487c6 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -80,7 +80,6 @@ small, aside { a { color: #24d; text-decoration: none; - -webkit-appearance: none; outline: 0; &:hover { text-decoration: underline; diff --git a/app/assets/stylesheets/small.scss b/app/assets/stylesheets/small.scss index aa2dc323c9..ddd812dc10 100644 --- a/app/assets/stylesheets/small.scss +++ b/app/assets/stylesheets/small.scss @@ -3,12 +3,6 @@ /* Styles specific to a small screen, such as iPhone, Android, etc... */ body.small { - - input[type="submit"], - input[type="text"] { - -webkit-appearance: none; - } - #menu-icon { display: inline-block !important; } From 58050240d6410cf09acfde1f9af205a6d8b8e370 Mon Sep 17 00:00:00 2001 From: Andy Allan Date: Wed, 15 Jul 2020 11:21:08 +0200 Subject: [PATCH 4/8] Move the login form rules to be based on screen size Ideally this would be refactored to be mobile-first, but is likely to be replaced by more general bootstrap form refactoring anyway. --- app/assets/stylesheets/small.scss | 44 ++++++++++++++++--------------- 1 file changed, 23 insertions(+), 21 deletions(-) diff --git a/app/assets/stylesheets/small.scss b/app/assets/stylesheets/small.scss index ddd812dc10..d9e203d954 100644 --- a/app/assets/stylesheets/small.scss +++ b/app/assets/stylesheets/small.scss @@ -93,27 +93,6 @@ body.small { .leaflet-top.leaflet-right { top: 10px !important; } - - /* 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; - } } @media (max-width: 767.98px) { @@ -145,3 +124,26 @@ body.small { } } } + +@media (max-width: 575.98px) { + /* 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; + } +} From e157b37ce5f146d7fbf1dad68c391de83cad8828 Mon Sep 17 00:00:00 2001 From: Andy Allan Date: Wed, 15 Jul 2020 11:38:07 +0200 Subject: [PATCH 5/8] Rename nav-related body classes This makes it clearer that the classes are only for navigation menu matters. Other things should be done on media queries, or ideally, using bootstrap components like grids. This has a side effect of removing the smaller font size from the body when the navigation menu is in the small-nav state. --- app/assets/javascripts/application.js | 10 +++++----- app/assets/stylesheets/common.scss | 2 +- app/assets/stylesheets/small.scss | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index e455f297be..36b560fde6 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -81,11 +81,11 @@ $(document).ready(function () { var windowWidth = $(window).width(); if (windowWidth < compactWidth) { - $("body").removeClass("compact").addClass("small"); + $("body").removeClass("compact-nav").addClass("small-nav"); } else if (windowWidth < headerWidth) { - $("body").addClass("compact").removeClass("small"); + $("body").addClass("compact-nav").removeClass("small-nav"); } else { - $("body").removeClass("compact").removeClass("small"); + $("body").removeClass("compact-nav").removeClass("small-nav"); } } @@ -100,13 +100,13 @@ $(document).ready(function () { headerWidth = headerWidth + $(e).outerWidth(); }); - $("body").addClass("compact"); + $("body").addClass("compact-nav"); $("header").children(":visible").each(function (i, e) { compactWidth = compactWidth + $(e).outerWidth(); }); - $("body").removeClass("compact"); + $("body").removeClass("compact-nav"); updateHeader(); diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index 5bbaf487c6..0cdc2c4bb1 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -270,7 +270,7 @@ nav.primary, nav.secondary { display: none; } -body.compact { +body.compact-nav { #compact-secondary-nav { display: inline-block; } diff --git a/app/assets/stylesheets/small.scss b/app/assets/stylesheets/small.scss index d9e203d954..808b8caa6f 100644 --- a/app/assets/stylesheets/small.scss +++ b/app/assets/stylesheets/small.scss @@ -2,7 +2,7 @@ /* Styles specific to a small screen, such as iPhone, Android, etc... */ -body.small { +body.small-nav { #menu-icon { display: inline-block !important; } From d89a30421cd67b2d9ed63b38aab9084930a26a70 Mon Sep 17 00:00:00 2001 From: Andy Allan Date: Wed, 15 Jul 2020 12:12:35 +0200 Subject: [PATCH 6/8] Use bootstrap backgrounds and text utilities for read issue reports --- app/assets/stylesheets/common.scss | 5 ----- app/views/issues/show.html.erb | 4 ++-- 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index 0cdc2c4bb1..0971b8b220 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -2297,8 +2297,3 @@ input.richtext_title[type="text"] { display: none; } } - -.read-reports { - background: $lightgrey; - opacity: 0.7; -} diff --git a/app/views/issues/show.html.erb b/app/views/issues/show.html.erb index 6472a49672..65bd9ced3b 100644 --- a/app/views/issues/show.html.erb +++ b/app/views/issues/show.html.erb @@ -24,14 +24,14 @@

<%= t ".reports_of_this_issue" %>

<% if @read_reports.present? %> -
+

<%= t ".read_reports" %>

<%= render "reports", :reports => @read_reports %>
<% end %> <% if @unread_reports.any? %> -
+

<%= t ".new_reports" %>

<%= render "reports", :reports => @unread_reports %>
From b4e7f5eaca568ec269edc0ddf63fa0d377fd3765 Mon Sep 17 00:00:00 2001 From: Andy Allan Date: Wed, 15 Jul 2020 12:27:15 +0200 Subject: [PATCH 7/8] Remove unused css --- app/assets/stylesheets/common.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index 0971b8b220..bfe847446c 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -35,8 +35,6 @@ small, aside { margin-right: $lineheight/4; } -.red { color: $red; } - .piwik { border: 0; } [dir=rtl] { /* no-r2 */ text-align: right; } From a9f751ec45788a6fb0cdd2e9fcfe1b7c04346866 Mon Sep 17 00:00:00 2001 From: Andy Allan Date: Wed, 15 Jul 2020 13:58:56 +0200 Subject: [PATCH 8/8] Remove unnecessary css Images have no border in modern browsers, and bootstrap's reset also sets this. --- app/assets/stylesheets/common.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index bfe847446c..7c4053c4f4 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -35,8 +35,6 @@ small, aside { margin-right: $lineheight/4; } -.piwik { border: 0; } - [dir=rtl] { /* no-r2 */ text-align: right; } [dir=ltr] { /* no-r2 */ text-align: left; }