From 8fac4c1b7c4c2372415f92526c4cc4a9b125d439 Mon Sep 17 00:00:00 2001 From: Anton Date: Thu, 22 Jun 2023 11:55:23 +0200 Subject: [PATCH] UI CSS fixes --- app/assets/stylesheets/dashboard/show.scss | 7 ++----- app/assets/stylesheets/experiment/canvas.scss | 6 +++--- .../stylesheets/my_modules/protocol.scss | 2 +- .../my_modules/protocols/index.scss | 5 ++++- .../stylesheets/my_modules/repositories.scss | 1 + .../stylesheets/navigation/notifications.scss | 2 +- .../stylesheets/protocols/protocol.scss | 7 ++++--- .../stylesheets/shared/content_pane.scss | 16 ++++++++------- .../stylesheets/shared/dropdown_selector.scss | 1 - .../shared_styles/constants/fonts.scss | 1 + app/assets/stylesheets/steps/step.scss | 2 +- app/assets/stylesheets/themes/scinote.scss | 3 ++- app/javascript/vue/navigation/top_menu.vue | 11 +++++----- .../vue/protocol/step_elements/text.vue | 6 +++--- .../experiments/_table_due_date.html.erb | 2 +- app/views/layouts/main.html.erb | 4 +--- .../my_modules/_my_module_details.html.erb | 4 ++-- app/views/shared/_state_view_switch.html.erb | 2 +- app/views/shared/_view_switch.html.erb | 2 +- config/locales/en.yml | 20 +++++++++---------- 20 files changed, 54 insertions(+), 50 deletions(-) diff --git a/app/assets/stylesheets/dashboard/show.scss b/app/assets/stylesheets/dashboard/show.scss index 5e2a5823d..0838ee041 100644 --- a/app/assets/stylesheets/dashboard/show.scss +++ b/app/assets/stylesheets/dashboard/show.scss @@ -12,14 +12,11 @@ .dashboard-view { --dashboard-widgets-gap: 30px; - padding: 15px - var(--dashboard-widgets-gap) - 15px - var(--dashboard-widgets-gap); + padding: 1.5rem 0; } .dashboard-header { - padding-bottom: 15px; + padding-bottom: 1.5rem; } .dashboard-container { diff --git a/app/assets/stylesheets/experiment/canvas.scss b/app/assets/stylesheets/experiment/canvas.scss index f66522192..18ac2e509 100644 --- a/app/assets/stylesheets/experiment/canvas.scss +++ b/app/assets/stylesheets/experiment/canvas.scss @@ -48,9 +48,9 @@ } .badge-indicator { - background: $brand-accent; - border-radius: $border-radius-tag; - color: $color-black; + background: var(--sn-science-blue); + border-radius: 50%; + color: var(--sn-white); font-size: 10px; margin-left: -8px; } diff --git a/app/assets/stylesheets/my_modules/protocol.scss b/app/assets/stylesheets/my_modules/protocol.scss index 74e05d1d1..b11a5939f 100644 --- a/app/assets/stylesheets/my_modules/protocol.scss +++ b/app/assets/stylesheets/my_modules/protocol.scss @@ -63,7 +63,7 @@ } .protocol-description { margin-bottom: 2em; - padding-left: 1.5em; + padding-left: 2.5rem; } .protocol-steps { diff --git a/app/assets/stylesheets/my_modules/protocols/index.scss b/app/assets/stylesheets/my_modules/protocols/index.scss index 9a1ad9e1d..312d5bc46 100644 --- a/app/assets/stylesheets/my_modules/protocols/index.scss +++ b/app/assets/stylesheets/my_modules/protocols/index.scss @@ -78,7 +78,7 @@ color: var(--sn-black); display: inline-flex; gap: .5rem; - padding: .5em; + padding: .5rem; text-decoration: none; .fas { @@ -183,6 +183,8 @@ } .task-details { + padding-left: 2.5rem; + .fas.block-icon { margin-right: 8px; } @@ -406,6 +408,7 @@ .task-notes { display: inline-block; + padding-left: 2rem; position: relative; width: 100%; diff --git a/app/assets/stylesheets/my_modules/repositories.scss b/app/assets/stylesheets/my_modules/repositories.scss index b4f8225b6..af934a804 100644 --- a/app/assets/stylesheets/my_modules/repositories.scss +++ b/app/assets/stylesheets/my_modules/repositories.scss @@ -11,6 +11,7 @@ } #assigned-items-container { + padding-left: 2.5rem; padding-top: 10px; .assigned-repository { diff --git a/app/assets/stylesheets/navigation/notifications.scss b/app/assets/stylesheets/navigation/notifications.scss index 0c872d211..b3326be31 100644 --- a/app/assets/stylesheets/navigation/notifications.scss +++ b/app/assets/stylesheets/navigation/notifications.scss @@ -42,7 +42,7 @@ padding: 1.5rem; position: absolute; right: 0; - top: calc(var(--top-navigation-height) - .5em); + top: calc(var(--top-navigation-height) - 1.5rem); width: 400px; .sci--navigation--notificaitons-flyout-title { diff --git a/app/assets/stylesheets/protocols/protocol.scss b/app/assets/stylesheets/protocols/protocol.scss index 8d0b0fbe8..dc52f6682 100644 --- a/app/assets/stylesheets/protocols/protocol.scss +++ b/app/assets/stylesheets/protocols/protocol.scss @@ -50,14 +50,15 @@ align-items: center; color: $color-volcano; display: inline-flex; - padding: .5em; + gap: .5rem; + padding: .5rem; text-decoration: none; .fas { margin-right: 5px; } - &:not(.collapsed) .fas { + &:not(.collapsed) .sn-icon { @include rotate(90deg); } } @@ -104,7 +105,7 @@ } .protocol-details { - padding-left: 20px; + padding-left: 2.5rem; } } diff --git a/app/assets/stylesheets/shared/content_pane.scss b/app/assets/stylesheets/shared/content_pane.scss index ce3cf3d79..e34502204 100644 --- a/app/assets/stylesheets/shared/content_pane.scss +++ b/app/assets/stylesheets/shared/content_pane.scss @@ -113,11 +113,12 @@ width: calc(100% + 2em); &.selected::after { - @include font-awesome; - content: $font-fas-check; + @include font-sn-icon; + content: $sn-icon-check; margin-left: auto; position: absolute; - right: 1em; + right: .5rem; + top: 0; } } } @@ -138,7 +139,7 @@ .dropdown-menu { @include font-button; - min-width: 200px; + min-width: 160px; padding: .5em 0; a { @@ -152,11 +153,12 @@ } &.selected::after { - @include font-awesome; - content: $font-fas-check; + @include font-sn-icon; + content: $sn-icon-check; margin-left: auto; position: absolute; - right: 1em; + right: .5rem; + top: 0; } } diff --git a/app/assets/stylesheets/shared/dropdown_selector.scss b/app/assets/stylesheets/shared/dropdown_selector.scss index cca684958..c46805608 100644 --- a/app/assets/stylesheets/shared/dropdown_selector.scss +++ b/app/assets/stylesheets/shared/dropdown_selector.scss @@ -344,7 +344,6 @@ } .sn-icon-down { - margin-right: -6px; transform: rotate(180deg); } } diff --git a/app/assets/stylesheets/shared_styles/constants/fonts.scss b/app/assets/stylesheets/shared_styles/constants/fonts.scss index d31358c09..6e91d561d 100644 --- a/app/assets/stylesheets/shared_styles/constants/fonts.scss +++ b/app/assets/stylesheets/shared_styles/constants/fonts.scss @@ -29,6 +29,7 @@ $font-fas-plus: "\f02b"; $sn-icon-left: "\e932"; $sn-icon-right: "\e931"; +$sn-icon-check: "\e95f"; /// Hack for old icons diff --git a/app/assets/stylesheets/steps/step.scss b/app/assets/stylesheets/steps/step.scss index b19dc277b..8d006c632 100644 --- a/app/assets/stylesheets/steps/step.scss +++ b/app/assets/stylesheets/steps/step.scss @@ -4,7 +4,7 @@ @import "components/*"; .step-container { - --left-component-padding: 24px; + --left-component-padding: 2rem; border: $border-transparent; margin: 6px 0 6px -1.5em; padding: 8px 24px 8px 0; diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss index 67a4b3684..8052b0361 100644 --- a/app/assets/stylesheets/themes/scinote.scss +++ b/app/assets/stylesheets/themes/scinote.scss @@ -152,7 +152,8 @@ body { } .badge { - background-color: $brand-primary; + background-color: var(--sn-science-blue); + border-radius: 50% !important; font-size: 11px; border-radius: 5px; } diff --git a/app/javascript/vue/navigation/top_menu.vue b/app/javascript/vue/navigation/top_menu.vue index 37e519e9e..f83aa7aa3 100644 --- a/app/javascript/vue/navigation/top_menu.vue +++ b/app/javascript/vue/navigation/top_menu.vue @@ -14,8 +14,8 @@ @change="switchTeam" > -
-
-
-
-
+
- -
diff --git a/app/views/experiments/_table_due_date.html.erb b/app/views/experiments/_table_due_date.html.erb index c5d4a1fbf..c2de6209a 100644 --- a/app/views/experiments/_table_due_date.html.erb +++ b/app/views/experiments/_table_due_date.html.erb @@ -14,7 +14,7 @@ -
- <%= yield %> -
+ <%= yield %> <% end %> <%= render template: 'layouts/application' %> diff --git a/app/views/my_modules/_my_module_details.html.erb b/app/views/my_modules/_my_module_details.html.erb index 636ad411e..c22f1746b 100644 --- a/app/views/my_modules/_my_module_details.html.erb +++ b/app/views/my_modules/_my_module_details.html.erb @@ -2,7 +2,7 @@
- +
@@ -12,7 +12,7 @@
- +
diff --git a/app/views/shared/_state_view_switch.html.erb b/app/views/shared/_state_view_switch.html.erb index 761cca5fd..9bf5948e5 100644 --- a/app/views/shared/_state_view_switch.html.erb +++ b/app/views/shared/_state_view_switch.html.erb @@ -1,7 +1,7 @@
" id="viewSwitchButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> <%= archived ? t('toolbar.archived_state') : t('toolbar.active_state') %> - +
    <% if switchable %> diff --git a/app/views/shared/_view_switch.html.erb b/app/views/shared/_view_switch.html.erb index c64921e8c..19576dcca 100644 --- a/app/views/shared/_view_switch.html.erb +++ b/app/views/shared/_view_switch.html.erb @@ -1,7 +1,7 @@
    " id="viewSwitchButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> <%= name %> - +
      <%= yield %> diff --git a/config/locales/en.yml b/config/locales/en.yml index 262e139a1..b49ed6f55 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -3485,16 +3485,16 @@ en: archived: "Archived" sort: title: "Sorting" - new_html: "  Started last" - old_html: "  Started first" - atoz_html: "  Name A to Z" - ztoa_html: "  Name Z to A" - archived_new_html: "  Archived last" - archived_old_html: "  Archived first" - id_asc_html: "  ID ascending" - id_desc_html: "  ID descending" - due_first_html: "  Due first" - due_last_html: "  Due last" + new_html: "Started last" + old_html: "Started first" + atoz_html: "Name A to Z" + ztoa_html: "Name Z to A" + archived_new_html: "Archived last" + archived_old_html: "Archived first" + id_asc_html: "ID ascending" + id_desc_html: "ID descending" + due_first_html: "Due first" + due_last_html: "Due last" sort_new: new: "Added last" old: "Added first"