Skip to content

Commit 55a0b1d

Browse files
hugosolarhugosolar
committed
Website responsiveness
1 parent fcd85fd commit 55a0b1d

File tree

7 files changed

+322
-6
lines changed

7 files changed

+322
-6
lines changed

‎frontend-build/scss/app.scss

+2-1
Original file line numberDiff line numberDiff line change
@@ -70,4 +70,5 @@
7070
@import 'buddypress';
7171
@import 'gforms';
7272
@import 'footer';
73-
@import 'modules';
73+
@import 'modules';
74+
@import 'responsive';

‎frontend-build/scss/header.scss

+88
Original file line numberDiff line numberDiff line change
@@ -70,4 +70,92 @@
7070
}
7171
}
7272
}
73+
}
74+
.mobile-header {
75+
position: fixed;
76+
width: 100%;
77+
background-color: $primary-color;
78+
z-index: 990;
79+
box-shadow: 0 1px 3px rgba($black,.4);
80+
.logo {
81+
@include logo-display;
82+
width: 150px;
83+
margin-top: .5rem;
84+
}
85+
.mobile-buttons {
86+
display: flex;
87+
justify-content: flex-end;
88+
padding-top: .7rem;
89+
text-align: right;
90+
a {
91+
padding: 0 .3rem;
92+
display: block;
93+
.dashicons {
94+
color: $black;
95+
font-size: 2rem;
96+
width: 2rem;
97+
height: 2rem;
98+
}
99+
}
100+
}
101+
}
102+
.menu-mobile-container {
103+
margin-top: 3.8rem;
104+
@include coverer;
105+
position: fixed;
106+
z-index: 9999;
107+
background: map-get($foundation-palette, primary);
108+
.close {
109+
position: absolute;
110+
right: 1rem;
111+
top: .5rem;
112+
color: $white;
113+
z-index: 20;
114+
.dashicons {
115+
font-size: 2rem;
116+
}
117+
}
118+
.is-drilldown {
119+
margin-top: 1rem;
120+
}
121+
.menu {
122+
display: block;
123+
margin: 1rem 1.5rem 0 1.5rem;
124+
li {
125+
a {
126+
color: $white;
127+
text-transform: uppercase;
128+
font-weight: 700;
129+
text-transform: uppercase;
130+
line-height: 1.2rem;
131+
&:active {
132+
background-color: darken($primary-color,20);
133+
color: $white;
134+
}
135+
136+
}
137+
&.active {
138+
a {
139+
text-decoration: underline;
140+
}
141+
}
142+
.is-drilldown-submenu {
143+
//top: 5rem;
144+
background-color: $primary-color;
145+
li {
146+
margin-bottom: 1rem;
147+
a {
148+
color: $white;
149+
}
150+
&.js-drilldown-back {
151+
&>a {
152+
&:before {
153+
display: none !important;
154+
}
155+
}
156+
}
157+
}
158+
}
159+
}
160+
}
73161
}

‎frontend-build/scss/responsive.scss

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
// Mobile responsiveness -> Small size
2+
@include breakpoint(small only) {
3+
.home {
4+
.page-body {
5+
padding-top: 2.9rem;
6+
}
7+
}
8+
.page-body {
9+
.container-top-message {
10+
text-align: center;
11+
}
12+
}
13+
.main-slideshow {
14+
.swiper-slide {
15+
.slide-caption {
16+
position: static;
17+
width: 96%;
18+
padding: 1rem;
19+
padding-bottom: 4rem;
20+
.slide-caption-btn {
21+
margin-right: .9rem;
22+
}
23+
}
24+
}
25+
}
26+
.main-footer {
27+
.logo {
28+
margin: auto;
29+
float: none;
30+
}
31+
.footer-text-block {
32+
p {
33+
text-align: center;
34+
}
35+
.license-icons {
36+
float: none;
37+
margin: auto;
38+
width: auto;
39+
text-align: center;
40+
}
41+
}
42+
.bottom-nav {
43+
.menu-bottom-container {
44+
.menu {
45+
@include menu-align(center);
46+
}
47+
}
48+
}
49+
}
50+
}

‎themes/cc-commoners/assets/css/style.css

+119
Original file line numberDiff line numberDiff line change
@@ -3736,6 +3736,91 @@ a.thumbnail {
37363736
.site-header .main-nav .menu-item:first-child a {
37373737
border-left: none; }
37383738

3739+
.mobile-header {
3740+
position: fixed;
3741+
width: 100%;
3742+
background-color: #efbe01;
3743+
z-index: 990;
3744+
-webkit-box-shadow: 0 1px 3px rgba(10, 10, 10, 0.4);
3745+
box-shadow: 0 1px 3px rgba(10, 10, 10, 0.4); }
3746+
.mobile-header .logo {
3747+
display: block;
3748+
width: 230px;
3749+
height: 50px;
3750+
margin: 20px auto 0 auto;
3751+
background: url("../i/logo.png") no-repeat center top;
3752+
background-size: contain;
3753+
opacity: 1;
3754+
-webkit-transition: all .2s ease;
3755+
transition: all .2s ease;
3756+
width: 150px;
3757+
margin-top: .5rem; }
3758+
.mobile-header .logo h1, .mobile-header .logo span {
3759+
display: block;
3760+
text-indent: -1000rem; }
3761+
.mobile-header .logo:hover {
3762+
opacity: .4; }
3763+
.mobile-header .mobile-buttons {
3764+
display: -webkit-box;
3765+
display: -ms-flexbox;
3766+
display: flex;
3767+
-webkit-box-pack: end;
3768+
-ms-flex-pack: end;
3769+
justify-content: flex-end;
3770+
padding-top: .7rem;
3771+
text-align: right; }
3772+
.mobile-header .mobile-buttons a {
3773+
padding: 0 .3rem;
3774+
display: block; }
3775+
.mobile-header .mobile-buttons a .dashicons {
3776+
color: #0a0a0a;
3777+
font-size: 2rem;
3778+
width: 2rem;
3779+
height: 2rem; }
3780+
3781+
.menu-mobile-container {
3782+
margin-top: 3.8rem;
3783+
position: absolute;
3784+
top: 0;
3785+
left: 0;
3786+
width: 100%;
3787+
height: 100%;
3788+
position: fixed;
3789+
z-index: 9999;
3790+
background: #efbe01; }
3791+
.menu-mobile-container .close {
3792+
position: absolute;
3793+
right: 1rem;
3794+
top: .5rem;
3795+
color: #fefefe;
3796+
z-index: 20; }
3797+
.menu-mobile-container .close .dashicons {
3798+
font-size: 2rem; }
3799+
.menu-mobile-container .is-drilldown {
3800+
margin-top: 1rem; }
3801+
.menu-mobile-container .menu {
3802+
display: block;
3803+
margin: 1rem 1.5rem 0 1.5rem; }
3804+
.menu-mobile-container .menu li a {
3805+
color: #fefefe;
3806+
text-transform: uppercase;
3807+
font-weight: 700;
3808+
text-transform: uppercase;
3809+
line-height: 1.2rem; }
3810+
.menu-mobile-container .menu li a:active {
3811+
background-color: #896d01;
3812+
color: #fefefe; }
3813+
.menu-mobile-container .menu li.active a {
3814+
text-decoration: underline; }
3815+
.menu-mobile-container .menu li .is-drilldown-submenu {
3816+
background-color: #efbe01; }
3817+
.menu-mobile-container .menu li .is-drilldown-submenu li {
3818+
margin-bottom: 1rem; }
3819+
.menu-mobile-container .menu li .is-drilldown-submenu li a {
3820+
color: #fefefe; }
3821+
.menu-mobile-container .menu li .is-drilldown-submenu li.js-drilldown-back > a:before {
3822+
display: none !important; }
3823+
37393824
.page-body .space-top {
37403825
padding-top: 12rem; }
37413826

@@ -4241,3 +4326,37 @@ a.thumbnail {
42414326
transition: all .5s ease; }
42424327
.display-details:hover {
42434328
background-color: #e6b800; }
4329+
4330+
@media screen and (max-width: 39.99875em) {
4331+
.home .page-body {
4332+
padding-top: 2.9rem; }
4333+
.page-body .container-top-message {
4334+
text-align: center; }
4335+
.main-slideshow .swiper-slide .slide-caption {
4336+
position: static;
4337+
width: 96%;
4338+
padding: 1rem;
4339+
padding-bottom: 4rem; }
4340+
.main-slideshow .swiper-slide .slide-caption .slide-caption-btn {
4341+
margin-right: .9rem; }
4342+
.main-footer .logo {
4343+
margin: auto;
4344+
float: none; }
4345+
.main-footer .footer-text-block p {
4346+
text-align: center; }
4347+
.main-footer .footer-text-block .license-icons {
4348+
float: none;
4349+
margin: auto;
4350+
width: auto;
4351+
text-align: center; }
4352+
.main-footer .bottom-nav .menu-bottom-container .menu li {
4353+
display: -webkit-box;
4354+
display: -ms-flexbox;
4355+
display: flex;
4356+
-webkit-box-pack: center;
4357+
-ms-flex-pack: center;
4358+
justify-content: center; }
4359+
.main-footer .bottom-nav .menu-bottom-container .menu li .submenu li {
4360+
-webkit-box-pack: start;
4361+
-ms-flex-pack: start;
4362+
justify-content: flex-start; } }

‎themes/cc-commoners/assets/js/cc-commoners.js

+29
Original file line numberDiff line numberDiff line change
@@ -155,4 +155,33 @@ jQuery(document).ready(function($){
155155
getUserPublicUrl(selectedValue, profileUrlId);
156156
});
157157
$('.input-disable').find('input[type="text"]').attr('disabled', 'disabled');
158+
159+
//Mobile menu
160+
var lastScroll = 0;
161+
$(window).scroll(function () {
162+
var st = $(window).scrollTop();
163+
if ($('body').hasClass('admin-bar')) {
164+
if ((st > 10) && (st > lastScroll)) {
165+
$('.mobile-header').css({ top: 0 });
166+
$('.menu-mobile-container').css({ top: -42 });
167+
} else {
168+
//arriba
169+
if (st < 45) {
170+
$('.mobile-header').css({ top: 45 });
171+
$('.menu-mobile-container').css({ top: 4 });
172+
}
173+
}
174+
}
175+
lastScroll = st;
176+
});
177+
$('.open-mobile-menu').on('click', function (e) {
178+
e.preventDefault();
179+
$('.menu-mobile-container').toggleClass('hide');
180+
return false;
181+
});
182+
$('.menu-mobile-container').find('.close').on('click', function (e) {
183+
e.preventDefault();
184+
$(this).parent().addClass('hide');
185+
return false;
186+
});
158187
});

‎themes/cc-commoners/footer.php

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@
77
<div class="footer-content">
88
<div class="grid-container">
99
<div class="grid-x grid-padding-x align-justify">
10-
<div class="large-4 cell">
10+
<div class="large-4 small-12 cell">
1111
<a href="/" class="logo"><span>CC Network</span></a>
1212
</div>
13-
<div class="large-5 cell">
13+
<div class="large-5 small-12 cell">
1414
<div class="footer-text-block">
1515
<div class="license-icons">
1616
<a rel="license" href="https://creativecommons.org/licenses/by/4.0/" title="Creative Commons Attribution 4.0 International license">

‎themes/cc-commoners/header.php

+32-3
Original file line numberDiff line numberDiff line change
@@ -36,10 +36,39 @@
3636

3737
<body <?php body_class(); ?> >
3838

39-
40-
<header class="site-header" >
39+
<header class="mobile-header show-for-small-only">
40+
<div class="grid-container">
41+
<div class="grid-x align-justify">
42+
<div class="cell small-5">
43+
<a href="<?php echo site_url(); ?>" class="logo"><h1>CC Network</h1></a>
44+
</div>
45+
<div class="cell small-3 mobile-buttons">
46+
<a href="#" class="open-mobile-menu"><span class="dashicons dashicons-menu"></span></a>
47+
<a href="#" class="open-mobile-search"><span class="dashicons dashicons-search"></span></a>
48+
</div>
49+
</div>
50+
</div>
51+
</header>
52+
<div class="menu-mobile-container hide">
53+
<a class="close" href="#">
54+
<button class="close-button" aria-label="Close alert" type="button" data-close>
55+
<span aria-hidden="true">&times;</span>
56+
</button>
57+
</a>
58+
<?php
59+
$args = array(
60+
'theme_location' => 'top',
61+
'container' => '',
62+
'depth' => 1,
63+
'items_wrap' => '<ul id = "%1$s" class = "menu vertical %2$s">%3$s</ul>'
64+
);
65+
66+
wp_nav_menu($args);
67+
?>
68+
</div>
69+
<header class="site-header hide-for-small-only" >
4170
<div class="grid-container">
42-
<div class="cell grid-x grid-padding-x align-center">
71+
<div class="grid-x grid-padding-x align-center">
4372
<div class="cell small-3">
4473
<a href="<?php echo site_url(); ?>" class="logo"><h1>CC Network</h1></a>
4574
</div>

0 commit comments

Comments
 (0)