mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-12-25 01:03:18 +08:00
Multiple CSS fixes for navigation [SCI-8289][SCI-8313][SCI-8288][SCI-8273][SCI-8309]
This commit is contained in:
parent
f357babf25
commit
caf21959bd
9 changed files with 33 additions and 7 deletions
|
@ -7,7 +7,9 @@
|
||||||
grid-template-areas: "top top top"
|
grid-template-areas: "top top top"
|
||||||
"left breadcrumbs breadcrumbs"
|
"left breadcrumbs breadcrumbs"
|
||||||
"left navigator content";
|
"left navigator content";
|
||||||
grid-template-columns: var(--left-navigation) var(--navigator-navigation) auto;
|
grid-template-columns: var(--left-navigation)
|
||||||
|
var(--navigator-navigation)
|
||||||
|
calc(100% - var(--left-navigation) - var(--navigator-navigation));
|
||||||
grid-template-rows: var(--top-navigation) var(--breadcrumbs-navigation) auto;
|
grid-template-rows: var(--top-navigation) var(--breadcrumbs-navigation) auto;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
|
@ -11,6 +11,7 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
.sci--layout--menu-item {
|
.sci--layout--menu-item {
|
||||||
|
@include font-small;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
color: $color-black;
|
color: $color-black;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
@ -21,6 +22,10 @@
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
|
.fas {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
}
|
||||||
|
|
||||||
&[data-active='true'] {
|
&[data-active='true'] {
|
||||||
background-color: $color-gainsboro;
|
background-color: $color-gainsboro;
|
||||||
box-shadow: inset 4px 0 0 $brand-primary;
|
box-shadow: inset 4px 0 0 $brand-primary;
|
||||||
|
|
|
@ -4,6 +4,14 @@
|
||||||
.sci--navigation--notificaitons-flyout-container {
|
.sci--navigation--notificaitons-flyout-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
.sci--navigation--notificaitons-flyout-backdrop {
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
position: fixed;
|
||||||
|
right: 0;
|
||||||
|
top: var(--top-navigation);
|
||||||
|
}
|
||||||
|
|
||||||
.sci--navigation--notificaitons-flyout {
|
.sci--navigation--notificaitons-flyout {
|
||||||
background-color: $color-white;
|
background-color: $color-white;
|
||||||
border-radius: 0 0 $border-radius-default $border-radius-default;
|
border-radius: 0 0 $border-radius-default $border-radius-default;
|
||||||
|
@ -57,7 +65,10 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.sci--navigation--notificaitons-flyout-notifications {
|
.sci--navigation--notificaitons-flyout-notifications {
|
||||||
|
margin-left: -1.5rem;
|
||||||
|
padding: 0 1.5rem;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
width: calc(100% + 3rem);
|
||||||
|
|
||||||
.next-page-loader {
|
.next-page-loader {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
|
@ -46,6 +46,13 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 1em;
|
gap: 1em;
|
||||||
margin-left: .75em;
|
margin-left: .75em;
|
||||||
|
|
||||||
|
span {
|
||||||
|
max-width: 200px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-menu li a {
|
.dropdown-menu li a {
|
||||||
|
|
|
@ -6,7 +6,6 @@
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--repository-sidebar-margin: 363px;
|
--repository-sidebar-margin: 363px;
|
||||||
--repository-content-pane-margin: 108px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.repository-show {
|
.repository-show {
|
||||||
|
@ -15,7 +14,7 @@
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0 2em;
|
padding: 0 2em;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: var(--repository-content-pane-margin);
|
top: var(--navbar-height);
|
||||||
transition: .4s $timing-function-sharp;
|
transition: .4s $timing-function-sharp;
|
||||||
width: calc(100vw - var(--repository-sidebar-margin));
|
width: calc(100vw - var(--repository-sidebar-margin));
|
||||||
|
|
||||||
|
|
|
@ -12,7 +12,7 @@
|
||||||
left: var(--repository-sidebar-margin);
|
left: var(--repository-sidebar-margin);
|
||||||
padding: 1em 2em 0;
|
padding: 1em 2em 0;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: calc(4em + var(--repository-content-pane-margin));
|
top: calc(4em + var(--navbar-height));
|
||||||
transition: .4s $timing-function-sharp;
|
transition: .4s $timing-function-sharp;
|
||||||
width: calc(100% - var(--repository-sidebar-margin));
|
width: calc(100% - var(--repository-sidebar-margin));
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
|
|
|
@ -52,11 +52,12 @@
|
||||||
<button class="btn btn-light icon-btn" data-toggle="dropdown" @click="notificationsOpened = !notificationsOpened">
|
<button class="btn btn-light icon-btn" data-toggle="dropdown" @click="notificationsOpened = !notificationsOpened">
|
||||||
<i class="fas fa-bell"></i>
|
<i class="fas fa-bell"></i>
|
||||||
</button>
|
</button>
|
||||||
|
<div v-if="notificationsOpened" class="sci--navigation--notificaitons-flyout-backdrop" @click="notificationsOpened = false"></div>
|
||||||
<NotificationsFlyout v-if="notificationsOpened" :notifications-url="notificationsUrl" @close="notificationsOpened = false" />
|
<NotificationsFlyout v-if="notificationsOpened" :notifications-url="notificationsUrl" @close="notificationsOpened = false" />
|
||||||
</div>
|
</div>
|
||||||
<div v-if="user" class="dropdown">
|
<div v-if="user" class="dropdown">
|
||||||
<div class="sci--navigation--top-menu-user" data-toggle="dropdown">
|
<div class="sci--navigation--top-menu-user" data-toggle="dropdown">
|
||||||
{{ i18n.t('nav.user_greeting', { full_name: user.name })}}
|
<span>{{ i18n.t('nav.user_greeting', { full_name: user.name })}}</span>
|
||||||
<img class="avatar" :src="user.avatar_url">
|
<img class="avatar" :src="user.avatar_url">
|
||||||
</div>
|
</div>
|
||||||
<div class="dropdown-menu dropdown-menu-right">
|
<div class="dropdown-menu dropdown-menu-right">
|
||||||
|
|
|
@ -65,7 +65,8 @@
|
||||||
<div class="sci--layout-navigation-left">
|
<div class="sci--layout-navigation-left">
|
||||||
<%= render "shared/navigation/left" if user_signed_in? %>
|
<%= render "shared/navigation/left" if user_signed_in? %>
|
||||||
</div>
|
</div>
|
||||||
<div class="sci--layout-navigation-navigator">
|
<!-- temporary fix for sidebar (#wrapper) -->
|
||||||
|
<div id="wrapper" class="sci--layout-navigation-navigator">
|
||||||
<%= render "shared/navigation/navigator" %>
|
<%= render "shared/navigation/navigator" %>
|
||||||
</div>
|
</div>
|
||||||
<div class="sci--layout-navigation-breadcrumbs">
|
<div class="sci--layout-navigation-breadcrumbs">
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<div id="protocols-datatable-spinner">
|
<div id="protocols-datatable-spinner">
|
||||||
<div class="protocols-datatable">
|
<div class="protocols-datatable">
|
||||||
<table id="protocols-table" class="table" data-team-id="<%= @current_team.id %>" data-type="<%= @type %>" data-source="<%= datatable_protocols_path(team: @current_team, type: @type) %>">
|
<table id="protocols-table" class="table" style="width: 100%" data-team-id="<%= @current_team.id %>" data-type="<%= @type %>" data-source="<%= datatable_protocols_path(team: @current_team, type: @type) %>">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th id="select-all">
|
<th id="select-all">
|
||||||
|
|
Loading…
Reference in a new issue