change padding to userfriendlier size on phone close #23

src/vueLib/dialog/DialogFrame.vue

@@ -25,7 +25,7 @@
       <q-separator color="black" />
 
       <!-- Content Slot -->
-      <div class="scrollArea">
+      <div class="scrollArea" :style="'padding: ' + props.innerPadding + 'px'">
         <slot />
       </div>
 
@@ -48,6 +48,7 @@ const props = defineProps({
   headerTitle: { type: String, default: '' },
   width: { type: Number, default: 400 },
   height: { type: Number, default: 250 },
+  innerPadding: { type: Number, default: 16 },
 });
 
 // Fullscreen toggle
@@ -153,7 +154,6 @@ const cardStyle = computed(() => {
   flex: 1 1 auto;
   min-height: 0;
   overflow-y: auto;
-  padding: 16px;
 }
 
 /* Resize handle in bottom right */

src/vueLib/tables/attendees/AttendeesTable.vue

@@ -1,5 +1,4 @@
 <template>
-  <div class="q-pa-md">
   <q-table
     flat
     bordered
@@ -19,6 +18,7 @@
     :selection="selectOption ? 'multiple' : 'none'"
     v-model:selected="selected"
     binary-state-sort
+    dense
     class="bigger-table-text"
   >
     <template v-slot:top-left>
@@ -91,7 +91,6 @@
       </q-td>
     </template>
   </q-table>
-  </div>
   <DialogFrame ref="memberTableDialog" :header-title="$t('members')" :width="700" :height="500">
     <MembersTable
       add-attendees

src/vueLib/tables/attendees/AttendeesTableDialog.vue

@@ -1,5 +1,11 @@
 <template>
-  <DialogFrame ref="dialog" :header-title="$t('attendees')" :width="700" :height="600">
+  <DialogFrame
+    ref="dialog"
+    :header-title="$t('attendees')"
+    :width="700"
+    :height="600"
+    :inner-padding="0"
+  >
     <q-card>
       <q-tabs
         v-model="tab"
@@ -17,10 +23,10 @@
       <q-separator />
 
       <q-tab-panels v-model="tab" animated>
-        <q-tab-panel name="attendance">
+        <q-tab-panel name="attendance" style="padding: 0px">
           <AttendeesTable :event="localEvent!" v-on:update="updateTable" />
         </q-tab-panel>
-        <q-tab-panel name="noneAttendees">
+        <q-tab-panel name="noneAttendees" style="padding: 0px">
           <MembersTable
             add-attendees
             :compare-members="attendees"

src/vueLib/tables/events/EventsTable.vue

@@ -19,6 +19,7 @@
       :selection="selectOption ? 'multiple' : 'none'"
       v-model:selected="selected"
       binary-state-sort
+      dense
       class="bigger-table-text"
     >
       <template v-slot:top-left>

src/vueLib/tables/group/GroupTable.vue

@@ -19,6 +19,7 @@
       :selection="selectOption ? 'multiple' : 'none'"
       v-model:selected="selected"
       binary-state-sort
+      dense
       class="bigger-table-text"
     >
       <template v-slot:top-left>

src/vueLib/tables/members/MembersTable.vue

@@ -1,5 +1,4 @@
 <template>
-  <div class="q-pa-md">
   <q-table
     flat
     bordered
@@ -19,8 +18,11 @@
     :selection="selectOption ? 'multiple' : 'none'"
     v-model:selected="selected"
     binary-state-sort
+    dense
     class="bigger-table-text"
   >
+    <!-- top left of table-->
+
     <template v-slot:top-left>
       <div>
         <q-btn-group push flat style="color: grey">
@@ -34,9 +36,7 @@
             <q-tooltip>{{ $t('addNewMember') }}</q-tooltip>
           </q-btn>
           <q-btn
-              v-if="
-                user.isPermittedTo('members', 'write') || user.isPermittedTo('members', 'delete')
-              "
+            v-if="user.isPermittedTo('members', 'write') || user.isPermittedTo('members', 'delete')"
             dense
             flat
             style="color: grey"
@@ -127,6 +127,9 @@
         {{ $t('selected') }}: {{ selected.length }}
       </div>
     </template>
+
+    <!-- top right of table-->
+
     <template v-slot:top-right>
       <q-input filled dense debounce="300" v-model="filter" :placeholder="$t('search')">
         <template v-slot:append>
@@ -134,6 +137,9 @@
         </template>
       </q-input>
     </template>
+
+    <!-- table body content-->
+
     <template v-slot:body-cell="props">
       <q-td
         :props="props"
@@ -160,6 +166,7 @@
       <q-td :props="props">
         <q-select
           v-if="groups.length > 0"
+          dense
           :readonly="!user.isPermittedTo('members', 'write')"
           :options="groups"
           emit-value
@@ -174,6 +181,7 @@
     <template v-slot:body-cell-responsiblePerson="props">
       <q-td :props="props">
         <q-select
+          dense
           v-if="responsibles.length > 0"
           :readonly="!user.isPermittedTo('members', 'write')"
           :options="responsibles"
@@ -194,6 +202,7 @@
         />
         <q-menu v-if="openSubmenu" anchor="top right" self="top left">
           <q-item
+            dense
             v-if="user.isPermittedTo('members', 'write')"
             clickable
             v-close-popup
@@ -207,6 +216,7 @@
               !inProps.addAttendees &&
               !inProps.addResponsible
             "
+            dense
             clickable
             v-close-popup
             @click="openRemoveDialog(props.row)"
@@ -218,7 +228,6 @@
       </q-td>
     </template>
   </q-table>
-  </div>
   <EditOneDialog
     ref="editOneDialog"
     endpoint="members/edit"
@@ -228,6 +237,7 @@
   <EditAllDialog
     ref="editAllDialog"
     :responsibles="responsibles"
+    :group="groups"
     v-on:update="updateMember"
   ></EditAllDialog>
   <OkDialog

src/vueLib/tables/responsible/ResponsibleTable.vue

@@ -19,6 +19,7 @@
       :selection="selectOption ? 'multiple' : 'none'"
       v-model:selected="selected"
       binary-state-sort
+      dense
       class="bigger-table-text"
     >
       <template v-slot:top-left>

src/vueLib/tables/roles/RoleTable.vue

@@ -19,6 +19,7 @@
       :selection="selectOption ? 'multiple' : 'none'"
       v-model:selected="selected"
       binary-state-sort
+      dense
       class="bigger-table-text"
     >
       <template v-slot:top-left>