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.

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

implemented two column layout for footer in mobile view #1946

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
197 changes: 117 additions & 80 deletions _includes/footer.html
Original file line number Diff line number Diff line change
@@ -1,69 +1,112 @@
<footer>
<div class="container">
<div class="footer-columns">
{% for column in site.data.footer %}
<div class="footer-columns">
<!-- Getting Started Section -->
{% for column in site.data.footer %}
{% if column.title == "Getting Started" %}
<ul class="footer-links">
<li>
<h2><a {% if column.new_window %}target="_blank" {% endif %}
href="{% include relative-src.html src=column.link %}" {% if column.social_icon
%}class="{{ column.social_icon || downcase }}-icon" {% endif %}>
{% if column.social_icon %}
{% include social-icon.html icon=column.social_icon %}
{% endif %}
{{ column.title }}</a></h2>
</li>
{% for link in column.links %}
<li>
<h2><a {% if column.new_window %}target="_blank" {% endif %}
href="{% include relative-src.html src=column.link %}">
{{ column.title }}</a></h2>
</li>
{% for link in column.links %}
<li><a {% if link.new_window %}target="_blank" {% endif %}
href="{% include relative-src.html src=link.link %}" {% if link.social_icon
%}class="{{ link.social_icon || downcase }}-icon" {% endif %}>
{% if link.social_icon %}
{% include social-icon.html icon=link.social_icon %}
{% endif %}
{{ link.name }}</a></li>
{% endfor %}
href="{% include relative-src.html src=link.link %}">
{{ link.name }}</a></li>
{% endfor %}
</ul>
{% endfor %}

<!--
<ul class="feed">
<a class="twitter-timeline" data-width="320" data-height="320" data-theme="light"
data-link-color="#62ACCD" href="https://twitter.com/mesheryio"
data-chrome="nofooter circularborders noscrollbar">Tweets by Meshery</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
{% endif %}
{% endfor %}

<!-- Resources Section -->
{% for column in site.data.footer %}
{% if column.title == "Resources" %}
<ul class="footer-links">
<li>
<h2><a {% if column.new_window %}target="_blank" {% endif %}
href="{% include relative-src.html src=column.link %}">
{{ column.title }}</a></h2>
</li>
{% for link in column.links %}
<li><a {% if link.new_window %}target="_blank" {% endif %}
href="{% include relative-src.html src=link.link %}">
{{ link.name }}</a></li>
{% endfor %}
</ul>
-->
</div>

<div class="container flex copyright">
<div class="text">&copy; {{ site.time | date: '%Y' }} The Meshery Authors</div>
<div class="text">Confidently wrangling cloud native infrastructure</div>
<div class="text"><a href="https://github.com/meshery/meshery/blob/master/CODE_OF_CONDUCT.md">Code of
Conduct</a></div>
<div class="text"><a href ="https://www.linuxfoundation.org/legal/trademark-usage">The Linux Foundation. Meshery has registered trademarks and uses trademarks</a></div>
</div>
{% endif %}
{% endfor %}

<!-- Community Section -->
{% for column in site.data.footer %}
{% if column.title == "Community" %}
<ul class="footer-links">
<li>
<h2><a {% if column.new_window %}target="_blank" {% endif %}
href="{% include relative-src.html src=column.link %}">
{{ column.title }}</a></h2>
</li>
{% for link in column.links %}
<li><a {% if link.new_window %}target="_blank" {% endif %}
href="{% include relative-src.html src=link.link %}">
{{ link.name }}</a></li>
{% endfor %}
</ul>
{% endif %}
{% endfor %}

<!-- Social Section -->
{% for column in site.data.footer %}
{% if column.title == "Socials" %}
<ul class="footer-links">
<li>
<h2><a {% if column.new_window %}target="_blank" {% endif %}
href="{% include relative-src.html src=column.link %}" {% if column.social_icon %}
class="{{ column.social_icon | downcase }}-icon" {% endif %}>
{% if column.social_icon %}
{% include social-icon.html icon=column.social_icon %}
{% endif %}
{{ column.title }}</a></h2>
</li>
{% for link in column.links %}
<li><a {% if link.new_window %}target="_blank" {% endif %}
href="{% include relative-src.html src=link.link %}" {% if link.social_icon %}
class="{{ link.social_icon | downcase }}-icon" {% endif %}>
{% if link.social_icon %}
{% include social-icon.html icon=link.social_icon %}
{% endif %}
{{ link.name }}</a></li>
{% endfor %}
</ul>
{% endif %}
{% endfor %}
</div>

<div class="container flex copyright">
<div class="text">&copy; {{ site.time | date: '%Y' }} The Meshery Authors</div>
<div class="text">Confidently wrangling cloud native infrastructure</div>
<div class="text"><a href="https://github.com/meshery/meshery/blob/master/CODE_OF_CONDUCT.md">Code of Conduct</a></div>
<div class="text"><a href="https://www.linuxfoundation.org/legal/trademark-usage">The Linux Foundation. Meshery has registered trademarks and uses trademarks</a></div>
</div>
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
{% if jekyll.environment == 'production' %}
<script src="{{ site.baseurl }}/js/stellarnav.min.js"></script>
{% else %}
<script src="{{ site.baseurl }}/js/stellarnav.js"></script>
{% endif %}

<script src="{{ site.baseurl }}/js/main.js"></script>

<!-- Site Navigation Menu -->
<script type="text/javascript">
</footer>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
{% if jekyll.environment == 'production' %}
<script src="{{ site.baseurl }}/js/stellarnav.min.js"></script>
{% else %}
<script src="{{ site.baseurl }}/js/stellarnav.js"></script>
{% endif %}
<script src="{{ site.baseurl }}/js/main.js"></script>
<script type="text/javascript">
jQuery(document).ready(function ($) {
jQuery('.stellarnav').stellarNav({ breakpoint: 1140 });
jQuery('.stellarnav.mobile').css('text-align', 'end');
jQuery('.stellarnav').stellarNav({ breakpoint: 1140 });
jQuery('.stellarnav.mobile').css('text-align', 'end');
});
</script>
<!--Script for Copy to Clipboard-->
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<script src="{{ site.baseurl }}/js/vanilla-tilt.min.js"></script>

<script>
</script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<script src="{{ site.baseurl }}/js/vanilla-tilt.min.js"></script>
<script>

function resetCopyText(element) {
let childElements = element.childNodes
Expand Down Expand Up @@ -160,23 +203,19 @@ <h2><a {% if column.new_window %}target="_blank" {% endif %}
}

</script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<script>
$(document).ready(function () {
$('.slider').slick({

dots: false,
arrows: false,
infinite: true,
speed: 400,
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true, // true
autoplaySpeed: 1500,


responsive: [
<script src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<script>
$(document).ready(function () {
$('.slider').slick({
dots: false,
arrows: false,
infinite: true,
speed: 400,
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 1500,
responsive: [
{
breakpoint: 1300,
settings: {
Expand Down Expand Up @@ -242,9 +281,7 @@ <h2><a {% if column.new_window %}target="_blank" {% endif %}
}
}
]
});
});
</script>
</body>

</html>
});
});
</script>
Copy link
Member

Choose a reason for hiding this comment

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

any reasons to remove other breakpoints ? @snehaio


80 changes: 58 additions & 22 deletions _sass/footer.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,32 @@
.footer-columns {
display: grid;
grid-template-columns: repeat(4, 1fr); // Four equal columns for larger screens
max-width: 100vw;
overflow-x: hidden;

// Responsive two-column layout
@media (max-width: 768px) {
grid-template-columns: repeat(2, 1fr); // Switch to two columns
grid-template-rows: auto;

.column:nth-child(1) {
grid-column: 1 / 2;
}

.column:nth-child(2) {
grid-column: 2 / 3;
}

.column:nth-child(3) {
grid-column: 1 / 2; // Aligns below column 1
}

.column:nth-child(4) {
grid-column: 2 / 3; // Aligns below column 2
}
}
}

.footer-links {
width: 100%;
margin: 10px 20px;
Expand All @@ -8,13 +37,29 @@
flex: 0 0 fit-content;
}

@media screen and (max-width: 450px) {
margin: 5px 10px;
width: auto;

h2 {
font-size: 1rem;
margin: 10px 0;
}

li {
font-size: 0.9rem;
margin: 5px 0;
}
}

li {
list-style: none;
margin: 10px auto;

@media #{$tablet} {
max-width: 200px;
}

a {
&:hover {
text-decoration: none;
Expand Down Expand Up @@ -58,28 +103,28 @@
fill: #0077b5;
}

&.slack-icon:hover svg .first{
&.slack-icon:hover svg .first {
fill: #e91e63;
}
&.slack-icon:hover svg .second{
&.slack-icon:hover svg .second {
fill: #e91e63;
}
&.slack-icon:hover svg .third{
&.slack-icon:hover svg .third {
fill: #00bcd4;
}
&.slack-icon:hover svg .fourth{
&.slack-icon:hover svg .fourth {
fill: #00bcd4;
}
&.slack-icon:hover svg .fifth{
&.slack-icon:hover svg .fifth {
fill: #4caf50;
}
&.slack-icon:hover svg .sixth{
&.slack-icon:hover svg .sixth {
fill: #4caf50;
}
&.slack-icon:hover svg .seventh{
&.slack-icon:hover svg .seventh {
fill: #ff9800;
}
&.slack-icon:hover svg .eigth{
&.slack-icon:hover svg .eigth {
fill: #ff9800;
}

Expand All @@ -104,7 +149,7 @@
flex: 0 0 fit-content;
}

@media (min-width:820px) and (max-width: 1154px){
@media (min-width: 820px) and (max-width: 1154px) {
margin-top: 25px;
text-align: justify;
}
Expand All @@ -120,10 +165,10 @@
}

footer {
padding: 50px 0 50px 0;
padding: 50px 0;
font-size: 0.9rem;
position: relative;
background: linear-gradient(to right top, #3d3d3d, #343434, #2b2b2b, #222222, #1a1a1a, #181818, #161616, #141414, #181818, #1c1c1c, #212121, #252525);;
background: linear-gradient(to right top, #3d3d3d, #343434, #2b2b2b, #222222, #1a1a1a, #181818, #161616, #141414, #181818, #1c1c1c, #212121, #252525);
color: #fff;

.copyright {
Expand All @@ -134,13 +179,12 @@ footer {
display: flex;
justify-content: space-evenly;
text-align: center;

@media (max-width: 1000px) {
flex-direction: column;
text-align: center;
.text {
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
padding: 10px 0;
}
}
}
Expand Down Expand Up @@ -169,19 +213,11 @@ footer {

h2 {
font-size: 1.2em;
margin: 30px 0;
margin: 15px auto;
color: #ccc;
font-weight: bold;
text-align: start !important;
}


.footer-columns {
@extend %flexbox;
@include flex-flow(wrap);
justify-content: space-evenly;
}

a {
text-decoration: none;
Expand Down
Loading