HTWK/htwkalender-pwa
1
0
Fork 0
mirror of https://gitlab.dit.htwk-leipzig.de/htwk-software/htwkalender-pwa.git synced 2026-01-16 18:32:26 +01:00
Code Issues Packages Projects Releases Wiki Activity

91 responsive changes

Browse Source
This commit is contained in:
survellow
2023-12-06 10:22:43 +01:00
parent 1d656b2653
commit 4377faa40e
11 changed files with 219 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/components/ModuleSelection.vue
View File

@@ -10,9 +10,14 @@ const props = defineProps({
type: Array as PropType<Module[]>,
required: true,
},
selectedCourse: {
type: String as PropType<string>,
required: true,
},
});
const modules : ComputedRef<Module[]> = computed(() => props.modules);
const selectedCourse : ComputedRef<string> = computed(() => props.selectedCourse);
store.modules.clear();
@@ -54,22 +59,22 @@ function nextStep() {
:value="modules"
data-key="uuid"
:class="
[modules.length === 0?
[selectedCourse === ''?
['opacity-0', 'pointer-events-none'] :
['opacity-100', 'transition-all', 'transition-duration-500', 'transition-ease-in-out']
,
'w-full']"
>
<template #header>
<div class="flex justify-content-between align-items-center flex-wrap">
<div class="flex justify-content-between align-items-center flex-wrap md:mx-4">
<h3>
{{ $t("moduleSelection.modules") }} -
{{ store.countModules() }}
</h3>
<div class="flex flex-1 align-items-center justify-content-end white-space-nowrap">
{{ allSelected ? $t('moduleSelection.deselectAll') : $t('moduleSelection.selectAll')}}
<div class="flex align-items-center justify-content-end white-space-nowrap">
<p>{{ allSelected ? $t('moduleSelection.deselectAll') : $t('moduleSelection.selectAll')}}</p>
<InputSwitch
class="mx-4"
class="mx-2"
:disabled="modules.length === 0"
:model-value="allSelected"
@update:model-value="toggleAllModules()"
@@ -84,7 +89,7 @@ function nextStep() {
</template>
<template #list="slotProps">
<div class="col-12">
<div class="flex flex-column sm:flex-row justify-content-between align-items-center flex-1 column-gap-4 mx-2">
<div class="flex flex-column sm:flex-row justify-content-between align-items-center flex-1 column-gap-4 mx-2 md:mx-4">
<p class="text-lg flex-1 align-self-stretch">{{ slotProps.data.name }}</p>
<ToggleButton
class="w-9rem align-self-end my-2"