From c5afea107490914c3604f2395aad575e8431ec23 Mon Sep 17 00:00:00 2001
From: Greg Lorenzen <gregorylorenzen@gmail.com>
Date: Fri, 7 Feb 2025 01:29:08 +0000
Subject: [PATCH] Adjust Series page UI spacing and add EditSeriesModal and
 button

---
 client/pages/library/_library/series/_id.vue | 33 +++++++++++++++++---
 1 file changed, 29 insertions(+), 4 deletions(-)

diff --git a/client/pages/library/_library/series/_id.vue b/client/pages/library/_library/series/_id.vue
index 865648f8..ce1f3a50 100644
--- a/client/pages/library/_library/series/_id.vue
+++ b/client/pages/library/_library/series/_id.vue
@@ -1,7 +1,18 @@
 <template>
-  <div class="page" :class="streamLibraryItem ? 'streaming' : ''">
-    <app-book-shelf-toolbar :selected-series="series" />
-    <app-lazy-bookshelf page="series-books" :series-id="seriesId" />
+  <div id="page-wrapper" class="page" :class="streamLibraryItem ? 'streaming' : ''">
+    <app-book-shelf-toolbar id="series-toolbar" :selected-series="series" />
+    <div class="max-w-6xl mx-auto">
+      <div class="flex items-center my-8">
+        <h1 class="text-2xl">{{ series.name }}</h1>
+
+        <button class="w-8 h-8 rounded-full flex items-center justify-center mx-4 cursor-pointer text-gray-300 hover:text-warning transform hover:scale-125 duration-100" @click="showEditSeries">
+          <span class="material-symbols text-base">edit</span>
+        </button>
+      </div>
+      <app-lazy-bookshelf page="series-books" :series-id="seriesId" />
+    </div>
+
+    <modals-edit-series-modal v-model="showEditSeriesModal" :series="series" />
   </div>
 </template>
 
@@ -33,7 +44,9 @@ export default {
     }
   },
   data() {
-    return {}
+    return {
+      showEditSeriesModal: false
+    }
   },
   computed: {
     streamLibraryItem() {
@@ -43,6 +56,9 @@ export default {
   methods: {
     seriesUpdated(series) {
       this.series = series
+    },
+    showEditSeries() {
+      this.showEditSeriesModal = !this.showEditSeriesModal
     }
   },
   mounted() {
@@ -57,3 +73,12 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+#bookshelf {
+  background-image: none;
+}
+#series-toolbar {
+  background-color: rgba(55, 56, 56, 1);
+}
+</style>