From 1aa94292dba808a9c8f7e2d685a43331a7d03291 Mon Sep 17 00:00:00 2001
From: Thomas Miceli <27960254+thomiceli@users.noreply.github.com>
Date: Sun, 28 Apr 2024 02:54:18 +0200
Subject: [PATCH] Frontend fixes (#267)

* Fix mermaid display

* Move Login/Register buttons on mobile

* Min width on avatar
---
 Dockerfile                            |  2 ++
 public/gist.ts                        |  3 +++
 templates/base/base_header.html       | 12 +++++++++---
 templates/partials/_gist_preview.html |  2 +-
 4 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index 3c71a3e..3b97440 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -33,6 +33,8 @@ FROM base AS dev
 EXPOSE 6157 2222 16157
 VOLUME /opengist
 
+RUN git config --global --add safe.directory /opengist
+
 CMD ["make", "watch"]
 
 
diff --git a/public/gist.ts b/public/gist.ts
index 38ecc57..d81c98f 100644
--- a/public/gist.ts
+++ b/public/gist.ts
@@ -21,6 +21,9 @@ document.querySelectorAll<HTMLElement>('.table-code').forEach((el) => {
 let copybtnhtml = `<button type="button" style="top: 1em !important; right: 1em !important;" class="md-code-copy-btn absolute focus-within:z-auto rounded-md dark:border-gray-600 px-2 py-2 opacity-80 font-medium text-slate-700 bg-gray-100 dark:bg-gray-700 dark:text-slate-300 hover:bg-gray-200 dark:hover:bg-gray-600 hover:border-gray-500 hover:text-slate-700 dark:hover:text-slate-300 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 7.5V6.108c0-1.135.845-2.098 1.976-2.192.373-.03.748-.057 1.123-.08M15.75 18H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08M15.75 18.75v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5A3.375 3.375 0 006.375 7.5H5.25m11.9-3.664A2.251 2.251 0 0015 2.25h-1.5a2.251 2.251 0 00-2.15 1.586m5.8 0c.065.21.1.433.1.664v.75h-6V4.5c0-.231.035-.454.1-.664M6.75 7.5H4.875c-.621 0-1.125.504-1.125 1.125v12c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V16.5a9 9 0 00-9-9z" /></svg></button>`;
 
 document.querySelectorAll<HTMLElement>('.markdown-body pre').forEach((el) => {
+    if (el.classList.contains("mermaid")) {
+        return;
+    }
     el.innerHTML = copybtnhtml + `<span class="code-div">` + el.innerHTML + `</span>`;
 });
 
diff --git a/templates/base/base_header.html b/templates/base/base_header.html
index 2292087..a77ec19 100644
--- a/templates/base/base_header.html
+++ b/templates/base/base_header.html
@@ -179,11 +179,11 @@
                         </div>
                         {{ else }}
                             {{ if not .DisableSignup }}
-                            <a href="{{ $.c.ExternalUrl }}/register" class="inline-flex text-slate-700 dark:text-slate-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-black dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">
+                            <a href="{{ $.c.ExternalUrl }}/register" class="hidden sm:inline-flex text-slate-700 dark:text-slate-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-black dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">
                                 <p class="text-slate-700 dark:text-slate-300 mr-1">{{ .locale.Tr "header.menu.register" }}</p>
                             </a>
                             {{ end }}
-                            <a href="{{ $.c.ExternalUrl }}/login" class="inline-flex text-slate-700 dark:text-slate-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-black dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">
+                            <a href="{{ $.c.ExternalUrl }}/login" class="hidden sm:inline-flex hidden-xs text-slate-700 dark:text-slate-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-black dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">
                                 <p class="text-slate-700 dark:text-slate-300 mr-1">{{ .locale.Tr "header.menu.login" }}</p>
                             </a>
                         {{ end }}
@@ -252,9 +252,15 @@
                         <a href="{{ $.c.ExternalUrl }}/{{ .userLogged.Username }}" class="text-slate-700 dark:text-slate-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-black dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">{{ .locale.Tr "header.menu.my-gists" }}</a>
                         <a href="{{ $.c.ExternalUrl }}/settings" class="text-slate-700 dark:text-slate-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-black dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">{{ .locale.Tr "header.menu.settings" }}</a>
 
-                    {{ if .userLogged.IsAdmin }}
+                        {{ if .userLogged.IsAdmin }}
                             <a href="{{ $.c.ExternalUrl }}/admin-panel" class="text-slate-700 dark:text-slate-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-black dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">{{ .locale.Tr "header.menu.admin" }}</a>
                         {{ end }}
+                        <a href="{{ $.c.ExternalUrl }}/logout" class="dark:text-rose-400 text-rose-500 hover:text-rose-600 dark:hover:text-rose-500 hover:bg-gray-100 dark:hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">{{ .locale.Tr "header.menu.logout" }}</a>
+                    {{ else }}
+                        {{ if not .DisableSignup }}
+                            <a href="{{ $.c.ExternalUrl }}/register" class="text-slate-700 dark:text-slate-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-black dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">{{ .locale.Tr "header.menu.register" }}</a>
+                        {{ end }}
+                        <a href="{{ $.c.ExternalUrl }}/login" class="text-slate-700 dark:text-slate-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-black dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">{{ .locale.Tr "header.menu.login" }}</a>
                     {{ end }}
                 </div>
             </div>
diff --git a/templates/partials/_gist_preview.html b/templates/partials/_gist_preview.html
index f4956de..5a435d2 100644
--- a/templates/partials/_gist_preview.html
+++ b/templates/partials/_gist_preview.html
@@ -5,7 +5,7 @@
         <div class="flex ">
             <div class="div">
                 <a href="{{ .c.ExternalUrl }}/{{ .gist.User.Username }}">
-                    <img class="h-10 w-10 rounded-md mr-2 border border-gray-200 dark:border-gray-700 my-1" src="{{ avatarUrl .gist.User .DisableGravatar }}" alt="{{ .gist.User.Username }}'s Avatar">
+                    <img class="h-10 min-w-10 w-10 rounded-md mr-2 border border-gray-200 dark:border-gray-700 my-1" src="{{ avatarUrl .gist.User .DisableGravatar }}" alt="{{ .gist.User.Username }}'s Avatar">
                 </a>
             </div>
             <div class="flex-auto">