hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-07 01:54:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[DURACOM-195] misc fixes

Browse Source 
(cherry picked from commit 87d3383bba)
This commit is contained in:
Davide Negretti
2024-02-02 13:41:02 +01:00
parent 2f5c3b1267
commit 9518f70b42
11 changed files with 50 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/app/admin/admin-sidebar/admin-sidebar.component.scss
View File

@@ -35,7 +35,7 @@
}
img#admin-sidebar-logo {
width: 20px;
height: var(--ds-admin-sidebar-logo-height);
}
::ng-deep {
@@ -43,17 +43,17 @@
// This class must be applied to any nested wrapper containing a sidebar section
.sidebar-full-width-container {
width: 100%;
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0;
}
// This class must be applied to the innermost block element containing a section or subsection link
// (it can be applied together with `sidebar-collapsible-element-inner-wrapper`)
.sidebar-item {
padding-top: 1rem;
padding-bottom: 1rem;
padding-top: var(--ds-admin-sidebar-item-padding);
padding-bottom: var(--ds-admin-sidebar-item-padding);
}
// These classes handle the collapsing behavior
@@ -89,7 +89,7 @@
& > .sidebar-collapsible-element-inner-wrapper {
min-width: calc(var(--ds-admin-sidebar-collapsible-element-width) - var(--ds-dark-scrollbar-width));
height: 100%;
padding-right: 16px !important;
padding-right: var(--ds-admin-sidebar-item-padding);
}
}
}

2
src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss
View File

@@ -4,7 +4,7 @@
margin: 0;
padding: 0;
::ng-deep .ds-menu-item {
margin-left: 12px;
margin-left: var(--ds-admin-sidebar-section-indent);
}
}

2
src/app/header/header.component.html
View File

@@ -15,7 +15,7 @@
<button class="navbar-toggler px-0" type="button" (click)="toggleNavbar()"
aria-controls="collapsingNav"
aria-expanded="false" [attr.aria-label]="'nav.toggle' | translate">
<span class="navbar-toggler-icon fas fa-bars fa-fw" aria-hidden="true"></span>
<span class="fas fa-bars fa-fw toggler-icon" aria-hidden="true"></span>
</button>
</div>
</nav>

11
src/app/header/header.component.scss
View File

@@ -8,11 +8,6 @@
max-width: 100%;
}
.navbar-toggler .navbar-toggler-icon {
background-image: none !important;
line-height: 1.5;
}
.navbar-toggler {
border: none;
color: var(--ds-header-icon-color);
@@ -20,6 +15,12 @@
&:hover, &:focus {
color: var(--ds-header-icon-color-hover);
}
.toggler-icon {
width: 1.5em;
height: 1.5em;
line-height: 1.5;
}
}
.navbar {

2
src/app/navbar/navbar.component.scss
View File

@@ -1,5 +1,5 @@
:host {
--ds-collapsible-navbar-height: auto;
--ds-expandable-navbar-height: auto;
nav.navbar {
background-color: var(--ds-navbar-bg);

2
src/app/shared/auth-nav-menu/user-menu/user-menu.component.scss
View File

@@ -7,6 +7,6 @@
.ds-menu-item {
display: inline-block;
padding: 0.25rem 0;
padding: var(--ds-user-menu-item-vertical-padding) var(--ds-user-menu-item-horizontal-padding);
}
}

19
src/styles/_custom_variables.scss
View File

@@ -22,15 +22,27 @@
--ds-header-bg: #{$ds-header-bg};
--ds-header-icon-color: #{$ds-header-icon-color};
--ds-header-icon-color-hover: #{$ds-header-icon-color-hover};
--ds-navbar-bg: #{$ds-navbar-bg};
--ds-navbar-item-vertical-padding: 0;
--ds-navbar-item-horizontal-padding: 0.25rem;
--ds-navbar-dropdown-bg: #{$ds-navbar-dropdown-bg};
--ds-header-navbar-border-top-color: #{$ds-header-navbar-border-bottom-color};
--ds-header-navbar-border-bottom-color: #{$ds-header-navbar-border-bottom-color};
--ds-navbar-dropdown-item-vertical-padding: 0.5rem;
--ds-navbar-dropdown-item-horizontal-padding: 1rem;
--ds-navbar-link-color: #{$ds-navbar-link-color};
--ds-navbar-link-color-hover: #{$ds-navbar-link-color-hover};
--ds-header-navbar-border-top-color: #{$ds-header-navbar-border-bottom-color};
--ds-header-navbar-border-bottom-color: #{$ds-header-navbar-border-bottom-color};
--ds-expandable-navbar-bg: #{$ds-expandable-navbar-bg};
--ds-expandable-navbar-link-color: #{$ds-navbar-link-color};
--ds-expandable-navbar-link-color-hover: #{$ds-navbar-link-color-hover};
--ds-expandable-navbar-dropdown-item-vertical-padding: 0.25rem;
--ds-expandable-navbar-dropdown-item-horizontal-padding: 0;
--ds-user-menu-item-vertical-padding: 0.25rem;
--ds-user-menu-item-horizontal-padding: 0;
@include media-breakpoint-up(md) {
--ds-header-logo-height: 50px;
@@ -42,12 +54,15 @@
--ds-admin-sidebar-bg: #{$ds-admin-sidebar-bg};
--ds-admin-sidebar-active-bg: #{$ds-admin-sidebar-active-bg};
--ds-admin-sidebar-header-bg: #{darken($ds-admin-sidebar-bg, 7%)};
--ds-admin-sidebar-logo-height: 20px;
--ds-admin-sidebar-fixed-element-width: #{$ds-admin-sidebar-fixed-element-width};
--ds-admin-sidebar-fixed-element-z-index: 10;
--ds-admin-sidebar-collapsible-element-width: #{$ds-admin-sidebar-collapsible-element-width};
--ds-admin-sidebar-total-width: #{$ds-admin-sidebar-total-width};
--ds-admin-sidebar-link-color: #{$navbar-dark-color};
--ds-admin-sidebar-link-hover-color: #{$navbar-dark-hover-color};
--ds-admin-sidebar-item-padding: 1rem;
--ds-admin-sidebar-section-indent: .75rem;
--ds-dark-scrollbar-bg: #{$ds-admin-sidebar-active-bg};
--ds-dark-scrollbar-alt-bg: #{lighten($ds-admin-sidebar-active-bg, 2%)};

17
src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.scss
View File

@@ -1,7 +1,7 @@
:host {
--ds-header-navbar-border-bottom-style: solid var(--ds-header-navbar-border-bottom-height) var(--ds-header-navbar-border-bottom-color);
--ds-mobile-navbar-border-top-style: solid var(--ds-mobile-navbar-border-top-height) var(--ds-mobile-navbar-border-top-color);
--ds-collapsible-navbar-height: calc(100vh - var(--ds-header-height));
--ds-expandable-navbar-border-top-style: solid var(--ds-expandable-navbar-border-top-height) var(--ds-expandable-navbar-border-top-color);
--ds-expandable-navbar-height: calc(100vh - var(--ds-header-height));
div#header-navbar-wrapper {
// The header-navbar-wrapper should not have a z-index, otherwise it would cover the media viewer despite its higher z-index
@@ -17,7 +17,7 @@
nav#collapsible-mobile-navbar {
// Following parameters are changed by slideMobileNav animation
min-height: var(--ds-collapsible-navbar-height);
min-height: var(--ds-expandable-navbar-height);
height: auto;
border-bottom: var(--ds-header-navbar-border-bottom-style);
}
@@ -42,7 +42,8 @@
height: 100%;
}
.ds-menu-item {
padding: 0.5rem;
// define here the style for top-level navbar menu items
padding: var(--ds-navbar-item-vertical-padding) var(--ds-navbar-item-horizontal-padding);
}
.ds-menu-item, .ds-menu-toggler-wrapper {
color: var(--ds-navbar-link-color) !important;
@@ -54,6 +55,8 @@
// desktop submenu
.dropdown-menu {
.ds-menu-item {
// define here the style for second-level navbar menu items
padding: var(--ds-navbar-dropdown-item-vertical-padding) var(--ds-navbar-dropdown-item-horizontal-padding);
}
}
@@ -61,14 +64,14 @@
nav#collapsible-mobile-navbar {
border-top: var(--ds-mobile-navbar-border-top-style);
padding-top: var(--ds-mobile-navbar-padding-top);
border-top: var(--ds-expandable-navbar-border-top-style);
padding-top: var(--ds-expandable-navbar-padding-top);
::ng-deep {
// mobile menu
.ds-menu-item {
padding: 0.25rem 0;
padding: var(--ds-expandable-navbar-dropdown-item-vertical-padding) var(--ds-expandable-navbar-dropdown-item-horizontal-padding);
}
.ds-menu-item, .ds-menu-toggler-wrapper {

2
src/themes/dspace/app/header/header.component.html
View File

@@ -25,7 +25,7 @@
<div id="mobile-navbar-toggler" class="d-block d-lg-none ml-3" *ngIf="(isMobile$ | async)">
<button id="navbar-toggler" class="btn" type="button" (click)="toggleNavbar()"
[attr.aria-label]="'nav.toggle' | translate" aria-controls="collapsible-mobile-navbar" [attr.aria-expanded]="!(isNavBarCollapsed$ | async)">
<span class="fas fa-bars fa-fw fa-xl" aria-hidden="true"></span>
<span class="fas fa-bars fa-fw fa-xl toggler-icon" aria-hidden="true"></span>
</button>
</div>

2
src/themes/dspace/app/header/header.component.scss
View File

@@ -5,7 +5,7 @@
}
img#header-logo {
height: 40px;
height: var(--ds-header-logo-height);
}
button#navbar-toggler {

6
src/themes/dspace/styles/_theme_css_variable_overrides.scss
View File

@@ -18,7 +18,7 @@
/* set the next two properties as `--ds-header-navbar-border-bottom-*`
in order to keep the bottom border of the header when navbar is expanded */
--ds-mobile-navbar-border-top-color: #{$white};
--ds-mobile-navbar-border-top-height: 0;
--ds-mobile-navbar-padding-top: 0;
--ds-expandable-navbar-border-top-color: #{$white};
--ds-expandable-navbar-border-top-height: 0;
--ds-expandable-navbar-padding-top: 0;
}