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

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

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

@@ -1,72 +1,79 @@
<footer class="top-footer text-lg-start"> <footer class="text-lg-start">
<!-- Grid container --> <div *ngIf="showTopFooter" class="top-footer">
<div *ngIf="showTopFooter" class="container p-4"> <!-- Grid container -->
<!--Grid row--> <div class=" container p-4">
<div class="row"> <!--Grid row-->
<div class="row">
<!--Grid column--> <!--Grid column-->
<div class="col-lg-4 col-md-6 mb-4 mb-lg-0"> <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
<h5 class="text-uppercase">Footer Content</h5> <h5 class="text-uppercase">Footer Content</h5>
<ul class="list-unstyled mb-0"> <ul class="list-unstyled mb-0">
<li> <li>
<a routerLink="./" class="">Lorem ipsum</a> <a routerLink="./" class="">Lorem ipsum</a>
</li> </li>
<li> <li>
<a routerLink="./" class="">Ut facilisis</a> <a routerLink="./" class="">Ut facilisis</a>
</li> </li>
<li> <li>
<a routerLink="./" class="">Aenean sit</a> <a routerLink="./" class="">Aenean sit</a>
</li> </li>
</ul> </ul>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
<h5 class="text-uppercase">Footer Content</h5>
<ul class="list-unstyled mb-0">
<li>
<a routerLink="./" class="">Suspendisse potenti</a>
</li>
</ul>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-4 mb-md-0">
<h5 class="text-uppercase">Footer Content</h5>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste atque ea quis
molestias. Fugiat pariatur maxime quis culpa corporis vitae repudiandae aliquam
voluptatem veniam, est atque cumque eum delectus sint!
</p>
</div>
<!--Grid column-->
</div> </div>
<!--Grid column--> <!--Grid row-->
<!--Grid column-->
<div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
<h5 class="text-uppercase">Footer Content</h5>
<ul class="list-unstyled mb-0">
<li>
<a routerLink="./" class="">Suspendisse potenti</a>
</li>
</ul>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-4 mb-md-0">
<h5 class="text-uppercase">Footer Content</h5>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste atque ea quis
molestias. Fugiat pariatur maxime quis culpa corporis vitae repudiandae aliquam
voluptatem veniam, est atque cumque eum delectus sint!
</p>
</div>
<!--Grid column-->
</div> </div>
<!--Grid row-->
</div> </div>
<!-- Grid container --> <!-- Grid container -->
<!-- Copyright --> <!-- 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"> <div class="content-container">
<p class="m-0"> <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'} }} {{ '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> </p>
<ul class="footer-info list-unstyled small d-flex justify-content-center mb-0"> <ul class="footer-info list-unstyled small d-flex justify-content-center mb-0">
<li> <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>
<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>
<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> </li>
</ul> </ul>
</div> </div>

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

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

10
src/styles/_custom_variables.scss
View File

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