diff --git a/app/assets/images/pictograms/account-multiple-outline.svg b/app/assets/images/pictograms/account-multiple-outline.svg new file mode 100644 index 0000000..a781fa1 --- /dev/null +++ b/app/assets/images/pictograms/account-multiple-outline.svg @@ -0,0 +1 @@ + diff --git a/app/assets/images/pictograms/account-wrench-outline.svg b/app/assets/images/pictograms/account-wrench-outline.svg new file mode 100644 index 0000000..7453d7c --- /dev/null +++ b/app/assets/images/pictograms/account-wrench-outline.svg @@ -0,0 +1 @@ + diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 9eb98a6..73dab9e 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -57,23 +57,44 @@ input[type=checkbox]:checked { -webkit-appearance: checkbox; } -.application-menu { - height: 2.1rem; - margin: 0.5rem 0; +.app-menu { + height: 2.2rem; + margin: 0.4rem 0; } -.application-menu .image-button { +.app-menu .image-button { float: right; margin-left: 0.8rem; } +.nav-menu { + height: 2.7rem; + margin: 0.4rem 0; +} +.nav-menu .image-button { + border: none; + border-radius: 0; + font-size: 0.9rem; + margin: 0 0.8rem; + padding: 0.6rem 1rem; +} +.nav-menu .right .image-button { + float: right; +} +.nav-menu .image-button.active { + border-bottom: solid 0.2rem; + color: #009ade; + fill: #009ade; +} + .image-button, input[type=submit] { align-items: center; - border: 1px solid; background-color: white; + border: 1px solid; border-color: #a0a0a0; border-radius: 0.2rem; color: #a0a0a0; + cursor: pointer; display: flex; fill: #a0a0a0; font-size: 0.8rem; @@ -86,29 +107,29 @@ input[type=submit] { padding-right: 0.4rem; width: 1.3rem; } -.image-button.active, -.image-button:hover, -.image-button:hover:focus-visible, -input[type=submit]:hover, -input[type=submit]:hover:focus-visible { - background-color: #009ade; - border-color: #009ade; - color: white; - cursor: pointer; - fill: white; -} -.image-button:focus-visible, -input[type=submit]:focus-visible { - background-color: #f3f3f3; -} -.image-button.active:focus-visible { - background-color: #006c9b; - border-color: #006c9b; -} .image-button.centered { margin: 0 auto; width: fit-content; } +.image-button:hover, +.image-button.active:hover, +input[type=submit]:hover { + background-color: #009ade; + border-color: #009ade; + color: white; + fill: white; +} +.image-button:focus-visible, +.image-button.active:focus-visible, +input[type=submit]:focus-visible { + background-color: #f3f3f3; +} +.image-button:hover:focus-visible, +.image-button.active:hover:focus-visible, +input[type=submit]:hover:focus-visible { + background-color: #006c9b; + border-color: #006c9b; +} .flashes { height: 2.1rem; diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index a3671df..ba4c97c 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -45,10 +45,12 @@ module ApplicationHelper end def image_link_to(name, image = nil, options = nil, html_options = {}) - return "" if html_options.delete(:unless_current) && (url_for(options) == request.path) + current = html_options.delete(:current) + return "" if (current == :hide) && (url_for(options) == request.path) + classes = class_names(html_options[:class], "image-button", active: current == :active) name = svg_tag("pictograms/#{image}.svg#icon") + name if image - link_to name, options, html_options.merge!(class: "image-button") { |k, v1, v2| "#{v1} #{v2}" } + link_to name, options, class: classes end def svg_tag(source, options = {}) diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 1ebd78f..800e0ad 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -11,14 +11,14 @@
- + + <%= yield %>