Skip to content

Frontend restructure #319

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

Merged
merged 26 commits into from
Mar 7, 2019
Merged

Frontend restructure #319

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
973559a
Frontend build with zurb foundation to reestructure CCGN styles
hugosolar Jan 15, 2019
a8ac782
Home Layout & style refactoring
hugosolar Jan 16, 2019
5fc6ca2
home refactoring
hugosolar Jan 16, 2019
24c2091
full-width, page-faqs refactoring && standard styles for post content
hugosolar Jan 17, 2019
382a652
hub-page styles & refactoring hub-page
hugosolar Jan 18, 2019
fcd85fd
Major layout refactoring and some templates were added
hugosolar Jan 22, 2019
55a0b1d
Website responsiveness
hugosolar Jan 22, 2019
33117ce
responsiveness style improve
hugosolar Jan 23, 2019
70fd2d2
faqs page mobile header fix
hugosolar Jan 23, 2019
f373477
responsive mobile fixes buddypress & 404
hugosolar Jan 24, 2019
31ed589
mobile Search improvement
hugosolar Jan 25, 2019
265df95
New Chapter section backend && queulat toolset mu-plugin
Feb 11, 2019
6c14881
Chapter section Frontend redesign && remove old styles (everything is…
hugosolar Feb 13, 2019
5676c7b
chapters redesign map interaction
hugosolar Feb 14, 2019
24ac5a2
chapters section datatable integration
hugosolar Feb 18, 2019
b5e98e7
add global settings screen in WP backend & style fixes
hugosolar Feb 20, 2019
4ca1cb0
adding files that were missed
hugosolar Feb 20, 2019
c390bb2
Fix position of container over the map
hugosolar Feb 21, 2019
2ac9371
delete global stats transients when chapter metabox is saved
hugosolar Feb 21, 2019
5ca68ee
fix responsiveness in chapter section
hugosolar Feb 21, 2019
a655f23
responsive style fix on user profiles
hugosolar Mar 6, 2019
774e5b7
fix search mobile menu z-index
hugosolar Mar 6, 2019
2a3010c
remove composer.lock from repository
hugosolar Mar 6, 2019
3f2f715
fix chapter section style && permissions to sub admin role
hugosolar Mar 7, 2019
0903b6f
merge with master
hugosolar Mar 7, 2019
8fe26cd
fix search mobile container
hugosolar Mar 7, 2019
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
Prev Previous commit
Next Next commit
Website responsiveness
  • Loading branch information
@hugosolar
hugosolar committed Jan 22, 2019
commit 55a0b1df22c209036089b45f8f0e182028e51bb1
3 changes: 2 additions & 1 deletion frontend-build/scss/app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,4 +70,5 @@
@import 'buddypress';
@import 'gforms';
@import 'footer';
@import 'modules';
@import 'modules';
@import 'responsive';
88 changes: 88 additions & 0 deletions frontend-build/scss/header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,4 +70,92 @@
}
}
}
}
.mobile-header {
position: fixed;
width: 100%;
background-color: $primary-color;
z-index: 990;
box-shadow: 0 1px 3px rgba($black,.4);
.logo {
@include logo-display;
width: 150px;
margin-top: .5rem;
}
.mobile-buttons {
display: flex;
justify-content: flex-end;
padding-top: .7rem;
text-align: right;
a {
padding: 0 .3rem;
display: block;
.dashicons {
color: $black;
font-size: 2rem;
width: 2rem;
height: 2rem;
}
}
}
}
.menu-mobile-container {
margin-top: 3.8rem;
@include coverer;
position: fixed;
z-index: 9999;
background: map-get($foundation-palette, primary);
.close {
position: absolute;
right: 1rem;
top: .5rem;
color: $white;
z-index: 20;
.dashicons {
font-size: 2rem;
}
}
.is-drilldown {
margin-top: 1rem;
}
.menu {
display: block;
margin: 1rem 1.5rem 0 1.5rem;
li {
a {
color: $white;
text-transform: uppercase;
font-weight: 700;
text-transform: uppercase;
line-height: 1.2rem;
&:active {
background-color: darken($primary-color,20);
color: $white;
}

}
&.active {
a {
text-decoration: underline;
}
}
.is-drilldown-submenu {
//top: 5rem;
background-color: $primary-color;
li {
margin-bottom: 1rem;
a {
color: $white;
}
&.js-drilldown-back {
&>a {
&:before {
display: none !important;
}
}
}
}
}
}
}
}
50 changes: 50 additions & 0 deletions frontend-build/scss/responsive.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
// Mobile responsiveness -> Small size
@include breakpoint(small only) {
.home {
.page-body {
padding-top: 2.9rem;
}
}
.page-body {
.container-top-message {
text-align: center;
}
}
.main-slideshow {
.swiper-slide {
.slide-caption {
position: static;
width: 96%;
padding: 1rem;
padding-bottom: 4rem;
.slide-caption-btn {
margin-right: .9rem;
}
}
}
}
.main-footer {
.logo {
margin: auto;
float: none;
}
.footer-text-block {
p {
text-align: center;
}
.license-icons {
float: none;
margin: auto;
width: auto;
text-align: center;
}
}
.bottom-nav {
.menu-bottom-container {
.menu {
@include menu-align(center);
}
}
}
}
}
119 changes: 119 additions & 0 deletions themes/cc-commoners/assets/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3736,6 +3736,91 @@ a.thumbnail {
.site-header .main-nav .menu-item:first-child a {
border-left: none; }

.mobile-header {
position: fixed;
width: 100%;
background-color: #efbe01;
z-index: 990;
-webkit-box-shadow: 0 1px 3px rgba(10, 10, 10, 0.4);
box-shadow: 0 1px 3px rgba(10, 10, 10, 0.4); }
.mobile-header .logo {
display: block;
width: 230px;
height: 50px;
margin: 20px auto 0 auto;
background: url("../i/logo.png") no-repeat center top;
background-size: contain;
opacity: 1;
-webkit-transition: all .2s ease;
transition: all .2s ease;
width: 150px;
margin-top: .5rem; }
.mobile-header .logo h1, .mobile-header .logo span {
display: block;
text-indent: -1000rem; }
.mobile-header .logo:hover {
opacity: .4; }
.mobile-header .mobile-buttons {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
padding-top: .7rem;
text-align: right; }
.mobile-header .mobile-buttons a {
padding: 0 .3rem;
display: block; }
.mobile-header .mobile-buttons a .dashicons {
color: #0a0a0a;
font-size: 2rem;
width: 2rem;
height: 2rem; }

.menu-mobile-container {
margin-top: 3.8rem;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
z-index: 9999;
background: #efbe01; }
.menu-mobile-container .close {
position: absolute;
right: 1rem;
top: .5rem;
color: #fefefe;
z-index: 20; }
.menu-mobile-container .close .dashicons {
font-size: 2rem; }
.menu-mobile-container .is-drilldown {
margin-top: 1rem; }
.menu-mobile-container .menu {
display: block;
margin: 1rem 1.5rem 0 1.5rem; }
.menu-mobile-container .menu li a {
color: #fefefe;
text-transform: uppercase;
font-weight: 700;
text-transform: uppercase;
line-height: 1.2rem; }
.menu-mobile-container .menu li a:active {
background-color: #896d01;
color: #fefefe; }
.menu-mobile-container .menu li.active a {
text-decoration: underline; }
.menu-mobile-container .menu li .is-drilldown-submenu {
background-color: #efbe01; }
.menu-mobile-container .menu li .is-drilldown-submenu li {
margin-bottom: 1rem; }
.menu-mobile-container .menu li .is-drilldown-submenu li a {
color: #fefefe; }
.menu-mobile-container .menu li .is-drilldown-submenu li.js-drilldown-back > a:before {
display: none !important; }

.page-body .space-top {
padding-top: 12rem; }

Expand Down Expand Up @@ -4241,3 +4326,37 @@ a.thumbnail {
transition: all .5s ease; }
.display-details:hover {
background-color: #e6b800; }

@media screen and (max-width: 39.99875em) {
.home .page-body {
padding-top: 2.9rem; }
.page-body .container-top-message {
text-align: center; }
.main-slideshow .swiper-slide .slide-caption {
position: static;
width: 96%;
padding: 1rem;
padding-bottom: 4rem; }
.main-slideshow .swiper-slide .slide-caption .slide-caption-btn {
margin-right: .9rem; }
.main-footer .logo {
margin: auto;
float: none; }
.main-footer .footer-text-block p {
text-align: center; }
.main-footer .footer-text-block .license-icons {
float: none;
margin: auto;
width: auto;
text-align: center; }
.main-footer .bottom-nav .menu-bottom-container .menu li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center; }
.main-footer .bottom-nav .menu-bottom-container .menu li .submenu li {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start; } }
29 changes: 29 additions & 0 deletions themes/cc-commoners/assets/js/cc-commoners.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,4 +155,33 @@ jQuery(document).ready(function($){
getUserPublicUrl(selectedValue, profileUrlId);
});
$('.input-disable').find('input[type="text"]').attr('disabled', 'disabled');

//Mobile menu
var lastScroll = 0;
$(window).scroll(function () {
var st = $(window).scrollTop();
if ($('body').hasClass('admin-bar')) {
if ((st > 10) && (st > lastScroll)) {
$('.mobile-header').css({ top: 0 });
$('.menu-mobile-container').css({ top: -42 });
} else {
//arriba
if (st < 45) {
$('.mobile-header').css({ top: 45 });
$('.menu-mobile-container').css({ top: 4 });
}
}
}
lastScroll = st;
});
$('.open-mobile-menu').on('click', function (e) {
e.preventDefault();
$('.menu-mobile-container').toggleClass('hide');
return false;
});
$('.menu-mobile-container').find('.close').on('click', function (e) {
e.preventDefault();
$(this).parent().addClass('hide');
return false;
});
});
4 changes: 2 additions & 2 deletions themes/cc-commoners/footer.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@
<div class="footer-content">
<div class="grid-container">
<div class="grid-x grid-padding-x align-justify">
<div class="large-4 cell">
<div class="large-4 small-12 cell">
<a href="/" class="logo"><span>CC Network</span></a>
</div>
<div class="large-5 cell">
<div class="large-5 small-12 cell">
<div class="footer-text-block">
<div class="license-icons">
<a rel="license" href="https://creativecommons.org/licenses/by/4.0/" title="Creative Commons Attribution 4.0 International license">
Expand Down
35 changes: 32 additions & 3 deletions themes/cc-commoners/header.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,10 +36,39 @@

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


<header class="site-header" >
<header class="mobile-header show-for-small-only">
<div class="grid-container">
<div class="grid-x align-justify">
<div class="cell small-5">
<a href="<?php echo site_url(); ?>" class="logo"><h1>CC Network</h1></a>
</div>
<div class="cell small-3 mobile-buttons">
<a href="#" class="open-mobile-menu"><span class="dashicons dashicons-menu"></span></a>
<a href="#" class="open-mobile-search"><span class="dashicons dashicons-search"></span></a>
</div>
</div>
</div>
</header>
<div class="menu-mobile-container hide">
<a class="close" href="#">
<button class="close-button" aria-label="Close alert" type="button" data-close>
<span aria-hidden="true">&times;</span>
</button>
</a>
<?php
$args = array(
'theme_location' => 'top',
'container' => '',
'depth' => 1,
'items_wrap' => '<ul id = "%1$s" class = "menu vertical %2$s">%3$s</ul>'
);

wp_nav_menu($args);
?>
</div>
<header class="site-header hide-for-small-only" >
<div class="grid-container">
<div class="cell grid-x grid-padding-x align-center">
<div class="grid-x grid-padding-x align-center">
<div class="cell small-3">
<a href="<?php echo site_url(); ?>" class="logo"><h1>CC Network</h1></a>
</div>
Expand Down