From 9d89f323744228ee05d37b5aff39d62172ac1e3b Mon Sep 17 00:00:00 2001
From: Jonas Gerg <joniogerg@gmail.com>
Date: Tue, 14 Jul 2026 21:55:13 +0200
Subject: [PATCH] refactor: move action bar to top and lighten styling

- Moved PlanActionBar from fixed bottom to sticky top below GroupView
- Removed position: fixed and bottom padding workaround
- Action bar now uses lighter bg (#fafafa), thinner padding, border-bottom
- Removed unused padding-bottom: 100px from .plan, reduced to 24px
---
 public/src/components/PlanActionBar.vue |  8 ++--
 public/src/views/PlanView.vue           | 58 ++++++++++++-------------
 2 files changed, 32 insertions(+), 34 deletions(-)

diff --git a/public/src/components/PlanActionBar.vue b/public/src/components/PlanActionBar.vue
index d9b66b4..2fa04bd 100644
--- a/public/src/components/PlanActionBar.vue
+++ b/public/src/components/PlanActionBar.vue
@@ -25,12 +25,12 @@ const props = defineProps<{
 <style scoped lang="less">
 
 .action-bar {
-    width: calc(100% - 32px * 2);
-    border-top: 1px solid #d7d5d5;
+    width: calc(100% - 24px * 2);
     display: flex;
-    padding: 10px 32px;
-    background: #ffffff;
+    padding: 6px 24px;
+    background: #fafafa;
     justify-content: flex-end;
+    border-bottom: 1px solid #e0e0e0;
 
     .other-action{
         transition: 200ms translate;
diff --git a/public/src/views/PlanView.vue b/public/src/views/PlanView.vue
index d86497f..d966e8e 100644
--- a/public/src/views/PlanView.vue
+++ b/public/src/views/PlanView.vue
@@ -324,18 +324,17 @@ async function importZelebrationsplan() {
             <GroupView :groups="plan.groups" :admin="editPlanAdmin"
                        @new="createNewPlan" @delete="deletePlan" @edit="editPlan" class="no-print"/>
 
-            <div class="view-toggle no-print" v-if="plan.gottesdienste.length > 0">
-                <button
-                    class="flat"
-                    :class="{ active: viewMode === 'table' }"
-                    @click="viewMode = 'table'"
-                ><i>table_rows</i> Tabelle</button>
-                <button
-                    class="flat"
-                    :class="{ active: viewMode === 'list' }"
-                    @click="viewMode = 'list'"
-                ><i>list</i> Liste</button>
-            </div>
+            <PlanActionBar
+                class="action-bar no-print"
+                :save="getDif().length > 0"
+                :plan="false"
+                :godi="true"
+                @save="saveChanges()"
+                @add-godi="createGottesdienst()"
+                @add-mini="createMinistrant()"
+                @import-zelebrationsplan="importZelebrationsplan()"
+                v-if="editPlanAdmin"
+            />
 
             <ListView
                 :gottesdienste="sortedGottesdienste"
@@ -382,18 +381,18 @@ async function importZelebrationsplan() {
                 </MobilePlan>
             </template>
 
-            <PlanActionBar
-                class="action-bar no-print"
-                :save="getDif().length > 0"
-                :plan="false"
-                :godi="true"
-                @save="saveChanges()"
-                @add-godi="createGottesdienst()"
-                @add-mini="createMinistrant()"
-                @import-zelebrationsplan="importZelebrationsplan()"
-                v-if="editPlanAdmin"
-            />
-
+            <div class="view-toggle no-print" v-if="plan.gottesdienste.length > 0">
+                <button
+                    class="flat"
+                    :class="{ active: viewMode === 'table' }"
+                    @click="viewMode = 'table'"
+                ><i>table_rows</i> Tabelle</button>
+                <button
+                    class="flat"
+                    :class="{ active: viewMode === 'list' }"
+                    @click="viewMode = 'list'"
+                ><i>list</i> Liste</button>
+            </div>
 
             <SavingIndicator :visible="isSaving"/>
         </div>
@@ -413,7 +412,7 @@ async function importZelebrationsplan() {
 }
 
 .plan {
-    padding-bottom: 100px;
+    padding-bottom: 24px;
 }
 
 .plan.table {
@@ -422,10 +421,9 @@ async function importZelebrationsplan() {
 
 .container .view-toggle {
     display: flex;
+    justify-content: center;
     gap: 4px;
     padding: 8px 12px;
-    background: #f5f5f5;
-    border-bottom: 1px solid #d7d5d5;
 
     button {
         font-size: 14px;
@@ -436,7 +434,7 @@ async function importZelebrationsplan() {
         }
 
         &.active {
-            background: #ffffff;
+            background: #e0e0e0;
             border-color: #c4c4c4;
         }
     }
@@ -451,8 +449,8 @@ async function importZelebrationsplan() {
 }
 
 .action-bar {
-    position: fixed;
-    bottom: 0;
+    position: sticky;
+    top: 0;
     z-index: 100;
 }
 </style>