mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2025-09-04 12:14:37 +08:00
re-structure top navigation bar
This commit is contained in:
zmagod
parent
a61231e005
commit
8fe173e831
9 changed files with 629 additions and 654 deletions
|
|
@ -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();
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
2
app/assets/stylesheets/extend/bootstrap.scss
vendored
2
app/assets/stylesheets/extend/bootstrap.scss
vendored
|
|
@ -58,7 +58,7 @@
|
|||
float: none;
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
@media (max-width: 1188px) {
|
||||
.navbar-header {
|
||||
float: none;
|
||||
}
|
||||
|
|
|
|||
114
app/assets/stylesheets/themes/buttons.scss
Normal file
114
app/assets/stylesheets/themes/buttons.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
391
app/assets/stylesheets/themes/main_navigation.scss
Normal file
391
app/assets/stylesheets/themes/main_navigation.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<nav class="navbar navbar-default navbar-fixed-top" id="main-nav">
|
||||
<div class="container">
|
||||
<div class="container-fluid">
|
||||
|
||||
<!-- header -->
|
||||
<div class="navbar-header">
|
||||
|
|
@ -10,166 +10,133 @@
|
|||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<%= link_to(root_path, class: 'navbar-brand', title: t('nav.label.scinote')) do %>
|
||||
<%
|
||||
show_version = !Rails.env.production?
|
||||
if ENV['NAVBAR_SHOW_VERSION'].present?
|
||||
show_version = YAML.load(ENV['NAVBAR_SHOW_VERSION'])
|
||||
end
|
||||
%>
|
||||
<% if show_version %>
|
||||
<%= image_tag('/images/logo.png', class: 'with-version', id: 'logo') %>
|
||||
<span class="version">
|
||||
<%= Scinote::Application::VERSION %>
|
||||
</span>
|
||||
<% else %>
|
||||
<%= image_tag('/images/logo.png', id: 'logo') %>
|
||||
<% end %>
|
||||
<%= image_tag('/images/scinote_icon.jpg', id: 'logo') %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<% if user_signed_in? %>
|
||||
<div class="collapse navbar-collapse" id="main-menu">
|
||||
<!-- links -->
|
||||
<ul class="nav navbar-nav">
|
||||
<li>
|
||||
<a title="<%= t('nav.label.projects') %>" href="<%= projects_path %>">
|
||||
<span class="glyphicon glyphicon-home"></span>
|
||||
<span class="visible-xs-inline visible-sm-inline"><%= t('nav.label.projects') %></span>
|
||||
</a>
|
||||
</li>
|
||||
<% if current_team %>
|
||||
<li>
|
||||
<a id="protocol-link" title="<%= t('nav.label.protocols') %>" href="<%= protocols_path %>">
|
||||
<span class="glyphicon glyphicon-list-alt"></span>
|
||||
<span class="visible-xs-inline visible-sm-inline"><%= t('nav.label.protocols') %></span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a id="repositories-link" title="<%= t('nav.label.repositories') %>" href="<%= team_repositories_path(current_team) %>">
|
||||
<i class="fa fa-cubes" aria-hidden="true"></i>
|
||||
<span class="visible-xs-inline visible-sm-inline"><%= t('nav.label.repositories') %></span>
|
||||
</a>
|
||||
</li>
|
||||
<% else %>
|
||||
<li class="disabled">
|
||||
<a id="protocol-link" title="<%= t('nav.label.protocols') %>" href="#">
|
||||
<span class="glyphicon glyphicon-list-alt"></span>
|
||||
<span class="visible-xs-inline visible-sm-inline"><%= t('nav.label.protocols') %></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="disabled">
|
||||
<a id="repositories-link" title="<%= t('nav.label.repositories') %>" href="#">
|
||||
<span class="fa fa-cubes"></span>
|
||||
<span class="visible-xs-inline visible-sm-inline"><%= t('nav.label.repositories') %></span>
|
||||
</a>
|
||||
</li>
|
||||
<ul class="nav navbar-nav navbar-left" id="nav-team-switch">
|
||||
<!-- Global team switch -->
|
||||
<% if current_user.teams.length > 0 %>
|
||||
<li id="team-switch">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default"><%= truncate_team_name(current_team.name) %></button>
|
||||
<button type="button"
|
||||
class="btn btn-primary dropdown-toggle"
|
||||
title="<%= t('nav.label.teams') %>"
|
||||
data-toggle="dropdown"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span class="caret"></span>
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<% if current_user.teams.length > 1 || can_create_teams? %>
|
||||
<ul class="dropdown-menu">
|
||||
<%= form_for(current_user,
|
||||
url: user_current_team_path,
|
||||
method: :post) do |f| %>
|
||||
<%= hidden_field(:user, :current_team_id) %>
|
||||
<% current_user.teams.each do |team| %>
|
||||
<li class="team-name-item">
|
||||
<a href="#"
|
||||
data-id="<%= team.id %>"
|
||||
class="text-center change-team">
|
||||
<% if current_team == team %>
|
||||
<span class="glyphicon glyphicon-ok-sign"></span> <strong><%= team.name %></strong>
|
||||
<% else %>
|
||||
<span class="team-name"><%= team.name %></span>
|
||||
<% end %>
|
||||
</a>
|
||||
</li>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<% if current_user.teams.length > 1 && can_create_teams? %>
|
||||
<li>
|
||||
<%= link_to new_team_path do %>
|
||||
<span class="glyphicon glyphicon-plus"></span>
|
||||
<%= t('users.settings.teams.index.new_team') %>
|
||||
<% end %>
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
<% end %>
|
||||
</div>
|
||||
</li>
|
||||
<% end %>
|
||||
<% if false %>
|
||||
</ul>
|
||||
|
||||
<!-- search form -->
|
||||
<ul class="nav navbar-nav navbar-center">
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="glyphicon glyphicon-calendar"></span>
|
||||
<span class="visible-xs-inline visible-sm-inline"><%= t('nav.label.calendar') %></span>
|
||||
</a>
|
||||
</li>
|
||||
<% end %>
|
||||
<li>
|
||||
<a class="btn-activity" title="<%= t('nav.label.activities') %>" href="<%= activities_path(format: :json) %>" role="button" data-remote="true">
|
||||
<span class="glyphicon glyphicon-equalizer"></span>
|
||||
<span class="visible-xs-inline visible-sm-inline"><%= t('nav.label.activities') %></span>
|
||||
</a>
|
||||
<%= form_tag search_path,
|
||||
method: :get,
|
||||
id: 'search-bar',
|
||||
class: 'navbar-form',
|
||||
role: 'search' do %>
|
||||
<div class="input-group">
|
||||
<input class="form-control"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="<%= t('nav.search') %>" />
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default" type="submit"><%=t 'nav.search_button' %></button>
|
||||
</span>
|
||||
</div>
|
||||
<% end %>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- profile info -->
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
|
||||
<!-- Global team switch -->
|
||||
<% if current_user.teams.length > 0 %>
|
||||
<li class="dropdown" id="team-switch">
|
||||
<a href="#"
|
||||
class="dropdown-toggle"
|
||||
title="<%= t('nav.label.teams') %>"
|
||||
data-toggle="dropdown"
|
||||
role="button"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<%= fa_icon 'users' %>
|
||||
<span>
|
||||
<%= truncate_team_name(current_team.name) %>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<% if current_user.teams.length > 1 || can_create_teams? %>
|
||||
<ul class="dropdown-menu">
|
||||
<%= form_for(current_user,
|
||||
url: user_current_team_path,
|
||||
method: :post) do |f| %>
|
||||
<%= hidden_field(:user, :current_team_id) %>
|
||||
<% current_user.teams.each do |team| %>
|
||||
<% next unless team != current_team %>
|
||||
<li>
|
||||
<a href="#"
|
||||
data-id="<%= team.id %>"
|
||||
class="text-center change-team">
|
||||
<%= team.name %>
|
||||
</a>
|
||||
</li>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<% if current_user.teams.length > 1 && can_create_teams? %>
|
||||
<li role="separator"
|
||||
class="divider"></li>
|
||||
<li>
|
||||
<%= link_to new_team_path do %>
|
||||
<span class="glyphicon glyphicon-plus"></span>
|
||||
<%= t('users.settings.teams.index.new_team') %>
|
||||
<% end %>
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
<% end %>
|
||||
<li id="power-up-button">
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-danger dropdown-toggle"
|
||||
type="button"
|
||||
id="power-up-dropdown"
|
||||
data-toggle="dropdown"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="true">
|
||||
<%=t 'nav.power_up' %>
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="power-up-dropdown">
|
||||
<li class="dropdown-header"><%=t 'nav.power_up_dropdown.title' %></li>
|
||||
<li><span class="glyphicon glyphicon-certificate"></span> <%=t 'nav.power_up_dropdown.unlimited_teams' %></li>
|
||||
<li><span class="glyphicon glyphicon-certificate"></span> <%=t 'nav.power_up_dropdown.unlimited_users' %></li>
|
||||
<li><span class="glyphicon glyphicon-certificate"></span> <%=t 'nav.power_up_dropdown.unlimited_storage' %></li>
|
||||
<li><span class="glyphicon glyphicon-certificate"></span> <%=t 'nav.power_up_dropdown.manuscript' %></li>
|
||||
<li><%=t 'nav.power_up_dropdown.much_more' %></li>
|
||||
<li class="text-center"><a href="#" class=""></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<% end %>
|
||||
|
||||
<!-- search -->
|
||||
<li class="dropdown"
|
||||
id="search-ico">
|
||||
<!-- greetings -->
|
||||
<li id="user-account-dropdown" class="dropdown">
|
||||
<a href="#"
|
||||
class="dropdown-toggle"
|
||||
title="<%= t('nav.label.search') %>"
|
||||
title="<%= t('nav.label.account') %>"
|
||||
data-toggle="dropdown"
|
||||
role="button"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span class="glyphicon glyphicon-search"></span>
|
||||
<span class="visible-xs-inline visible-sm-inline"><%= t('nav.label.search') %></span>
|
||||
<span>
|
||||
<%= t('nav.user_greeting', full_name: current_user.full_name) %>
|
||||
</span>
|
||||
<%= image_tag avatar_path(current_user, :icon_small),
|
||||
class: "avatar" %>
|
||||
</a>
|
||||
<ul class="dropdown-menu search-dropdown">
|
||||
<li>
|
||||
<!-- search form -->
|
||||
<%= form_tag search_path,
|
||||
method: :get,
|
||||
id: 'search-bar',
|
||||
class: 'navbar-form navbar-right',
|
||||
role: 'search' do %>
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<input class="form-control"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="<%= t('nav.search') %>">
|
||||
<span class="input-group-btn visible-xs visible-sm">
|
||||
<button id="search-button"
|
||||
class="btn btn-default"
|
||||
type="submit">
|
||||
<span class="glyphicon glyphicon-menu-right"></span>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="dropdown-menu" data-hook="navigation-user-menu">
|
||||
<li>
|
||||
<%= link_to t('nav.user.settings'), edit_user_registration_path, data: { turbolinks: false } %>
|
||||
</li>
|
||||
<li role="separator" class="divider"></li>
|
||||
<li>
|
||||
<%= link_to t('nav.user.logout'),
|
||||
destroy_user_session_path,
|
||||
method: :delete %>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<!-- notifications -->
|
||||
|
|
@ -205,71 +172,6 @@
|
|||
</ul>
|
||||
</li>
|
||||
|
||||
<!-- help -->
|
||||
<li class="dropdown">
|
||||
<a href="#"
|
||||
id="help-link"
|
||||
class="dropdown-toggle"
|
||||
title="<%= t('nav.label.info') %>"
|
||||
data-toggle="dropdown"
|
||||
role="button"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span class="glyphicon glyphicon-info-sign"></span>
|
||||
<span class="visible-xs-inline visible-sm-inline"><%= t('nav.label.info') %></span>
|
||||
</a>
|
||||
<ul class="dropdown-menu" data-hook="navigation-help-menu">
|
||||
<li><%= link_to t('nav.help.support'),
|
||||
Constants::SUPPORT_URL,
|
||||
target: "_blank" %></li>
|
||||
<li><%= link_to t('nav.help.tutorials'),
|
||||
Constants::TUTORIALS_URL,
|
||||
target: "_blank" %></li>
|
||||
<li><%= link_to t('nav.help.release_notes'),
|
||||
Constants::RELEASE_NOTES_URL,
|
||||
target: "_blank" %></li>
|
||||
<li><%= link_to t('nav.help.premium'),
|
||||
Constants::PREMIUM_URL,
|
||||
target: "_blank" %></li>
|
||||
<li><%= link_to t('nav.help.contact'),
|
||||
Constants::CONTACT_URL,
|
||||
target: "_blank" %></li>
|
||||
<li role="separator" class="divider"></li>
|
||||
<li>
|
||||
<%= link_to '#', data: { trigger: 'about-modal' } do %>
|
||||
<%= t('nav.help.about') %>
|
||||
<% end %>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<!-- greetings -->
|
||||
<li id="user-account-dropdown" class="dropdown">
|
||||
<a href="#"
|
||||
class="dropdown-toggle"
|
||||
title="<%= t('nav.label.account') %>"
|
||||
data-toggle="dropdown"
|
||||
role="button"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span>
|
||||
<%= t('nav.user_greeting', full_name: current_user.full_name) %>
|
||||
</span>
|
||||
<%= image_tag avatar_path(current_user, :icon_small),
|
||||
class: "avatar" %>
|
||||
</a>
|
||||
<ul class="dropdown-menu" data-hook="navigation-user-menu">
|
||||
<li>
|
||||
<%= link_to t('nav.user.settings'), edit_user_registration_path, data: { turbolinks: false } %>
|
||||
</li>
|
||||
<li role="separator" class="divider"></li>
|
||||
<li>
|
||||
<%= link_to t('nav.user.logout'),
|
||||
destroy_user_session_path,
|
||||
method: :delete %>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -61,7 +61,16 @@ en:
|
|||
body:
|
||||
notice: "You need to enable JavaScript to run this app."
|
||||
nav:
|
||||
search: "Search"
|
||||
search: "Search for something..."
|
||||
search_button: 'Go!'
|
||||
power_up: 'Power Up!'
|
||||
power_up_dropdown:
|
||||
title: 'Go premum and power up!'
|
||||
unlimited_teams: 'Unlimited Teams'
|
||||
unlimited_users: 'Unlimited Users'
|
||||
unlimited_storage: 'Unlimited Storage'
|
||||
manuscript: 'ManuScript'
|
||||
much_more: 'And much, much more...'
|
||||
user_greeting: "Hi, %{full_name}"
|
||||
advanced_search: "Advanced search"
|
||||
title: "sciNote"
|
||||
|
|
|
|||
BIN
public/images/scinote_icon.jpg
Normal file
BIN
public/images/scinote_icon.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6 KiB |
Loading…
Add table
Reference in a new issue