From cffff1635dd930ec68fbfb7a2faa4f6286cb8904 Mon Sep 17 00:00:00 2001 From: Andy Allan Date: Wed, 4 Dec 2019 13:20:45 +0100 Subject: [PATCH 1/5] Rename bootstrap-tooltips file This avoids clashing with including upstream bootstrap --- .../stylesheets/{bootstrap.css => bootstrap-tooltips.css} | 0 app/assets/stylesheets/screen-ltr.css | 2 +- app/assets/stylesheets/screen-rtl.css | 2 +- 3 files changed, 2 insertions(+), 2 deletions(-) rename app/assets/stylesheets/{bootstrap.css => bootstrap-tooltips.css} (100%) diff --git a/app/assets/stylesheets/bootstrap.css b/app/assets/stylesheets/bootstrap-tooltips.css similarity index 100% rename from app/assets/stylesheets/bootstrap.css rename to app/assets/stylesheets/bootstrap-tooltips.css diff --git a/app/assets/stylesheets/screen-ltr.css b/app/assets/stylesheets/screen-ltr.css index d074f6881..ff93bc5a5 100644 --- a/app/assets/stylesheets/screen-ltr.css +++ b/app/assets/stylesheets/screen-ltr.css @@ -1,5 +1,5 @@ /* *= require ltr/common - *= require bootstrap + *= require bootstrap-tooltips *= require ltr/small */ diff --git a/app/assets/stylesheets/screen-rtl.css b/app/assets/stylesheets/screen-rtl.css index 18d3d7c5a..d5cd9f10d 100644 --- a/app/assets/stylesheets/screen-rtl.css +++ b/app/assets/stylesheets/screen-rtl.css @@ -1,5 +1,5 @@ /* *= require rtl/common - *= require bootstrap + *= require bootstrap-tooltips *= require rtl/small */ From 7f9dacbada0dcda8918d930945de327f504612a2 Mon Sep 17 00:00:00 2001 From: Andy Allan Date: Wed, 4 Dec 2019 14:21:14 +0100 Subject: [PATCH 2/5] Add bootstrap 4 --- Gemfile | 1 + Gemfile.lock | 6 ++++++ app/assets/stylesheets/common.scss | 3 ++- 3 files changed, 9 insertions(+), 1 deletion(-) diff --git a/Gemfile b/Gemfile index dd3a8170b..d77394911 100644 --- a/Gemfile +++ b/Gemfile @@ -42,6 +42,7 @@ gem "image_optim_rails" # Load rails plugins gem "active_record_union" gem "activerecord-import" +gem "bootstrap", "~> 4.3.1" gem "cancancan" gem "composite_primary_keys", "~> 12.0.0" gem "config" diff --git a/Gemfile.lock b/Gemfile.lock index 91c20bb73..5af33d9a1 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -104,6 +104,10 @@ GEM debug_inspector (>= 0.0.1) bootsnap (1.4.5) msgpack (~> 1.0) + bootstrap (4.3.1) + autoprefixer-rails (>= 9.1.0) + popper_js (>= 1.14.3, < 2) + sassc-rails (>= 2.0.0) browser (2.7.1) builder (3.2.3) bzip2-ffi (1.0.0) @@ -319,6 +323,7 @@ GEM capybara (>= 2.1, < 4) cliver (~> 0.3.1) websocket-driver (>= 0.2.0) + popper_js (1.14.5) progress (3.5.2) psych (3.1.0) public_suffix (4.0.1) @@ -465,6 +470,7 @@ DEPENDENCIES bigdecimal (~> 1.1.0) binding_of_caller bootsnap (>= 1.4.2) + bootstrap (~> 4.3.1) browser bzip2-ffi cancancan diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index 40c5eaa2a..0e42eb900 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -1,4 +1,5 @@ @import "parameters"; +@import "bootstrap"; /* Styles common to large and small screens */ @@ -1236,7 +1237,7 @@ tr.turn:hover { width: 12px; height: 12px; margin: 4px 0px; - border: 1px solid rgba(0, 0, 0, .1); + border: 1px solid rgba(0, 0, 0, .1); // add color via inline css on element: background-color: ; } } From 01faa2e287812dc4ff025172e3ae36595f2c968f Mon Sep 17 00:00:00 2001 From: Andy Allan Date: Wed, 4 Dec 2019 15:16:24 +0100 Subject: [PATCH 3/5] Custom bootstrap with all components disabled This lets us work through things slowly as we use more features --- app/assets/stylesheets/_bootstrap-custom.scss | 44 +++++++++++++++++++ app/assets/stylesheets/common.scss | 2 +- 2 files changed, 45 insertions(+), 1 deletion(-) create mode 100644 app/assets/stylesheets/_bootstrap-custom.scss diff --git a/app/assets/stylesheets/_bootstrap-custom.scss b/app/assets/stylesheets/_bootstrap-custom.scss new file mode 100644 index 000000000..399dfb77c --- /dev/null +++ b/app/assets/stylesheets/_bootstrap-custom.scss @@ -0,0 +1,44 @@ +/*! + * Bootstrap v4.3.1 (https://getbootstrap.com/) + * Copyright 2011-2019 The Bootstrap Authors + * Copyright 2011-2019 Twitter, Inc. + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) + */ + +// @import "bootstrap/functions"; +// @import "bootstrap/variables"; +// @import "bootstrap/mixins"; +// @import "bootstrap/root"; +// @import "bootstrap/reboot"; +// @import "bootstrap/type"; +// @import "bootstrap/images"; +// @import "bootstrap/code"; +// @import "bootstrap/grid"; +// @import "bootstrap/tables"; +// @import "bootstrap/forms"; +// @import "bootstrap/buttons"; +// @import "bootstrap/transitions"; +// @import "bootstrap/dropdown"; +// @import "bootstrap/button-group"; +// @import "bootstrap/input-group"; +// @import "bootstrap/custom-forms"; +// @import "bootstrap/nav"; +// @import "bootstrap/navbar"; +// @import "bootstrap/card"; +// @import "bootstrap/breadcrumb"; +// @import "bootstrap/pagination"; +// @import "bootstrap/badge"; +// @import "bootstrap/jumbotron"; +// @import "bootstrap/alert"; +// @import "bootstrap/progress"; +// @import "bootstrap/media"; +// @import "bootstrap/list-group"; +// @import "bootstrap/close"; +// @import "bootstrap/toasts"; +// @import "bootstrap/modal"; +// @import "bootstrap/tooltip"; +// @import "bootstrap/popover"; +// @import "bootstrap/carousel"; +// @import "bootstrap/spinners"; +// @import "bootstrap/utilities"; +// @import "bootstrap/print"; diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index 0e42eb900..2df150550 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -1,5 +1,5 @@ @import "parameters"; -@import "bootstrap"; +@import "bootstrap-custom"; /* Styles common to large and small screens */ From dc96834ebbcad04b3e9dc25af16816c8c72d3121 Mon Sep 17 00:00:00 2001 From: Andy Allan Date: Wed, 4 Dec 2019 15:26:13 +0100 Subject: [PATCH 4/5] Use bootstrap cards to spruce up the help page --- app/assets/stylesheets/_bootstrap-custom.scss | 10 +++--- app/views/site/help.html.erb | 34 +++++++++++++------ 2 files changed, 29 insertions(+), 15 deletions(-) diff --git a/app/assets/stylesheets/_bootstrap-custom.scss b/app/assets/stylesheets/_bootstrap-custom.scss index 399dfb77c..88056f5e7 100644 --- a/app/assets/stylesheets/_bootstrap-custom.scss +++ b/app/assets/stylesheets/_bootstrap-custom.scss @@ -5,9 +5,9 @@ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ -// @import "bootstrap/functions"; -// @import "bootstrap/variables"; -// @import "bootstrap/mixins"; +@import "bootstrap/functions"; +@import "bootstrap/variables"; +@import "bootstrap/mixins"; // @import "bootstrap/root"; // @import "bootstrap/reboot"; // @import "bootstrap/type"; @@ -24,7 +24,7 @@ // @import "bootstrap/custom-forms"; // @import "bootstrap/nav"; // @import "bootstrap/navbar"; -// @import "bootstrap/card"; +@import "bootstrap/card"; // @import "bootstrap/breadcrumb"; // @import "bootstrap/pagination"; // @import "bootstrap/badge"; @@ -40,5 +40,5 @@ // @import "bootstrap/popover"; // @import "bootstrap/carousel"; // @import "bootstrap/spinners"; -// @import "bootstrap/utilities"; +@import "bootstrap/utilities"; // @import "bootstrap/print"; diff --git a/app/views/site/help.html.erb b/app/views/site/help.html.erb index dcb8142bd..88cc3f58e 100644 --- a/app/views/site/help.html.erb +++ b/app/views/site/help.html.erb @@ -4,15 +4,29 @@

<%= t ".introduction" %>

-<% %w[welcome beginners_guide help mailing_lists forums irc switch2osm welcomemat wiki].each do |site| %> - <% unless site == 'welcome' && !current_user %> -
-

- - <%= t ".#{site}.title" %> - -

-

<%= t ".#{site}.description" %>

+<% sites = %w[beginners_guide help mailing_lists forums irc switch2osm welcomemat wiki] %> +<% sites.prepend("welcome") if current_user %> + +<% sites.in_groups_of(3, false) do |group| %> +
+ <% group.each do |site| %> +
+
+
+ + <%= t ".#{site}.title" %> + +
+

<%= t ".#{site}.description" %>

+
+
+ + + <%= t ".#{site}.url" %> + + +
+
+ <% end %>
- <% end %> <% end %> From ec5039d9ccc96effc0ce3cc6a8c6ca54be9a400f Mon Sep 17 00:00:00 2001 From: Andy Allan Date: Wed, 4 Dec 2019 15:45:58 +0100 Subject: [PATCH 5/5] Use bootstrap typography --- app/assets/stylesheets/_bootstrap-custom.scss | 6 ++--- app/assets/stylesheets/common.scss | 24 ++++++------------- 2 files changed, 10 insertions(+), 20 deletions(-) diff --git a/app/assets/stylesheets/_bootstrap-custom.scss b/app/assets/stylesheets/_bootstrap-custom.scss index 88056f5e7..0cbec1a27 100644 --- a/app/assets/stylesheets/_bootstrap-custom.scss +++ b/app/assets/stylesheets/_bootstrap-custom.scss @@ -8,9 +8,9 @@ @import "bootstrap/functions"; @import "bootstrap/variables"; @import "bootstrap/mixins"; -// @import "bootstrap/root"; -// @import "bootstrap/reboot"; -// @import "bootstrap/type"; +@import "bootstrap/root"; +@import "bootstrap/reboot"; +@import "bootstrap/type"; // @import "bootstrap/images"; // @import "bootstrap/code"; // @import "bootstrap/grid"; diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index 2df150550..6031526f4 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -109,23 +109,6 @@ body { height: 100%; } -h1, h2, h3 { - font-weight: 600; - line-height: 1.2; -} - -h4, h5 { - font-weight: 500; -} - -h1 { - font-size: 18px; -} - -h2, h3 { - font-size: 16px; -} - p > img { width: auto; max-width: 100%; @@ -281,12 +264,19 @@ header { } h1 { + font-size: 18px; + font-weight: 600; + line-height: 1.2; margin: 0; padding-top: 15px; a { color: #000; } + + a:hover { + color: #000; + } } }