mirror of
https://github.com/DSpace/dspace-angular.git
synced 2025-10-17 15:03:07 +00:00
added custom theming
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
<nav @slideHorizontal class="navbar navbar-dark bg-dark p-0"
|
||||
<nav @slideHorizontal class="navbar navbar-dark p-0"
|
||||
[ngClass]="{'active': sidebarOpen, 'inactive': sidebarClosed}"
|
||||
[@slideSidebar]="{
|
||||
value: (!(sidebarExpanded | async) ? 'collapsed' : 'expanded'),
|
||||
|
@@ -8,6 +8,7 @@ $icon-z-index: 10;
|
||||
height: 100vh;
|
||||
flex: 1 1 auto;
|
||||
nav {
|
||||
background-color: $admin-sidebar-bg;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
> div {
|
||||
@@ -44,7 +45,7 @@ $icon-z-index: 10;
|
||||
.sidebar-section {
|
||||
display: flex;
|
||||
align-content: stretch;
|
||||
background-color: $dark;
|
||||
background-color: $admin-sidebar-bg;
|
||||
.nav-item {
|
||||
padding-top: $spacer;
|
||||
padding-bottom: $spacer;
|
||||
|
@@ -1,3 +1,3 @@
|
||||
:host {
|
||||
color: red;
|
||||
//color: red;
|
||||
}
|
@@ -1,3 +1,3 @@
|
||||
:host-context(.preview-release) {
|
||||
color: green;
|
||||
//color: green;
|
||||
}
|
@@ -9,7 +9,8 @@ import {
|
||||
@Component({
|
||||
selector: 'ds-search-boolean-filter',
|
||||
styleUrls: ['./search-boolean-filter.component.scss'],
|
||||
templateUrl: './search-boolean-filter.component.html',
|
||||
// templateUrl: './search-boolean-filter.component.html',
|
||||
templateUrl: './themes/search-boolean-filter.component.preview-release.html',
|
||||
animations: [facetLoad]
|
||||
})
|
||||
|
||||
|
@@ -0,0 +1,34 @@
|
||||
<div>
|
||||
<div class="filters py-2">
|
||||
<a *ngFor="let value of (selectedValues | async)" class="d-flex flex-row"
|
||||
[routerLink]="[getSearchLink()]"
|
||||
[queryParams]="getRemoveParams(value) | async" queryParamsHandling="merge">
|
||||
<input type="checkbox" [checked]="true" class="my-1 align-self-stretch"/>
|
||||
<span class="filter-value pl-1">{{value}}</span>
|
||||
</a>
|
||||
<ng-container *ngFor="let page of (filterValues$ | async)?.payload">
|
||||
<div [@facetLoad]="animationState">
|
||||
<ng-container *ngFor="let value of page.page; let i=index">
|
||||
<a *ngIf="!(selectedValues | async).includes(value.value)" class="d-flex flex-row"
|
||||
[routerLink]="[getSearchLink()]"
|
||||
[queryParams]="getAddParams(value.value) | async" queryParamsHandling="merge">
|
||||
<input type="checkbox" [checked]="false" class="my-1 align-self-stretch"/>
|
||||
<span class="filter-value px-1">{{value.value}}</span>
|
||||
<span class="float-right filter-value-count ml-auto">
|
||||
<span class="badge badge-primary badge-pill">{{value.count}}</span>
|
||||
</span>
|
||||
</a>
|
||||
</ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
<div class="clearfix toggle-more-filters">
|
||||
<a class="float-left" *ngIf="!(isLastPage$ | async)"
|
||||
(click)="showMore()">{{"search.filters.filter.show-more"
|
||||
| translate}}</a>
|
||||
<a class="float-right" *ngIf="(currentPage | async) > 1"
|
||||
(click)="showFirstPageOnly()">{{"search.filters.filter.show-less"
|
||||
| translate}}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
@@ -0,0 +1,13 @@
|
||||
@import '../../../../styles/variables.scss';
|
||||
@import '../../../../styles/mixins.scss';
|
||||
|
||||
:host {
|
||||
border: 1px solid map-get($theme-colors, light);
|
||||
cursor: pointer;
|
||||
.search-filter-wrapper.closed {
|
||||
overflow: hidden;
|
||||
}
|
||||
.filter-toggle {
|
||||
line-height: $line-height-base;
|
||||
}
|
||||
}
|
@@ -1,13 +1,2 @@
|
||||
@import '../../../../styles/variables.scss';
|
||||
@import '../../../../styles/mixins.scss';
|
||||
|
||||
:host .facet-filter {
|
||||
border: 1px solid map-get($theme-colors, light);
|
||||
cursor: pointer;
|
||||
.search-filter-wrapper.closed {
|
||||
overflow: hidden;
|
||||
}
|
||||
.filter-toggle {
|
||||
line-height: $line-height-base;
|
||||
}
|
||||
}
|
||||
@import './search-filter.component.default';
|
||||
@import './themes/*.scss';
|
@@ -14,7 +14,8 @@ import { SEARCH_CONFIG_SERVICE } from '../../../+my-dspace-page/my-dspace-page.c
|
||||
@Component({
|
||||
selector: 'ds-search-filter',
|
||||
styleUrls: ['./search-filter.component.scss'],
|
||||
templateUrl: './search-filter.component.html',
|
||||
// templateUrl: './search-filter.component.html',
|
||||
templateUrl: './themes/search-filter.component.preview-release.html',
|
||||
animations: [slide],
|
||||
})
|
||||
|
||||
|
@@ -9,7 +9,8 @@ import {
|
||||
@Component({
|
||||
selector: 'ds-search-hierarchy-filter',
|
||||
styleUrls: ['./search-hierarchy-filter.component.scss'],
|
||||
templateUrl: './search-hierarchy-filter.component.html',
|
||||
// templateUrl: './search-hierarchy-filter.component.html',
|
||||
templateUrl: './themes/search-hierarchy-filter.component.preview-release.html',
|
||||
animations: [facetLoad]
|
||||
})
|
||||
|
||||
|
@@ -0,0 +1,43 @@
|
||||
<div>
|
||||
<div class="filters py-2">
|
||||
<a *ngFor="let value of (selectedValues | async)" class="d-flex flex-row"
|
||||
[routerLink]="[getSearchLink()]"
|
||||
[queryParams]="getRemoveParams(value) | async" queryParamsHandling="merge">
|
||||
<input type="checkbox" [checked]="true" class="my-1 align-self-stretch"/>
|
||||
<span class="filter-value pl-1">{{value}}</span>
|
||||
</a>
|
||||
<ng-container *ngFor="let page of (filterValues$ | async)?.payload">
|
||||
<div [@facetLoad]="animationState">
|
||||
<ng-container *ngFor="let value of page.page; let i=index">
|
||||
<a *ngIf="!(selectedValues | async).includes(value.value)" class="d-flex flex-row"
|
||||
[routerLink]="[getSearchLink()]"
|
||||
[queryParams]="getAddParams(value.value) | async" queryParamsHandling="merge" >
|
||||
<input type="checkbox" [checked]="false" class="my-1 align-self-stretch"/>
|
||||
<span class="filter-value px-1">{{value.value}}</span>
|
||||
<span class="float-right filter-value-count ml-auto">
|
||||
<span class="badge badge-primary badge-pill">{{value.count}}</span>
|
||||
</span>
|
||||
</a>
|
||||
</ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
<div class="clearfix toggle-more-filters">
|
||||
<a class="float-left" *ngIf="!(isLastPage$ | async)"
|
||||
(click)="showMore()">{{"search.filters.filter.show-more"
|
||||
| translate}}</a>
|
||||
<a class="float-right" *ngIf="(currentPage | async) > 1"
|
||||
(click)="showFirstPageOnly()">{{"search.filters.filter.show-less"
|
||||
| translate}}</a>
|
||||
</div>
|
||||
</div>
|
||||
<ds-input-suggestions [suggestions]="(filterSearchResults | async)"
|
||||
[placeholder]="'search.filters.filter.' + filterConfig.name + '.placeholder'| translate"
|
||||
[action]="getCurrentUrl()"
|
||||
[name]="filterConfig.paramName"
|
||||
[(ngModel)]="filter"
|
||||
(submitSuggestion)="onSubmit($event)"
|
||||
(clickSuggestion)="onClick($event)"
|
||||
(findSuggestions)="findSuggestions($event)"
|
||||
ngDefaultControl
|
||||
></ds-input-suggestions>
|
||||
</div>
|
@@ -42,7 +42,8 @@ const dateFormats = ['YYYY', 'YYYY-MM', 'YYYY-MM-DD'];
|
||||
@Component({
|
||||
selector: 'ds-search-range-filter',
|
||||
styleUrls: ['./search-range-filter.component.scss'],
|
||||
templateUrl: './search-range-filter.component.html',
|
||||
// templateUrl: './search-range-filter.component.html',
|
||||
templateUrl: './themes/search-range-filter.component.preview-release.html',
|
||||
animations: [facetLoad]
|
||||
})
|
||||
|
||||
|
@@ -0,0 +1,40 @@
|
||||
<div>
|
||||
<div class="filters py-2">
|
||||
<form #form="ngForm" (ngSubmit)="onSubmit()" class="add-filter row"
|
||||
[action]="getCurrentUrl()">
|
||||
<div class="col-6">
|
||||
<input type="text" [(ngModel)]="range[0]" [name]="filterConfig.paramName + '.min'"
|
||||
class="form-control" (blur)="onSubmit()"
|
||||
aria-label="Mininum value"
|
||||
[placeholder]="'search.filters.filter.' + filterConfig.name + '.min.placeholder'| translate"/>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<input type="text" [(ngModel)]="range[1]" [name]="filterConfig.paramName + '.max'"
|
||||
class="form-control" (blur)="onSubmit()"
|
||||
aria-label="Maximum value"
|
||||
[placeholder]="'search.filters.filter.' + filterConfig.name + '.max.placeholder'| translate"/>
|
||||
</div>
|
||||
<input type="submit" class="d-none"/>
|
||||
</form>
|
||||
|
||||
<ng-container *ngIf="shouldShowSlider()">
|
||||
<nouislider [connect]="true" [min]="min" [max]="max" [step]="1"
|
||||
[(ngModel)]="range" (change)="onSubmit()" ngDefaultControl></nouislider>
|
||||
|
||||
</ng-container>
|
||||
<ng-container *ngFor="let page of (filterValues$ | async)?.payload">
|
||||
<div [@facetLoad]="animationState">
|
||||
<ng-container *ngFor="let value of page.page; let i=index">
|
||||
<a *ngIf="!(selectedValues | async).includes(value.value)" class="d-flex flex-row"
|
||||
[routerLink]="[getSearchLink()]"
|
||||
[queryParams]="getChangeParams(value.value) | async" queryParamsHandling="merge">
|
||||
<span class="filter-value px-1">{{value.value}}</span>
|
||||
<span class="float-right filter-value-count ml-auto">
|
||||
<span class="badge badge-primary badge-pill">{{value.count}}</span>
|
||||
</span>
|
||||
</a>
|
||||
</ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
@@ -15,7 +15,8 @@ import { renderFacetFor } from '../search-filter-type-decorator';
|
||||
@Component({
|
||||
selector: 'ds-search-text-filter',
|
||||
styleUrls: ['./search-text-filter.component.scss'],
|
||||
templateUrl: './search-text-filter.component.html',
|
||||
// templateUrl: './search-text-filter.component.html',
|
||||
templateUrl: './themes/search-text-filter.component.preview-release.html',
|
||||
animations: [facetLoad]
|
||||
})
|
||||
|
||||
|
@@ -0,0 +1,45 @@
|
||||
<div>
|
||||
<div class="filters py-2">
|
||||
<a *ngFor="let value of (selectedValues | async)" class="d-flex flex-row"
|
||||
[routerLink]="[getSearchLink()]"
|
||||
[queryParams]="getRemoveParams(value) | async" queryParamsHandling="merge">
|
||||
<input type="checkbox" [checked]="true" class="my-1 align-self-stretch"/>
|
||||
<span class="filter-value pl-1">{{value}}</span>
|
||||
</a>
|
||||
<ng-container *ngVar="(filterValues$ | async) as filterValuesRD">
|
||||
<div [@facetLoad]="animationState">
|
||||
<ng-container *ngFor="let page of filterValuesRD?.payload">
|
||||
<ng-container *ngFor="let value of page.page; let i=index">
|
||||
<a *ngIf="!(selectedValues | async).includes(value.value)" class="d-flex flex-row"
|
||||
[routerLink]="[getSearchLink()]"
|
||||
[queryParams]="getAddParams(value.value) | async" queryParamsHandling="merge" >
|
||||
<input type="checkbox" [checked]="false" class="my-1 align-self-stretch"/>
|
||||
<span class="filter-value px-1">{{value.value}}</span>
|
||||
<span class="float-right filter-value-count ml-auto">
|
||||
<span class="badge badge-primary badge-pill">{{value.count}}</span>
|
||||
</span>
|
||||
</a>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
<div class="clearfix toggle-more-filters">
|
||||
<a class="float-left" *ngIf="!(isLastPage$ | async)"
|
||||
(click)="showMore()">{{"search.filters.filter.show-more"
|
||||
| translate}}</a>
|
||||
<a class="float-right" *ngIf="(currentPage | async) > 1"
|
||||
(click)="showFirstPageOnly()">{{"search.filters.filter.show-less"
|
||||
| translate}}</a>
|
||||
</div>
|
||||
</div>
|
||||
<ds-input-suggestions [suggestions]="(filterSearchResults | async)"
|
||||
[placeholder]="'search.filters.filter.' + filterConfig.name + '.placeholder'| translate"
|
||||
[action]="getCurrentUrl()"
|
||||
[name]="filterConfig.paramName"
|
||||
[(ngModel)]="filter"
|
||||
(submitSuggestion)="onSubmit($event)"
|
||||
(clickSuggestion)="onClick($event)"
|
||||
(findSuggestions)="findSuggestions($event)"
|
||||
ngDefaultControl
|
||||
></ds-input-suggestions>
|
||||
</div>
|
@@ -0,0 +1,7 @@
|
||||
<div>
|
||||
<div (click)="toggle()" class="filter-name"><h5 class="d-inline-block mb-0">{{'search.filters.filter.' + filter.name + '.head'| translate}}</h5> <span class="filter-toggle fas float-right text-info"
|
||||
[ngClass]="(isCollapsed() | async) ? 'fa-caret-down' : 'fa-caret-up'"></span></div>
|
||||
<div [@slide]="(isCollapsed() | async) ? 'collapsed' : 'expanded'" (@slide.start)="startSlide($event)" (@slide.done)="finishSlide($event)" class="search-filter-wrapper" [ngClass]="{'closed' : collapsed}">
|
||||
<ds-search-facet-filter-wrapper [filterConfig]="filter"></ds-search-facet-filter-wrapper>
|
||||
</div>
|
||||
</div>
|
@@ -0,0 +1,11 @@
|
||||
@import '../../../../../styles/variables.scss';
|
||||
@import '../../../../../styles/mixins.scss';
|
||||
|
||||
:host-context(.preview-release) {
|
||||
background-color: map-get($theme-colors, light);
|
||||
border-radius: $border-radius;
|
||||
|
||||
h5 {
|
||||
font-size: 1.1rem
|
||||
}
|
||||
}
|
@@ -14,7 +14,7 @@ import { SEARCH_CONFIG_SERVICE } from '../../+my-dspace-page/my-dspace-page.comp
|
||||
@Component({
|
||||
selector: 'ds-search-filters',
|
||||
styleUrls: ['./search-filters.component.scss'],
|
||||
templateUrl: './search-filters.component.html',
|
||||
templateUrl: './themes/search-filters.component.preview-release.html',
|
||||
})
|
||||
|
||||
/**
|
||||
|
@@ -0,0 +1,7 @@
|
||||
<h3>{{"search.filters.head" | translate}}</h3>
|
||||
<div *ngIf="(filters | async)?.hasSucceeded">
|
||||
<div *ngFor="let filter of (filters | async)?.payload">
|
||||
<ds-search-filter *ngIf="isActive(filter) | async" class="d-block mb-3 px-3 py-2" [filter]="filter"></ds-search-filter>
|
||||
</div>
|
||||
</div>
|
||||
<a class="btn btn-primary" [routerLink]="[getSearchLink()]" [queryParams]="clearParams | async" queryParamsHandling="merge" role="button">{{"search.filters.reset" | translate}}</a>
|
@@ -0,0 +1,5 @@
|
||||
@import '../../../styles/variables.scss';
|
||||
|
||||
.setting-option {
|
||||
border: 1px solid map-get($theme-colors, light);
|
||||
}
|
@@ -1,5 +1,2 @@
|
||||
@import '../../../styles/variables.scss';
|
||||
|
||||
.setting-option {
|
||||
border: 1px solid map-get($theme-colors, light);
|
||||
}
|
||||
@import './search-settings.component.default';
|
||||
@import './themes/*.scss';
|
@@ -10,7 +10,8 @@ import { SEARCH_CONFIG_SERVICE } from '../../+my-dspace-page/my-dspace-page.comp
|
||||
@Component({
|
||||
selector: 'ds-search-settings',
|
||||
styleUrls: ['./search-settings.component.scss'],
|
||||
templateUrl: './search-settings.component.html'
|
||||
// templateUrl: './search-settings.component.html'
|
||||
templateUrl: './themes/search-settings.component.preview-release.html'
|
||||
})
|
||||
|
||||
/**
|
||||
@@ -20,7 +21,7 @@ export class SearchSettingsComponent implements OnInit {
|
||||
|
||||
/**
|
||||
* The configuration for the current paginated search results
|
||||
*/
|
||||
*/
|
||||
searchOptions$: Observable<PaginatedSearchOptions>;
|
||||
|
||||
/**
|
||||
|
@@ -0,0 +1,24 @@
|
||||
<ng-container *ngVar="(searchOptions$ | async) as config">
|
||||
<h3>{{ 'search.sidebar.settings.title' | translate}}</h3>
|
||||
<div *ngIf="config?.sort" class="setting-option result-order-settings mb-3 px-3 py-2">
|
||||
<h5 class="mb-0">{{ 'search.sidebar.settings.sort-by' | translate}}</h5>
|
||||
<select class="form-control my-2" (change)="reloadOrder($event)">
|
||||
<option *ngFor="let sortOption of searchOptionPossibilities"
|
||||
[value]="sortOption.field + ',' + sortOption.direction.toString()"
|
||||
[selected]="sortOption.field === config?.sort.field && sortOption.direction === (config?.sort.direction)? 'selected': null">
|
||||
{{'sorting.' + sortOption.field + '.' + sortOption.direction | translate}}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="setting-option page-size-settings mb-3 px-3 py-2">
|
||||
<h5 class="mb-0">{{ 'search.sidebar.settings.rpp' | translate}}</h5>
|
||||
<select class="form-control my-2" (change)="reloadRPP($event)">
|
||||
<option *ngFor="let pageSizeOption of config?.pagination.pageSizeOptions"
|
||||
[value]="pageSizeOption"
|
||||
[selected]="pageSizeOption === +config?.pagination.pageSize ? 'selected': null">
|
||||
{{pageSizeOption}}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</ng-container>
|
@@ -0,0 +1,10 @@
|
||||
@import '../../../../styles/variables.scss';
|
||||
|
||||
:host-context(.preview-release) .setting-option {
|
||||
background-color: map-get($theme-colors, light);
|
||||
border-radius: $border-radius;
|
||||
|
||||
h5 {
|
||||
font-size: 1.1rem
|
||||
}
|
||||
}
|
12
src/app/header/header.component.default.scss
Normal file
12
src/app/header/header.component.default.scss
Normal file
@@ -0,0 +1,12 @@
|
||||
@import '../../styles/variables.scss';
|
||||
|
||||
.navbar-brand img {
|
||||
height: $header-logo-height;
|
||||
@media screen and (max-width: map-get($grid-breakpoints, sm)) {
|
||||
height: $header-logo-height-xs;
|
||||
}
|
||||
}
|
||||
.navbar-toggler .navbar-toggler-icon {
|
||||
background-image: none !important;
|
||||
line-height: 1.5;
|
||||
}
|
@@ -1,7 +1,7 @@
|
||||
<header>
|
||||
<div class="container">
|
||||
<a class="navbar-brand my-2" routerLink="/home">
|
||||
<img src="assets/images/dspace-logo.svg"/>
|
||||
<img src="assets/images/dspace-logo-monochrome.svg"/>
|
||||
</a>
|
||||
|
||||
<nav class="navbar navbar-light navbar-expand-md float-right px-0">
|
||||
|
@@ -1,12 +1,2 @@
|
||||
@import '../../styles/variables.scss';
|
||||
|
||||
.navbar-brand img {
|
||||
height: $header-logo-height;
|
||||
@media screen and (max-width: map-get($grid-breakpoints, sm)) {
|
||||
height: $header-logo-height-xs;
|
||||
}
|
||||
}
|
||||
.navbar-toggler .navbar-toggler-icon {
|
||||
background-image: none !important;
|
||||
line-height: 1.5;
|
||||
}
|
||||
@import './header.component.default';
|
||||
@import './themes/*.scss';
|
@@ -0,0 +1,7 @@
|
||||
@import '../../../styles/variables.scss';
|
||||
|
||||
:host-context(.preview-release) {
|
||||
::ng-deep a {
|
||||
color: $dark;
|
||||
}
|
||||
}
|
39
src/app/navbar/navbar.component.default.scss
Normal file
39
src/app/navbar/navbar.component.default.scss
Normal file
@@ -0,0 +1,39 @@
|
||||
@import '../../styles/variables.scss';
|
||||
|
||||
nav.navbar {
|
||||
border-bottom: 1px $gray-400 solid;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
/** Mobile menu styling **/
|
||||
@media screen and (max-width: map-get($grid-breakpoints, md)) {
|
||||
.navbar {
|
||||
width: 100%;
|
||||
background-color: $white;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
&.open {
|
||||
height: 100vh; //doesn't matter because wrapper is sticky
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: map-get($grid-breakpoints, md)) {
|
||||
.reset-padding-md {
|
||||
margin-left: -$spacer/2;
|
||||
margin-right: -$spacer/2;
|
||||
}
|
||||
}
|
||||
|
||||
/* TODO remove when https://github.com/twbs/bootstrap/issues/24726 is fixed */
|
||||
.navbar-expand-md.navbar-container {
|
||||
@media screen and (max-width: map-get($grid-breakpoints, md)) {
|
||||
> .container {
|
||||
padding: 0 $spacer;
|
||||
}
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
@@ -1,39 +1,3 @@
|
||||
@import '../../styles/variables.scss';
|
||||
|
||||
nav.navbar {
|
||||
border-bottom: 1px $gray-400 solid;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
/** Mobile menu styling **/
|
||||
@media screen and (max-width: map-get($grid-breakpoints, md)) {
|
||||
.navbar {
|
||||
width: 100%;
|
||||
background-color: $white;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
&.open {
|
||||
height: 100vh; //doesn't matter because wrapper is sticky
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: map-get($grid-breakpoints, md)) {
|
||||
.reset-padding-md {
|
||||
margin-left: -$spacer/2;
|
||||
margin-right: -$spacer/2;
|
||||
}
|
||||
}
|
||||
|
||||
/* TODO remove when https://github.com/twbs/bootstrap/issues/24726 is fixed */
|
||||
.navbar-expand-md.navbar-container {
|
||||
@media screen and (max-width: map-get($grid-breakpoints, md)) {
|
||||
> .container {
|
||||
padding: 0 $spacer;
|
||||
}
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@import './navbar.component.default';
|
||||
@import './themes/*.scss';
|
||||
|
||||
|
@@ -13,7 +13,8 @@ import { HostWindowService } from '../shared/host-window.service';
|
||||
@Component({
|
||||
selector: 'ds-navbar',
|
||||
styleUrls: ['navbar.component.scss'],
|
||||
templateUrl: 'navbar.component.html',
|
||||
// templateUrl: './navbar.component.html',
|
||||
templateUrl: './themes/navbar.component.preview-release.html',
|
||||
animations: [slideMobileNav]
|
||||
})
|
||||
export class NavbarComponent extends MenuComponent implements OnInit {
|
||||
|
16
src/app/navbar/themes/navbar.component.preview-release.html
Normal file
16
src/app/navbar/themes/navbar.component.preview-release.html
Normal file
@@ -0,0 +1,16 @@
|
||||
<nav [ngClass]="{'open': !(menuCollapsed | async)}"
|
||||
[@slideMobileNav]="!(windowService.isXsOrSm() | async) ? 'default' : ((menuCollapsed | async) ? 'collapsed' : 'expanded')"
|
||||
class="navbar navbar-dark bg-info navbar-expand-md p-md-0 navbar-container"> <!-- TODO remove navbar-container class when https://github.com/twbs/bootstrap/issues/24726 is fixed -->
|
||||
<div class="container">
|
||||
<div class="reset-padding-md w-100">
|
||||
<div id="collapsingNav">
|
||||
<ul class="navbar-nav mr-auto shadow-none">
|
||||
<ng-container *ngFor="let section of (sections | async)">
|
||||
<ng-container
|
||||
*ngComponentOutlet="sectionComponents.get(section.id); injector: sectionInjectors.get(section.id);"></ng-container>
|
||||
</ng-container>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
@@ -0,0 +1,7 @@
|
||||
@import '../../styles/variables.scss';
|
||||
|
||||
nav.navbar {
|
||||
border-bottom: 5px $dark solid;
|
||||
}
|
||||
|
||||
|
@@ -14,7 +14,8 @@ import { MYDSPACE_ROUTE } from '../../+my-dspace-page/my-dspace-page.component';
|
||||
@Component({
|
||||
selector: 'ds-search-form',
|
||||
styleUrls: ['./search-form.component.scss'],
|
||||
templateUrl: './search-form.component.html'
|
||||
// templateUrl: './search-form.component.html',
|
||||
templateUrl: './themes/search-form.component.preview-release.html'
|
||||
})
|
||||
|
||||
/**
|
||||
|
@@ -0,0 +1,16 @@
|
||||
<form #form="ngForm" (ngSubmit)="onSubmit(form.value)" class="row" action="/search">
|
||||
<div *ngIf="isNotEmpty(scopes)" class="col-12 col-sm-3">
|
||||
<select [(ngModel)]="scope" name="scope" class="form-control" aria-label="Search scope" (change)="onScopeChange($event.target.value)">
|
||||
<option value>{{'search.form.search_dspace' | translate}}</option>
|
||||
<option *ngFor="let scopeOption of scopes" [value]="scopeOption.id">{{scopeOption?.name ? scopeOption.name : 'search.form.search_dspace' | translate}}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div [ngClass]="{'col-sm-9': isNotEmpty(scopes)}" class="col-12">
|
||||
<div class="form-group input-group">
|
||||
<input type="text" [(ngModel)]="query" name="query" class="form-control" aria-label="Search input">
|
||||
<span class="input-group-append">
|
||||
<button type="submit" class="search-button btn btn-primary">{{ ('search.form.search' | translate) }}</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
@@ -20,9 +20,9 @@ $sidebar-z-index: 20;
|
||||
$header-logo-height: 80px;
|
||||
$header-logo-height-xs: 50px;
|
||||
|
||||
$admin-sidebar-bg: $dark;
|
||||
$admin-sidebar-active-bg: darken($dark, 3%);
|
||||
$admin-sidebar-header-bg: darken($dark, 7%);
|
||||
$admin-sidebar-bg: darken(#2B4E72, 17%);
|
||||
$admin-sidebar-active-bg: darken($admin-sidebar-bg, 3%);
|
||||
$admin-sidebar-header-bg: darken($admin-sidebar-bg, 7%);
|
||||
|
||||
$dark-scrollbar-background: $admin-sidebar-active-bg;
|
||||
$dark-scrollbar-foreground: #47495d;
|
||||
|
@@ -1,5 +1,7 @@
|
||||
@import '_functions.scss';
|
||||
@import '../../node_modules/bootstrap/scss/functions.scss';
|
||||
@import 'themes/bootstrap_variables.preview-release.scss';
|
||||
@import 'bootstrap_variables.scss';
|
||||
@import '../../node_modules/bootstrap/scss/variables.scss';
|
||||
@import 'themes/custom_variables.preview-release.scss';
|
||||
@import 'custom_variables.scss';
|
14
src/styles/themes/_bootstrap_variables.preview-release.scss
Normal file
14
src/styles/themes/_bootstrap_variables.preview-release.scss
Normal file
@@ -0,0 +1,14 @@
|
||||
$gray-100: #e8ebf3 !default; // #eee
|
||||
$gray-800: #444444 !default; // #444
|
||||
|
||||
$navbar-dark-color: #FFFFFF;
|
||||
|
||||
/* Reassign color vars to semantic color scheme */
|
||||
$blue: #43515f !default;
|
||||
$green: #92C642 !default;
|
||||
$cyan: #56ab9c !default;
|
||||
$yellow: #ec9433 !default;
|
||||
$red: #CF4444 !default;
|
||||
$dark: #43515f !default;
|
||||
|
||||
$body-color: $gray-800 !default;
|
Reference in New Issue
Block a user