feat: center the tab div + ui fixes on the tab and projects cards

tm26a21p · May 31, 2024 · 5a3b59c · 5a3b59c
1 parent 9f932a0
commit 5a3b59c
Showing 1 changed file with 21 additions and 22 deletions.
diff --git a/templates/htmx/tabs.html b/templates/htmx/tabs.html
@@ -1,21 +1,19 @@
-<div class="tabs tabs-boxed mx-auto w-100" role="tablist">
-    {% if liked == false %}
-    <button hx-get="/api/projects" class="tab tab-active selected" role="tab" aria-selected="true"
-        aria-controls="tab-content">My
-        projects</button>
-    <button hx-get="/api/projects-liked" class="tab" role="tab" aria-selected="false"
-        aria-controls="tab-content">Projects
-        liked</button>
-    {% else %}
-    <button hx-get="/api/projects" class="tab" role="tab" aria-selected="false"
-        aria-controls="tab-content">My
-        projects</button>
-    <button hx-get="/api/projects-liked" class="tab tab-active selected" role="tab" aria-selected="true"
-        aria-controls="tab-content">Projects
-        liked</button>
-    {% endif %}
-
-    {# <button hx-get="/tab3" role="tab" aria-selected="false" aria-controls="tab-content">Tab 3</button> #}
+<div class="flex justify-center">
+    <div class="tabs tabs-boxed mx-auto inline-flex space-x-2 rounded" role="tablist">
+        {% if liked == false %}
+        <button hx-get="/api/projects" class="tab tab-active selected rounded-lg" role="tab" aria-selected="true"
+            aria-controls="tab-content">My projects</button>
+        <button hx-get="/api/projects-liked" class="tab rounded-lg" role="tab" aria-selected="false"
+            aria-controls="tab-content">Projects
+            liked</button>
+        {% else %}
+        <button hx-get="/api/projects" class="tab rounded-lg" role="tab" aria-selected="false"
+            aria-controls="tab-content">My
+            projects</button>
+        <button hx-get="/api/projects-liked" class="tab tab-active selected rounded-lg" role="tab" aria-selected="true"
+            aria-controls="tab-content">Projects liked</button>
+        {% endif %}
+    </div>
 </div>
 
 <div id="tab-content" role="tabpanel" class="tab-content block">
@@ -26,11 +24,11 @@
                 <img width="50" height="50" class="object-scale-down rounded-full fixed" src="/public/avatar.png"
                     alt="{{ project.name }}" />
             </figure> #}
-            <div class="card-body shadow-xl rounded-box">
+            <div class="card-body shadow-xl rounded-lg">
                 <h2 class="card-title text-primary">{{ project.name }}
                     {% if project.new %} <div class="badge badge-secondary">NEW</div>{% endif %}
                 </h2>
-                <p class="font-medium text-accent">{{ project.description }}</p>
+                <p class="font-medium text-base-color">{{ project.description }}</p>
                 <div class="flex justify-end items-center mt-4">
                     <div class="badge mr-1">{{project.stars}}
                         <svg width="12px" height="12px" viewBox="0 0 24 24" fill="none"
@@ -42,8 +40,9 @@ <h2 class="card-title text-primary">{{ project.name }}
                             </path>
                         </svg>
                     </div>
-                    <div class="badge rounded-box">{{project.forks}}</div>
-                    <div class="badge badge-xs rounded-box p-4">last commit:<br>{{project.last_commit}}</div>
+                    <div class="badge badge-success">{{project.forks}}</div>
+                    <div class="badge badge-xs rounded-box p-1 text-xs">last commit: {{project.last_commit}}</div>
+                    {# <div class="badge badge-xs rounded-box p-4 text-xs">total commit:<br>0</div> #}
                 </div>
             </div>
         </a>