public/src/components/PlanActionBar.vue

@@ -25,12 +25,12 @@ const props = defineProps<{
 <style scoped lang="less">
 
 .action-bar {
-    width: calc(100% - 32px * 2);
+    width: calc(100% - 24px * 2);
-    border-top: 1px solid #d7d5d5;
     display: flex;
-    padding: 10px 32px;
+    padding: 6px 24px;
-    background: #ffffff;
+    background: #fafafa;
     justify-content: flex-end;
+    border-bottom: 1px solid #e0e0e0;
 
     .other-action{
         transition: 200ms translate;

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">
+            <PlanActionBar
-                <button
+                class="action-bar no-print"
-                    class="flat"
+                :save="getDif().length > 0"
-                    :class="{ active: viewMode === 'table' }"
+                :plan="false"
-                    @click="viewMode = 'table'"
+                :godi="true"
-                ><i>table_rows</i> Tabelle</button>
+                @save="saveChanges()"
-                <button
+                @add-godi="createGottesdienst()"
-                    class="flat"
+                @add-mini="createMinistrant()"
-                    :class="{ active: viewMode === 'list' }"
+                @import-zelebrationsplan="importZelebrationsplan()"
-                    @click="viewMode = 'list'"
+                v-if="editPlanAdmin"
-                ><i>list</i> Liste</button>
+            />
-            </div>
 
             <ListView
                 :gottesdienste="sortedGottesdienste"
@@ -382,18 +381,18 @@ async function importZelebrationsplan() {
                 </MobilePlan>
             </template>
 
-            <PlanActionBar
+            <div class="view-toggle no-print" v-if="plan.gottesdienste.length > 0">
-                class="action-bar no-print"
+                <button
-                :save="getDif().length > 0"
+                    class="flat"
-                :plan="false"
+                    :class="{ active: viewMode === 'table' }"
-                :godi="true"
+                    @click="viewMode = 'table'"
-                @save="saveChanges()"
+                ><i>table_rows</i> Tabelle</button>
-                @add-godi="createGottesdienst()"
+                <button
-                @add-mini="createMinistrant()"
+                    class="flat"
-                @import-zelebrationsplan="importZelebrationsplan()"
+                    :class="{ active: viewMode === 'list' }"
-                v-if="editPlanAdmin"
+                    @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;
+    position: sticky;
-    bottom: 0;
+    top: 0;
     z-index: 100;
 }
 </style>