From 8fe173e831dd99883ab63a1edae5fcdde77ea59f Mon Sep 17 00:00:00 2001 From: zmagod Date: Mon, 12 Mar 2018 16:27:35 +0100 Subject: [PATCH] re-structure top navigation bar --- app/assets/javascripts/navigation.js | 11 - app/assets/stylesheets/constants.scss | 5 +- app/assets/stylesheets/extend/bootstrap.scss | 2 +- app/assets/stylesheets/themes/buttons.scss | 114 +++++ .../stylesheets/themes/main_navigation.scss | 391 ++++++++++++++++ app/assets/stylesheets/themes/scinote.scss | 437 +----------------- app/views/shared/_navigation.html.erb | 312 +++++-------- config/locales/en.yml | 11 +- public/images/scinote_icon.jpg | Bin 0 -> 6184 bytes 9 files changed, 629 insertions(+), 654 deletions(-) create mode 100644 app/assets/stylesheets/themes/buttons.scss create mode 100644 app/assets/stylesheets/themes/main_navigation.scss create mode 100644 public/images/scinote_icon.jpg diff --git a/app/assets/javascripts/navigation.js b/app/assets/javascripts/navigation.js index 4e731df63..1ec0a7ea9 100644 --- a/app/assets/javascripts/navigation.js +++ b/app/assets/javascripts/navigation.js @@ -94,16 +94,6 @@ }); } - function focusSearchInput() { - var searchIco = $('#search-ico'); - searchIco - .on('shown.bs.dropdown', function() { - searchIco - .find('input.form-control') - .focus(); - }); - } - function initActivitiesButton() { $(document.body).ready(function() { // Activity feed modal in main navigation menu @@ -154,7 +144,6 @@ loadDropdownNotifications(); loadUnseenNotificationsNumber(); toggleNotificationBellPosition(); - focusSearchInput(); initGlobalSwitchForm(); initActivitiesButton(); })(); diff --git a/app/assets/stylesheets/constants.scss b/app/assets/stylesheets/constants.scss index b12a24d64..771cc6433 100644 --- a/app/assets/stylesheets/constants.scss +++ b/app/assets/stylesheets/constants.scss @@ -3,11 +3,13 @@ //============================================================================== // Theme colors -$color-theme-primary: #37a0d9; +$color-theme-primary: #41B0E0; $color-theme-secondary: #8fd13f; $color-theme-dark: #6d6e71; // Grayscale colors +$color-border: #DDDDDD; +$color-list-separator: #BDC3C7; $color-white: #fff; $color-alabaster: #fcfcfc; $color-snow: #f9f9f9; @@ -34,6 +36,7 @@ $color-mystic: #eaeff2; $color-candlelight: #ffda23; $color-orange: #ff900b; $color-saturated-green: #008600; +$color-confirmation-green: #25AE88; $color-blue-yadcf: #337ab7; // Red colors diff --git a/app/assets/stylesheets/extend/bootstrap.scss b/app/assets/stylesheets/extend/bootstrap.scss index e04bb81c9..ac2030716 100644 --- a/app/assets/stylesheets/extend/bootstrap.scss +++ b/app/assets/stylesheets/extend/bootstrap.scss @@ -58,7 +58,7 @@ float: none; } -@media (max-width: 1000px) { +@media (max-width: 1188px) { .navbar-header { float: none; } diff --git a/app/assets/stylesheets/themes/buttons.scss b/app/assets/stylesheets/themes/buttons.scss new file mode 100644 index 000000000..447837728 --- /dev/null +++ b/app/assets/stylesheets/themes/buttons.scss @@ -0,0 +1,114 @@ +@import 'constants'; +@import "mixins"; + + +#reset-tutorial-btn { + margin-top: 15px; +} + +.btn-primary { + background-color: $color-theme-secondary; + border-color: darken($color-theme-secondary, 5%); + + &.active, + &.focus, + &.active.focus { + background-color: darken($color-theme-secondary, 20%); + border-color: darken($color-theme-secondary, 25%); + + &:hover { + background-color: darken($color-theme-secondary, 25%); + border-color: darken($color-theme-secondary, 30%); + } + } + + &:active, + &:focus, + &:active:focus, + &:active:hover, + &:focus:hover, + &:active:focus:hover { + background-color: darken($color-theme-secondary, 20%); + border-color: darken($color-theme-secondary, 25%); + } + + &:hover { + background-color: darken($color-theme-secondary, 5%); + border-color: darken($color-theme-secondary, 10%); + } +} +.btn-link-alt { + border-radius: 4px; + cursor: pointer; + margin-right: 5px; + padding: 3px; +} + +.btn-invis-file { + display: none; + opacity: 0; + position: absolute; + z-index: -1; +} + +.btn-open-file { + position: relative; + overflow: hidden; + + & > input[type=file] { + position: absolute; + top: 0; + right: 0; + min-width: 100%; + min-height: 100%; + font-size: 100px; + text-align: right; + filter: alpha(opacity=0); + opacity: 0; + outline: none; + background: white; + cursor: inherit; + display: block; + } +} + +/** Add users modal */ +.btn-group-existing-users { + width: 100%; + + label.btn { + text-align: center; + + &.btn-title { + color: $color-white; + cursor: inherit; + background-color: $color-theme-primary; + + &:focus, &:active, &:hover { + box-shadow: none; + background-color: $color-theme-primary; + border-color: $color-dark-gray; + } + } + } +} + +.btn-greyed { + background-color: $color-silver-chalice; + border-color: $color-silver-chalice; + color: $color-white; + + &:hover, + &:focus { + background-color: darken($color-silver-chalice, 15%); + border-color: darken($color-silver-chalice, 15%); + color: $color-white; + } +} + +/* Sample group color picker */ +.btn-group-sample-group-color { + .btn-group > .btn { + border-radius: 0 !important; + } +} diff --git a/app/assets/stylesheets/themes/main_navigation.scss b/app/assets/stylesheets/themes/main_navigation.scss new file mode 100644 index 000000000..ea3f3bc6f --- /dev/null +++ b/app/assets/stylesheets/themes/main_navigation.scss @@ -0,0 +1,391 @@ +@import 'constants'; +@import "mixins"; + +#main-nav { + margin-bottom: 0; +} + +#notifications-dropdown { + .fa-bell { + font-size: 15px; + position: absolute; + } + + #count-notifications { + background-color: $color-theme-primary; + border-radius: 5px; + color: $color-wild-sand; + display: none; + font-size: 11px; + font-weight: bold; + margin-left: 12px; + padding: 1px 6px; + position: relative; + z-index: 1; + } +} + +.navbar { + border-radius: 0; +} + +.navbar-default { + background-color: $color-white; + border-color: $color-alto; +} + +.navbar-default .navbar-brand { + & > img { + margin-top: -7px; + max-width: 55px; + max-height: 38px; + } +} + +.navbar-center { + margin-left: 20%; +} + +@media (max-width: 1766px) { + .navbar-center { + margin-left: 10%; + } +} + +@media (max-width: 1334px) { + .navbar-center { + margin-left: 5%; + } +} + +.dropdown-notifications { + max-height: 500px; + overflow-x: hidden; + overflow-y: scroll; + padding-bottom: 0; + padding-top: 0; + width: 450px; + word-wrap: break-word; + + .notifications-no-recent { + padding-bottom: 10px; + padding-left: 10px; + padding-top: 10px; + } + + .notification { + border-bottom: 1px solid $color-alto; + padding-bottom: 10px; + padding-top: 10px; + + &:hover { + background-color: $color-concrete; + } + } + + .unseen { + border-left: 4px solid $color-theme-primary; + } + + .text-center { + margin-left: 12px; + } + + .avatar { + top: 0px; + margin-top: 5px; + height: 45px; + width: 45px; + } + + .assignment { + background-color: $color-theme-primary; + border-radius: 50%; + color: $color-wild-sand; + display: block; + font-size: 23px; + height: 45px; + padding-top: 5px; + width: 45px; + } + + .deliver { + background-color: $color-orange; + border-radius: 50%; + color: $color-wild-sand; + display: block; + font-size: 23px; + height: 45px; + padding-top: 5px; + width: 45px; + } + + .system-message { + background-color: $color-theme-secondary; + border-radius: 50%; + color: $color-wild-sand; + display: block; + font-size: 23px; + height: 45px; + padding-top: 8px; + width: 45px; + } + + .notifications-dropdown-header { + background-color: $color-theme-primary; + color: $color-wild-sand; + font-weight: bold; + padding: 8px; + + a { + color: $color-white; + } + } + + .notifications-dropdown-footer { + background-color: $color-mystic; + padding: 8px; + text-align: center; + } + +} + +.notification { + padding-right: 8px; + word-wrap: break-word; +} + +#search-menu { + padding-right: 0; + + .nav { + position: relative; + z-index: 1000; + } +} + +#search-content { + padding-left: 0; +} + +#search-container { + padding-left: 45px; +} + +#search-bar { + border-color: $color-border; + .btn-default { + background-color: $color-theme-primary; + border-color: $color-theme-primary; + color: $color-white; + } + + input { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + width: 300px; + } +} + +/** Search */ +.nav-search { + li.disabled { + opacity: 0.8; + + .badge { + background-color: $color-emperor; + opacity: 0.8; + } + + } + + .repositories-team { + padding: 10px 15px; + + &.active { + color: $color-theme-primary; + } + } + + .repository-search { + padding-left: 15px; + } +} + +.notification-settings-container { + margin-bottom: 50px; + margin-top: 50px; + + h4 { + font-weight: 600; + margin-bottom: 2rem; + } + + .col-sm-4 { + padding-left: 5rem; + padding-top: .5rem; + word-break: break-word; + } + + .col-sm-2 { + padding-left: 3rem; + padding-top: .7rem; + } + + @media (max-width: 768px) { + .col-sm-4 { + margin-bottom: 1rem; + padding-left: 1.8rem; + } + + .col-sm-2 { + padding-left: 1.8rem; + } + } + + .btn-group { + margin-bottom: 15px; + } + + .assignment { + background-color: $color-theme-primary; + border-radius: 50%; + color: $color-wild-sand; + display: block !important; + font-size: 15px; + height: 30px; + margin-right: 15px; + padding: 7px; + padding-bottom: 5px; + padding-top: 5px; + width: 30px; + } + + .system-message { + background-color: $color-theme-secondary; + border-radius: 50%; + color: $color-wild-sand; + display: block !important; + font-size: 15px; + height: 30px; + margin-right: 15px; + padding: 8px; + padding-bottom: 5px; + padding-top: 5px; + width: 30px; + } + + .img-circle { + margin-right: 15px; + } +} + +// Global team switch +#team-switch { + word-wrap: break-word; + + .team-name { + margin-left: 17px; + } + + .glyphicon-ok-sign { + color: $color-confirmation-green; + margin-left: -10px; + margin-right: 10px; + } + + .team-name-item { + border-bottom: 1px solid $color-list-separator; + padding-bottom: 8px; + padding-top: 5px; + } + + .btn-default { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + text-align: right; + width: 300px; + } + + .btn-group { + border-color: $color-border; + margin-top: 8px; + } + + .btn-primary { + background-color: $color-theme-primary; + border-color: $color-theme-primary; + } + + .dropdown-menu { + width: 100%; + } + + .caret { + color: $color-white; + } + + i { + margin-right: 5px; + } + + li { + display: block; + text-align: left; + word-wrap: break-word; + + &:hover { + background-color: $color-concrete; + } + + a { + color: $color-emperor; + display: block; + line-height: 1.6em; + padding: 3px 20px; + text-align: left; + text-decoration: none; + word-wrap: break-word; + } + } +} + +#nav-team-switch { + margin-left: 30px; +} + +.custom-nav-dropdown { + border: 1px solid $color-border; + padding: 10px 0 10px 30px; +} + +#power-up-button { + margin-top: 8px; + + .btn-danger { + width: 150px; + } +} + +// reset margins on small screens +@media (max-width: 1188px) { + #nav-team-switch { + margin-left: 0; + } + .navbar-center { + margin-left: 0; + + #search-bar { + padding-left: 0; + } + } +} + +@media (max-width: 764px) { + .navbar-center { + #search-bar { + max-width: 150px; + padding-left: 13px; + } + } +} diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss index fe368ab50..dfa01c117 100644 --- a/app/assets/stylesheets/themes/scinote.scss +++ b/app/assets/stylesheets/themes/scinote.scss @@ -1,5 +1,7 @@ @import 'constants'; @import "mixins"; +@import 'main_navigation'; +@import 'buttons'; /** Layout **/ @@ -28,10 +30,6 @@ table { margin-bottom: 20px; } -#main-nav { - margin-bottom: 0; -} - #project-archive-btn { margin-left: 15px; } @@ -73,146 +71,12 @@ table { max-width: 400px; } -#notifications-dropdown { - .fa-bell { - font-size: 15px; - position: absolute; - } - - #count-notifications { - background-color: $color-theme-primary; - border-radius: 5px; - color: $color-wild-sand; - display: none; - font-size: 11px; - font-weight: bold; - margin-left: 12px; - padding: 1px 6px; - position: relative; - z-index: 1; - } -} - @media(max-width:450px) { .dropdown-notifications { width: 100%; } } -.dropdown-notifications { - max-height: 500px; - overflow-x: hidden; - overflow-y: scroll; - padding-bottom: 0; - padding-top: 0; - width: 450px; - word-wrap: break-word; - - .notifications-no-recent { - padding-bottom: 10px; - padding-left: 10px; - padding-top: 10px; - } - - .notification { - border-bottom: 1px solid $color-alto; - padding-bottom: 10px; - padding-top: 10px; - - &:hover { - background-color: $color-concrete; - } - } - - .unseen { - border-left: 4px solid $color-theme-primary; - } - - .text-center { - margin-left: 12px; - } - - .avatar { - top: 0px; - margin-top: 5px; - height: 45px; - width: 45px; - } - - .assignment { - background-color: $color-theme-primary; - border-radius: 50%; - color: $color-wild-sand; - display: block; - font-size: 23px; - height: 45px; - padding-top: 5px; - width: 45px; - } - - .deliver { - background-color: $color-orange; - border-radius: 50%; - color: $color-wild-sand; - display: block; - font-size: 23px; - height: 45px; - padding-top: 5px; - width: 45px; - } - - .system-message { - background-color: $color-theme-secondary; - border-radius: 50%; - color: $color-wild-sand; - display: block; - font-size: 23px; - height: 45px; - padding-top: 8px; - width: 45px; - } - - .notifications-dropdown-header { - background-color: $color-theme-primary; - color: $color-wild-sand; - font-weight: bold; - padding: 8px; - - a { - color: $color-white; - } - } - - .notifications-dropdown-footer { - background-color: $color-mystic; - padding: 8px; - text-align: center; - } - -} - -.notification { - padding-right: 8px; - word-wrap: break-word; -} - -#search-menu { - padding-right: 0; - - .nav { - position: relative; - z-index: 1000; - } -} - -#search-content { - padding-left: 0; -} - -#search-container { - padding-left: 45px; -} - .well-search-checklist { background-color: $color-concrete !important; margin-bottom: 5px; @@ -302,76 +166,6 @@ a { width: 100% !important; } -.btn { - border-radius: 1.5em; -} - -.btn-primary { - background-color: $color-theme-secondary; - border-color: darken($color-theme-secondary, 5%); - - &.active, - &.focus, - &.active.focus { - background-color: darken($color-theme-secondary, 20%); - border-color: darken($color-theme-secondary, 25%); - - &:hover { - background-color: darken($color-theme-secondary, 25%); - border-color: darken($color-theme-secondary, 30%); - } - } - - &:active, - &:focus, - &:active:focus, - &:active:hover, - &:focus:hover, - &:active:focus:hover { - background-color: darken($color-theme-secondary, 20%); - border-color: darken($color-theme-secondary, 25%); - } - - &:hover { - background-color: darken($color-theme-secondary, 5%); - border-color: darken($color-theme-secondary, 10%); - } -} -.btn-link-alt { - border-radius: 4px; - cursor: pointer; - margin-right: 5px; - padding: 3px; -} - -.btn-invis-file { - display: none; - opacity: 0; - position: absolute; - z-index: -1; -} - -.btn-open-file { - position: relative; - overflow: hidden; - - & > input[type=file] { - position: absolute; - top: 0; - right: 0; - min-width: 100%; - min-height: 100%; - font-size: 100px; - text-align: right; - filter: alpha(opacity=0); - opacity: 0; - outline: none; - background: white; - cursor: inherit; - display: block; - } -} - mark,.mark { background-color: $color-candlelight; } @@ -394,43 +188,6 @@ mark,.mark { } } -.navbar { - border-radius: 0; -} - -.navbar-default { - background-color: $color-white; - border-color: $color-alto; -} - -.navbar-default .navbar-brand { - background-color: $color-theme-primary; - font-size: 23px; - - & > img { - margin-top: -4px; - max-width: 132px; - max-height: 26px; - - &.with-version { - margin-top: -10px; - } - } - - & > span.version { - font-size: 0.6em; - color: $color-white; - float: right; - } - - &:hover, - &:focus, - &:focus:active, - &:focus:visited { - background-color: $color-theme-primary; - } -} - a[data-toggle="tooltip"] { color: inherit; border-bottom: 1px dashed $color-emperor; @@ -587,85 +344,6 @@ a[data-toggle="tooltip"] { padding: 10px; } -/** Search */ -.nav-search { - li.disabled { - opacity: 0.8; - - .badge { - background-color: $color-emperor; - opacity: 0.8; - } - - } - - .repositories-team { - padding: 10px 15px; - - &.active { - color: $color-theme-primary; - } - } - - .repository-search { - padding-left: 15px; - } -} - -.search-dropdown { - padding-right: 25px; - width: 250px; - - input { - width: 230px; - } -} - -@media(max-width:1000px) { - .search-dropdown { - width: 270px; - - .form-group { - padding-left: 15px; - } - } -} - - // Global team switch -#team-switch { - border-left: 1px solid $color-alto; - border-right: 1px solid $color-alto; - word-wrap: break-word; - - .dropdown-menu { - width: 100%; - } - - i { - margin-right: 5px; - } - - li { - display: block; - text-align: left; - word-wrap: break-word; - - &:hover { - background-color: $color-concrete; - } - - a { - color: $color-emperor; - display: block; - line-height: 1.6em; - padding: 3px 20px; - text-align: left; - text-decoration: none; - word-wrap: break-word; - } - } -} - /** Settings */ .nav-settings { margin-top: 15px; @@ -691,78 +369,6 @@ a[data-toggle="tooltip"] { margin-top: 40px; } -.notification-settings-container { - margin-bottom: 50px; - margin-top: 50px; - - h4 { - font-weight: 600; - margin-bottom: 2rem; - } - - .col-sm-4 { - padding-left: 5rem; - padding-top: .5rem; - word-break: break-word; - } - - .col-sm-2 { - padding-left: 3rem; - padding-top: .7rem; - } - - @media (max-width: 768px) { - .col-sm-4 { - margin-bottom: 1rem; - padding-left: 1.8rem; - } - - .col-sm-2 { - padding-left: 1.8rem; - } - } - - .btn-group { - margin-bottom: 15px; - } - - .assignment { - background-color: $color-theme-primary; - border-radius: 50%; - color: $color-wild-sand; - display: block !important; - font-size: 15px; - height: 30px; - margin-right: 15px; - padding: 7px; - padding-bottom: 5px; - padding-top: 5px; - width: 30px; - } - - .system-message { - background-color: $color-theme-secondary; - border-radius: 50%; - color: $color-wild-sand; - display: block !important; - font-size: 15px; - height: 30px; - margin-right: 15px; - padding: 8px; - padding-bottom: 5px; - padding-top: 5px; - width: 30px; - } - - .img-circle { - margin-right: 15px; - } -} - -#reset-tutorial-btn { - margin-top: 15px; -} - // Help link #help-link { padding: 13px; @@ -780,26 +386,6 @@ a[data-toggle="tooltip"] { padding-left: 15px; } -/** Add users modal */ -.btn-group-existing-users { - width: 100%; - - label.btn { - text-align: center; - - &.btn-title { - color: $color-white; - cursor: inherit; - background-color: $color-theme-primary; - - &:focus, &:active, &:hover { - box-shadow: none; - background-color: $color-theme-primary; - border-color: $color-dark-gray; - } - } - } -} .existing-users-smalltext { width: 100%; text-align: center; @@ -1432,18 +1018,6 @@ ul.content-module-activities { width: 100%; } -.btn-greyed { - background-color: $color-silver-chalice; - border-color: $color-silver-chalice; - color: $color-white; - - &:hover, - &:focus { - background-color: darken($color-silver-chalice, 15%); - border-color: darken($color-silver-chalice, 15%); - color: $color-white; - } -} /* Data table */ table.dataTable { @@ -1503,13 +1077,6 @@ table.dataTable { } } -/* Sample group color picker */ -.btn-group-sample-group-color { - .btn-group > .btn { - border-radius: 0 !important; - } -} - #samples_length { display: inline-block; } diff --git a/app/views/shared/_navigation.html.erb b/app/views/shared/_navigation.html.erb index b9a35a257..e45dce1a2 100644 --- a/app/views/shared/_navigation.html.erb +++ b/app/views/shared/_navigation.html.erb @@ -1,5 +1,5 @@