Skip to content

Commit 8443714

Browse files
jesielvianajesielviana
committed
fix: footer and download button responsiveness
1 parent 9b5d008 commit 8443714

File tree

6 files changed

+261
-174
lines changed

6 files changed

+261
-174
lines changed

‎src/app/footer/footer.component.html‎

Lines changed: 90 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,113 @@
11
<footer>
22
@if (showTopFooter) {
3-
<div class="top-footer">
4-
<!-- Grid container -->
5-
<div class=" container p-4">
6-
<!--Grid row-->
7-
<div class="row">
8-
<!--Grid column-->
9-
<div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
10-
<h5 class="text-uppercase">Footer Content</h5>
11-
<ul class="list-unstyled mb-0">
12-
<li>
13-
<a routerLink="./" class="">Lorem ipsum</a>
14-
</li>
15-
<li>
16-
<a routerLink="./" class="">Ut facilisis</a>
17-
</li>
18-
<li>
19-
<a routerLink="./" class="">Aenean sit</a>
20-
</li>
21-
</ul>
22-
</div>
23-
<!--Grid column-->
24-
<!--Grid column-->
25-
<div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
26-
<h5 class="text-uppercase">Footer Content</h5>
27-
<ul class="list-unstyled mb-0">
28-
<li>
29-
<a routerLink="./" class="">Suspendisse potenti</a>
30-
</li>
31-
</ul>
32-
</div>
33-
<!--Grid column-->
34-
<!--Grid column-->
35-
<div class="col-lg-4 col-md-12 mb-4 mb-md-0">
36-
<h5 class="text-uppercase">Footer Content</h5>
37-
<p>
38-
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste atque ea quis
39-
molestias. Fugiat pariatur maxime quis culpa corporis vitae repudiandae aliquam
40-
voluptatem veniam, est atque cumque eum delectus sint!
41-
</p>
42-
</div>
43-
<!--Grid column-->
3+
<div class="top-footer">
4+
<!-- Grid container -->
5+
<div class="container p-4">
6+
<!--Grid row-->
7+
<div class="row">
8+
<!--Grid column-->
9+
<div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
10+
<h5 class="text-uppercase">Footer Content</h5>
11+
<ul class="list-unstyled mb-0">
12+
<li>
13+
<a routerLink="./" class="">Lorem ipsum</a>
14+
</li>
15+
<li>
16+
<a routerLink="./" class="">Ut facilisis</a>
17+
</li>
18+
<li>
19+
<a routerLink="./" class="">Aenean sit</a>
20+
</li>
21+
</ul>
4422
</div>
45-
<!--Grid row-->
23+
<!--Grid column-->
24+
<!--Grid column-->
25+
<div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
26+
<h5 class="text-uppercase">Footer Content</h5>
27+
<ul class="list-unstyled mb-0">
28+
<li>
29+
<a routerLink="./" class="">Suspendisse potenti</a>
30+
</li>
31+
</ul>
32+
</div>
33+
<!--Grid column-->
34+
<!--Grid column-->
35+
<div class="col-lg-4 col-md-12 mb-4 mb-md-0">
36+
<h5 class="text-uppercase">Footer Content</h5>
37+
<p>
38+
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste atque
39+
ea quis molestias. Fugiat pariatur maxime quis culpa corporis vitae
40+
repudiandae aliquam voluptatem veniam, est atque cumque eum delectus
41+
sint!
42+
</p>
43+
</div>
44+
<!--Grid column-->
4645
</div>
46+
<!--Grid row-->
4747
</div>
48+
</div>
4849
}
4950
<!-- Grid container -->
5051

5152
<!-- Copyright -->
52-
<div class="bottom-footer p-1 d-flex justify-content-center align-items-center text-white">
53-
<div class="content-container">
53+
<div
54+
class="bottom-footer p-1 d-flex flex-column flex-md-row justify-content-center align-items-center text-white"
55+
>
56+
<div class="content-container align-self-center">
5457
<p class="m-0">
55-
<a class="text-white"
56-
href="http://www.dspace.org/">{{ 'footer.link.dspace' | translate}}</a>
57-
{{ 'footer.copyright' | translate:{year: dateObj | date:'y'} }}
58-
<a class="text-white"
59-
href="https://www.lyrasis.org/">{{ 'footer.link.lyrasis' | translate}}</a>
58+
<a class="text-white" href="http://www.dspace.org/">{{
59+
"footer.link.dspace" | translate
60+
}}</a>
61+
{{ "footer.copyright" | translate : { year: dateObj | date : "y" } }}
62+
<a class="text-white" href="https://www.lyrasis.org/">{{
63+
"footer.link.lyrasis" | translate
64+
}}</a>
6065
</p>
6166
<ul class="footer-info list-unstyled d-flex justify-content-center mb-0">
6267
<li>
63-
<button class="btn btn-link text-white" type="button" (click)="showCookieSettings()">
64-
{{ 'footer.link.cookies' | translate}}
68+
<button
69+
class="btn btn-link text-white"
70+
type="button"
71+
(click)="showCookieSettings()"
72+
>
73+
{{ "footer.link.cookies" | translate }}
6574
</button>
6675
</li>
6776
@if (showPrivacyPolicy) {
68-
<li>
69-
<a class="btn text-white"
70-
routerLink="info/privacy">{{ 'footer.link.privacy-policy' | translate}}</a>
71-
</li>
72-
}
73-
@if (showEndUserAgreement) {
74-
<li>
75-
<a class="btn text-white"
76-
routerLink="info/end-user-agreement">{{ 'footer.link.end-user-agreement' | translate}}</a>
77-
</li>
78-
}
79-
@if (showSendFeedback$ | async) {
80-
<li>
81-
<a class="btn text-white"
82-
routerLink="info/feedback">{{ 'footer.link.feedback' | translate}}</a>
83-
</li>
77+
<li>
78+
<a class="btn text-white" routerLink="info/privacy">{{
79+
"footer.link.privacy-policy" | translate
80+
}}</a>
81+
</li>
82+
} @if (showEndUserAgreement) {
83+
<li>
84+
<a class="btn text-white" routerLink="info/end-user-agreement">{{
85+
"footer.link.end-user-agreement" | translate
86+
}}</a>
87+
</li>
88+
} @if (showSendFeedback$ | async) {
89+
<li>
90+
<a class="btn text-white" routerLink="info/feedback">{{
91+
"footer.link.feedback" | translate
92+
}}</a>
93+
</li>
8494
}
8595
</ul>
8696
</div>
8797
@if (coarLdnEnabled$ | async) {
88-
<div class="notify-enabled text-white">
89-
<a class="coar-notify-support-route" routerLink="info/coar-notify-support">
90-
<img class="n-coar" src="assets/images/n-coar.svg" [attr.alt]="'menu.header.image.logo' | translate" />
91-
{{ 'footer.link.coar-notify-support' | translate }}
92-
</a>
93-
</div>
98+
<div class="notify-enabled text-white align-self-end">
99+
<a
100+
class="coar-notify-support-route"
101+
routerLink="info/coar-notify-support"
102+
>
103+
<img
104+
class="n-coar"
105+
src="assets/images/n-coar.svg"
106+
[attr.alt]="'menu.header.image.logo' | translate"
107+
/>
108+
{{ "footer.link.coar-notify-support" | translate }}
109+
</a>
110+
</div>
94111
}
95112
</div>
96113
<!-- Copyright -->

‎src/app/footer/footer.component.scss‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,8 @@
2323

2424
.bottom-footer {
2525
.notify-enabled {
26-
position: absolute;
27-
bottom: 4px;
28-
right: 0;
26+
position: relative;
27+
margin-top: 4px;
2928

3029
.coar-notify-support-route {
3130
padding: 0 calc(var(--bs-spacer) / 2);
@@ -37,7 +36,11 @@
3736
margin-bottom: 8.5px;
3837
}
3938

40-
margin-top: 20px;
39+
@media screen and (min-width: map-get($grid-breakpoints, md)) {
40+
position: absolute;
41+
bottom: 4px;
42+
right: 0;
43+
}
4144
}
4245
ul {
4346
li {

0 commit comments

Comments
 (0)