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

[DURACOM-195] misc fixes

Browse Source
This commit is contained in:
Davide Negretti
2024-02-02 13:41:02 +01:00
parent 6d82c77c00
commit 87d3383bba
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 { img#admin-sidebar-logo {
width: 20px; height: var(--ds-admin-sidebar-logo-height);
} }
::ng-deep { ::ng-deep {
@@ -43,17 +43,17 @@
// This class must be applied to any nested wrapper containing a sidebar section // This class must be applied to any nested wrapper containing a sidebar section
.sidebar-full-width-container { .sidebar-full-width-container {
width: 100%; width: 100%;
padding-left: 0 !important; padding-left: 0;
padding-right: 0 !important; padding-right: 0;
margin-left: 0 !important; margin-left: 0;
margin-right: 0 !important; margin-right: 0;
} }
// This class must be applied to the innermost block element containing a section or subsection link // 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`) // (it can be applied together with `sidebar-collapsible-element-inner-wrapper`)
.sidebar-item { .sidebar-item {
padding-top: 1rem; padding-top: var(--ds-admin-sidebar-item-padding);
padding-bottom: 1rem; padding-bottom: var(--ds-admin-sidebar-item-padding);
} }
// These classes handle the collapsing behavior // These classes handle the collapsing behavior
@@ -89,7 +89,7 @@
& > .sidebar-collapsible-element-inner-wrapper { & > .sidebar-collapsible-element-inner-wrapper {
min-width: calc(var(--ds-admin-sidebar-collapsible-element-width) - var(--ds-dark-scrollbar-width)); min-width: calc(var(--ds-admin-sidebar-collapsible-element-width) - var(--ds-dark-scrollbar-width));
height: 100%; 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; margin: 0;
padding: 0; padding: 0;
::ng-deep .ds-menu-item { ::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()" <button class="navbar-toggler px-0" type="button" (click)="toggleNavbar()"
aria-controls="collapsingNav" aria-controls="collapsingNav"
aria-expanded="false" [attr.aria-label]="'nav.toggle' | translate"> 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> </button>
</div> </div>
</nav> </nav>

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

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

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

@@ -1,5 +1,5 @@
:host { :host {
--ds-collapsible-navbar-height: auto; --ds-expandable-navbar-height: auto;
nav.navbar { nav.navbar {
background-color: var(--ds-navbar-bg); 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 { .ds-menu-item {
display: inline-block; 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-bg: #{$ds-header-bg};
--ds-header-icon-color: #{$ds-header-icon-color}; --ds-header-icon-color: #{$ds-header-icon-color};
--ds-header-icon-color-hover: #{$ds-header-icon-color-hover}; --ds-header-icon-color-hover: #{$ds-header-icon-color-hover};
--ds-navbar-bg: #{$ds-navbar-bg}; --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-navbar-dropdown-bg: #{$ds-navbar-dropdown-bg};
--ds-header-navbar-border-top-color: #{$ds-header-navbar-border-bottom-color}; --ds-navbar-dropdown-item-vertical-padding: 0.5rem;
--ds-header-navbar-border-bottom-color: #{$ds-header-navbar-border-bottom-color}; --ds-navbar-dropdown-item-horizontal-padding: 1rem;
--ds-navbar-link-color: #{$ds-navbar-link-color}; --ds-navbar-link-color: #{$ds-navbar-link-color};
--ds-navbar-link-color-hover: #{$ds-navbar-link-color-hover}; --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-bg: #{$ds-expandable-navbar-bg};
--ds-expandable-navbar-link-color: #{$ds-navbar-link-color}; --ds-expandable-navbar-link-color: #{$ds-navbar-link-color};
--ds-expandable-navbar-link-color-hover: #{$ds-navbar-link-color-hover}; --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) { @include media-breakpoint-up(md) {
--ds-header-logo-height: 50px; --ds-header-logo-height: 50px;
@@ -42,12 +54,15 @@
--ds-admin-sidebar-bg: #{$ds-admin-sidebar-bg}; --ds-admin-sidebar-bg: #{$ds-admin-sidebar-bg};
--ds-admin-sidebar-active-bg: #{$ds-admin-sidebar-active-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-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-width: #{$ds-admin-sidebar-fixed-element-width};
--ds-admin-sidebar-fixed-element-z-index: 10; --ds-admin-sidebar-fixed-element-z-index: 10;
--ds-admin-sidebar-collapsible-element-width: #{$ds-admin-sidebar-collapsible-element-width}; --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-total-width: #{$ds-admin-sidebar-total-width};
--ds-admin-sidebar-link-color: #{$navbar-dark-color}; --ds-admin-sidebar-link-color: #{$navbar-dark-color};
--ds-admin-sidebar-link-hover-color: #{$navbar-dark-hover-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-bg: #{$ds-admin-sidebar-active-bg};
--ds-dark-scrollbar-alt-bg: #{lighten($ds-admin-sidebar-active-bg, 2%)}; --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 { :host {
--ds-header-navbar-border-bottom-style: solid var(--ds-header-navbar-border-bottom-height) var(--ds-header-navbar-border-bottom-color); --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-expandable-navbar-border-top-style: solid var(--ds-expandable-navbar-border-top-height) var(--ds-expandable-navbar-border-top-color);
--ds-collapsible-navbar-height: calc(100vh - var(--ds-header-height)); --ds-expandable-navbar-height: calc(100vh - var(--ds-header-height));
div#header-navbar-wrapper { 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 // 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 { nav#collapsible-mobile-navbar {
// Following parameters are changed by slideMobileNav animation // Following parameters are changed by slideMobileNav animation
min-height: var(--ds-collapsible-navbar-height); min-height: var(--ds-expandable-navbar-height);
height: auto; height: auto;
border-bottom: var(--ds-header-navbar-border-bottom-style); border-bottom: var(--ds-header-navbar-border-bottom-style);
} }
@@ -42,7 +42,8 @@
height: 100%; height: 100%;
} }
.ds-menu-item { .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 { .ds-menu-item, .ds-menu-toggler-wrapper {
color: var(--ds-navbar-link-color) !important; color: var(--ds-navbar-link-color) !important;
@@ -54,6 +55,8 @@
// desktop submenu // desktop submenu
.dropdown-menu { .dropdown-menu {
.ds-menu-item { .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 { nav#collapsible-mobile-navbar {
border-top: var(--ds-mobile-navbar-border-top-style); border-top: var(--ds-expandable-navbar-border-top-style);
padding-top: var(--ds-mobile-navbar-padding-top); padding-top: var(--ds-expandable-navbar-padding-top);
::ng-deep { ::ng-deep {
// mobile menu // mobile menu
.ds-menu-item { .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 { .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)"> <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()" <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)"> [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> </button>
</div> </div>

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

@@ -5,7 +5,7 @@
} }
img#header-logo { img#header-logo {
height: 40px; height: var(--ds-header-logo-height);
} }
button#navbar-toggler { 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-*` /* 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 */ in order to keep the bottom border of the header when navbar is expanded */
--ds-mobile-navbar-border-top-color: #{$white}; --ds-expandable-navbar-border-top-color: #{$white};
--ds-mobile-navbar-border-top-height: 0; --ds-expandable-navbar-border-top-height: 0;
--ds-mobile-navbar-padding-top: 0; --ds-expandable-navbar-padding-top: 0;
} }