From e5c33c119a9ddd4de149cd8913ed970601103a2b Mon Sep 17 00:00:00 2001 From: Andy Allan Date: Wed, 29 Jan 2020 16:54:29 +0100 Subject: [PATCH] Switch to bootstrap for dropdowns and tooltips Due to the javascript involved, it was more straightforward to combine the two together. Moving to bootstrap v4 for dropdowns required some redesign of the dropdown menu html, and the opportunity was taken to move to using standard buttons for those menus. --- app/assets/javascripts/application.js | 4 +- app/assets/stylesheets/_bootstrap-custom.scss | 12 +- app/assets/stylesheets/bootstrap-tooltips.css | 83 --- app/assets/stylesheets/common.scss | 272 +--------- app/assets/stylesheets/screen-ltr.css | 1 - app/assets/stylesheets/screen-rtl.css | 1 - app/assets/stylesheets/small.scss | 16 +- app/views/layouts/_header.html.erb | 109 ++-- app/views/layouts/map.html.erb | 2 +- vendor/assets/bootstrap/bootstrap.dropdown.js | 161 ------ vendor/assets/bootstrap/bootstrap.tooltip.js | 472 ------------------ 11 files changed, 87 insertions(+), 1046 deletions(-) delete mode 100644 app/assets/stylesheets/bootstrap-tooltips.css delete mode 100644 vendor/assets/bootstrap/bootstrap.dropdown.js delete mode 100644 vendor/assets/bootstrap/bootstrap.tooltip.js diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index fbc76e4a8..e99a8f351 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -3,8 +3,8 @@ //= require jquery.timers //= require jquery.cookie //= require jquery.throttle-debounce -//= require bootstrap.tooltip -//= require bootstrap.dropdown +//= require popper +//= require bootstrap-sprockets //= require osm //= require leaflet //= require leaflet.osm diff --git a/app/assets/stylesheets/_bootstrap-custom.scss b/app/assets/stylesheets/_bootstrap-custom.scss index e502f7db6..d3072d2b5 100644 --- a/app/assets/stylesheets/_bootstrap-custom.scss +++ b/app/assets/stylesheets/_bootstrap-custom.scss @@ -16,14 +16,14 @@ @import "bootstrap/grid"; // @import "bootstrap/tables"; // @import "bootstrap/forms"; -// @import "bootstrap/buttons"; +@import "bootstrap/buttons"; // @import "bootstrap/transitions"; -// @import "bootstrap/dropdown"; -// @import "bootstrap/button-group"; +@import "bootstrap/dropdown"; +@import "bootstrap/button-group"; // @import "bootstrap/input-group"; // @import "bootstrap/custom-forms"; -// @import "bootstrap/nav"; -// @import "bootstrap/navbar"; +@import "bootstrap/nav"; +@import "bootstrap/navbar"; @import "bootstrap/card"; // @import "bootstrap/breadcrumb"; // @import "bootstrap/pagination"; @@ -36,7 +36,7 @@ // @import "bootstrap/close"; // @import "bootstrap/toasts"; // @import "bootstrap/modal"; -// @import "bootstrap/tooltip"; +@import "bootstrap/tooltip"; // @import "bootstrap/popover"; // @import "bootstrap/carousel"; // @import "bootstrap/spinners"; diff --git a/app/assets/stylesheets/bootstrap-tooltips.css b/app/assets/stylesheets/bootstrap-tooltips.css deleted file mode 100644 index dfe850b80..000000000 --- a/app/assets/stylesheets/bootstrap-tooltips.css +++ /dev/null @@ -1,83 +0,0 @@ -/* Rules for bootstrap tooltips */ - -.tooltip { - position: absolute; - display: none; - color: #333; - text-align: left; - font-size: 12px; - max-width: 250px; -} - -.tooltip.in { - opacity: 0.8; - z-index: 1030; - height: auto; - display: block; -} - -.tooltip.top { - margin-top: -10px; - text-align: center; -} - -.tooltip.right { - margin-left: 10px; -} - -.tooltip.bottom { - margin-top: 10px; - text-align: center; -} - -.tooltip.left { - margin-left: -10px; - text-align: right; -} - -.tooltip-inner { - display: inline-block; - padding: 10px; - font-weight: normal; - background-color: white; -} - -.tooltip-arrow { - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; -} - -.tooltip.top .tooltip-arrow { - bottom: -5px; - left: 50%; - margin-left: -5px; - border-top-color: white; - border-width: 5px 5px 0; -} - -.tooltip.right .tooltip-arrow { - top: 50%; - left: -5px; - margin-top: -5px; - border-right-color: white; - border-width: 5px 5px 5px 0; -} - -.tooltip.left .tooltip-arrow { - top: 50%; - right: -5px; - margin-top: -5px; - border-left-color: white; - border-width: 5px 0 5px 5px; -} - -.tooltip.bottom .tooltip-arrow { - top: -5px; - left: 50%; - margin-left: -5px; - border-bottom-color: white; - border-width: 0 5px 5px; -} diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index 5635e3f9d..88b3e29f1 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -140,7 +140,7 @@ header { z-index: 1001; font-size: 14px; - h1, nav, nav > ul, nav > ul > li, .dropdown { + h1, nav, nav > ul, nav > ul > li { display: inline-block; } @@ -179,68 +179,16 @@ header { color: #000; } } -} - -nav.primary { - > ul { - padding: 0; - $border: 1px solid $green; - - border: $border; - border-radius: $border-radius; - - > li { - border-right: $border; - float: left; - &:last-child { - border-right: 0; - } - > a:hover { background: lighten($green, 30%); } - &.current > a:hover { background: $green; } - &.disabled > a:hover { background: lighten($green, 38%); } - &.dropdown { - > a.tab { border-right: 1px solid lighten($green, 30%); } - &.current > a.tab { border-right: 1px solid lighten($green, 10%); } - } - } - } - - a.tab, - .dropdown-toggle { - display: inline-block; - font-weight: 500; - color: $green; - padding: 5px 15px; - } - - .dropdown-toggle { - padding: 5px 6px; - } - - .caret { - border-top-color: $green; - margin-top: 10px; - } - - .disabled a { - color: $grey; - cursor: default; - .caret { - border-top-color: $grey; - } + .btn { + font-size: 14px; } +} - > ul li.current { - background-color: $green; - .tab { - color: #fff; - } - - .caret { - border-top-color: #fff; - } +nav.primary { + .btn-outline-primary { + @include button-outline-variant($green, $white); } } @@ -248,74 +196,32 @@ nav.secondary { position: absolute; right: 0; - > ul { - vertical-align: middle; - margin: 0; - padding: 0; - - a, .dropdown-toggle { - display: inline-block; - text-decoration: none; - color: $darkgrey; - padding: 5px; - - &:hover { color: darken($darkgrey, 25%); } - } + .nav-link { + padding: 0.2rem; + color: $darkgrey; } > ul li.current a { color: darken($darkgrey, 25%); } - .user-menu { - $border: 1px solid $grey; - border: $border; - border-radius: $border-radius; - margin-left: 10px; - padding: 0; - - > li { - border-right: $border; - float: left; - &: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%); } - } - - a { - padding: 5px 15px; - - } - - &.logged-in > a { - padding: 0; - > .user-button { - line-height: 1.8; - padding: 5px 10px 3px 6px; - display: inline-block; - color: $darkgrey; - } - &:hover > .user-button { color: darken($darkgrey, 5%); } + .login-menu { + .btn-outline-secondary { + @include button-outline-variant($darkgrey); } } - .caret { - border-top-color: $grey; - margin-top: 9px; + .user-menu { + .btn-outline-secondary { + @include button-outline-variant($darkgrey, $darkgrey, white, $darkgrey); + // @include button-outline-variant($grey, $grey, white, $grey); + border-color: $grey; + } } img.user_thumbnail_tiny { border: 0; - vertical-align: top; - margin-top: 0px; - margin: 4px 0 0 4px; - border-radius: 2px; + border-radius: 3px; } #inboxanchor { @@ -329,25 +235,14 @@ nav.secondary { } .dropdown-menu { - left: auto; - right: -1px; - border-radius: 3px 0 3px 3px; - .count-number { - float: right; - padding: 0 5px; - margin: 0; + font-size: 14px; } } } #compact-secondary-nav { display: none; - ul li a { - width: 100%; - color: #333; - &:hover { color: #fff; } - } } body.compact { @@ -2272,131 +2167,6 @@ input.richtext_title[type="text"] { height: 100%; } -/* Rules for dropdown menus */ - -.dropdown { - position: relative; -} - -.dropdown-toggle { - *margin-bottom: -3px; -} - -.dropdown-toggle:active, -.open .dropdown-toggle { - outline: 0; -} - -.caret { - display: inline-block; - width: 0; - height: 0; - vertical-align: top; - border-top: 4px solid #000000; - border-right: 4px solid transparent; - border-left: 4px solid transparent; - content: ""; -} - -.dropdown .caret { - margin-top: 8px; - margin-left: 2px; -} - -.dropdown-menu { - position: absolute; - top: 100%; - left: -1px; - z-index: 1000; - display: none; - float: left; - min-width: 160px; - padding: 5px 0; - margin: 0; - list-style: none; - background-color: #ffffff; - border: 1px solid $grey; - border-radius: 0 3px 3px; - *border-right-width: 2px; - *border-bottom-width: 2px; - box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); - background-clip: padding-box; -} - -.dropdown-menu.pull-right { - right: 0; - left: auto; -} - -.dropdown-menu .divider { - *width: 100%; - height: 1px; - margin: 9px 1px; - *margin: -5px 0 5px; - overflow: hidden; - background-color: $lightgrey; - border-bottom: 1px solid #ffffff; -} - -.dropdown-menu > li > a { - display: block; - padding: 3px 10px; - clear: both; - font-weight: normal; - line-height: 20px; - color: #333333; - white-space: nowrap; -} - -.dropdown-menu > li > a:hover, -.dropdown-menu > li > a:focus, -.dropdown-submenu:hover > a, -.dropdown-submenu:focus > a { - color: #ffffff; - text-decoration: none; - background-color: $green; -} - -.dropdown-menu > .active > a, -.dropdown-menu > .active > a:hover, -.dropdown-menu > .active > a:focus { - color: #ffffff; - text-decoration: none; - background-color: $green; - outline: 0; -} - -.dropdown-menu > .disabled > a, -.dropdown-menu > .disabled > a:hover, -.dropdown-menu > .disabled > a:focus { - color: $darkgrey; -} - -.dropdown-menu > .disabled > a:hover, -.dropdown-menu > .disabled > a:focus { - text-decoration: none; - cursor: default; - background-color: transparent; - background-image: none; -} - -.open { - *z-index: 1000; -} - -.open > .dropdown-menu { - display: block; -} - -.dropdown-backdrop { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 990; -} - /* Rules for the "Welcome" page */ .site-welcome, .site-fixthemap { .center { diff --git a/app/assets/stylesheets/screen-ltr.css b/app/assets/stylesheets/screen-ltr.css index ff93bc5a5..838c9198f 100644 --- a/app/assets/stylesheets/screen-ltr.css +++ b/app/assets/stylesheets/screen-ltr.css @@ -1,5 +1,4 @@ /* *= require ltr/common - *= require bootstrap-tooltips *= require ltr/small */ diff --git a/app/assets/stylesheets/screen-rtl.css b/app/assets/stylesheets/screen-rtl.css index d5cd9f10d..91d9fa3ed 100644 --- a/app/assets/stylesheets/screen-rtl.css +++ b/app/assets/stylesheets/screen-rtl.css @@ -1,5 +1,4 @@ /* *= require rtl/common - *= require bootstrap-tooltips *= require rtl/small */ diff --git a/app/assets/stylesheets/small.scss b/app/assets/stylesheets/small.scss index f6126391a..e5634e11d 100644 --- a/app/assets/stylesheets/small.scss +++ b/app/assets/stylesheets/small.scss @@ -71,22 +71,16 @@ body.small { } } } + + .btn-group { + width: 100%; + padding: 10px; + } } 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; - } - } } } diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb index 3963c211e..06823e18f 100644 --- a/app/views/layouts/_header.html.erb +++ b/app/views/layouts/_header.html.erb @@ -11,105 +11,100 @@ diff --git a/app/views/layouts/map.html.erb b/app/views/layouts/map.html.erb index 4d37cdfb8..528d45c49 100644 --- a/app/views/layouts/map.html.erb +++ b/app/views/layouts/map.html.erb @@ -9,7 +9,7 @@ <%= link_to t("layouts.home"), "#", :id => "homeanchor", - :class => "set_position", + :class => "set_position dropdown-item", :data => { :lat => current_user.home_lat, :lon => current_user.home_lon, :zoom => 15 } %> diff --git a/vendor/assets/bootstrap/bootstrap.dropdown.js b/vendor/assets/bootstrap/bootstrap.dropdown.js deleted file mode 100644 index 200e1c67b..000000000 --- a/vendor/assets/bootstrap/bootstrap.dropdown.js +++ /dev/null @@ -1,161 +0,0 @@ -/* ======================================================================== - * Bootstrap: dropdown.js v3.3.2 - * http://getbootstrap.com/javascript/#dropdowns - * ======================================================================== - * Copyright 2011-2015 Twitter, Inc. - * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) - * ======================================================================== */ - - -+function ($) { - 'use strict'; - - // DROPDOWN CLASS DEFINITION - // ========================= - - var backdrop = '.dropdown-backdrop' - var toggle = '[data-toggle="dropdown"]' - var Dropdown = function (element) { - $(element).on('click.bs.dropdown', this.toggle) - } - - Dropdown.VERSION = '3.3.2' - - Dropdown.prototype.toggle = function (e) { - var $this = $(this) - - if ($this.is('.disabled, :disabled')) return - - var $parent = getParent($this) - var isActive = $parent.hasClass('open') - - clearMenus() - - if (!isActive) { - if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) { - // if mobile we use a backdrop because click events don't delegate - $('