From 3108ad13342eeb148e53685c7f8c9dbbd6acbe88 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Eduardo=20G=C3=B3mez?= Date: Sun, 12 Jul 2020 16:16:48 +0200 Subject: [PATCH] Taglist (#228) --- assets/css/tags.css | 1 + assets/js/helpers.js | 2 +- locales/en.json | 2 +- locales/es.json | 2 +- package.json | 2 +- page-tags.hbs | 61 +++++++++++++++++ partials/loop.hbs | 6 +- src/sass/components/tags/_tag-card.scss | 87 +++++++++++++++++++++++++ src/sass/layouts/_tags-container.scss | 13 ++++ src/sass/tags.scss | 6 ++ src/webpack.mix.js | 1 + 11 files changed, 174 insertions(+), 9 deletions(-) create mode 100644 assets/css/tags.css create mode 100644 page-tags.hbs create mode 100644 src/sass/components/tags/_tag-card.scss create mode 100644 src/sass/layouts/_tags-container.scss create mode 100644 src/sass/tags.scss diff --git a/assets/css/tags.css b/assets/css/tags.css new file mode 100644 index 0000000..f7b0ff9 --- /dev/null +++ b/assets/css/tags.css @@ -0,0 +1 @@ +@media only screen and (min-width:48rem){.l-tags-container{display:flex;flex-wrap:wrap;justify-content:center;margin:0 auto;max-width:720px}}@media only screen and (min-width:64rem){.l-tags-container{max-width:1080px}}.m-tag-card{height:180px;margin:0 0 20px;position:relative;border-radius:10px;border:1px solid var(--secondary-border-color);transition:all .25s cubic-bezier(.02,.01,.47,1)}.m-tag-card:hover{transform:translateY(-5px)}.m-tag-card:hover:before{box-shadow:var(--article-shadow-hover),0 0 0 transparent}@media only screen and (min-width:48rem){.m-tag-card{width:320px;margin:0 20px 40px}}.m-tag-card:before{content:"";position:absolute;top:10px;right:10px;bottom:0;left:10px;border-radius:10px;z-index:1;box-shadow:var(--article-shadow-normal),0 0 0 transparent;transition:all .25s cubic-bezier(.02,.01,.47,1)}.m-tag-card__link{display:block;width:100%;height:100%;border-radius:10px;overflow:hidden;position:relative;background-color:#000;z-index:2}.m-tag-card__link.no-picture{background-color:var(--secondary-subtle-color)}.m-tag-card__picture{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:10px;-o-object-fit:cover;object-fit:cover;opacity:.7;z-index:1}.m-tag-card__info{position:absolute;left:15px;bottom:15px;color:#fff;z-index:2}.m-tag-card__info.no-picture{color:var(--titles-color)}.m-tag-card__name{letter-spacing:.3px;line-height:1.3;font-size:1.25rem;font-weight:600;margin:0 0 5px}.m-tag-card__counter{display:block;letter-spacing:.2px;font-size:.875rem} \ No newline at end of file diff --git a/assets/js/helpers.js b/assets/js/helpers.js index 51dbeb8..eedfb91 100644 --- a/assets/js/helpers.js +++ b/assets/js/helpers.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{1:function(e,t,n){"use strict";n.r(t),n.d(t,"isRTL",(function(){return a})),n.d(t,"isMobile",(function(){return o})),n.d(t,"isDarkMode",(function(){return r})),n.d(t,"formatDate",(function(){return i})),n.d(t,"getParameterByName",(function(){return c})),n.d(t,"adjustImageGallery",(function(){return s})),n.d(t,"managePostImages",(function(){return u})),n.d(t,"makeImagesZoomable",(function(){return l}));var a=function(){var e=document.querySelector("html");return["ar","he","fa"].includes(e.getAttribute("lang"))},o=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"768px";return window.matchMedia("(max-width: ".concat(e,")")).matches},r=function(){var e=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)");return e&&e.matches},i=function(e){return e?new Date(e).toLocaleDateString(document.documentElement.lang,{year:"numeric",month:"long",day:"numeric"}):""},c=function(e,t){t||(t=window.location.href),e=e.replace(/[\[\]]/g,"\\$&");var n=new RegExp("[?&]".concat(e,"(=([^&#]*)|&|#|$)")).exec(t);return n?n[2]?decodeURIComponent(n[2].replace(/\+/g," ")):"":null},s=function(){for(var e=document.querySelectorAll(".kg-gallery-image img"),t=0,n=e.length;t0&&void 0!==arguments[0]?arguments[0]:"768px";return window.matchMedia("(max-width: ".concat(e,")")).matches},r=function(){var e=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)");return e&&e.matches},i=function(e){return e?new Date(e).toLocaleDateString(document.documentElement.lang,{year:"numeric",month:"long",day:"numeric"}):""},c=function(e,t){t||(t=window.location.href),e=e.replace(/[\[\]]/g,"\\$&");var n=new RegExp("[?&]".concat(e,"(=([^&#]*)|&|#|$)")).exec(t);return n?n[2]?decodeURIComponent(n[2].replace(/\+/g," ")):"":null},s=function(){for(var e=document.querySelectorAll(".kg-gallery-image img"),t=0,n=e.length;tAmong with ", "Among with no break line": "Among with ", "Apparently there are no posts at the moment, check again later.": "Apparently there are no posts at the moment, check again later.", diff --git a/locales/es.json b/locales/es.json index dd9b450..9169d16 100644 --- a/locales/es.json +++ b/locales/es.json @@ -2,7 +2,7 @@ "% min read": "% min de lectura", "% posts": "% artículos", "1 min read": "1 min de lectura", - "1 post": "Un artículo", + "1 post": "1 artículo", "Among with": "
Junto con ", "Among with no break line": "Junto con ", "Apparently there are no posts at the moment, check again later.": "Aparentemente no hay artículos en este momento, revisa más tarde.", diff --git a/package.json b/package.json index 02668a4..3822d20 100644 --- a/package.json +++ b/package.json @@ -54,5 +54,5 @@ "desktop": "assets/screenshot-desktop.jpg", "mobile": "assets/screenshot-mobile.jpg" }, - "version": "0.7.6" + "version": "0.7.7" } diff --git a/page-tags.hbs b/page-tags.hbs new file mode 100644 index 0000000..6148ef7 --- /dev/null +++ b/page-tags.hbs @@ -0,0 +1,61 @@ +{{!-- +This template is used for the tags page. +You must first create a page called Tags in the dashboard to enable it. +--}} + +{{!-- This block loads specific styles for the authors page --}} +{{#contentFor "styles"}} + + + +{{/contentFor}} + +{{!-- The tag below means: insert everything in this file +into the {body} of the default.hbs template --}} +{{!< default}} + +{{!-- Special header.hbs partial to generate the
tag --}} +{{#post}} + {{> header background=feature_image}} +{{/post}} + +
+ {{#post}} + {{!-- Inject styles of the hero image to make it responsive --}} + {{> hero background=feature_image}} +
+

{{title}}

+ {{#if custom_excerpt}} +

{{custom_excerpt}}

+ {{/if}} +
+ + {{/post}} +
+
+
+ {{#get 'tags' limit='all' include='count.posts'}} + {{#foreach tags}} +
+ + {{#if feature_image}} + + {{/if}} +
+

{{name}}

+ + {{plural count.posts empty=(t "No posts") singular=(t "1 post") plural=(t "% posts")}} + +
+ +
+ {{else}} +

+ {{t "No tags found :("}} +

+ {{/foreach}} + {{/get}} +
+
+
+
diff --git a/partials/loop.hbs b/partials/loop.hbs index ca850b2..1a747ec 100644 --- a/partials/loop.hbs +++ b/partials/loop.hbs @@ -4,11 +4,7 @@ {{#is "post"}}
{{/is}} - {{#if feature_image}} -
- {{else}} -
- {{/if}} +
{{#if feature_image}} diff --git a/src/sass/components/tags/_tag-card.scss b/src/sass/components/tags/_tag-card.scss new file mode 100644 index 0000000..bf5080b --- /dev/null +++ b/src/sass/components/tags/_tag-card.scss @@ -0,0 +1,87 @@ +.m-tag-card { + height: 180px; + margin: 0 0 20px; + position: relative; + border-radius: 10px; + border: 1px solid var(--secondary-border-color); + @include transition(all .25s cubic-bezier(.02,.01,.47,1)); + + &:hover { + @include transform(translateY(-5px)); + + &:before { + @include bs(var(--article-shadow-hover)); + } + } + + @include respond-to('medium') { + width: 320px; + margin: 0 20px 40px; + } + + &:before { + content: ''; + position: absolute; + top: 10px; + right: 10px; + bottom: 0; + left: 10px; + border-radius: 10px; + z-index: 1; + @include bs(var(--article-shadow-normal)); + @include transition(all .25s cubic-bezier(.02,.01,.47,1)); + } +} + +.m-tag-card__link { + display: block; + width: 100%; + height: 100%; + border-radius: 10px; + overflow: hidden; + position: relative; + background-color: $black; + z-index: 2; + + &.no-picture { + background-color: var(--secondary-subtle-color); + } +} + +.m-tag-card__picture { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 10px; + object-fit: cover; + opacity: 0.7; + z-index: 1; +} + +.m-tag-card__info { + position: absolute; + left: 15px; + bottom: 15px; + color: $white; + z-index: 2; + + &.no-picture { + color: var(--titles-color); + } +} + +.m-tag-card__name { + letter-spacing: 0.3px; + line-height: 1.3; + font-size: 1.25rem; + font-weight: 600; + margin: 0 0 5px; +} + +.m-tag-card__counter { + display: block; + letter-spacing: 0.2px; + font-size: 0.875rem; +} diff --git a/src/sass/layouts/_tags-container.scss b/src/sass/layouts/_tags-container.scss new file mode 100644 index 0000000..d5ecf21 --- /dev/null +++ b/src/sass/layouts/_tags-container.scss @@ -0,0 +1,13 @@ +.l-tags-container { + @include respond-to('medium') { + display: flex; + flex-wrap: wrap; + justify-content: center; + margin: 0 auto; + max-width: 720px; + } + + @include respond-to('large') { + max-width: 1080px; + } +} diff --git a/src/sass/tags.scss b/src/sass/tags.scss new file mode 100644 index 0000000..66ab99c --- /dev/null +++ b/src/sass/tags.scss @@ -0,0 +1,6 @@ +@import "common/mixins"; +@import "common/variables"; + +@import "layouts/tags-container"; + +@import "components/tags/tag-card"; diff --git a/src/webpack.mix.js b/src/webpack.mix.js index 0a30afd..1a0bd0c 100644 --- a/src/webpack.mix.js +++ b/src/webpack.mix.js @@ -29,6 +29,7 @@ mix.js('js/helpers.js', 'js/') .sass('sass/listing.scss', 'css/') .sass('sass/post.scss', 'css/') .sass('sass/newsletter.scss', 'css/') + .sass('sass/tags.scss', 'css/') .sass('sass/404.scss', 'css/') .options({ processCssUrls: false