Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhanced Footer. Fixes issue #635. #639

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
+82 −67
Open

Enhanced Footer. Fixes issue #635. #639

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
4578c88
Fixed Footer UI for smaller devices
imshrishk Jan 12, 2025
a87f81f
Update footer.html
imshrishk Jan 12, 2025
7cb8783
Fixed #635
imshrishk Jan 13, 2025
cc40e01
Update footer.html
imshrishk Jan 14, 2025
e42f4df
Update footer.html
imshrishk Jan 14, 2025
b15aee2
chore: Resolve merge conflicts
imshrishk Jan 14, 2025
5211922
Refactor: empty last line
imshrishk Jan 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
138 changes: 74 additions & 64 deletions _includes/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,85 +1,95 @@
<!-- Footer -->
<footer style="background-color:#282828;padding-top:5px;">
<footer style="background-color:#282828;padding-top:5px;">
<h5 style="text-align:right;margin-right:20px;">
<a href="#top" class="hrefCustomColor" id="scrollToTopBtn" style="display:none;">
<svg width="24" height="15" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" class="icon">
<polygon points="16,14 6,24 7.4,25.4 16,16.8 24.6,25.4 26,24" class="arrow" fill="white" stroke="black" stroke-width="3"/>
</svg>
</svg>
</a>
</h5>
<div class="container">
<div class="row">
<div class="col-md-12" >
<div class="col-md-12">
<div class="row justify-content-around">
<div class="col-md-2 widget">
<!-- Donation Info Section -->
<div class="col-12 col-sm-6 col-md-2 widget mb-4 mb-md-0">
<h6 class="footerHeaderStyle align-center-md text-center-md">
Sugar Labs® is a registered USA 501(c)(3) tax-exempt, not-for-profit organization, supported by our generous contributors and sponsors.
Sugar Labs® is a registered USA 501(c)(3) tax-exempt, not-for-profit organization, supported by our generous contributors and sponsors.
<p class="DonateFooter">
<a href="{{ site.baseurl }}/donate">Donate</a> or <!-- Send to reasons to donate page -->
<a href="{{ site.baseurl }}/volunteering">Volunteer today</a>! <!-- Send to reasons to volunteer page -->
</p>
</h6>
</div>
<div class="col-md-3 widget">

<!-- Sugar Labs Section -->
<div class="col-12 col-sm-6 col-md-3 widget mb-4 mb-md-0">
<h4 class="footerHeaderStyle align-center-md"><b>Sugar Labs</b></h4>
<article class="widget_content">
<ul class="leftAlign align-center-col-md">
<li class="footerListStyle"><a href="{{ site.baseurl }}/about-us">About Us</a></li>
<ul class="leftAlign align-left-col-md">
<li class="footerListStyle"><a href="{{ site.baseurl }}/about-us">About Us</a></li>
<li class="footerListStyle"><a href="{{ site.baseurl }}/volunteering">Get Involved</a></li><!--
<li class="footerListStyle"><a href="https://wiki.sugarlabs.org/go/Events#Upcoming_Events">Upcoming Events</a></li>--><!-- Is there a way to make a new page for this, possibly connected to some sort of feed? -->
<li class="footerListStyle"><a href="{{ site.baseurl }}/donate">Donate to Sugar Labs</a></li><!-- Perhaps this is too redundant -->
<li class="footerListStyle"><a href="{{ site.baseurl }}/leadership">Leadership and Governance</a></li>
<li class="footerListStyle"><a href="{{ site.baseurl }}/contact-us">Contact Us</a></li>

</ul>
</ul>
<ul class="leftAlign align-left-col-md">
<li class="footerListStyle"><a href="{{ site.baseurl }}/leadership">Leadership and Governance</a></li>
<li class="footerListStyle"><a href="{{ site.baseurl }}/contact-us">Contact Us</a></li>

</ul>
</article>
</div>
<div class="col-md-3 widget">
<h4 class="footerHeaderStyle align-center-md"><b>Resources</b></h4>
<article class="widget_content">
<ul class="leftAlign align-center-col-md">
<li class="footerListStyle"><a href="{{ site.baseurl }}/more" >Culture and pedagogy</a></li><!--
<li class="footerListStyle"><a href="http://schoolserver.org/" >School Server Resources</a></li>
<li class="footerListStyle"><a href="http://planet.sugarlabs.org" >Planet Sugar Labs</a></li>--><!-- This is basically deprecated. --><!--
<li class="footerListStyle"><a href="{{ site.baseurl }}/about-libre-software-culture" >Libre Software Culture</a></li>
<li class="footerListStyle"><a href="{{ site.baseurl }}/sugar-lesson-plans" >Sugar Lesson Plans</a></li>--><!-- These need to be updated -->
<li class="footerListStyle"><a href="{{ site.baseurl }}/students">For Students</a></li>
<li class="footerListStyle"><a href="{{ site.baseurl }}/school-administrators">For School Administrators</a></li>
<li class="footerListStyle"><a href="{{ site.baseurl }}/parents">For Parents</a></li>
<li class="footerListStyle"><a href="{{ site.baseurl }}/develop">For Developers</a></li>
<li class="footerListStyle"><a href="{{ site.baseurl }}/sugar-stories">Sugar Stories</a></li>
<li class="footerListStyle"><a href="{{ site.baseurl }}/music-blocks">Music Blocks</a></li>
<li class="footerListStyle"><a href="{{ site.baseurl }}/turtle-blocks-js">Turtle Blocks JS</a></li>
</ul>
</article>
<div class="col-md-3 widget">
<h4 class="footerHeaderStyle align-center-md"><b>Resources</b></h4>
<article class="widget_content">
<ul class="leftAlign align-left-col-md">
<li class="footerListStyle"><a href="{{ site.baseurl }}/more" >Culture and pedagogy</a></li><!--
<li class="footerListStyle"><a href="http://schoolserver.org/" >School Server Resources</a></li>
<li class="footerListStyle"><a href="http://planet.sugarlabs.org" >Planet Sugar Labs</a></li>--><!-- This is basically deprecated. --><!--
<li class="footerListStyle"><a href="{{ site.baseurl }}/about-libre-software-culture" >Libre Software Culture</a></li>
<li class="footerListStyle"><a href="{{ site.baseurl }}/sugar-lesson-plans" >Sugar Lesson Plans</a></li>--><!-- These need to be updated -->
<li class="footerListStyle"><a href="{{ site.baseurl }}/students">For Students</a></li>
<li class="footerListStyle"><a href="{{ site.baseurl }}/school-administrators">For School Administrators</a></li>
</ul>
<ul class="leftAlign align-left-col-md">
<li class="footerListStyle"><a href="{{ site.baseurl }}/parents">For Parents</a></li>
<li class="footerListStyle"><a href="{{ site.baseurl }}/develop">For Developers</a></li>
<li class="footerListStyle"><a href="{{ site.baseurl }}/sugar-stories">Sugar Stories</a></li>
<li class="footerListStyle"><a href="{{ site.baseurl }}/music-blocks">Music Blocks</a></li>
<li class="footerListStyle"><a href="{{ site.baseurl }}/turtle-blocks-js">Turtle Blocks JS</a></li>
</ul>
</article>
</div><!-- We may want to move this to another page-->
<div class="col-md-3 widget">
<h4 class="footerHeaderStyle align-center-md"><b>Development</b></h4>
<article class="widget_content">
<ul class="leftAlign align-center-col-md">
<li class="footerListStyle"><a href="{{ site.baseurl }}/develop">Read about development</a></li>
<li class="footerListStyle"><a href="https://wiki.sugarlabs.org/go/Mailing_Lists">Join mailing list</a></li>
<li class="footerListStyle"><a href="https://help.sugarlabs.org/en/">Documentation</a></li>
<li class="footerListStyle"><a href="https://matrix.to/#/#sugar:matrix.org">Chat with us on Matrix</a></li>
<li class="footerListStyle"><a href="https://wiki.sugarlabs.org/go/Development_Team/Source_Code">Development code</a></li>
<li class="footerListStyle"><a href="https://translate.sugarlabs.org">Translation Platform</a></li>
<li class="footerListStyle"><a href="https://wiki.sugarlabs.org/">Sugar Labs Wiki</a></li>
<li class="footerListStyle"><a href="{{ site.baseurl }}/profiles">Contributor Profiles</a></li>
</ul>
<ul class="leftAlign align-left-col-md">
<li class="footerListStyle"><a href="{{ site.baseurl }}/develop">Read about development</a></li>
<li class="footerListStyle"><a href="https://wiki.sugarlabs.org/go/Mailing_Lists">Join mailing list</a></li>
<li class="footerListStyle"><a href="https://help.sugarlabs.org/en/">Documentation</a></li>
<li class="footerListStyle"><a href="https://matrix.to/#/#sugar:matrix.org">Chat with us on Matrix</a></li>
</ul>
<ul class="leftAlign align-left-col-md">
<li class="footerListStyle"><a href="https://wiki.sugarlabs.org/go/Development_Team/Source_Code">Development code</a></li>
<li class="footerListStyle"><a href="https://translate.sugarlabs.org">Translation Platform</a></li>
<li class="footerListStyle"><a href="https://wiki.sugarlabs.org/">Sugar Labs Wiki</a></li>
<li class="footerListStyle"><a href="{{ site.baseurl }}/profiles">Contributor Profiles</a></li>
</ul>
</article>
</div>

<div class="col-md-6">
<!-- Social Media Section -->
<div class="col-12 col-md-6">
<div class="row justify-content-center">
<div class="row d-flex justify-content-center">
<div class="grid-two-columns">
<div id="own-ssk" class="d-flex">
<div id="own-ssk" class="d-flex justify-content-center gap-3 mb-3">
<a href="https://www.facebook.com/SugarLabsforall/timeline/" class="ion-icon ion-logo-facebook"></a>
<a href="https://github.com/sugarlabs" class="ion-icon ion-logo-github"></a>
<a href="https://x.com/sugar_labs" class="ion-icon ion-logo-X"></a>
<a rel="me" href="https://mastodon.social/@sugar_labs" class="ion-icon ion-logo-mastodon"></a>
</div>
<div id="own-ssk" class="d-flex">
<div id="own-ssk" class="d-flex justify-content-center gap-3">
<a href="https://www.instagram.com/sugarlabsforall/" class="ion-icon ion-logo-instagram"></a>
<a href="https://www.youtube.com/channel/UCfsR9AEb7HuPRAc14jfiI6g/featured" class="ion-icon ion-logo-youtube"></a>
<a href="https://www.linkedin.com/company/sugar-labs" class="ion-icon ion-logo-linkedin"></a>
Expand All @@ -95,10 +105,10 @@ <h4 class="text-center"><a href="https://github.com/sugarlabs/www"><b><span clas
</div>
</div>
</br>
<div class="row" >
<div class="row">
<div class="col-md-12" style="margin-top:12px;">
<p style="font-size:13px;" class='text-center-md'>
Copyright &copy; 2024 Sugar Labs&reg; available under the <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International License (CC BY-SA)</a>.</br>
Copyright &copy; 2025 Sugar Labs&reg; available under the <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International License (CC BY-SA)</a>.</br>
Website design credit: Base template <a href="https://github.com/themefisher/airspace-jekyll">Airspace</a> by Themefisher was used for this site.
</p>
</div>
Expand All @@ -109,19 +119,19 @@ <h4 class="text-center"><a href="https://github.com/sugarlabs/www"><b><span clas
</footer>

<!-- Javascript files -->
<script type="text/javascript" src="{{ site.baseurl }}/js/plugins.js"></script>
<script type="text/javascript" src="{{ site.baseurl }}/js/owl.carousel.min.js"></script>
<script type="text/javascript" src="{{ site.baseurl }}/js/plugins.js"></script>
<script type="text/javascript" src="{{ site.baseurl }}/js/owl.carousel.min.js"></script>
<script type="text/javascript">
if (typeof jQuery.waypoints == 'undefined') {
document.write('<script src="{{ site.baseurl }}/js/waypoints.js"><\/script>');
}
</script>

<!-- Inline Javascript scripts -->
<script type="text/javascript">
<script type="text/javascript">
$(document).on('click', "a[href='#top'], #scrollToTopBtn", function (e) {
$('html, body').animate({ scrollTop: 0 }, 'slow');
return false;
$('html, body').animate({ scrollTop: 0 }, 'slow');
return false;
})
$(document).ready(function () {
$('#dismiss, .overlay').on('click', function () {
Expand Down Expand Up @@ -161,29 +171,29 @@ <h4 class="text-center"><a href="https://github.com/sugarlabs/www"><b><span clas
$this.removeClass('panel-collapsed');
$this.removeClass('ion-plus-round').addClass('ion-minus-round');
}
return false;
return false;
});
$(document).on("scroll", function () {
var scrollPosition = $(document).scrollTop();
var windowHeight = $(window).height();
var documentHeight = $(document).height();
var thirtyPercentOfPage = (documentHeight - windowHeight) * 0.3;
var scrollPosition = $(document).scrollTop();
var windowHeight = $(window).height();
var documentHeight = $(document).height();
var thirtyPercentOfPage = (documentHeight - windowHeight) * 0.3;

if (scrollPosition > thirtyPercentOfPage) {
$('#scrollToTopBtn').fadeIn();
}
else {
$('#scrollToTopBtn').fadeOut();
}
});
if (scrollPosition > thirtyPercentOfPage) {
$('#scrollToTopBtn').fadeIn();
}
else {
$('#scrollToTopBtn').fadeOut();
}
});
</script>

<!-- Google analytics code -->
<script type="text/javascript">
<script type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-102776855-1', 'auto');
ga('send', 'pageview');
</script>
</script>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please don't remove the newline at end of this file.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ahh..really really sorry. It's just a force of habit. I will make sure to change it as soon as I get to my PC.

13 changes: 9 additions & 4 deletions css/airspace.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -990,8 +990,10 @@ footer .footer-manu ul li a:hover {
text-align: center;
}
.widget_content{
display:flex;
justify-content: center;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
.active .widget_content{
display: flex;
Expand All @@ -1016,8 +1018,10 @@ footer .footer-manu ul li a:hover {
}
@media (min-width: 576px) {
.grid-two-columns {
display: grid;
grid-template-columns: 1fr 1fr; /* Two equal-width columns */
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
}
.listFont{
Expand Down Expand Up @@ -2570,6 +2574,7 @@ input.gsc-input,
}
.leftAlign{
text-align: left;
padding-left: 0;
}
.boxDownload2{
height: 670px;
Expand Down