diff --git a/CHANGELOG.md b/CHANGELOG.md index ff5fd2d4..43ce3b7e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,14 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html) +v1.41.0 +------------------------------ +*April 8, 2019* + +### Added +- Added `c-listingSkeleton` component, a `c-listing` loading skeleton. + + v1.40.0 ------------------------------ *April 3, 2019* diff --git a/package.json b/package.json index ccb68c1a..0a81f3be 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "@justeat/fozzie", "title": "Fozzie – Just Eat UI Web Framework", "description": "UI Web Framework for the Just Eat Global Platform", - "version": "1.40.0", + "version": "1.41.0", "main": "dist/js/index.js", "files": [ "dist/js", diff --git a/src/scss/_dependencies.scss b/src/scss/_dependencies.scss index 66c7bf77..23351826 100644 --- a/src/scss/_dependencies.scss +++ b/src/scss/_dependencies.scss @@ -88,6 +88,7 @@ @import 'components/optional/content-title'; @import 'components/optional/fullscreen-pop-over'; @import 'components/optional/listings'; +@import 'components/optional/listings-skeleton'; @import 'components/optional/menu'; @import 'components/optional/overflow-carousel'; @import 'components/optional/page-banner'; diff --git a/src/scss/components/optional/_listings-skeleton.scss b/src/scss/components/optional/_listings-skeleton.scss new file mode 100644 index 00000000..2247b062 --- /dev/null +++ b/src/scss/components/optional/_listings-skeleton.scss @@ -0,0 +1,166 @@ + +@keyframes skeletonGradient { + 0% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +} + +@mixin anim() { + border-radius: 2px; + background: linear-gradient(-45deg, $grey--offWhite, $grey--offWhite, $grey--lightest, $grey--offWhite, $grey--offWhite); + background-size: 2000px 600%; + animation: skeletonGradient 2s ease infinite; + animation-fill-mode: forwards; +} + +@mixin listingSkeleton() { + + .c-listingSkeleton { + position: relative; + background: $white; + border-radius: spacing(); + padding: 85px spacing(x2) spacing(x2); + margin-bottom: spacing(x2); + + @include media('>mid') { + padding-top: 73px; + } + } + + .c-listingSkeleton-info { + &:before, + &:after { + content: ''; + position: absolute; + top: spacing(x2); + @include anim(); + } + + //Skeleton image + &:before { + left: spacing(x2); + height: 55px; + width: 55px; + } + + //Skeleton title + &:after { + left: 87px; + height: 16px; + width: 180px; + + @include media('>mid') { + width: 300px; + } + } + } + + .c-listingSkeleton-review { + position: absolute; + top: 57px; + left: 87px; + + &:before, + &:after { + content: ''; + height: 12px; + @include anim(); + display: inline-block; + } + + //Review stars + &:before { + width: 70px; + margin-right: spacing(); + + @include media('>mid') { + width: 80px; + } + } + + //Review count + &:after { + width: 25px; + + @include media('>mid') { + width: 30px; + } + } + } + + .c-listingSkeleton-cuisines { + top: 38px; + left: 87px; + position: absolute; + + &:before, + &:after { + content: ''; + height: 12px; + @include anim(); + display: inline-block; + } + + &:before { + width: 50px; + margin-right: spacing(); + + @include media('>mid') { + width: 70px; + } + } + + &:after { + width: 35px; + + @include media('>mid') { + width: 60px; + } + } + } + + .c-listingSkeleton-meta { + width: 100%; + position: relative; + margin-bottom: 40px; + + &, + &:before, + &:after { + height: 15px; + display: block; + @include anim(); + + @include media('>mid') { + height: 13px; + } + } + + &:before, + &:after { + content: ''; + position: absolute; + margin-bottom: spacing(); + } + + &:before { + width: 60%; + top: calc(100% + 8px); + } + + &:after { + width: 25%; + top: calc(200% + 16px); + } + + @include media('>mid') { + width: 360px; + position: absolute; + top: spacing(x2); + right: spacing(x2); + } + } +}