From 74ac62f77a070058051e2fc3ec4c584a6c87376b Mon Sep 17 00:00:00 2001 From: steven Date: Thu, 16 Sep 2021 16:38:35 -0400 Subject: [PATCH] develop/blog - list refactor and pagination navigation features (#3) feat(theme): pagination navigation refactored out of the list template into its own partial features: - hidden if there's only 1 page - shows up to 5 page numbers along with links to previous/next and first/last - hide first/last if within 1 page from end - ellipses denoting page numbers not shown refactor(posts): limit body text row length to 80 char feat(theme): masonry.js implemented masonry.js so that items on list pages fill the content space more efficiently, wasting less space on the page refactor(theme): lists taxonomy and terms layouts have been consolidated back into default list template Co-authored-by: steven-y-e Reviewed-on: http://irie.clinic.homo.casa/steven-y-e/friends-of-mineral-town/pulls/3 Co-Authored-By: steven Co-Committed-By: steven --- blog/content/posts/AJ3Georgetown2021.md | 7 +++- .../themes/mineral/layouts/_default/list.html | 29 ++++++-------- .../mineral/layouts/_default/taxonomy.html | 37 ------------------ .../mineral/layouts/_default/terms.html | 36 ------------------ .../mineral/layouts/partials/pagination.html | 38 +++++++++++++++++++ blog/themes/mineral/static/css/mineral.css | 37 +++++++++++++++++- blog/themes/mineral/static/js/masonry.js | 9 +++++ 7 files changed, 101 insertions(+), 92 deletions(-) delete mode 100644 blog/themes/mineral/layouts/_default/taxonomy.html delete mode 100644 blog/themes/mineral/layouts/_default/terms.html create mode 100644 blog/themes/mineral/layouts/partials/pagination.html create mode 100644 blog/themes/mineral/static/js/masonry.js diff --git a/blog/content/posts/AJ3Georgetown2021.md b/blog/content/posts/AJ3Georgetown2021.md index 5e0a796..98abb96 100644 --- a/blog/content/posts/AJ3Georgetown2021.md +++ b/blog/content/posts/AJ3Georgetown2021.md @@ -8,4 +8,9 @@ draft: false ![Air Jordan 3 Retro Georgetown (2021) [Navy]](/images/aj3georgetownstock.jpg) -This Air Jordan 3 (Retro) features a navy coloured tint to a familliar colour-blocking pattern. Being a new colourway rather than a direct copy of one of the designs of the original Air Jordan 3, Jordan (brand) elected to replace all of the Nike branding with the word Jordan, and the replacement of the Swoosh with a "Jumpman" logo. That being said, the absense of Nike branding is not a reason to ignore this colourway; it's so easy to wear. +This Air Jordan 3 (Retro) features a navy coloured tint to a familliar +colour-blocking pattern. Being a new colourway rather than a direct copy of +one of the designs of the original Air Jordan 3, Jordan (brand) elected to +replace all of the Nike branding with the word Jordan, and the replacement of +the Swoosh with a "Jumpman" logo. That being said, the absense of Nike +branding is not a reason to ignore this colourway; it's so easy to wear. diff --git a/blog/themes/mineral/layouts/_default/list.html b/blog/themes/mineral/layouts/_default/list.html index 8605e0d..292e523 100644 --- a/blog/themes/mineral/layouts/_default/list.html +++ b/blog/themes/mineral/layouts/_default/list.html @@ -1,15 +1,20 @@ {{ define "main" }} -
- {{ $paginator := .Paginate ( where site.RegularPages "Type" "in" site.Params.mainSections ) }} + {{ $paginator := .Paginate ( where site.RegularPages "Type" "in" site.Params.mainSections ) }} + {{ if ne .Kind "home" }} + {{ $paginator = .Data }} + {{ end }} +
{{ range $paginator.Pages }} -
+
{{ range .Params.categories }} {{ . }} {{ end }}

{{ .Title }}

-

{{.Date.Format "January 2, 2006"}}

+ {{ if ne .Kind "term" }} +

{{.Date.Format "January 2, 2006"}}

+ {{ end }}

{{ .Summary | plainify | htmlUnescape }}

{{ range .Params.tags }} @@ -20,17 +25,7 @@ {{ end }}

- {{ if gt $paginator.TotalPages 1 }} -
- -
- {{ end }} + {{- partial "pagination.html" . -}} + + {{ end }} \ No newline at end of file diff --git a/blog/themes/mineral/layouts/_default/taxonomy.html b/blog/themes/mineral/layouts/_default/taxonomy.html deleted file mode 100644 index a7fb191..0000000 --- a/blog/themes/mineral/layouts/_default/taxonomy.html +++ /dev/null @@ -1,37 +0,0 @@ -{{ define "main" }} -
- {{ $paginator := .Paginate ( where site.RegularPages "Type" "in" site.Params.mainSections ) }} - {{ $paginator = .Data }} -
- - {{ range $paginator.Pages }} -
- {{ range .Params.categories }} - {{ . }} - {{ end }} -

{{ .Title }}

-

{{.Date.Format "January 2, 2006"}}

-

{{ .Summary | plainify | htmlUnescape }}

-

- {{ range .Params.tags }} - #{{ . }} - {{ end }} -

-
- {{ end }} -
- - {{ if gt $paginator.TotalPages 1 }} -
- -
- {{ end }} -{{ end }} \ No newline at end of file diff --git a/blog/themes/mineral/layouts/_default/terms.html b/blog/themes/mineral/layouts/_default/terms.html deleted file mode 100644 index e1b42c1..0000000 --- a/blog/themes/mineral/layouts/_default/terms.html +++ /dev/null @@ -1,36 +0,0 @@ -{{ define "main" }} -
- {{ $paginator := .Paginate ( where site.RegularPages "Type" "in" site.Params.mainSections ) }} - {{ $paginator = .Data }} -
- - {{ range $paginator.Pages }} -
- {{ range .Params.categories }} - {{ . }} - {{ end }} -

{{ .Title }}

-

{{ .Summary | plainify | htmlUnescape }}

-

- {{ range .Params.tags }} - #{{ . }} - {{ end }} -

-
- {{ end }} -
- - {{ if gt $paginator.TotalPages 1 }} -
- -
- {{ end }} -{{ end }} \ No newline at end of file diff --git a/blog/themes/mineral/layouts/partials/pagination.html b/blog/themes/mineral/layouts/partials/pagination.html new file mode 100644 index 0000000..52b480a --- /dev/null +++ b/blog/themes/mineral/layouts/partials/pagination.html @@ -0,0 +1,38 @@ +{{ $paginator := $.Paginator }} +{{ if ne .Kind "home" }} + {{ $paginator = .Data }} +{{ end }} +{{ if gt $paginator.TotalPages 1 }} +{{ $.Scratch.Set "dot_rendered" false }} + +{{ end }} diff --git a/blog/themes/mineral/static/css/mineral.css b/blog/themes/mineral/static/css/mineral.css index 68a7e1a..2d2a864 100644 --- a/blog/themes/mineral/static/css/mineral.css +++ b/blog/themes/mineral/static/css/mineral.css @@ -1,3 +1,38 @@ +/* post styles */ article p img { width: 100%; -} \ No newline at end of file +} + +/* pagination styles */ +.pagination { + display: flex; + list-style: none; + border-radius: .25rem; + margin: 20px 0; + padding: 0; + justify-content: center; +} + +.page-item { + position: relative; + display: block; + padding: 0.5em; + margin: 0.25em; + line-height: 1.25; + border: 1px dashed; + background: #fff; +} + +.page-item.active { + background: #1EAEDB; +} + +.page-item.active .page-link { + color: #fff; +} + +.page-item.disabled .page-link { + color: #6c757d; + pointer-events: none; + cursor: auto; +} diff --git a/blog/themes/mineral/static/js/masonry.js b/blog/themes/mineral/static/js/masonry.js new file mode 100644 index 0000000..53386ae --- /dev/null +++ b/blog/themes/mineral/static/js/masonry.js @@ -0,0 +1,9 @@ +/*! + * Masonry PACKAGED v4.2.2 + * Cascading grid layout library + * https://masonry.desandro.com + * MIT License + * by David DeSandro + */ + +!function(t,e){"function"==typeof define&&define.amd?define("jquery-bridget/jquery-bridget",["jquery"],function(i){return e(t,i)}):"object"==typeof module&&module.exports?module.exports=e(t,require("jquery")):t.jQueryBridget=e(t,t.jQuery)}(window,function(t,e){"use strict";function i(i,r,a){function h(t,e,n){var o,r="$()."+i+'("'+e+'")';return t.each(function(t,h){var u=a.data(h,i);if(!u)return void s(i+" not initialized. Cannot call methods, i.e. "+r);var d=u[e];if(!d||"_"==e.charAt(0))return void s(r+" is not a valid method");var l=d.apply(u,n);o=void 0===o?l:o}),void 0!==o?o:t}function u(t,e){t.each(function(t,n){var o=a.data(n,i);o?(o.option(e),o._init()):(o=new r(n,e),a.data(n,i,o))})}a=a||e||t.jQuery,a&&(r.prototype.option||(r.prototype.option=function(t){a.isPlainObject(t)&&(this.options=a.extend(!0,this.options,t))}),a.fn[i]=function(t){if("string"==typeof t){var e=o.call(arguments,1);return h(this,t,e)}return u(this,t),this},n(a))}function n(t){!t||t&&t.bridget||(t.bridget=i)}var o=Array.prototype.slice,r=t.console,s="undefined"==typeof r?function(){}:function(t){r.error(t)};return n(e||t.jQuery),i}),function(t,e){"function"==typeof define&&define.amd?define("ev-emitter/ev-emitter",e):"object"==typeof module&&module.exports?module.exports=e():t.EvEmitter=e()}("undefined"!=typeof window?window:this,function(){function t(){}var e=t.prototype;return e.on=function(t,e){if(t&&e){var i=this._events=this._events||{},n=i[t]=i[t]||[];return-1==n.indexOf(e)&&n.push(e),this}},e.once=function(t,e){if(t&&e){this.on(t,e);var i=this._onceEvents=this._onceEvents||{},n=i[t]=i[t]||{};return n[e]=!0,this}},e.off=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){var n=i.indexOf(e);return-1!=n&&i.splice(n,1),this}},e.emitEvent=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){i=i.slice(0),e=e||[];for(var n=this._onceEvents&&this._onceEvents[t],o=0;oe;e++){var i=h[e];t[i]=0}return t}function n(t){var e=getComputedStyle(t);return e||a("Style returned "+e+". Are you running this code in a hidden iframe on Firefox? See https://bit.ly/getsizebug1"),e}function o(){if(!d){d=!0;var e=document.createElement("div");e.style.width="200px",e.style.padding="1px 2px 3px 4px",e.style.borderStyle="solid",e.style.borderWidth="1px 2px 3px 4px",e.style.boxSizing="border-box";var i=document.body||document.documentElement;i.appendChild(e);var o=n(e);s=200==Math.round(t(o.width)),r.isBoxSizeOuter=s,i.removeChild(e)}}function r(e){if(o(),"string"==typeof e&&(e=document.querySelector(e)),e&&"object"==typeof e&&e.nodeType){var r=n(e);if("none"==r.display)return i();var a={};a.width=e.offsetWidth,a.height=e.offsetHeight;for(var d=a.isBorderBox="border-box"==r.boxSizing,l=0;u>l;l++){var c=h[l],f=r[c],m=parseFloat(f);a[c]=isNaN(m)?0:m}var p=a.paddingLeft+a.paddingRight,g=a.paddingTop+a.paddingBottom,y=a.marginLeft+a.marginRight,v=a.marginTop+a.marginBottom,_=a.borderLeftWidth+a.borderRightWidth,z=a.borderTopWidth+a.borderBottomWidth,E=d&&s,b=t(r.width);b!==!1&&(a.width=b+(E?0:p+_));var x=t(r.height);return x!==!1&&(a.height=x+(E?0:g+z)),a.innerWidth=a.width-(p+_),a.innerHeight=a.height-(g+z),a.outerWidth=a.width+y,a.outerHeight=a.height+v,a}}var s,a="undefined"==typeof console?e:function(t){console.error(t)},h=["paddingLeft","paddingRight","paddingTop","paddingBottom","marginLeft","marginRight","marginTop","marginBottom","borderLeftWidth","borderRightWidth","borderTopWidth","borderBottomWidth"],u=h.length,d=!1;return r}),function(t,e){"use strict";"function"==typeof define&&define.amd?define("desandro-matches-selector/matches-selector",e):"object"==typeof module&&module.exports?module.exports=e():t.matchesSelector=e()}(window,function(){"use strict";var t=function(){var t=window.Element.prototype;if(t.matches)return"matches";if(t.matchesSelector)return"matchesSelector";for(var e=["webkit","moz","ms","o"],i=0;is?"round":"floor";r=Math[a](r),this.cols=Math.max(r,1)},n.getContainerWidth=function(){var t=this._getOption("fitWidth"),i=t?this.element.parentNode:this.element,n=e(i);this.containerWidth=n&&n.innerWidth},n._getItemLayoutPosition=function(t){t.getSize();var e=t.size.outerWidth%this.columnWidth,i=e&&1>e?"round":"ceil",n=Math[i](t.size.outerWidth/this.columnWidth);n=Math.min(n,this.cols);for(var o=this.options.horizontalOrder?"_getHorizontalColPosition":"_getTopColPosition",r=this[o](n,t),s={x:this.columnWidth*r.col,y:r.y},a=r.y+t.size.outerHeight,h=n+r.col,u=r.col;h>u;u++)this.colYs[u]=a;return s},n._getTopColPosition=function(t){var e=this._getTopColGroup(t),i=Math.min.apply(Math,e);return{col:e.indexOf(i),y:i}},n._getTopColGroup=function(t){if(2>t)return this.colYs;for(var e=[],i=this.cols+1-t,n=0;i>n;n++)e[n]=this._getColGroupY(n,t);return e},n._getColGroupY=function(t,e){if(2>e)return this.colYs[t];var i=this.colYs.slice(t,t+e);return Math.max.apply(Math,i)},n._getHorizontalColPosition=function(t,e){var i=this.horizontalColIndex%this.cols,n=t>1&&i+t>this.cols;i=n?0:i;var o=e.size.outerWidth&&e.size.outerHeight;return this.horizontalColIndex=o?i+t:this.horizontalColIndex,{col:i,y:this._getColGroupY(i,t)}},n._manageStamp=function(t){var i=e(t),n=this._getElementOffset(t),o=this._getOption("originLeft"),r=o?n.left:n.right,s=r+i.outerWidth,a=Math.floor(r/this.columnWidth);a=Math.max(0,a);var h=Math.floor(s/this.columnWidth);h-=s%this.columnWidth?0:1,h=Math.min(this.cols-1,h);for(var u=this._getOption("originTop"),d=(u?n.top:n.bottom)+i.outerHeight,l=a;h>=l;l++)this.colYs[l]=Math.max(d,this.colYs[l])},n._getContainerSize=function(){this.maxY=Math.max.apply(Math,this.colYs);var t={height:this.maxY};return this._getOption("fitWidth")&&(t.width=this._getContainerFitWidth()),t},n._getContainerFitWidth=function(){for(var t=0,e=this.cols;--e&&0===this.colYs[e];)t++;return(this.cols-t)*this.columnWidth-this.gutter},n.needsResizeLayout=function(){var t=this.containerWidth;return this.getContainerWidth(),t!=this.containerWidth},i}); \ No newline at end of file