From 0fc0d4964d508525b00abf769d4000220070751b Mon Sep 17 00:00:00 2001 From: Robbert de Kuiper Date: Fri, 31 Mar 2017 10:39:36 +0200 Subject: [PATCH] Rewriten the sliding effect of the filters, for a smoother experience --- assets/css/ajax-filter-posts.css | 324 ++++++++++++++++++------------- 1 file changed, 189 insertions(+), 135 deletions(-) diff --git a/assets/css/ajax-filter-posts.css b/assets/css/ajax-filter-posts.css index 60c27df..63c68de 100755 --- a/assets/css/ajax-filter-posts.css +++ b/assets/css/ajax-filter-posts.css @@ -7,130 +7,108 @@ overflow: hidden; } -.ajax-posts:after { - content:" "; - clear: both; - display: block; +/* + * To hide and show the filters, we wrap the filters and the content in a view that is bigger than its parent + * container, that has its overflow hidden. By default the filters are not shown, and gets translated out of the view. + * With JavaScript we toggle the filters in and out of the view, by translating the X position of the view. + * + * This gives a smoother transition than working with changes in the width or the margin. + */ +.ajax-posts__view { + transition: 0.2s ease; + width: 200%; + -webkit-transform: translateX(-50%); + -ms-transform: translateX(-50%); + transform: translateX(-50%); + will-change: tranform; } .ajax-posts aside, .ajax-posts__posts { - float: left; - width: 100%; opacity: 1; - transition: margin 0.2s ease, width 0.2s ease; - overflow: hidden; } +/* Change opacity to give the user feedback that new posts are loading */ .ajax-posts.is-waiting .ajax-posts__posts, .ajax-posts.is-waiting aside { opacity: 0.5; } .ajax-posts aside { - will-change: margin-left; + width: 50%; + float: left; + overflow: hidden; } .ajax-posts__posts { - width: 100%; - will-change: width; + width: 50%; + float: left; } -.ajax-posts aside { - width: 100%; - margin-left: -100%; +.ajax-posts.is-expanded-filters .ajax-posts__view { + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); +} + +@media screen and (min-width: 35rem) { + .ajax-posts__view { + width: 150%; + -webkit-transform: translateX(-33.33%); + -ms-transform: translateX(-33.33%); + transform: translateX(-33.33%); } -.ajax-posts.is-expanded-filters aside { - margin-left:0; -} - -@media screen and (min-width: 47rem) { .ajax-posts aside { - width: 50%; - margin-left: -50%; + width: 33.33%; } - - .ajax-posts.is-expanded-filters aside { - width: 50%; - } - .ajax-posts__posts { - margin: 0 -0.6rem; - } - - .ajax-posts.is-expanded-filters .ajax-posts__posts { - width: 50%; + width: 66.66%; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + float: left; } } -@media screen and (min-width: 71rem) { + +@media screen and (min-width: 62rem) { + .ajax-posts__view { + width: 133%; + -webkit-transform: translateX(-25%); + -ms-transform: translateX(-25%); + transform: translateX(-25%); + } .ajax-posts aside { - width: 33.33%; - margin-left: -33.33%; + width: 25%; } - .ajax-posts.is-expanded-filters aside { - width: 33.33%; - } - - .ajax-posts.is-expanded-filters .ajax-posts__posts { - width: 66.66%; + .ajax-posts__posts { + width: 75%; } } /*------------------------------------*\ - MAIN CONTENT + BUTTONS AND MESSAGES \*------------------------------------*/ -.ajax-posts button { - display: block; - margin: 2rem auto; - padding: 0.7em 1.5em 0.6em 1.5em; - background: #a6a6a6; - color: white; - border: 1px solid #a1a1a1; - border-radius: 4px; - text-transform: uppercase; - font-size: 0.8em; - letter-spacing: 1.2px; - font-weight: bold; - transition: background 0.2s ease; - outline: none; -} - -.ajax-posts button:hover { - background: #999; -} - -.ajax-posts .ajax-posts__toggle-filter { - margin-left: 0; -} - -.ajax-posts__show-filter-text { +.ajax-posts__show-recipes-text, +.ajax-posts__hide-filters-text { display: none; } -.ajax-posts.is-expanded-filters .ajax-posts__show-filter-text { - display: block; -} - -.ajax-posts.is-expanded-filters .ajax-posts__hide-filter-text { +.ajax-posts.is-expanded-filters .ajax-posts__filter-recipes-text { display: none; } -.ajax-posts-message { - text-align: center; -} - -.ajax-posts-message--empty { - width: 100%; - margin-top: 2rem; - color: #999; -} - .ajax-posts__screen-reader-only { position: absolute; width: 1px; @@ -142,18 +120,24 @@ border: 0; } +/* On small screen we can't see the posts when the filer is visible */ +@media screen and (max-width: 34rem) { + .ajax-posts.is-expanded-filters .ajax-posts__show-recipes-text { + display: block; + } +} + +/* On small screen we see the posts when the filer is visible, so we need a differen text */ +@media screen and (min-width: 35rem) { + .ajax-posts.is-expanded-filters .ajax-posts__hide-filters-text { + display: block; + } +} + /*------------------------------------*\ FILTERS \*------------------------------------*/ -.ajax-posts__filters h3 { - margin: 0; - font-size: 0.8rem; - text-transform: uppercase; - letter-spacing: 1.2px; - font-weight: bold; -} - .ajax-posts__filters ul { list-style-type: none; padding: 0; @@ -161,19 +145,6 @@ .ajax-posts__filter { display: block; - color: #333; - border-top: 1px dashed #B9B9B4; - padding: 5px; -} - -.ajax-posts_filters li:last-child a { - border-bottom: 1px dashed #B9B9B4; -} - -.ajax-posts__filter:hover, -.ajax-posts__filter.is-active, { - color: #27ae60; - text-decoration: none; } .ajax-posts__filter:after{ @@ -193,62 +164,50 @@ background: none; } -@media screen and (min-width: 47rem) { - .ajax-posts__filters { - padding-right: 1.2rem; - } -} - - /*------------------------------------*\ POSTS \*------------------------------------*/ .ajax-posts__post { width: 100%; - transition: width 0.2s ease; - will-change: width; } .ajax-posts__post article { overflow: hidden; } -.ajax-posts__post h3 { - font-size: 1.2rem; - margin: 0.3rem; -} - .ajax-posts__post img { - transition: 0.2s ease; width: 100%; } -.ajax-posts__post:hover img { - transform: scale(1.05); -} -@media screen and (min-width: 47rem) { +@media screen and (min-width: 35rem) { .ajax-posts__post { - display: inline-block; - vertical-align: top; - margin-right: -4px; - width: 50%; - padding: 0 0.6rem 0.6rem; - } - - .is-expanded-filters .ajax-posts__post{ - width: 100%; + /* IE11 doesn't support calc in flex-basis. 1.8rem padding, diveded by 2, the amount of items in a row */ + width: calc(50% - 0.9rem); + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; } } -@media screen and (min-width: 71rem) { +@media screen and (min-width: 35rem) and (max-width: 61rem) { + .is-expanded-filters .ajax-posts__post:nth-child(n+1) { + margin-right: 50%; /* fake a second element to break the flow */ + } +} + +@media screen and (min-width: 62rem) { .ajax-posts__post { - width: 33.33%; + /* IE11 doesn't support calc in flex-basis. Two times 1.8rem padding, diveded by 3, the amount of items in a row */ + width: calc(33.33% - 1.2rem); + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; } - .is-expanded-filters .ajax-posts__post{ - width: 50%; + .is-expanded-filters .ajax-posts__post:nth-child(2n) { + margin-right: 33.33%; /* fake a third element to break the flow */ } } @@ -262,7 +221,9 @@ position: absolute; left: 50%; top: 70px; - transform: translateX(-50%); + -webkit-transform: translateX(-50%); + -ms-transform: translateX(-50%); + transform: translateX(-50%); width: 40px; height: 40px; border-radius: 50%; @@ -311,4 +272,97 @@ 81.25% { border: solid 2px #D24D57; } 87.5% { border: solid 2px #68C3A3; } 93.75% { border: solid 20px #68C3A3; } +} + +/*------------------------------------*\ + CUSTOM STYLING + + When you copy the css and want to + remove the styling of this plugin, + you can skip this part. +\*------------------------------------*/ + +.ajax-posts button { + display: block; + margin: 2rem auto; + padding: 0.7em 1.5em 0.6em 1.5em; + background: #a6a6a6; + color: white; + border: 1px solid #a1a1a1; + border-radius: 4px; + text-transform: uppercase; + font-size: 0.8em; + letter-spacing: 1.2px; + font-weight: bold; + transition: background 0.2s ease; + outline: none; +} + +.ajax-posts button:hover { + background: #999; +} + +.ajax-posts .ajax-posts__toggle-filter { + margin-left: 0; +} + +.ajax-posts-message { + text-align: center; +} + +.ajax-posts-message--empty { + width: 100%; + margin-top: 2rem; + color: #999; +} + +.ajax-posts__filters h3 { + margin: 0; + font-size: 0.8rem; + text-transform: uppercase; + letter-spacing: 1.2px; + font-weight: bold; +} + +.ajax-posts__filter { + color: #333; + border-top: 1px dashed #B9B9B4; + padding: 5px; +} + +.ajax-posts_filters li:last-child a { + border-bottom: 1px dashed #B9B9B4; +} + +.ajax-posts__filter:hover, +.ajax-posts__filter.is-active, { + color: #27ae60; + text-decoration: none; +} + +.ajax-posts__post { + padding-bottom: 1.8rem; +} + +.ajax-posts__post h3 { + font-size: 1rem; + font-weight: bold; + margin-top: 0.8rem; +} + +.ajax-posts__post img { + transition: 0.2s ease; + width: 100%; +} + +.ajax-posts__post:hover img { + -webkit-transform: scale(1.05); + -ms-transform: scale(1.05); + transform: scale(1.05); +} + +@media screen and (min-width: 35rem) { + .ajax-posts__filters { + padding-right: 1.8rem; + } } \ No newline at end of file