TheCloud/hugoDocs
1
0
Fork 0
mirror of https://github.com/gohugoio/hugoDocs.git synced 2025-09-17 07:05:41 -04:00
Code Issues Packages Projects Releases Wiki Activity

Improve showcase single layout

Browse Source 
I've made the image-column smaller and replaced the prev/next nav on
large screens with a list of other showcase items, for easier sifting. I
put site details in a white box to give it some structure.
This commit is contained in:
budparr 2018-02-05 09:13:16 -05:00 committed by Bjørn Erik Pedersen
parent 5f7730c892
commit 02036581f0
No known key found for this signature in database
GPG Key ID: 330E6E2BD4859D8F
1 changed files with 66 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
themes/gohugoioTheme/layouts/showcase/single.html
View File

@ -1,5 +1,8 @@
{{ define "main" }}
<article class="cf ph3 ph4-ns pv3 pv5-ns">
{{$section := where .Site.RegularPages "Section" .Section}}
{{$number_of_entries := $section | len}}
{{$currentPageUrl := $.URL }}
<article class="center ph3 ph4-ns pv3 pv5-ns mw9">
<!-- header spans the full width -->
<header class="flex-none pb4 w-100">
<h1 class="fw9 lh-title mb7 mv0 pt3">
@ -8,56 +11,76 @@
</a>
</h1>
</header>
<div class="flex-l">
<div class="mw8 w-75-l">
{{ $img := (.Resources.ByType "image").GetMatch "*featured*" }}
{{ with $img }}
{{ $img := .Resize "640x" }}
<img src="{{ $img.RelPermalink }}" alt="{{ $img.Title }}" width="{{ $img.Width }}" height="{{ $img.Height }}" class="mw-100">
{{ end }}
<div class="flex-ns">
<div class="dn db-l w-20-l">
<ul class="pa0 list mr3">
{{range first 20 $section}}
<li class="hover-bg-light-gray hover-accent-color-light">
<a href="{{.Permalink}}" class="db link w-100 pv1 ph1 {{ if eq $currentPageUrl .URL }} b bg-light-gray primary-color{{else}} mid-gray {{end}}">
{{- .Title -}}
</a>
</li>
{{end}}
{{if ge $number_of_entries 20}}
<li class="mt3">
<a href="/showcase/page/2/" class="link blue">
See More &raquo;
</a>
</li>
{{end}}
</ul>
</div>
<div class="mw8 w-70-m w-50-ns">
{{ $img := (.Resources.ByType "image").GetMatch "*featured*" }}
{{ with $img }}
{{ $img := .Resize "940x" }}
<img src="{{ $img.RelPermalink }}" alt="{{ $img.Title }}" width="{{ $img.Width }}" class="mw-100">
{{ end }}
{{with .Content}}
<div class="nested-copy-line-height nested-img nested-links">
<div class="mid-gray nested-copy-line-height nested-img nested-links">
{{- . -}}
</div>
{{end}}
</div>
<aside class="fn mid-gray w-100 w-25-l">
<div class="mt4 nested-links ph4-l">
{{with .Params.sitelink}}
<a href="{{.}}" class="db f3-ns f4 mb1">
{{- . | replaceRE "^https?://([^/]+).*" "$1" -}}
</a>
{{end}}
{{with .Params.repo}}
<a href="{{.}}" class="mb4">Source</a>
{{end}}
{{with .Params.description}}
<div class="f5 lh-title mv4">
{{- . | markdownify -}}
</div>
{{end}}
{{/* Because we want to allow for the creator array to be present in an item's front matter it will always show as set, so we see if the first item's name field is not null, then show the created by fields. Better way? */}}
{{$creator := (index .Params.creator 0).name }}
{{if ne $creator nil}}
<div class="mb4">
Created by:<br />
<ul>
{{range .Params.creator}}
<li>
{{if .link}}
<a href="{{.link}}" class="link"/>
{{- .name -}}
</a>
{{else}}
{{.name}}
<aside class="fn mid-gray w-100 w-30-ns">
<div class="mt4 mt0-ns nested-links mh3-m mh4-l">
{{/* Put the site details in a box. Use Sitelink as min level of content to show the box, because if other details are present, the site link should be. */}}
{{if .Params.sitelink}}
<div class="ba b--moon-gray bg-white pa3 pa4-l">
{{with .Params.sitelink}}
<a href="{{.}}" class="db pre f4 mb1">{{ . | replaceRE "^https?://([^/]+).*" "$1"}} {{ partial "svg/link-ext.svg" (dict "size" "10") }}</a>
{{end}}
{{with .Params.repo}}
<a href="{{.}}" class="db mb4">source {{ partial "svg/link-ext.svg" (dict "size" "10") }}</a>
{{end}}
{{with .Params.description}}
<div class="f5 lh-title mv4">
{{- . | markdownify -}}
</div>
{{end}}
{{/* Because we want to allow for the creator array to be present in an item's front matter it will always show as set, so we see if the first item's name field is not null, then show the created by fields. Better way? */}}
{{$creator := (index .Params.creator 0).name }}
{{if ne $creator nil}}
<div class="mb4">
Created by:<br />
<ul>
{{range .Params.creator}}
<li>
{{if .link}}
<a href="{{.link}}" class="link"/>
{{- .name -}}
</a>
{{else}}
{{.name}}
{{end}}
</li>
{{end}}
</li>
{{end}}
</ul>
</ul>
</div>
{{end}}
</div>
{{end}}
<div class="b--light-gray bt pt3 ">
<div class="b--light-gray bt dn-l pt3">
<div class="f6 gray mb2">Previous/Next</div>
{{- partial "previous-next-links-in-section-with-title.html" . -}}
</div>