Skip to content

Commit

Permalink
optim grid responsive
Browse files Browse the repository at this point in the history
  • Loading branch information
pfdt committed Dec 11, 2020
1 parent fad9a05 commit 02c14a0
Show file tree
Hide file tree
Showing 9 changed files with 131 additions and 66 deletions.
1 change: 0 additions & 1 deletion _includes/head.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,6 @@

<!-- CSS -->
<style rel="stylesheet" type="text/css" crossorigin="anonymous">
{% include pure-min.css %}
{% if site.env == 'production' %}
{% include main.min.css %}
{% else %}
Expand Down
89 changes: 65 additions & 24 deletions _includes/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,13 +42,16 @@
html {
color: var(--font-color);
background-color: var(--bg-color);
width: 100% !important;
overflow-x: hidden !important;
font-size: 100%;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
width: 100%;
width: 100% !important;
overflow-x: hidden !important;
height: 100%;
margin: 0;
overflow-y: auto;
Expand Down Expand Up @@ -124,15 +127,6 @@ svg .secondary-font-color {
white-space: nowrap;
overflow: hidden;
}
#main-container {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
overflow: hidden;
margin-top: 4.5rem;
padding-left: 0;
}
aside, div, footer, header, input, nav, section {
-webkit-box-sizing: border-box;
box-sizing: border-box
Expand All @@ -144,6 +138,43 @@ a {
outline: none
}

/*! extract from Pure v2.0.3 - Copyright 2013 Yahoo! - Licensed under the BSD License. */
.pure-g {
text-rendering: optimizespeed;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-ms-flex-line-pack: start;
align-content: flex-start
}

@media all and (-ms-high-contrast:none),
(-ms-high-contrast:active) {
table .pure-g {
display: block
}
}

.opera-only :-o-prefocus,
.pure-g {
word-spacing: -.43em
}

#main-container {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
overflow: hidden;
margin-top: 4.5rem;
padding-left: 0;
}


/****** Header Section *****/

/* header & nav */
Expand Down Expand Up @@ -600,6 +631,7 @@ body:not(.signed-in) #sort-button--rating {
#isotopeContent {
overflow: hidden;
opacity: 0;
margin: auto;
}
#isotopeContent.showOn {
opacity: 1
Expand All @@ -609,7 +641,7 @@ body:not(.signed-in) #sort-button--rating {
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
max-width: 37.5em;
// max-width: 37.5em;
}
.card--single {
padding: 0;
Expand All @@ -626,6 +658,7 @@ body:not(.signed-in) #sort-button--rating {
.card__cover {
overflow: hidden;
position: relative;
width: 100%;
}
.card__cover--list {
height: 12.4em;
Expand All @@ -638,6 +671,7 @@ body:not(.signed-in) #sort-button--rating {
}
.card__body--list {
overflow: hidden;
width: 100%;
height: 11.2em;
padding: 0.75em 0.5em;
}
Expand Down Expand Up @@ -713,6 +747,7 @@ body:not(.signed-in) #sort-button--rating {
}
.card__body__title--single {
padding: 0.1em 0 1em 0;
width: 100%;
}
.card__body__controls {
display: -webkit-box;
Expand All @@ -721,6 +756,7 @@ body:not(.signed-in) #sort-button--rating {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%;
height: 2em;
margin-bottom: 0.35em;
}
Expand Down Expand Up @@ -778,6 +814,7 @@ body:not(.signed-in) #sort-button--rating {
/****** Footer Section *****/
.card__body__edit-recipe {
text-align: center;
width: 100%;
min-height: 1.6em;
margin: 1.2em 0;
}
Expand Down Expand Up @@ -1051,6 +1088,21 @@ body:not(.signed-in) #sort-button--rating {
border-radius: 50%;
}

/****** .grid-layout media breakpoints *****/
/* cards between 18em and 26em */
.SM > #isotopeContent {max-width: 28.4em }
.MD > #isotopeContent {max-width: 54.4em }
.LG > #isotopeContent {max-width: 80.4em }
.XL > #isotopeContent {max-width: 106.4em }

.grid-item {width: 100%}
.MD > div:first-of-type > .grid-item{width: 50%}
.LG > div:first-of-type > .grid-item{width: 33.3333%}
.XL > div:first-of-type > .grid-item{width: 25%}

.grid-sm1_md1-2 {width: 100%}
.MD .grid-sm1_md1-2{width: 50%}


/****** Media Queries *****/
@media screen and (min-width: 35.5em) {
Expand Down Expand Up @@ -1149,9 +1201,6 @@ body:not(.signed-in) #sort-button--rating {
bottom:50px;
}
*/
.grid-layout {
max-width: 30em;
}
.card__body__ingredients {
padding-left: 0.6em;
padding-right: 0.8em;
Expand All @@ -1161,11 +1210,7 @@ body:not(.signed-in) #sort-button--rating {
}

}
/* 26em par card */
@media screen and (min-width: 52em) {
.grid-layout {
max-width: 52em;
}
.card__cover--single {
height: 18em;
}
Expand All @@ -1174,22 +1219,18 @@ body:not(.signed-in) #sort-button--rating {
.modal-lg {
max-width: 800px;
}
.grid-layout {
max-width: 76.9em;
}
.card__cover--single {
height: 20em;
}
}
@media screen and (min-width: 100em) {
.grid-layout {
max-width: none;
}
.card__cover--single {
height: 22em;
}

}


@media (hover: hover) {
a.simple-link:hover {
text-decoration: underline;
Expand Down
6 changes: 0 additions & 6 deletions _includes/pure-min.css
View file

This file was deleted.

6 changes: 3 additions & 3 deletions _includes/recipe-item.html
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
{% comment %}
recipe card displayed in recipes list
{% endcomment %}
<div class="grid-item pure-u-1 pure-u-md-1-2 pure-u-lg-1-3 pure-u-xl-1-4 c_{{ recipe.category | slugify }} r_{{ recipe.slug | slugify }}" data-name="{{ recipe.slug | slugify }}" data-date="{{ recipe.date }}" data-rating="0">
<div class="grid-item c_{{ recipe.category | slugify }} r_{{ recipe.slug | slugify }}" data-name="{{ recipe.slug | slugify }}" data-date="{{ recipe.date }}" data-rating="0">
<div class="card--list pure-g">
<a href="{{ recipe.url | relative_url }}" class=" card__cover card__cover--list before-bg--{{ recipe.category | slugify }} pure-u-1">
<a href="{{ recipe.url | relative_url }}" class="card__cover card__cover--list before-bg--{{ recipe.category | slugify }}">
{% if recipe.image and recipe.image != "" %}
<img class="card__cover__img lazy" data-src="{% if site.env != 'production' %}{{ site.urlbase }}{% endif %}{{ recipe.image }}{{ site.img-transform--card }}" alt="{{ recipe.title }}">
{% else %}
<div class="card__cover__img card__cover__img--placeholder" alt="{{ recipe.title }}"></div>
{% endif %}
</a>
<div class="card__body--list pure-u-1">
<div class="card__body--list">
<div class="card__body__controls">
<div class="card__body__controls__rating" value="{{ recipe.slug | slugify }}">
<div class="rating__dots"></div>
Expand Down
34 changes: 34 additions & 0 deletions _includes/resizeObserver.min.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
/* Only run if ResizeObserver is supported. */
if ('ResizeObserver' in self) {
/* Create a single ResizeObserver instance to handle all container elements. */
var ro = new ResizeObserver(function(entries) {
/* Default breakpoints that should apply to all observed elements that don't define their own custom breakpoints. */
var $1em = parseFloat(getComputedStyle(document.body, null).fontSize);
var defaultBreakpoints = {SM: 0, MD: $1em*18*2, LG: $1em*18*3, XL: $1em*18*4};

entries.forEach(function(entry) {
/* If breakpoints are defined on the observed element, use them. Otherwise use the defaults. */
var breakpoints = entry.target.dataset.breakpoints ?
JSON.parse(entry.target.dataset.breakpoints) :
defaultBreakpoints;

/* Update the matching breakpoints on the observed element. */
Object.keys(breakpoints).forEach(function(breakpoint) {
var minWidth = breakpoints[breakpoint];
if (entry.contentRect.width >= minWidth) {
entry.target.classList.add(breakpoint);
} else {
entry.target.classList.remove(breakpoint);
}
});
});
let event = new Event('ResizeObserverCompleted');
document.dispatchEvent(event);
});

/* Find all elements with the `data-observe-resizes` attribute and start observing them. */
var elements = document.querySelectorAll('[data-observe-resizes]');
for (var element, i = 0; element = elements[i]; i++) {
ro.observe(element);
}
}
3 changes: 3 additions & 0 deletions _layouts/default.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,4 +15,7 @@
<div class="overlay overlay--modal" id="overlay--modal"></div>
{% include footer.html %}
</body>
<script type="text/javascript">
{% include resizeObserver.min.js %}
</script>
</html>
22 changes: 6 additions & 16 deletions _layouts/recipe-single.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
{% comment %}
This layout is used by the documents in the _posts/ collection
{% endcomment %}
<div id="content" class="card card--single before-bg--{{ page.category | slugify }} r_{{ page.slug | slugify }}">
<div id="content" class="card card--single before-bg--{{ page.category | slugify }} r_{{ page.slug | slugify }}" data-observe-resizes>

<div class="card__cover card__cover--single">
{% if page.image and page.image != "" %}
Expand All @@ -16,7 +16,7 @@

<div class="card__body card__body--single pure-g">

<div class="card__body__controls pure-u-1">
<div class="card__body__controls">
<div class="card__body__controls__rating" value="{{ page.slug | slugify }}">
<div class="rating__dots"></div>
<div class="rating__borders"></div>
Expand All @@ -28,27 +28,17 @@
</div>
<div class="card__body__controls__bookmark" value="{{ page.slug | slugify }}"></div>
</div>
<div class="card__body__title card__body__title--single pure-u-1">
<div class="card__body__title card__body__title--single">
<a class="" href="{{ page.url | absolute_url }}">
<h1>{{ page.title | replace: "'", "’" | downcase }}</h1>
</a>
</div>

{% comment %}
<div class="card__body__taxonomies pure-u-1">
<div class="">{{ page.category | downcase }}</div>
<div class="">{{ page.technique | downcase }}</div>
{% if page.source and page.source != "" %}
<div class="source">source : <a href="{{ page.source }}" target="_blank" >{{ page.source }}</a></div>
{% else %}{% endif %}
</div>
{% endcomment %}

<div class="card__body__ingredients pure-u-1 pure-u-sm-1-2">
<div class="card__body__ingredients grid-sm1_md1-2">
<span class="card__body__ingredients__item p-ingredient">{{ page.ingredients | regex_replace: 'ounces?|oz\.', 'oz' | regex_replace: '(tea|bar)spoon', 'tsp' | regex_replace: '(?<=[0-9]),5', '½' | replace: "tablespoon", "tbsp" | replace: "1/4", "¼" | replace: "1/2", "½" | replace: "3/4", "¾" | replace: "1/3", "⅓" | replace: "2/3", "⅔" | regex_replace: '[\r\n]', '</span><span class="card__body__ingredients__item p-ingredient">'}}</span>
</div>

<div class="card__body__description--single pure-u-1 pure-u-sm-1-2">
<div class="card__body__description--single grid-sm1_md1-2">
<div class="card__body__description__label label">instructions :</div>
<div class="card__body__description__instructions e-instructions">{{ content }}</div>
{% if page.source-url and page.source-url != "" %}{% assign source-url = true %}{% else %}{% endif %}
Expand All @@ -61,7 +51,7 @@ <h1>{{ page.title | replace: "'", "’" | downcase }}</h1>
{% else %}{% endif %}
</div>

<div class="card__body__edit-recipe pure-u-1">
<div class="card__body__edit-recipe">
<a href="/admin/#/pages/_recipes-{{ page.slug | slugify }}-md/" class="adminContent simple-link">edit recipe</a>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion _layouts/recipes-list.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
{% comment %}
This layout is used to display all the recipes, filtered by a category if specified
{% endcomment %}
<div id="content" class="grid-layout">
<div id="content" class="grid-layout" data-observe-resizes>
<div id="isotopeContent" class="pure-g">
{% assign sorted_recipes = site.recipes | sort: "title" %}
{% for recipe in sorted_recipes %}
Expand Down
Loading

0 comments on commit 02c14a0

Please sign in to comment.