add create button podcast and small ui fix

VovaStelmashchuk · Oct 1, 2024 · accd293 · accd293
1 parent 36282d3
commit accd293
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 3 deletions.
diff --git a/src/public/styles.css b/src/public/styles.css
@@ -710,6 +710,10 @@ input {
   margin-top: 1rem;
 }
 
+.mt-auto {
+  margin-top: auto;
+}
+
 .line-clamp-3 {
   overflow: hidden;
   display: -webkit-box;
@@ -764,6 +768,10 @@ input {
   height: 100%;
 }
 
+.min-h-screen {
+  min-height: 100vh;
+}
+
 .w-1\/2 {
   width: 50%;
 }
@@ -796,6 +804,10 @@ input {
   flex: 1 1 0%;
 }
 
+.flex-grow {
+  flex-grow: 1;
+}
+
 .cursor-pointer {
   cursor: pointer;
 }
@@ -1090,6 +1102,10 @@ html {
   overflow-y: scroll;
 }
 
+html, body {
+  height: 100%;
+}
+
 .selected {
   --tw-bg-opacity: 1;
   background-color: rgb(34 197 94 / var(--tw-bg-opacity));

diff --git a/src/routers/admin/dashboard.js b/src/routers/admin/dashboard.js
@@ -44,6 +44,9 @@ async function adminPodcastList(request, h) {
     {
       pageTitle: pageTitle,
       posts: uiPosts,
+      createPodcastButton: {
+        title: 'Create Podcast',
+      }
     },
     {
       layout: 'admin'

diff --git a/src/styles.css b/src/styles.css
@@ -45,6 +45,10 @@ html {
   @apply overflow-y-scroll;
 }
 
+html, body {
+  height: 100%;
+}
+
 .selected {
   @apply bg-green-500 text-white;
 }

diff --git a/src/templates/layouts/admin.html b/src/templates/layouts/admin.html
@@ -8,11 +8,18 @@
   <script src="https://unpkg.com/[email protected]"></script>
 </head>
 
-<body class="bg-gray-100 text-gray-900 font-sans">
+<body class="bg-gray-100 text-gray-900 font-sans min-h-screen flex flex-col">
   {{> admin_head}}
-  <div class="container max-w-screen-xl mx-auto">
+
+  <div class="container max-w-screen-xl mx-auto flex-grow">
     {{{ content }}}
   </div>
+
+  <div id="dialog-container"></div>
+
+  <footer class="bg-black p-4 text-center mt-auto">
+    <p class="text-white">&copy; 2024 DIY podcast hosting</p>
+  </footer>
 </body>
 
 </html>
diff --git a/src/templates/pages/admin/admin_podcast_list.html b/src/templates/pages/admin/admin_podcast_list.html
@@ -1,3 +1,5 @@
+{{> btn_create_podcast createPodcastButton}}
+
 <div class="grid grid-cols-1 gap-4">
   {{#each posts}}
   <a href="{{detailUrl}}" class="no-underline bg-white p-8 rounded shadow-md">

diff --git a/src/templates/pages/podcastDetails.html b/src/templates/pages/podcastDetails.html
@@ -1,6 +1,6 @@
 <div>
     <div class="flex flex-col md:flex-row w-full">
-        <div class="hidden md:block md:w-3/10">
+        <div class="hidden md:block md:w-3/10 py-2">
             <img src="{{imageUrl}}" alt="Logo" class="w-64 aspect-square">
         </div>
         <div class="w-full md:w-7/10 bg-random2 p-4">

diff --git a/src/templates/widgets/btn_create_podcast.html b/src/templates/widgets/btn_create_podcast.html
@@ -0,0 +1,4 @@
+<button hx-swap="#dialog-container" hx-post="/admin/show/{{showSlug}}/episode-new"
+  class="common-button w-full px-4 py-2 my-2 transition-all duration-300 ease-in-out">
+  {{title}}
+</button>