Skip to content

Commit

Permalink
Improve navigation and search overlay on small screens
Browse files Browse the repository at this point in the history 
- Fixes mmistakes#88
  • Loading branch information
@mmistakes
mmistakes committed Sep 5, 2014
1 parent 6b5002b commit 4bf60f5
Show file tree
Hide file tree
Showing 8 changed files with 127 additions and 98 deletions.
6 changes: 4 additions & 2 deletions _includes/navigation.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
{% endif %}
<li><a href="{{ domain }}{{ link.url }}" {% if link.url contains 'http' %}target="_blank"{% endif %}>{{ link.title }}</a></li>
{% endfor %}
{% if site.search %}<li class="dosearch"><i class="fa fa-search"></i> Search</li>{% endif %}
{% if site.search %}<li class="dosearch"><span><i class="fa fa-search"></i> Search</span></li>{% endif %}
</ul>
</nav>
</div><!-- /.navigation-wrapper -->
Expand All @@ -30,7 +30,9 @@
{% if site.logo != null %}
<a href="{{ site.url }}" class="site-logo" rel="home" title="{{ site.title }}"><img src="{{ site.url }}/images/{{ site.logo }}" width="200" height="200" alt="{{ site.title }} logo" class="animated fadeInUp"></a>
{% endif %}
<h1 class="site-title animated fadeIn"><a href="{{ site.url }}/">{{ site.title }}</a></h1>
<h1 class="site-title animated fadeIn"><a href="{{ site.url }}">{{ site.title }}</a></h1>
<h2 class="site-description animated fadeIn" itemprop="description">{{ site.description }}</h2>
</div>
</header><!-- /.masthead -->{% endif %}

<div class="js-menu-screen menu-screen"></div>
8 changes: 5 additions & 3 deletions _includes/scripts.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,21 +19,23 @@
var bs = {
close: $(".close-btn"),
searchform: $(".search-form"),
canvas: $("body"),
canvas: $(".js-menu-screen"),
dothis: $('.dosearch')
};

bs.dothis.on('click', function() {
$('.search-wrapper').css({ display: "block" });
$('body').toggleClass('no-scroll');
bs.searchform.toggleClass('active');
bs.searchform.find('input').focus();
bs.canvas.toggleClass('search-overlay');
bs.canvas.toggleClass('is-visible');
});

bs.close.on('click', function() {
$('.search-wrapper').removeAttr( 'style' );
$('body').toggleClass('no-scroll');
bs.searchform.toggleClass('active');
bs.canvas.removeClass('search-overlay');
bs.canvas.removeClass('is-visible');
});
})( jQuery, window );
</script>
Expand Down
87 changes: 1 addition & 86 deletions _sass/_forms.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -229,89 +229,4 @@ select:focus {
.form-inline .checkbox input[type="checkbox"] {
float : left;
margin-left : 0;
margin-right : 3px; }

// Jekyll Simple Search
// -------------------------------------------------
.dosearch {
padding: 6px 10px;
cursor: pointer;
display: block;
color: $white;
@include rounded(4px);
&:hover {
@include box-shadow($shadow: inset 0 0 1px $white);
background-color: lighten($black, 10);
}
}
.search-form {
width: 100%;
position: relative;
opacity: 0;
transition: all 200ms 100ms cubic-bezier(0, 0.6, 0.4, 1);
top: 0;
left: -200px;
z-index: 9002;
.search-field {
-webkit-appearance: none;
border: none;
width: 100%;
color: $white;
border: none;
border-bottom: 1px solid lighten($white, 20);
background-color: transparent;
box-shadow: none;
border-radius: 0;
background-clip: padding-box;
@include font-size(32);
&:focus {
box-shadow: none;
outline: none;
}
}
&.active {
opacity: 1;
top: 0;
left: 0;
}
&.hidden {
display: none;
}
::-webkit-input-placeholder {
@include font-size(32);
}
.search-field::-webkit-search-decoration,
.search-field::-webkit-search-cancel-button,
.search-field::-webkit-search-results-button,
.search-field::-webkit-search-results-decoration {
display: none;
}
.post-list {
position: absolute;
width: 100%;
h4, li, p, a {
color: $white;
}
li {
border-bottom: 1px solid lighten($white,20);
}
}
}
body.search-overlay {
overflow: hidden;
}
body.search-overlay:after {
content: '';
background-color: lighten($black,5);
background-color: rgba($black,.95);
width: 100%;
min-height: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 9001;
}
.no-js .dosearch {
display: none;
}
margin-right : 3px; }
38 changes: 33 additions & 5 deletions _sass/_layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,28 +15,40 @@ body {
@include clearfix;
ul {
display: inline-block;
width: 100%;
vertical-align: top;
margin: 0 0 50px;
padding: 4px 20px;
background-color: $black;
@include rounded(0 0 10px 10px);
@include media($medium) {
width: auto;
@include rounded(0 0 10px 10px);
}
@include clearfix;
}
li {
display: block;
float: left;
list-style: none;
text-align: center;
@include font-size(14,no);
@include font-size(24,no);
text-transform: uppercase;
color: $white;
@include media($medium) {
@include font-size(14,no);
}
a:hover {
@include box-shadow($shadow: inset 0 0 1px $white);
}
}
a {
display: block;
padding: 6px 10px;
margin-bottom: 10px;
padding: 12px 20px;
@include media($medium) {
margin-bottom: 0;
padding: 6px 10px;
}
color: $white;
@include rounded(4px);
&:hover {
Expand All @@ -46,8 +58,8 @@ body {
}
// Responsive nav toggle stuff
#site-nav {
z-index: 9000;
display: none;
z-index: 5;
@include media($medium) {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
Expand All @@ -74,7 +86,7 @@ body {
display: block;
}
#nav-toggle {
z-index: 9999;
z-index: 20;
display: block;
vertical-align: top;
margin: 0;
Expand All @@ -86,6 +98,22 @@ body {
display: none;
}
}
// menu overlay
.menu-screen {
@include position(fixed, 0px 0px 0px 0px);
@include transition;
background: $black;
opacity: 0;
visibility: hidden;
z-index: 10;
&.is-visible {
opacity: 1;
visibility: visible;
&:hover {
cursor: pointer;
}
}
}


// Masthead
Expand Down
78 changes: 78 additions & 0 deletions _sass/_simple-search.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
// Jekyll Simple Search
// -------------------------------------------------
.search-form {
width: 100%;
position: relative;
opacity: 0;
transition: all 200ms 100ms cubic-bezier(0, 0.6, 0.4, 1);
top: 0;
left: -200px;
z-index: 9002;
.search-field {
-webkit-appearance: none;
border: none;
width: 100%;
color: $white;
border: none;
border-bottom: 1px solid lighten($white, 20);
background-color: transparent;
box-shadow: none;
border-radius: 0;
background-clip: padding-box;
@include font-size(32);
&:focus {
box-shadow: none;
outline: none;
}
}
&.active {
opacity: 1;
top: 0;
left: 0;
}
&.hidden {
display: none;
}
::-webkit-input-placeholder {
@include font-size(32);
}
.search-field::-webkit-search-decoration,
.search-field::-webkit-search-cancel-button,
.search-field::-webkit-search-results-button,
.search-field::-webkit-search-results-decoration {
display: none;
}
.post-list {
position: absolute;
width: 100%;
h4, li, p, a {
color: $white;
}
li {
border-bottom: 1px solid lighten($white,20);
}
}
}
// search button in navigation
.no-js .dosearch {
display: none;
}
.dosearch {
span {
display: block;
margin-bottom: 10px;
padding: 12px 20px;
@include media($medium) {
margin-bottom: 0;
padding: 6px 10px;
}
cursor: pointer;
@include rounded(4px);
background-color: transparent;
color: $white;
&:hover {
@include box-shadow($shadow: inset 0 0 1px $white);
background-color: lighten($black, 10);
}
}
}
3 changes: 3 additions & 0 deletions _sass/_site.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -260,6 +260,9 @@ pre {
list-style-type: none;
}
}
.no-scroll {
overflow: hidden;
}


// Global Transition
Expand Down
3 changes: 2 additions & 1 deletion assets/css/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,4 +25,5 @@ sitemap: false
@import "forms";
@import "layout";
@import "vendor/font-awesome/font-awesome";
@import "vendor/magnific-popup/magnific-popup";
@import "vendor/magnific-popup/magnific-popup";
@import "simple-search";
2 changes: 1 addition & 1 deletion assets/js/scripts.min.js
View file

Large diffs are not rendered by default.

0 comments on commit 4bf60f5

Please sign in to comment.