Labyricorn/liquid
1
0
Fork 0
mirror of https://github.com/Shopify/liquid.git synced 2026-09-12 23:40:45 -07:00
Code Issues Packages Projects Releases Wiki Activity

Added mobile layout

Browse Source
This commit is contained in:
Tetsuro
2016-03-18 20:29:35 -04:00
parent 3a4bc8a153
commit 7aa82e8547
8 changed files with 132 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_includes/sidebar.html
+2 -2
View File
@@ -1,8 +1,8 @@
<div class="sidebar"> <div class="sidebar">
<div class="sidebar--logo"> <div class="sidebar__logo">
<a href="{{ "/" | prepend: site.baseurl }}">Liquid</a> <a href="{{ "/" | prepend: site.baseurl }}">Liquid</a>
</div> </div>
<nav class="sidebar--nav"> {% assign sections = "basics, tags, filters" | split: ", " %} <nav class="sidebar__nav"> {% assign sections = "basics, tags, filters" | split: ", " %}
{% for section in sections %} {% for section in sections %}
<h3 class="section__header">{{ section | capitalize }}</h3> <h3 class="section__header">{{ section | capitalize }}</h3>
_layouts/default.html
+7 -1
View File
@@ -13,17 +13,23 @@
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}"> <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
<link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}" /> <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head> </head>
<body> <body>
{% include sidebar.html %} {% include sidebar.html %}
<div class="content__overlay"></div>
<div class="content__area"> <div class="content__area">
<div class="content"> <div class="content">
<button class="menu-button">
<i class="icon fa fa-2x fa-bars" aria-hidden="true"></i>
<span>Menu</span>
</button>
<h1>{{ page.title }}</h1> <h1>{{ page.title }}</h1>
{{ content }} {{ content }}
</div> </div>
</div> </div>
</body> </body>
<script src="{{ '/js/script.js' | prepend: site.baseurl }}"></script>
</html> </html>
_sass/modules/_buttons.scss
+17
View File
@@ -32,3 +32,20 @@
vertical-align: middle; vertical-align: middle;
margin-right: $spacing-unit / 4; margin-right: $spacing-unit / 4;
} }
/*============================================================================
Menu button
==============================================================================*/
.menu-button {
display: inline-block;
background: none;
border: none;
margin: $spacing-unit / 2 0 $spacing-unit / 2 ($spacing-unit / 4 * -1);
padding: $spacing-unit / 4;
color: $color-slate;
@include tablet-and-up {
display: none;
}
}
_sass/modules/_layout.scss
+41 -4
View File
@@ -3,13 +3,39 @@ $sidebar-width: 250px;
$logo-height: 130px; $logo-height: 130px;
$wrapper-width: 800px; $wrapper-width: 800px;
body {
// display: flex;
// flex-direction: column;
// @include tablet-and-up {
// flex-direction: row;
// }
}
/*============================================================================ /*============================================================================
Content Area Content Area
==============================================================================*/ ==============================================================================*/
.content__area { .content__area {
padding: $spacing-unit $spacing-unit $spacing-unit ($spacing-unit + $sidebar-width);
width: 100%; width: 100%;
@include tablet-and-up {
padding: $spacing-unit $spacing-unit $spacing-unit ($spacing-unit + $sidebar-width);
}
}
.content__overlay {
background: rgba(0, 0, 0, 0.4);
width: 100%;
height: 100vh;
position: fixed;
z-index: 1;
display: none;
}
.content__overlay--is-active {
display: block;
} }
.content { .content {
@@ -26,11 +52,22 @@ $wrapper-width: 800px;
.sidebar { .sidebar {
background: $color-blue-5; background: $color-blue-5;
width: $sidebar-width; width: $sidebar-width;
height: 100vh;
position: fixed; position: fixed;
transform: translateX($sidebar-width * -1);
transition: all 0.15s ease;
z-index: 2;
height: 100vh;
@include tablet-and-up {
transform: translateX(0);
}
} }
.sidebar--logo { .sidebar--is-visible {
transform: translateX(0);
}
.sidebar__logo {
font-size: $base-font-size * 2; font-size: $base-font-size * 2;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
@@ -49,7 +86,7 @@ $wrapper-width: 800px;
} }
} }
.sidebar--nav { .sidebar__nav {
padding: $spacing-unit $spacing-unit ($spacing-unit + $logo-height); // Add a bit more padding at the bottom for consistency. padding: $spacing-unit $spacing-unit ($spacing-unit + $logo-height); // Add a bit more padding at the bottom for consistency.
font-weight: bold; font-weight: bold;
max-height: 100%; max-height: 100%;
_sass/partials/_helpers.scss
+9
View File
@@ -5,3 +5,12 @@
clear: both; clear: both;
} }
} }
.visually-hidden {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
_sass/partials/_media-queries.scss
+43
View File
@@ -0,0 +1,43 @@
/*============================================================================
Media queries
==============================================================================*/
$phone-width: 321px;
$tablet-width: 768px;
$desktop-width: 1024px;
@mixin phone {
@media (max-width: #{$phone-width}) {
@content;
}
}
@mixin phone-and-up {
@media (min-width: #{$phone-width}) {
@content;
}
}
@mixin phone-to-tablet {
@media (min-width: #{$phone-width}) and (max-width: #{$tablet-width - 1px}) {
@content;
}
}
@mixin tablet {
@media (min-width: #{$tablet-width}) and (max-width: #{$desktop-width - 1px}) {
@content;
}
}
@mixin tablet-and-up {
@media (min-width: #{$tablet-width}) {
@content;
}
}
@mixin desktop {
@media (min-width: #{$desktop-width}) {
@content;
}
}
css/main.scss
+1 -1
View File
@@ -1,6 +1,5 @@
--- ---
layout: null layout: null
# hello tets
--- ---
@charset "utf-8"; @charset "utf-8";
@@ -8,6 +7,7 @@ layout: null
@import "partials/defaults"; @import "partials/defaults";
@import "partials/colors"; @import "partials/colors";
@import "partials/helpers"; @import "partials/helpers";
@import "partials/media-queries";
@import "modules/base"; @import "modules/base";
@import "modules/layout"; @import "modules/layout";
js/script.js
+12
View File
@@ -0,0 +1,12 @@
$menuButton = $(".menu-button");
$sidebar = $(".sidebar");
$contentOverlay = $(".content__overlay");
$(document).ready(function() {
$menuButton.add($contentOverlay).on("click", function() {
$sidebar.toggleClass("sidebar--is-visible");
$contentOverlay.toggleClass("content__overlay--is-active");
});
})