From e5809dc6d1c9f49da95c6ad5ef989293d03587c3 Mon Sep 17 00:00:00 2001
From: Sergio Vera <svera@adobe.com>
Date: Mon, 23 Dec 2024 15:39:46 +0100
Subject: [PATCH] Streamline adjustments

---
 .../webserver/embedded/images/eye-solid.svg   |  2 +-
 .../embedded/views/partials/actions.html      | 52 +++++++++----------
 .../embedded/views/partials/cover.html        |  2 +-
 .../views/partials/delete-button.html         |  2 +-
 .../embedded/views/partials/docs-list.html    |  8 +--
 .../views/partials/highlight-toggle.html      |  6 +--
 .../views/partials/latest-highlights.html     |  2 +-
 7 files changed, 38 insertions(+), 36 deletions(-)

diff --git a/internal/webserver/embedded/images/eye-solid.svg b/internal/webserver/embedded/images/eye-solid.svg
index 787eaa8..9aba237 100644
--- a/internal/webserver/embedded/images/eye-solid.svg
+++ b/internal/webserver/embedded/images/eye-solid.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-eye-fill" viewBox="0 0 16 16" style="stroke: white">
+<svg xmlns="http://www.w3.org/2000/svg" width="256px" fill="currentColor" class="bi bi-eye-fill" viewBox="0 0 16 16" style="stroke: white">
     <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z"/>
     <path d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z"/>
 </svg>
diff --git a/internal/webserver/embedded/views/partials/actions.html b/internal/webserver/embedded/views/partials/actions.html
index f338d81..f931f89 100644
--- a/internal/webserver/embedded/views/partials/actions.html
+++ b/internal/webserver/embedded/views/partials/actions.html
@@ -1,30 +1,30 @@
-<div class="d-grid gap-2 d-sm-block mx-auto d-sm-flex justify-content-sm-center actions">
+<div class="d-grid gap-2 mx-auto d-md-flex justify-content-md-center actions mb-3">
     {{if eq .Document.Format "EPUB"}}
-    <div class="btn-group mb-3" role="group" aria-label="Button group with nested dropdown">
-        <button href="/documents/{{.Document.Slug}}/download" class="btn btn-sm btn-outline-secondary w-100" download>
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cloud-download" viewBox="0 0 16 16">
-                <path d="M4.406 1.342A5.53 5.53 0 0 1 8 0c2.69 0 4.923 2 5.166 4.579C14.758 4.804 16 6.137 16 7.773 16 9.569 14.502 11 12.687 11H10a.5.5 0 0 1 0-1h2.688C13.979 10 15 8.988 15 7.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 2.825 10.328 1 8 1a4.53 4.53 0 0 0-2.941 1.1c-.757.652-1.153 1.438-1.153 2.055v.448l-.445.049C2.064 4.805 1 5.952 1 7.318 1 8.785 2.23 10 3.781 10H6a.5.5 0 0 1 0 1H3.781C1.708 11 0 9.366 0 7.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383z"/>
-                <path d="M7.646 15.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 14.293V5.5a.5.5 0 0 0-1 0v8.793l-2.146-2.147a.5.5 0 0 0-.708.708l3 3z"/>
-            </svg>
-            &nbsp;
-            <span class='badge text-bg-{{if eq .Document.Format "EPUB"}}primary{{else}}danger{{end}}'>{{.Document.Format}}</span>
-        </button>
-        <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"></button>
-        <ul class="dropdown-menu dropdown-menu-end">
-            <li>
-                <a href="/documents/{{.Document.Slug}}/download?format=kepub" class="dropdown-item" download>
-                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cloud-download" viewBox="0 0 16 16">
-                        <path d="M4.406 1.342A5.53 5.53 0 0 1 8 0c2.69 0 4.923 2 5.166 4.579C14.758 4.804 16 6.137 16 7.773 16 9.569 14.502 11 12.687 11H10a.5.5 0 0 1 0-1h2.688C13.979 10 15 8.988 15 7.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 2.825 10.328 1 8 1a4.53 4.53 0 0 0-2.941 1.1c-.757.652-1.153 1.438-1.153 2.055v.448l-.445.049C2.064 4.805 1 5.952 1 7.318 1 8.785 2.23 10 3.781 10H6a.5.5 0 0 1 0 1H3.781C1.708 11 0 9.366 0 7.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383z"/>
-                        <path d="M7.646 15.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 14.293V5.5a.5.5 0 0 0-1 0v8.793l-2.146-2.147a.5.5 0 0 0-.708.708l3 3z"/>
-                    </svg>
-                    &nbsp;
-                    <span class='badge text-bg-primary'>KEPUB</span>
-                </a>
-            </li>
-        </ul>
-    </div>
+        <div class="btn-group mb-1 flex-md-fill" role="group" aria-label="Button group with nested dropdown">
+            <button href="/documents/{{.Document.Slug}}/download" class="btn btn-sm btn-outline-secondary w-100" download>
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cloud-download" viewBox="0 0 16 16">
+                    <path d="M4.406 1.342A5.53 5.53 0 0 1 8 0c2.69 0 4.923 2 5.166 4.579C14.758 4.804 16 6.137 16 7.773 16 9.569 14.502 11 12.687 11H10a.5.5 0 0 1 0-1h2.688C13.979 10 15 8.988 15 7.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 2.825 10.328 1 8 1a4.53 4.53 0 0 0-2.941 1.1c-.757.652-1.153 1.438-1.153 2.055v.448l-.445.049C2.064 4.805 1 5.952 1 7.318 1 8.785 2.23 10 3.781 10H6a.5.5 0 0 1 0 1H3.781C1.708 11 0 9.366 0 7.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383z"/>
+                    <path d="M7.646 15.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 14.293V5.5a.5.5 0 0 0-1 0v8.793l-2.146-2.147a.5.5 0 0 0-.708.708l3 3z"/>
+                </svg>
+                &nbsp;
+                <span class='badge text-bg-{{if eq .Document.Format "EPUB"}}primary{{else}}danger{{end}}'>{{.Document.Format}}</span>
+            </button>
+            <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"></button>
+            <ul class="dropdown-menu dropdown-menu-end">
+                <li>
+                    <a href="/documents/{{.Document.Slug}}/download?format=kepub" class="dropdown-item" download>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cloud-download" viewBox="0 0 16 16">
+                            <path d="M4.406 1.342A5.53 5.53 0 0 1 8 0c2.69 0 4.923 2 5.166 4.579C14.758 4.804 16 6.137 16 7.773 16 9.569 14.502 11 12.687 11H10a.5.5 0 0 1 0-1h2.688C13.979 10 15 8.988 15 7.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 2.825 10.328 1 8 1a4.53 4.53 0 0 0-2.941 1.1c-.757.652-1.153 1.438-1.153 2.055v.448l-.445.049C2.064 4.805 1 5.952 1 7.318 1 8.785 2.23 10 3.781 10H6a.5.5 0 0 1 0 1H3.781C1.708 11 0 9.366 0 7.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383z"/>
+                            <path d="M7.646 15.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 14.293V5.5a.5.5 0 0 0-1 0v8.793l-2.146-2.147a.5.5 0 0 0-.708.708l3 3z"/>
+                        </svg>
+                        &nbsp;
+                        <span class='badge text-bg-primary'>KEPUB</span>
+                    </a>
+                </li>
+            </ul>
+        </div>
     {{else}}
-        <button href="/documents/{{.Document.Slug}}/download" class="btn btn-outline-secondary w-100 mb-3" download>
+        <button href="/documents/{{.Document.Slug}}/download" class="btn btn-outline-secondary w-100 mb-1 flex-md-fill" download>
             <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cloud-download" viewBox="0 0 16 16">
                 <path d="M4.406 1.342A5.53 5.53 0 0 1 8 0c2.69 0 4.923 2 5.166 4.579C14.758 4.804 16 6.137 16 7.773 16 9.569 14.502 11 12.687 11H10a.5.5 0 0 1 0-1h2.688C13.979 10 15 8.988 15 7.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 2.825 10.328 1 8 1a4.53 4.53 0 0 0-2.941 1.1c-.757.652-1.153 1.438-1.153 2.055v.448l-.445.049C2.064 4.805 1 5.952 1 7.318 1 8.785 2.23 10 3.781 10H6a.5.5 0 0 1 0 1H3.781C1.708 11 0 9.366 0 7.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383z"/>
                 <path d="M7.646 15.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 14.293V5.5a.5.5 0 0 0-1 0v8.793l-2.146-2.147a.5.5 0 0 0-.708.708l3 3z"/>
@@ -39,7 +39,7 @@
         {{$sendToEmail := ""}}
         {{if .Session}}{{$sendToEmail = .Session.SendToEmail}}{{end}}
         {{if not $sendToEmail}}{{$disabled = true}}{{end}}
-        <div class="btn-group mb-3" role="group" aria-label="Button group with nested dropdown">
+        <div class="btn-group mb-1 flex-md-fill" role="group" aria-label="Button group with nested dropdown">
             <button hx-post="/documents/{{.Document.Slug}}/send" hx-swap="none" hx-include="[name='email'], [name='slug']" hx-indicator="#hx-spinner" class="btn btn-sm btn-outline-secondary w-100" {{if $disabled}}disabled{{end}}>
                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope-fill" viewBox="0 0 16 16">
                     <path d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414.05 3.555ZM0 4.697v7.104l5.803-3.558L0 4.697ZM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586l-1.239-.757Zm3.436-.586L16 11.801V4.697l-5.803 3.546Z"/>
diff --git a/internal/webserver/embedded/views/partials/cover.html b/internal/webserver/embedded/views/partials/cover.html
index bb47059..4820db4 100644
--- a/internal/webserver/embedded/views/partials/cover.html
+++ b/internal/webserver/embedded/views/partials/cover.html
@@ -22,7 +22,7 @@ <h5 class="card-title text-center text-truncate">{{.Document.Title}}</h5>
 
     <div class="position-absolute bottom-0 end-0 me-2 mb-1 cursor-pointer w-10">
         <a href="/documents/{{.Document.Slug}}/read" class="icon-link" title='{{t .Lang "Read"}}'>
-            <img src="/images/eye-solid.svg" class="img-fluid w-100" />
+            <img src="/images/eye-solid.svg" class="img-fluid w-100" style="min-width: 1em"/>
         </a>
     </div>
 </div>
diff --git a/internal/webserver/embedded/views/partials/delete-button.html b/internal/webserver/embedded/views/partials/delete-button.html
index 1195952..446f3a0 100644
--- a/internal/webserver/embedded/views/partials/delete-button.html
+++ b/internal/webserver/embedded/views/partials/delete-button.html
@@ -1,4 +1,4 @@
-<button href="#" data-bs-toggle="modal" data-bs-target="#delete-modal" data-id="{{.Document.Slug}}" class="btn btn-sm btn-outline-secondary" title="{{.Document.ID}}">
+<button href="#" data-bs-toggle="modal" data-bs-target="#delete-modal" data-id="{{.Document.Slug}}" class="btn btn-sm btn-danger" title="{{.Document.ID}}">
     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash3-fill" viewBox="0 0 16 16">
         <path d="M11 1.5v1h3.5a.5.5 0 0 1 0 1h-.538l-.853 10.66A2 2 0 0 1 11.115 16h-6.23a2 2 0 0 1-1.994-1.84L2.038 3.5H1.5a.5.5 0 0 1 0-1H5v-1A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5Zm-5 0v1h4v-1a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5ZM4.5 5.029l.5 8.5a.5.5 0 1 0 .998-.06l-.5-8.5a.5.5 0 1 0-.998.06Zm6.53-.528a.5.5 0 0 0-.528.47l-.5 8.5a.5.5 0 0 0 .998.058l.5-8.5a.5.5 0 0 0-.47-.528ZM8 4.5a.5.5 0 0 0-.5.5v8.5a.5.5 0 0 0 1 0V5a.5.5 0 0 0-.5-.5Z"/>
     </svg>
diff --git a/internal/webserver/embedded/views/partials/docs-list.html b/internal/webserver/embedded/views/partials/docs-list.html
index 01564ed..183b68b 100644
--- a/internal/webserver/embedded/views/partials/docs-list.html
+++ b/internal/webserver/embedded/views/partials/docs-list.html
@@ -7,11 +7,13 @@
 {{if .Results}} {{range $i, $document := .Results.Hits}}
 <div class="list-group-item">
     <div class="row">
-        <div class="card col-lg-3 col-md-3 col-sm-12 border border-0">
-            {{template "partials/cover" dict "Lang" $lang "Document" $document "Session" $session}}
+        <div class="col-sm-12 col-md-4 col-lg-3">
+            <div class="card border border-0">
+                {{template "partials/cover" dict "Lang" $lang "Document" $document "Session" $session}}
+            </div>
             {{template "partials/actions" dict "Lang" $lang "Document" $document "Session" $session "EmailSendingConfigured" $emailSendingConfigured "EmailFrom" $emailFrom}}
         </div>
-        <div class="col-lg-9 col-md-9 col-sm-12">
+        <div class="col-sm-12 col-md-8 col-lg-9">
             <div class="row">
                 <div class="col-7">
                     {{ if ne $document.Series "" }} {{$seriesTitle := t $lang "Search for more titles belonging to %s"
diff --git a/internal/webserver/embedded/views/partials/highlight-toggle.html b/internal/webserver/embedded/views/partials/highlight-toggle.html
index a86b6fa..0575b7b 100644
--- a/internal/webserver/embedded/views/partials/highlight-toggle.html
+++ b/internal/webserver/embedded/views/partials/highlight-toggle.html
@@ -1,12 +1,12 @@
-<div class="position-absolute top-0 start-0 ms-2 mt-2 cursor-pointer">
+<div class="position-absolute top-0 start-0 ms-2 mt-2 cursor-pointer w-10">
     <div class="{{if not .Document.Highlighted}}visually-hidden{{end}} dehighlight">
         <a class="icon-link dehighlight" hx-delete="/highlights/{{.Document.Slug}}" hx-swap="none" title='{{t .Lang "Remove from highlights"}}'>
-            <img src="/images/star-solid.svg" class="img-fluid w-10" />
+            <img src="/images/star-solid.svg" class="img-fluid w-100" style="min-width: 1em" />
         </a>
     </div>
     <div class="{{if .Document.Highlighted}}visually-hidden{{end}} highlight">
         <a class="icon-link highlight" hx-post="/highlights/{{.Document.Slug}}" hx-swap="none" title='{{t .Lang "Highlight"}}'>
-            <img src="/images/star-hollow.svg" class="img-fluid w-10" />
+            <img src="/images/star-hollow.svg" class="img-fluid w-100" style="min-width: 1em" />
         </a>
     </div>
 </div>
diff --git a/internal/webserver/embedded/views/partials/latest-highlights.html b/internal/webserver/embedded/views/partials/latest-highlights.html
index 700ffa5..38839b4 100644
--- a/internal/webserver/embedded/views/partials/latest-highlights.html
+++ b/internal/webserver/embedded/views/partials/latest-highlights.html
@@ -16,7 +16,7 @@ <h2>{{t .Lang "Your highlights" }}</h2>
         {{$emailFrom := .EmailFrom}}
 
         {{range $i, $doc := .Highlights}}
-        <div class="col-6 col-md-3 col-lg-2 pe-0">
+        <div class="col-6 col-md-4 col-lg-3 col-xl-2 pe-0">
             <div class="card border border-0">
                 {{template "partials/cover" dict "Lang" $lang "Document" $doc "Session" $session}}
             </div>