Add a wide template

charlieegan3 · Sep 9, 2023 · 0852ffa · 0852ffa
1 parent c40de52
commit 0852ffa
Show file tree

Hide file tree

Showing 3 changed files with 104 additions and 2 deletions.
diff --git a/internal/pkg/server/handlers/public/posts/posts.go b/internal/pkg/server/handlers/public/posts/posts.go
@@ -42,6 +42,9 @@ var periodMissingTemplate string
 //go:embed templates/show.html.plush
 var showTemplate string
 
+//go:embed templates/show-wide.html.plush
+var showWideTemplate string
+
 //go:embed templates/on-this-day.html.plush
 var onThisDayTemplate string
 
@@ -287,7 +290,11 @@ func BuildGetHandler(db *sql.DB, renderer templating.PageRenderer) func(http.Res
 		ctx.Set("location", locations[0])
 		ctx.Set("tags", tags)
 
-		err = renderer(ctx, showTemplate, w)
+		if medias[0].Width > medias[0].Height {
+			err = renderer(ctx, showWideTemplate, w)
+		} else {
+			err = renderer(ctx, showTemplate, w)
+		}
 		if err != nil {
 			w.WriteHeader(http.StatusInternalServerError)
 			w.Write([]byte(err.Error()))

diff --git a/internal/pkg/server/handlers/public/posts/templates/show-wide.html.plush b/internal/pkg/server/handlers/public/posts/templates/show-wide.html.plush
@@ -0,0 +1,95 @@
+<div class="mw6 mw9-l center ph3-ns">
+  <div class="ph2-ns">
+    <div class="w-100">
+      <picture>
+        <source srcset="/medias/<%= post.MediaID %>/image.jpg?o=1000,fit 1x, /medias/<%= post.MediaID %>/image.jpg?o=2000,fit 2x" media="(min-width: 60em)">
+        <source srcset="/medias/<%= post.MediaID %>/image.jpg?o=500,fit 1x, /medias/<%= post.MediaID %>/image.jpg?o=2000,fit 2x" media="(min-width: 30em)">
+        <source srcset="/medias/<%= post.MediaID %>/image.jpg?o=500,fit 1x, /medias/<%= post.MediaID %>/image.jpg?o=1000,fit 2x">
+        <img class="mb1 db center w-100 br0 br1-l" src="/medias/<%= post.MediaID %>/image.jpg?o=1000,fit" alt="<%= post.Description %>">
+      </picture>
+    </div>
+    <div class="flex flex-wrap-reverse flex-wrap-l w-100 mt2 mt3-l pl3-l ph3 pt2 pt0-l">
+      <div class="w-100 w-third-l">
+        <div class="mb2 mw5 center ml0-l">
+          <img alt="<%= device.Name %>" loading="lazy" class="h2 dib v-mid" src="/devices/<%= device.ID %>/icon.<%= device.IconKind %>?o=100x"/>
+          <span class="v-mid dib f7 silver"><%= device.Name %></span>
+        </div>
+
+        <%=if (len(lenses) > 0) { %>
+        <% let lens = lenses[0] %>
+        <div class="mb2 mw5 center ml0-l">
+          <img alt="<%= lens.Name %>" loading="lazy" class="h2 dib v-mid" src="/lenses/<%= lens.ID %>.png?o=100x"/>
+          <span class="v-mid dib f7 silver"><%= lens.Name %></span>
+        </div>
+        <% } %>
+
+        <%= if (media.ISOSpeed != 0) { %>
+        <div class="mb2 f7 silver mw5 center">
+          <div class="flex justify-between">
+            <div class="tc w-third">
+              <span>&#119943;/<%= media.FNumber %></span>
+            </div>
+            <div class="tc bl bw1 tc b--light-gray w-third">
+              <span><%= media.ExposureTimeNumerator %>/<%= media.ExposureTimeDenominator %></span>
+            </div>
+            <div class="tc bl bw1 tr b--light-gray w-third">
+              <span>ISO <%= media.ISOSpeed %></span>
+            </div>
+          </div>
+        </div>
+        <% } %>
+
+        <div class="">
+          <a href="/locations/<%= location.ID %>">
+            <img loading="lazy" class="mw5 mw6-l w-100 br1 db center ml0-l" src="/locations/<%= location.ID %>/map.jpg"/>
+          </a>
+        </div>
+      </div>
+      <div class="w-100 w-two-thirds-l pl3-l">
+        <div class="mt0 mb2 md"><%= raw(markdown(post.Description)) %></div>
+        <p class="mt0 mb2 f6 silver"><em>Posted <%= post.PublishDate.Format("January 2, 2006") %> from <%= raw(location.Name) %></em></p>
+        <p class="mb2 f7 moon-gray tc tl-l">
+          <%= for (tag) in tags { %>
+          <%= if (!tag.Hidden) { %>
+          #<%= tag.Name %>
+          <% } %>
+          <% } %>
+        </p>
+        <div class="">
+          <div class="f6">
+            <p></p>
+            <ul class="pl3">
+              <li>
+                <a class="db" href="/posts/period/<%= post.PublishDate.Format("2006-01-02") %>">
+                  View all from <%= post.PublishDate.Format("January 2, 2006") %>
+                </a>
+              </li>
+              <li>
+                <a class="db" href="/posts/on-this-day/<%= post.PublishDate.Format("January-02") %>">
+                  'On This Day' <%= post.PublishDate.Format("January 2") %>
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="flex w-100 justify-between f6 mv3 ph3">
+    <div class="tl w-50">
+      <%= if (nextPost != 0) { %>
+        <a href="/posts/<%= nextPost %>">Next</a>
+      <% } else { %>
+        <span class="moon-gray">Next</span>
+      <% } %>
+    </div>
+    <div class="tr w-50 bl bw1 b--light-gray">
+      <%= if (previousPost != 0) { %>
+        <a href="/posts/<%= previousPost %>">Previous</a>
+      <% } else { %>
+        <span class="moon-gray">Previous</span>
+      <% } %>
+    </div>
+  </div>
+</div>
diff --git a/internal/pkg/server/handlers/public/posts/templates/show.html.plush b/internal/pkg/server/handlers/public/posts/templates/show.html.plush
@@ -32,7 +32,7 @@
         <p class="mt0 mb2 f6 silver"><em>Posted <%= post.PublishDate.Format("January 2, 2006") %> from <%= raw(location.Name) %></em></p>
 
         <div class="mb2">
-          <a target="_blank" href="http://www.openstreetmap.org/?mlat=<%= location.Latitude %>&mlon=<%= location.Longitude %>&zoom=17&layers=M">
+          <a href="/locations/<%= location.ID %>">
             <img loading="lazy" class="mw5 mw6-l w-100 br1 db center ml0-l" src="/locations/<%= location.ID %>/map.jpg"/>
           </a>
         </div>