Преглед изворни кода

ADDED: boostrap style in queue detail page

Axelle Lança пре 1 година
родитељ
комит
b0ece3dc83
3 измењених фајлова са 28 додато и 7 уклоњено
  1. 8 0
      front/assets/styles.css
  2. 8 5
      front/templates/flashes.gohtml
  3. 12 2
      front/templates/queue.gohtml

+ 8 - 0
front/assets/styles.css

@@ -7,6 +7,14 @@
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
 */
 
+/******* CUSTOM STYLES *******/
+#warning-emj {
+  font-size: 1.7rem;
+  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+}
+
+/*** END CUSTOM STYLES ***/
+
 *,
 ::before,
 ::after {

+ 8 - 5
front/templates/flashes.gohtml

@@ -1,9 +1,12 @@
 {{ define "flashes" -}}
     {{ if . }}
-        <ul class="w-full mx-0 border-b-red-300 space-y-1">
-            {{ range . }}
-                <li class="bg-red-50 border-red-300 border-2 p-2">{{ . }}</li>
-            {{ end }}
-        </ul>
+        <div class="d-flex align-items-center p-3 bg-warning bg-opacity-10 border border-warning rounded mb-4">
+            <span id="warning-emj">⚠️</span>
+            <ul class="m-0">
+                {{ range . }}
+                    <li>{{ . }}</li>
+                {{ end }}
+            </ul>
+        </div>
     {{ end }}
 {{ end }}

+ 12 - 2
front/templates/queue.gohtml

@@ -5,14 +5,23 @@
         <meta charset="UTF-8">
         <title>File {{ .info.Name }}</title>
         <link rel="stylesheet" href="/assets/styles.css"/>
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
     </head>
     <body>
     {{ $th := "border border-slate-300 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400" }}
     {{ $td := "border border-slate-300 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400" }}
-    <div class="container mx-auto">
+    <main class="container">
+    <div class="container mt-5">
+        <nav aria-label="breadcrumb">
+            <ol class="breadcrumb">
+                <li class="breadcrumb-item"><a href="#">Home</a></li>
+                <li class="breadcrumb-item active" aria-current="page">Library</li>
+            </ol>
+        </nav>
         <h1 class="text-3xl font-bold underline">Queue view for {{ .info.Name }}</h1>
         {{ template "flashes" .flashes }}
-        <table class="table-auto border-separate border-spacing-2 border border-slate-400 w-full">
+        <table class="table">
             <thead>
             <tr>
                 <th scope="col" class="{{ $th }}">Propriété</th>
@@ -35,6 +44,7 @@
             </tbody>
         </table>
     </div>
+    </main>
     </body>
     </html>
 {{end}}