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,97 +1,96 @@
 <template>
-  <div class="q-pa-md">
+  <q-table
-    <q-table
+    flat
-      flat
+    bordered
-      bordered
+    ref="tableRef"
-      ref="tableRef"
+    :title="$t('attendees')"
-      :title="$t('attendees')"
+    title-class="text-bold text-blue-9"
-      title-class="text-bold text-blue-9"
+    :no-data-label="$t('noDataAvailable')"
-      :no-data-label="$t('noDataAvailable')"
+    :loading-label="$t('loading')"
-      :loading-label="$t('loading')"
+    :rows-per-page-label="$t('recordsPerPage')"
-      :rows-per-page-label="$t('recordsPerPage')"
+    :selected-rows-label="(val) => val + ' ' + $t('recordSelected')"
-      :selected-rows-label="(val) => val + ' ' + $t('recordSelected')"
+    :rows="attendees"
-      :rows="attendees"
+    :columns="columns"
-      :columns="columns"
+    row-key="id"
-      row-key="id"
+    v-model:pagination="pagination"
-      v-model:pagination="pagination"
+    :loading="loading"
-      :loading="loading"
+    :filter="filter"
-      :filter="filter"
+    :selection="selectOption ? 'multiple' : 'none'"
-      :selection="selectOption ? 'multiple' : 'none'"
+    v-model:selected="selected"
-      v-model:selected="selected"
+    binary-state-sort
-      binary-state-sort
+    dense
-      class="bigger-table-text"
+    class="bigger-table-text"
-    >
+  >
-      <template v-slot:top-left>
+    <template v-slot:top-left>
-        <q-btn-group push flat style="color: grey">
+      <q-btn-group push flat style="color: grey">
-          <q-btn
+        <q-btn
-            v-if="user.isPermittedTo('events', 'write')"
+          v-if="user.isPermittedTo('events', 'write')"
-            dense
+          dense
-            flat
+          flat
-            icon="person"
+          icon="person"
-            @click="openAllValueDialog"
+          @click="openAllValueDialog"
-            ><q-badge floating transparent color="primary" text-color="primary-text">+</q-badge>
+          ><q-badge floating transparent color="primary" text-color="primary-text">+</q-badge>
-            <q-tooltip>{{ $t('addNewAttendees') }}</q-tooltip>
+          <q-tooltip>{{ $t('addNewAttendees') }}</q-tooltip>
-          </q-btn>
+        </q-btn>
-          <q-btn
+        <q-btn
-            v-if="user.isPermittedTo('events', 'write')"
+          v-if="user.isPermittedTo('events', 'write')"
-            dense
+          dense
-            flat
+          flat
-            style="color: grey"
+          style="color: grey"
-            :icon="selectOption ? 'check_box' : 'check_box_outline_blank'"
+          :icon="selectOption ? 'check_box' : 'check_box_outline_blank'"
-            @click="selectOption = !selectOption"
+          @click="selectOption = !selectOption"
+        >
+          <q-tooltip>{{ $t('selectAttendeesOptions') }}</q-tooltip>
+        </q-btn>
+      </q-btn-group>
+      <div v-if="selectOption && selected.length > 0">
+        <q-btn flat dense icon="more_vert" @click="openSubmenu = true" />
+        <q-menu v-if="openSubmenu" anchor="bottom middle" self="top middle">
+          <q-item
+            clickable
+            v-close-popup
+            @click="openRemoveDialog(...selected)"
+            class="text-negative"
+            >{{ $t('delete') }}</q-item
           >
-            <q-tooltip>{{ $t('selectAttendeesOptions') }}</q-tooltip>
+        </q-menu>
-          </q-btn>
+      </div>
-        </q-btn-group>
+      <div v-if="selectOption && selected.length > 0" class="q-ml-md text-weight-bold">
-        <div v-if="selectOption && selected.length > 0">
+        {{ $t('selected') }}: {{ selected.length }}
-          <q-btn flat dense icon="more_vert" @click="openSubmenu = true" />
+      </div>
-          <q-menu v-if="openSubmenu" anchor="bottom middle" self="top middle">
+    </template>
-            <q-item
+    <template v-slot:top-right>
-              clickable
+      <q-input filled dense debounce="300" v-model="filter" :placeholder="$t('search')">
-              v-close-popup
+        <template v-slot:append>
-              @click="openRemoveDialog(...selected)"
+          <q-icon name="search" />
-              class="text-negative"
+        </template>
-              >{{ $t('delete') }}</q-item
+      </q-input>
-            >
+    </template>
-          </q-menu>
+    <template v-slot:body-cell="props">
-        </div>
+      <q-td v-if="props.col.field === 'attendees'" :props="props">
-        <div v-if="selectOption && selected.length > 0" class="q-ml-md text-weight-bold">
+        <q-btn v-if="props.value !== null && props.value.length > 0" dense flat icon="people"
-          {{ $t('selected') }}: {{ selected.length }}
+          ><q-badge color="primary" text-color="primary-text" floating transparent>{{
-        </div>
+            props.row.count
-      </template>
+          }}</q-badge></q-btn
-      <template v-slot:top-right>
+        >
-        <q-input filled dense debounce="300" v-model="filter" :placeholder="$t('search')">
+      </q-td>
-          <template v-slot:append>
+      <q-td v-else :props="props">
-            <q-icon name="search" />
+        {{ props.value }}
-          </template>
+      </q-td>
-        </q-input>
+    </template>
-      </template>
+    <template v-slot:body-cell-option="props">
-      <template v-slot:body-cell="props">
+      <q-td :props="props">
-        <q-td v-if="props.col.field === 'attendees'" :props="props">
+        <q-btn
-          <q-btn v-if="props.value !== null && props.value.length > 0" dense flat icon="people"
+          v-if="user.isPermittedTo('events', 'delete')"
-            ><q-badge color="primary" text-color="primary-text" floating transparent>{{
+          flat
-              props.row.count
+          dense
-            }}</q-badge></q-btn
+          @click="openRemoveDialog(props.row)"
-          >
+          color="negative"
-        </q-td>
+          icon="delete"
-        <q-td v-else :props="props">
+        />
-          {{ props.value }}
+      </q-td>
-        </q-td>
+    </template>
-      </template>
+  </q-table>
-      <template v-slot:body-cell-option="props">
-        <q-td :props="props">
-          <q-btn
-            v-if="user.isPermittedTo('events', 'delete')"
-            flat
-            dense
-            @click="openRemoveDialog(props.row)"
-            color="negative"
-            icon="delete"
-          />
-        </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,224 +1,233 @@
 <template>
-  <div class="q-pa-md">
+  <q-table
-    <q-table
+    flat
-      flat
+    bordered
-      bordered
+    ref="tableRef"
-      ref="tableRef"
+    title="Members"
-      title="Members"
+    title-class="text-bold text-blue-9"
-      title-class="text-bold text-blue-9"
+    :no-data-label="$t('noDataAvailable')"
-      :no-data-label="$t('noDataAvailable')"
+    :loading-label="$t('loading')"
-      :loading-label="$t('loading')"
+    :rows-per-page-label="$t('recordsPerPage')"
-      :rows-per-page-label="$t('recordsPerPage')"
+    :selected-rows-label="(val) => val + ' ' + $t('recordSelected')"
-      :selected-rows-label="(val) => val + ' ' + $t('recordSelected')"
+    :rows="filteredMembers"
-      :rows="filteredMembers"
+    :columns="columns"
-      :columns="columns"
+    row-key="id"
-      row-key="id"
+    v-model:pagination="pagination"
-      v-model:pagination="pagination"
+    :loading="loading"
-      :loading="loading"
+    :filter="filter"
-      :filter="filter"
+    :selection="selectOption ? 'multiple' : 'none'"
-      :selection="selectOption ? 'multiple' : 'none'"
+    v-model:selected="selected"
-      v-model:selected="selected"
+    binary-state-sort
-      binary-state-sort
+    dense
-      class="bigger-table-text"
+    class="bigger-table-text"
-    >
+  >
-      <template v-slot:top-left>
+    <!-- top left of table-->
-        <div>
-          <q-btn-group push flat style="color: grey">
-            <q-btn
-              v-if="user.isPermittedTo('members', 'write')"
-              dense
-              flat
-              icon="add"
-              @click="openAllValueDialog(null)"
-            >
-              <q-tooltip>{{ $t('addNewMember') }}</q-tooltip>
-            </q-btn>
-            <q-btn
-              v-if="
-                user.isPermittedTo('members', 'write') || user.isPermittedTo('members', 'delete')
-              "
-              dense
-              flat
-              style="color: grey"
-              :icon="selectOption ? 'check_box' : 'check_box_outline_blank'"
-              @click="selectOption = !selectOption"
-            >
-              <q-tooltip>{{ $t('selectMemberOptions') }}</q-tooltip>
-            </q-btn>
-            <q-btn
-              v-if="user.isPermittedTo('members', 'import')"
-              dense
-              flat
-              icon="upload"
-              @click="openUploadDialog"
-            >
-              <q-tooltip>{{ $t('importCSV') }}</q-tooltip>
-            </q-btn>
-            <q-btn
-              v-if="user.isPermittedTo('members', 'export')"
-              dense
-              flat
-              icon="download"
-              @click="exportCsv"
-            >
-              <q-tooltip>{{ $t('exportCSV') }}</q-tooltip>
-            </q-btn>
-          </q-btn-group>
-          <div v-if="selectOption && selected.length > 0">
-            <q-btn
-              v-if="inProps.addAttendees || inProps.addResponsible"
-              dense
-              color="grey-7"
-              flat
-              icon="person"
-              @click="addMemberTo"
-            >
-              <q-badge floating transparent color="primary" text-color="primary-text">+</q-badge>
-            </q-btn>
-            <q-btn v-else flat dense icon="more_vert" @click="openSubmenu = true" />
 
-            <q-menu v-if="openSubmenu" anchor="bottom middle" self="top middle">
+    <template v-slot:top-left>
-              <q-item clickable v-close-popup @click="addToEvent" class="text-primary">{{
+      <div>
-                $t('addToEvent')
+        <q-btn-group push flat style="color: grey">
-              }}</q-item>
+          <q-btn
-              <q-item
+            v-if="user.isPermittedTo('members', 'write')"
-                v-if="user.isPermittedTo('members', 'delete')"
+            dense
-                clickable
+            flat
-                v-close-popup
+            icon="add"
-                @click="openRemoveDialog(...selected)"
+            @click="openAllValueDialog(null)"
-                class="text-negative"
+          >
-                >{{ $t('delete') }}</q-item
+            <q-tooltip>{{ $t('addNewMember') }}</q-tooltip>
-              >
+          </q-btn>
-            </q-menu>
-          </div>
-          <q-card flat class="q-pa-sm">
-            <q-select
-              :label="$t('filterByColumn')"
-              dense
-              v-model="selectedColumnFilter"
-              option-label="label"
-              option-value="name"
-              map-options
-              emit-value
-              clearable
-              :options="columns.filter((col) => col.label !== '')"
-              v-on:clear="selectedColumnOptions = []"
-              @update:model-value="
-                filterMembers(selectedColumnFilter, ...(selectedColumnOptions || []))
-              "
-              class="q-mt-xs"
-            />
-            <q-select
-              v-if="selectedColumnFilter"
-              :label="$t('filterByColumnValue')"
-              dense
-              v-model="selectedColumnOptions"
-              :options="setColumnOptions(selectedColumnFilter)"
-              class="q-mt-xs"
-              multiple
-              clearable
-              @update:model-value="
-                filterMembers(selectedColumnFilter, ...(selectedColumnOptions || []))
-              "
-            />
-          </q-card>
-        </div>
-        <div v-if="selectOption && selected.length > 0" class="text-weight-bold">
-          {{ $t('selected') }}: {{ selected.length }}
-        </div>
-      </template>
-      <template v-slot:top-right>
-        <q-input filled dense debounce="300" v-model="filter" :placeholder="$t('search')">
-          <template v-slot:append>
-            <q-icon name="search" />
-          </template>
-        </q-input>
-      </template>
-      <template v-slot:body-cell="props">
-        <q-td
-          :props="props"
-          :class="getRowClass(props.row)"
-          :style="user.isPermittedTo('members', 'write') ? 'cursor: pointer' : ''"
-          @click="
-            user.isPermittedTo('members', 'write') &&
-            openSingleValueDialog(props.col.label, props.col.name, props.row)
-          "
-        >
-          {{ props.value }}
-        </q-td>
-      </template>
-      <template v-slot:body-cell-cake="props">
-        <q-td :props="props" :class="getRowClass(props.row)">
-          <q-icon
-            :name="isXDaysBeforeAnnualDate(props.row.birthday, 1) ? 'cake' : ''"
-            :color="'red'"
-            size="md"
-          />
-        </q-td>
-      </template>
-      <template v-slot:body-cell-group="props">
-        <q-td :props="props">
-          <q-select
-            v-if="groups.length > 0"
-            :readonly="!user.isPermittedTo('members', 'write')"
-            :options="groups"
-            emit-value
-            map-options
-            option-value="name"
-            option-label="name"
-            v-model="props.row.group"
-            @update:model-value="updateMember(props.row)"
-          ></q-select>
-        </q-td>
-      </template>
-      <template v-slot:body-cell-responsiblePerson="props">
-        <q-td :props="props">
-          <q-select
-            v-if="responsibles.length > 0"
-            :readonly="!user.isPermittedTo('members', 'write')"
-            :options="responsibles"
-            :option-label="(opt) => opt.firstName + ' ' + opt.lastName"
-            v-model="props.row.responsiblePerson"
-            @update:model-value="updateMember(props.row)"
-          ></q-select>
-        </q-td>
-      </template>
-      <template v-slot:body-cell-option="props">
-        <q-td :props="props">
           <q-btn
             v-if="user.isPermittedTo('members', 'write') || user.isPermittedTo('members', 'delete')"
-            flat
             dense
-            icon="more_vert"
+            flat
-            @click="openSubmenu = true"
+            style="color: grey"
-          />
+            :icon="selectOption ? 'check_box' : 'check_box_outline_blank'"
-          <q-menu v-if="openSubmenu" anchor="top right" self="top left">
+            @click="selectOption = !selectOption"
+          >
+            <q-tooltip>{{ $t('selectMemberOptions') }}</q-tooltip>
+          </q-btn>
+          <q-btn
+            v-if="user.isPermittedTo('members', 'import')"
+            dense
+            flat
+            icon="upload"
+            @click="openUploadDialog"
+          >
+            <q-tooltip>{{ $t('importCSV') }}</q-tooltip>
+          </q-btn>
+          <q-btn
+            v-if="user.isPermittedTo('members', 'export')"
+            dense
+            flat
+            icon="download"
+            @click="exportCsv"
+          >
+            <q-tooltip>{{ $t('exportCSV') }}</q-tooltip>
+          </q-btn>
+        </q-btn-group>
+        <div v-if="selectOption && selected.length > 0">
+          <q-btn
+            v-if="inProps.addAttendees || inProps.addResponsible"
+            dense
+            color="grey-7"
+            flat
+            icon="person"
+            @click="addMemberTo"
+          >
+            <q-badge floating transparent color="primary" text-color="primary-text">+</q-badge>
+          </q-btn>
+          <q-btn v-else flat dense icon="more_vert" @click="openSubmenu = true" />
+
+          <q-menu v-if="openSubmenu" anchor="bottom middle" self="top middle">
+            <q-item clickable v-close-popup @click="addToEvent" class="text-primary">{{
+              $t('addToEvent')
+            }}</q-item>
             <q-item
-              v-if="user.isPermittedTo('members', 'write')"
+              v-if="user.isPermittedTo('members', 'delete')"
               clickable
               v-close-popup
-              @click="openAllValueDialog(props.row)"
+              @click="openRemoveDialog(...selected)"
-              class="text-primary"
-              >{{ $t('edit') }}</q-item
-            >
-            <q-item
-              v-if="
-                user.isPermittedTo('members', 'delete') &&
-                !inProps.addAttendees &&
-                !inProps.addResponsible
-              "
-              clickable
-              v-close-popup
-              @click="openRemoveDialog(props.row)"
               class="text-negative"
-              title="zu"
               >{{ $t('delete') }}</q-item
             >
           </q-menu>
-        </q-td>
+        </div>
-      </template>
+        <q-card flat class="q-pa-sm">
-    </q-table>
+          <q-select
-  </div>
+            :label="$t('filterByColumn')"
+            dense
+            v-model="selectedColumnFilter"
+            option-label="label"
+            option-value="name"
+            map-options
+            emit-value
+            clearable
+            :options="columns.filter((col) => col.label !== '')"
+            v-on:clear="selectedColumnOptions = []"
+            @update:model-value="
+              filterMembers(selectedColumnFilter, ...(selectedColumnOptions || []))
+            "
+            class="q-mt-xs"
+          />
+          <q-select
+            v-if="selectedColumnFilter"
+            :label="$t('filterByColumnValue')"
+            dense
+            v-model="selectedColumnOptions"
+            :options="setColumnOptions(selectedColumnFilter)"
+            class="q-mt-xs"
+            multiple
+            clearable
+            @update:model-value="
+              filterMembers(selectedColumnFilter, ...(selectedColumnOptions || []))
+            "
+          />
+        </q-card>
+      </div>
+      <div v-if="selectOption && selected.length > 0" class="text-weight-bold">
+        {{ $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>
+          <q-icon name="search" />
+        </template>
+      </q-input>
+    </template>
+
+    <!-- table body content-->
+
+    <template v-slot:body-cell="props">
+      <q-td
+        :props="props"
+        :class="getRowClass(props.row)"
+        :style="user.isPermittedTo('members', 'write') ? 'cursor: pointer' : ''"
+        @click="
+          user.isPermittedTo('members', 'write') &&
+          openSingleValueDialog(props.col.label, props.col.name, props.row)
+        "
+      >
+        {{ props.value }}
+      </q-td>
+    </template>
+    <template v-slot:body-cell-cake="props">
+      <q-td :props="props" :class="getRowClass(props.row)">
+        <q-icon
+          :name="isXDaysBeforeAnnualDate(props.row.birthday, 1) ? 'cake' : ''"
+          :color="'red'"
+          size="md"
+        />
+      </q-td>
+    </template>
+    <template v-slot:body-cell-group="props">
+      <q-td :props="props">
+        <q-select
+          v-if="groups.length > 0"
+          dense
+          :readonly="!user.isPermittedTo('members', 'write')"
+          :options="groups"
+          emit-value
+          map-options
+          option-value="name"
+          option-label="name"
+          v-model="props.row.group"
+          @update:model-value="updateMember(props.row)"
+        ></q-select>
+      </q-td>
+    </template>
+    <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"
+          :option-label="(opt) => opt.firstName + ' ' + opt.lastName"
+          v-model="props.row.responsiblePerson"
+          @update:model-value="updateMember(props.row)"
+        ></q-select>
+      </q-td>
+    </template>
+    <template v-slot:body-cell-option="props">
+      <q-td :props="props">
+        <q-btn
+          v-if="user.isPermittedTo('members', 'write') || user.isPermittedTo('members', 'delete')"
+          flat
+          dense
+          icon="more_vert"
+          @click="openSubmenu = true"
+        />
+        <q-menu v-if="openSubmenu" anchor="top right" self="top left">
+          <q-item
+            dense
+            v-if="user.isPermittedTo('members', 'write')"
+            clickable
+            v-close-popup
+            @click="openAllValueDialog(props.row)"
+            class="text-primary"
+            >{{ $t('edit') }}</q-item
+          >
+          <q-item
+            v-if="
+              user.isPermittedTo('members', 'delete') &&
+              !inProps.addAttendees &&
+              !inProps.addResponsible
+            "
+            dense
+            clickable
+            v-close-popup
+            @click="openRemoveDialog(props.row)"
+            class="text-negative"
+            title="zu"
+            >{{ $t('delete') }}</q-item
+          >
+        </q-menu>
+      </q-td>
+    </template>
+  </q-table>
   <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>