Skip to content

Commit

Permalink
Merge pull request #421 from sinfo/footer
Browse files Browse the repository at this point in the history 
Fix footer layout and refactor related style classes
  • Loading branch information
@andreromao
andreromao authored Apr 9, 2024
2 parents 8a221a5 + 21b201a commit 5eca113
Show file tree
Hide file tree
Showing 3 changed files with 76 additions and 121 deletions.
34 changes: 1 addition & 33 deletions src/app/partials/footer/footer.component.css
View file
Original file line number Diff line number Diff line change
@@ -1,42 +1,10 @@
.footer {
color: white !important;
padding: 30px 0 0 0;
position: relative;
z-index: 1;
margin-top: 5px
}

.footer i,
.footer a {
color: rgb(106, 213, 255);
}

.first {
margin-left: 0;
}

.container {
text-align: center
}

ul {
display: inline-block;
text-align: left;
}

.footer-nav-item {
text-align: center;
}

.list {
margin: 0;
}



@media (min-width: 480px) {
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
}
144 changes: 75 additions & 69 deletions src/app/partials/footer/footer.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,75 +1,81 @@
<footer class="footer">
<div class="footer-base">
<div class="container">

<div class="col-md-3">
<ul class="footer-nav">
<li class="footer-nav-item">
<a routerLink="/privacy-policy">Privacy policy</a>
</li>
<li class="footer-nav-item">
<a routerLink="/coc">Code of Conduct</a>
</li>
</ul>
<!-- Main footer content -->
<div class="container text-center text-sm-start">
<div class="row">
<div class="col-12 col-sm-6 d-flex justify-content-center">
<ul class="footer-nav">
<li class="footer-nav-item">
<a routerLink="/privacy-policy">Privacy policy</a>
</li>
<li class="footer-nav-item">
<a routerLink="/coc">Code of Conduct</a>
</li>
</ul>
</div>

<div class="col-12 col-sm-6 d-flex justify-content-center">
<ul>
<li>
<i class="fa fa-envelope"></i>&nbsp;&nbsp;&nbsp;
<a href="mailto:[email protected]">
[email protected]
</a>
</li>
<li>
&nbsp;<i class="fa fa-map-marker"></i>&nbsp;&nbsp;&nbsp;
<a href="https://maps.app.goo.gl/aWyFo6cyreD8k8nLA" target="_blank">
Técnico Innovation Center, Lisbon
</a>
</li>
</ul>
</div>
</div>
</div>

<!-- <div class="col-md-6">
<ul class="socials-nav">
<li class="socials-nav-item first">
<a href="https://twitter.com/sinfoist" target="_blank" aria-label="Twitter">
<span class="fa fa-twitter"></span>
</a>
</li>
<li class="socials-nav-item">
<a href="https://www.facebook.com/sinfoist/" target="_blank" aria-label="Facebook">
<span class="fa fa-facebook"></span>
</a>
</li>
<li class="socials-nav-item">
<a href="https://github.com/sinfo" target="_blank" aria-label="Github">
<span class="fa fa-github"></span>
</a>
</li>
<li class="socials-nav-item">
<a href="https://www.instagram.com/sinfoist/" target="_blank" aria-label="Instagram">
<span class="fa fa-instagram"></span>
</a>
</li>
<li class="socials-nav-item">
<a href="https://www.youtube.com/user/sinfoist" target="_blank" aria-label="Youtube">
<span class="fa fa-youtube"></span>
<!-- Open source code link -->
<div class="container mt-3">
<p class="col-12 text-alt text-center">
<small>
Made with ♥ at SINFO -
<a href="https://github.com/sinfo/ng-sinfo-webapp" target="_blank">
Open Source Code
</a>
</li>
<li class="socials-nav-item">
<a href="https://www.linkedin.com/company/2760221" target="_blank" aria-label="Linkedin">
<span class="fa fa-linkedin"></span>
</a>
</li>
</ul>
</div> -->

<div class="col-md-3">
<ul class="list">
<li class="">
<i class="fa fa-map-marker"></i><a href="https://maps.app.goo.gl/aWyFo6cyreD8k8nLA" target="_blank">Técnico Innovation Center, Lisbon</a>
</li>
<li class="">
<i class="fa fa-envelope"></i>
<a href="mailto:[email protected]">[email protected]</a>
</li>
</ul>
</div>
</small>
</p>
</div>
</footer>


<div class="container">
<div class="col-md-12">
<p class="text-alt" style="text-align: center">
<small>Made with ♥ at SINFO - <a href="https://github.com/sinfo/ng-sinfo-webapp" target="_blank">Open source
code</a>
</small>
</p>
</div>
</div>
</div>
</footer>
<!-- <div class="col-md-6">
<ul class="socials-nav">
<li class="socials-nav-item first">
<a href="https://twitter.com/sinfoist" target="_blank" aria-label="Twitter">
<span class="fa fa-twitter"></span>
</a>
</li>
<li class="socials-nav-item">
<a href="https://www.facebook.com/sinfoist/" target="_blank" aria-label="Facebook">
<span class="fa fa-facebook"></span>
</a>
</li>
<li class="socials-nav-item">
<a href="https://github.com/sinfo" target="_blank" aria-label="Github">
<span class="fa fa-github"></span>
</a>
</li>
<li class="socials-nav-item">
<a href="https://www.instagram.com/sinfoist/" target="_blank" aria-label="Instagram">
<span class="fa fa-instagram"></span>
</a>
</li>
<li class="socials-nav-item">
<a href="https://www.youtube.com/user/sinfoist" target="_blank" aria-label="Youtube">
<span class="fa fa-youtube"></span>
</a>
</li>
<li class="socials-nav-item">
<a href="https://www.linkedin.com/company/2760221" target="_blank" aria-label="Linkedin">
<span class="fa fa-linkedin"></span>
</a>
</li>
</ul>
</div> -->
19 changes: 0 additions & 19 deletions src/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7169,20 +7169,6 @@ div.clear input.btn:hover {
background-color: black;
}

.footer-base {
padding: 30px 0 30px;
text-align: left;
}

.footer-nav>li {
margin-right: 25px;
display: inline-block;
}

.footer-nav>li:last-child {
margin-right: 0;
}

.footer-nav>li a {
font-family: "Roboto", "Helvetica Neue", Arial, Helvetica, sans-serif;
font-size: 11px;
Expand Down Expand Up @@ -7271,11 +7257,6 @@ div.clear input.btn:hover {
}

@media (max-width: 991px) {
.footer-nav>li {
margin-right: 0;
width: 100%;
}

.footer .socials-nav {
margin: 20px 0 20px -12px;
width: 100%;
Expand Down

0 comments on commit 5eca113

Please sign in to comment.