Skip to content
This repository was archived by the owner on Jan 29, 2025. It is now read-only.

Commit 5eca113

Browse files
andreromaoandreromao
authored
Merge pull request #421 from sinfo/footer
Fix footer layout and refactor related style classes
2 parents 8a221a5 + 21b201a commit 5eca113

File tree

3 files changed

+76
-121
lines changed

3 files changed

+76
-121
lines changed

‎src/app/partials/footer/footer.component.css‎

Lines changed: 1 addition & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,10 @@
11
.footer {
2-
color: white !important;
2+
padding: 30px 0 0 0;
33
position: relative;
44
z-index: 1;
5-
margin-top: 5px
65
}
76

87
.footer i,
98
.footer a {
109
color: rgb(106, 213, 255);
1110
}
12-
13-
.first {
14-
margin-left: 0;
15-
}
16-
17-
.container {
18-
text-align: center
19-
}
20-
21-
ul {
22-
display: inline-block;
23-
text-align: left;
24-
}
25-
26-
.footer-nav-item {
27-
text-align: center;
28-
}
29-
30-
.list {
31-
margin: 0;
32-
}
33-
34-
35-
36-
@media (min-width: 480px) {
37-
.container {
38-
display: flex;
39-
justify-content: space-between;
40-
align-items: center;
41-
}
42-
}

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

Lines changed: 75 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,81 @@
11
<footer class="footer">
2-
<div class="footer-base">
3-
<div class="container">
4-
5-
<div class="col-md-3">
6-
<ul class="footer-nav">
7-
<li class="footer-nav-item">
8-
<a routerLink="/privacy-policy">Privacy policy</a>
9-
</li>
10-
<li class="footer-nav-item">
11-
<a routerLink="/coc">Code of Conduct</a>
12-
</li>
13-
</ul>
2+
<!-- Main footer content -->
3+
<div class="container text-center text-sm-start">
4+
<div class="row">
5+
<div class="col-12 col-sm-6 d-flex justify-content-center">
6+
<ul class="footer-nav">
7+
<li class="footer-nav-item">
8+
<a routerLink="/privacy-policy">Privacy policy</a>
9+
</li>
10+
<li class="footer-nav-item">
11+
<a routerLink="/coc">Code of Conduct</a>
12+
</li>
13+
</ul>
14+
</div>
15+
16+
<div class="col-12 col-sm-6 d-flex justify-content-center">
17+
<ul>
18+
<li>
19+
<i class="fa fa-envelope"></i>&nbsp;&nbsp;&nbsp;
20+
<a href="mailto:[email protected]">
21+
[email protected]
22+
</a>
23+
</li>
24+
<li>
25+
&nbsp;<i class="fa fa-map-marker"></i>&nbsp;&nbsp;&nbsp;
26+
<a href="https://maps.app.goo.gl/aWyFo6cyreD8k8nLA" target="_blank">
27+
Técnico Innovation Center, Lisbon
28+
</a>
29+
</li>
30+
</ul>
31+
</div>
1432
</div>
33+
</div>
1534

16-
<!-- <div class="col-md-6">
17-
<ul class="socials-nav">
18-
<li class="socials-nav-item first">
19-
<a href="https://twitter.com/sinfoist" target="_blank" aria-label="Twitter">
20-
<span class="fa fa-twitter"></span>
21-
</a>
22-
</li>
23-
<li class="socials-nav-item">
24-
<a href="https://www.facebook.com/sinfoist/" target="_blank" aria-label="Facebook">
25-
<span class="fa fa-facebook"></span>
26-
</a>
27-
</li>
28-
<li class="socials-nav-item">
29-
<a href="https://github.com/sinfo" target="_blank" aria-label="Github">
30-
<span class="fa fa-github"></span>
31-
</a>
32-
</li>
33-
<li class="socials-nav-item">
34-
<a href="https://www.instagram.com/sinfoist/" target="_blank" aria-label="Instagram">
35-
<span class="fa fa-instagram"></span>
36-
</a>
37-
</li>
38-
<li class="socials-nav-item">
39-
<a href="https://www.youtube.com/user/sinfoist" target="_blank" aria-label="Youtube">
40-
<span class="fa fa-youtube"></span>
35+
<!-- Open source code link -->
36+
<div class="container mt-3">
37+
<p class="col-12 text-alt text-center">
38+
<small>
39+
Made with ♥ at SINFO -
40+
<a href="https://github.com/sinfo/ng-sinfo-webapp" target="_blank">
41+
Open Source Code
4142
</a>
42-
</li>
43-
<li class="socials-nav-item">
44-
<a href="https://www.linkedin.com/company/2760221" target="_blank" aria-label="Linkedin">
45-
<span class="fa fa-linkedin"></span>
46-
</a>
47-
</li>
48-
</ul>
49-
</div> -->
50-
51-
<div class="col-md-3">
52-
<ul class="list">
53-
<li class="">
54-
<i class="fa fa-map-marker"></i><a href="https://maps.app.goo.gl/aWyFo6cyreD8k8nLA" target="_blank">Técnico Innovation Center, Lisbon</a>
55-
</li>
56-
<li class="">
57-
<i class="fa fa-envelope"></i>
58-
<a href="mailto:[email protected]">[email protected]</a>
59-
</li>
60-
</ul>
61-
</div>
43+
</small>
44+
</p>
6245
</div>
46+
</footer>
6347

64-
65-
<div class="container">
66-
<div class="col-md-12">
67-
<p class="text-alt" style="text-align: center">
68-
<small>Made with ♥ at SINFO - <a href="https://github.com/sinfo/ng-sinfo-webapp" target="_blank">Open source
69-
code</a>
70-
</small>
71-
</p>
72-
</div>
73-
</div>
74-
</div>
75-
</footer>
48+
<!-- <div class="col-md-6">
49+
<ul class="socials-nav">
50+
<li class="socials-nav-item first">
51+
<a href="https://twitter.com/sinfoist" target="_blank" aria-label="Twitter">
52+
<span class="fa fa-twitter"></span>
53+
</a>
54+
</li>
55+
<li class="socials-nav-item">
56+
<a href="https://www.facebook.com/sinfoist/" target="_blank" aria-label="Facebook">
57+
<span class="fa fa-facebook"></span>
58+
</a>
59+
</li>
60+
<li class="socials-nav-item">
61+
<a href="https://github.com/sinfo" target="_blank" aria-label="Github">
62+
<span class="fa fa-github"></span>
63+
</a>
64+
</li>
65+
<li class="socials-nav-item">
66+
<a href="https://www.instagram.com/sinfoist/" target="_blank" aria-label="Instagram">
67+
<span class="fa fa-instagram"></span>
68+
</a>
69+
</li>
70+
<li class="socials-nav-item">
71+
<a href="https://www.youtube.com/user/sinfoist" target="_blank" aria-label="Youtube">
72+
<span class="fa fa-youtube"></span>
73+
</a>
74+
</li>
75+
<li class="socials-nav-item">
76+
<a href="https://www.linkedin.com/company/2760221" target="_blank" aria-label="Linkedin">
77+
<span class="fa fa-linkedin"></span>
78+
</a>
79+
</li>
80+
</ul>
81+
</div> -->

‎src/styles.css‎

Lines changed: 0 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -7169,20 +7169,6 @@ div.clear input.btn:hover {
71697169
background-color: black;
71707170
}
71717171

7172-
.footer-base {
7173-
padding: 30px 0 30px;
7174-
text-align: left;
7175-
}
7176-
7177-
.footer-nav>li {
7178-
margin-right: 25px;
7179-
display: inline-block;
7180-
}
7181-
7182-
.footer-nav>li:last-child {
7183-
margin-right: 0;
7184-
}
7185-
71867172
.footer-nav>li a {
71877173
font-family: "Roboto", "Helvetica Neue", Arial, Helvetica, sans-serif;
71887174
font-size: 11px;
@@ -7271,11 +7257,6 @@ div.clear input.btn:hover {
72717257
}
72727258

72737259
@media (max-width: 991px) {
7274-
.footer-nav>li {
7275-
margin-right: 0;
7276-
width: 100%;
7277-
}
7278-
72797260
.footer .socials-nav {
72807261
margin: 20px 0 20px -12px;
72817262
width: 100%;

0 commit comments

Comments
 (0)