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

improve structure double footer

Browse Source
This commit is contained in:
Art Lowel
2021-06-04 10:35:42 +02:00
parent 2ddda1c766
commit f2a29a6425
3 changed files with 75 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/app/footer/footer.component.html
View File

@@ -1,6 +1,7 @@
<footer class="top-footer text-lg-start">
<footer class="text-lg-start">
<div *ngIf="showTopFooter" class="top-footer">
<!-- Grid container -->
<div *ngIf="showTopFooter" class="container p-4">
<div class=" container p-4">
<!--Grid row-->
<div class="row">
@@ -48,25 +49,31 @@
</div>
<!--Grid row-->
</div>
</div>
<!-- Grid container -->
<!-- Copyright -->
<div class="footer p-1 d-flex justify-content-center align-items-center text-white">
<div class="bottom-footer p-1 d-flex justify-content-center align-items-center text-white">
<div class="content-container">
<p class="m-0">
<a class="text-white" href="http://www.dspace.org/">{{ 'footer.link.dspace' | translate}}</a>
<a class="text-white"
href="http://www.dspace.org/">{{ 'footer.link.dspace' | translate}}</a>
{{ 'footer.copyright' | translate:{year: dateObj | date:'y'} }}
<a class="text-white" href="https://www.lyrasis.org/">{{ 'footer.link.lyrasis' | translate}}</a>
<a class="text-white"
href="https://www.lyrasis.org/">{{ 'footer.link.lyrasis' | translate}}</a>
</p>
<ul class="footer-info list-unstyled small d-flex justify-content-center mb-0">
<li>
<a class="text-white" href="#" (click)="showCookieSettings()">{{ 'footer.link.cookies' | translate}}</a>
<a class="text-white" href="#"
(click)="showCookieSettings()">{{ 'footer.link.cookies' | translate}}</a>
</li>
<li>
<a class="text-white" routerLink="info/privacy">{{ 'footer.link.privacy-policy' | translate}}</a>
<a class="text-white"
routerLink="info/privacy">{{ 'footer.link.privacy-policy' | translate}}</a>
</li>
<li>
<a class="text-white" routerLink="info/end-user-agreement">{{ 'footer.link.end-user-agreement' | translate}}</a>
<a class="text-white"
routerLink="info/end-user-agreement">{{ 'footer.link.end-user-agreement' | translate}}</a>
</li>
</ul>
</div>

19
src/app/footer/footer.component.scss
View File

@@ -1,11 +1,10 @@
:host {
.top-footer {
background-color: var(--ds-top-footer-bg);
border-top: var(--ds-footer-border);
footer {
background-color: var(--ds-footer-bg);
text-align: center;
padding: var(--ds-footer-padding);
z-index: var(--ds-footer-z-index);
border-top: var(--ds-footer-border);
padding: var(--ds-footer-padding);
p {
margin: 0;
@@ -15,12 +14,18 @@
height: var(--ds-footer-logo-height);
}
.footer {
background-color: var(--ds-footer-bg);
.top-footer {
background-color: var(--ds-top-footer-bg);
padding: var(--ds-footer-padding);
margin: calc(var(--ds-footer-padding) * -1);
}
.bottom-footer {
ul {
li {
display: inline-flex;
a {
padding: 0 calc(var(--bs-spacer) / 2);
color: inherit

10
src/styles/_custom_variables.scss
View File

@@ -61,12 +61,12 @@
--ds-sidebar-items-width: #{$sidebar-items-width};
--ds-total-sidebar-width: #{$total-sidebar-width};
--ds-top-footer-bg: #{$gray-200} !important;
--ds-footer-bg: #{theme-color('primary')} !important;
--ds-top-footer-bg: #{$gray-200};
--ds-footer-bg: #{theme-color('primary')};
--ds-footer-border: 1px solid var(--bs-gray-400);
--ds-footer-padding: 0 !important;
--ds-footer-padding-bottom: 0 !important;
--ds-footer-logo-height: 50px !important;
--ds-footer-padding: 0;
--ds-footer-padding-bottom: 0;
--ds-footer-logo-height: 50px;
$home-news-link-color: $cyan;
--ds-home-news-link-color: #{$home-news-link-color};