From 02036581f0ae69682405259bb5fad70e16f4cdea Mon Sep 17 00:00:00 2001
From: budparr <budparr@gmail.com>
Date: Mon, 5 Feb 2018 09:13:16 -0500
Subject: [PATCH] Improve showcase single layout

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.
---
 .../layouts/showcase/single.html              | 109 +++++++++++-------
 1 file changed, 66 insertions(+), 43 deletions(-)

diff --git a/themes/gohugoioTheme/layouts/showcase/single.html b/themes/gohugoioTheme/layouts/showcase/single.html
index e53eb3221..bdf8ebb41 100644
--- a/themes/gohugoioTheme/layouts/showcase/single.html
+++ b/themes/gohugoioTheme/layouts/showcase/single.html
@@ -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>