mirror of
https://github.com/ulaulaman/eduinaf-ajax-filter-posts.git
synced 2025-03-12 05:50:05 +01:00
Rewriten the sliding effect of the filters, for a smoother experience
This commit is contained in:
Robbert de Kuiper
parent
db0d7cdea2
commit
0fc0d4964d
@ -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;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user