Skip to content

#635: Fixed Footer UI for smaller devices #636

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

Closed
wants to merge 4 commits into from
Closed

#635: Fixed Footer UI for smaller devices #636

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 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
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
227 changes: 162 additions & 65 deletions _includes/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,85 +1,112 @@
<!-- Footer -->
<footer style="background-color:#282828;padding-top:5px;">
<footer style="background-color:#282828;padding-top:5px;">
Copy link
Contributor

Choose a reason for hiding this comment

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

Don't make unnecessary changes like this one.

<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">
Copy link
Contributor

Choose a reason for hiding this comment

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

Unnecessary change.

<div class="row justify-content-around">
<div class="col-md-2 widget">
<!-- Donation Info Section -->
Copy link
Contributor

Choose a reason for hiding this comment

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

Deletion of our comments; which is an unecessary change.

<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 -->
Copy link
Contributor

Choose a reason for hiding this comment

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

Deletion of our comments.

<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>

Copy link
Contributor

Choose a reason for hiding this comment

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

Unnecessary change.

</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>
Copy link
Contributor

Choose a reason for hiding this comment

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

Unnecessary change in this div hides the actual change you are making when viewing diff; please remove unnecessary change.


<div class="col-md-6">
<!-- Development Section -->
<div class="col-12 col-sm-6 col-md-3 widget mb-4 mb-md-0">
<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>
Copy link
Contributor

Choose a reason for hiding this comment

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

Unnecessary change to indentation.

</article>
</div>

<!-- Social Media Section -->
Copy link
Contributor

Choose a reason for hiding this comment

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

Removal of comment.

<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,11 +122,11 @@ <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>
Website design credit: Base template <a href="https://github.com/themefisher/airspace-jekyll">Airspace</a> by Themefisher was used for this site.
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>
Website design credit: Base template <a href="https://github.com/themefisher/airspace-jekyll">Airspace</a> by Themefisher was used for this site.
Copy link
Contributor

Choose a reason for hiding this comment

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

Unnecessary change,

</p>
</div>
</div>
Expand All @@ -108,20 +135,90 @@ <h4 class="text-center"><a href="https://github.com/sugarlabs/www"><b><span clas
</div>
</footer>

<!-- Add this CSS to your existing stylesheet or in a style tag -->
Copy link
Contributor

Choose a reason for hiding this comment

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

Comment not understood; if these were directions to you by another, such as an LLM, then it is poor form to include them here.

<style>
@media (max-width: 768px) {
.widget {
text-align: center;
padding: 0 15px;
}

.leftAlign {
padding-left: 0;
}

.footerHeaderStyle {
margin-bottom: 1rem;
}

.footerListStyle {
margin-bottom: 0.5rem;
}

.grid-two-columns {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}

#own-ssk {
justify-content: center;
flex-wrap: wrap;
gap: 1rem;
}

.DonateFooter {
margin-top: 1rem;
}
}

@media (max-width: 576px) {
.widget {
margin-bottom: 2rem;
}

.ion-icon {
font-size: 24px;
}
}

/* Maintain existing styles while adding responsive support */
.footerListStyle a {
color: white;
text-decoration: none;
transition: color 0.3s ease;
}

.footerListStyle a:hover {
color: #0099FF;
}

.ion-icon {
color: white;
margin: 0 8px;
transition: color 0.3s ease;
}

.ion-icon:hover {
color: #0099FF;
}
</style>

<!-- 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>
Copy link
Contributor

Choose a reason for hiding this comment

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

Unnecessary change.

<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">
Copy link
Contributor

Choose a reason for hiding this comment

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

Unnecessary change.

$(document).on('click', "a[href='#top'], #scrollToTopBtn", function (e) {
$('html, body').animate({ scrollTop: 0 }, 'slow');
return false;
$('html, body').animate({ scrollTop: 0 }, 'slow');
Copy link
Contributor

Choose a reason for hiding this comment

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

While indentation changes are helpful, there are so many in this pull request that it hides the change you are asking for review. It would be common to use a separate pull request for such changes.

return false;
})
$(document).ready(function () {
$('#dismiss, .overlay').on('click', function () {
Expand Down Expand Up @@ -161,29 +258,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.

You have removed the newline at end of file. Don't.

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