TheCloud/hugoDocs
1
0
Fork 0
mirror of https://github.com/gohugoio/hugoDocs.git synced 2025-09-18 14:04:39 -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

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

@ -1,5 +1,8 @@
{{ define "main" }} {{ 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 spans the full width -->
<header class="flex-none pb4 w-100"> <header class="flex-none pb4 w-100">
<h1 class="fw9 lh-title mb7 mv0 pt3"> <h1 class="fw9 lh-title mb7 mv0 pt3">
@ -8,30 +11,48 @@
</a> </a>
</h1> </h1>
</header> </header>
<div class="flex-l"> <div class="flex-ns">
<div class="mw8 w-75-l"> <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*" }} {{ $img := (.Resources.ByType "image").GetMatch "*featured*" }}
{{ with $img }} {{ with $img }}
{{ $img := .Resize "640x" }} {{ $img := .Resize "940x" }}
<img src="{{ $img.RelPermalink }}" alt="{{ $img.Title }}" width="{{ $img.Width }}" height="{{ $img.Height }}" class="mw-100"> <img src="{{ $img.RelPermalink }}" alt="{{ $img.Title }}" width="{{ $img.Width }}" class="mw-100">
{{ end }} {{ end }}
{{with .Content}} {{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> </div>
{{end}} {{end}}
</div> </div>
<aside class="fn mid-gray w-100 w-25-l"> <aside class="fn mid-gray w-100 w-30-ns">
<div class="mt4 nested-links ph4-l"> <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}} {{with .Params.sitelink}}
<a href="{{.}}" class="db f3-ns f4 mb1"> <a href="{{.}}" class="db pre f4 mb1">{{ . | replaceRE "^https?://([^/]+).*" "$1"}} {{ partial "svg/link-ext.svg" (dict "size" "10") }}</a>
{{- . | replaceRE "^https?://([^/]+).*" "$1" -}}
</a>
{{end}} {{end}}
{{with .Params.repo}} {{with .Params.repo}}
<a href="{{.}}" class="mb4">Source</a> <a href="{{.}}" class="db mb4">source {{ partial "svg/link-ext.svg" (dict "size" "10") }}</a>
{{end}} {{end}}
{{with .Params.description}} {{with .Params.description}}
<div class="f5 lh-title mv4"> <div class="f5 lh-title mv4">
{{- . | markdownify -}} {{- . | markdownify -}}
@ -57,7 +78,9 @@
</ul> </ul>
</div> </div>
{{end}} {{end}}
<div class="b--light-gray bt pt3 "> </div>
{{end}}
<div class="b--light-gray bt dn-l pt3">
<div class="f6 gray mb2">Previous/Next</div> <div class="f6 gray mb2">Previous/Next</div>
{{- partial "previous-next-links-in-section-with-title.html" . -}} {{- partial "previous-next-links-in-section-with-title.html" . -}}
</div> </div>