upstream/nextcloud
1
0
Fork 0
mirror of https://github.com/nextcloud/server.git synced 2026-05-22 10:06:37 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 16

chore(dav): use proper BEM

Browse source 
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
This commit is contained in:
Ferdinand Thiessen 2026-05-19 22:01:56 +02:00
parent 751638edaf
commit ee8a1e1097
No known key found for this signature in database
GPG key ID: 7E849AE05218500F
1 changed files with 43 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

80
apps/dav/src/components/AbsenceForm.vue
View file

@ -4,20 +4,20 @@
-->
<template>
<form class="absence" @submit.prevent="saveForm">
<div class="absence__dates">
<form :class="$style.absenceForm" @submit.prevent="saveForm">
<div :class="$style.absenceForm__pickerContainer">
<NcDateTimePickerNative
id="absence-first-day"
v-model="firstDay"
:class="$style.absenceForm__picker"
:label="t('dav', 'First day')"
class="absence__dates__picker"
:required="true" />
required />
<NcDateTimePickerNative
id="absence-last-day"
v-model="lastDay"
:class="$style.absenceForm__picker"
:label="t('dav', 'Last day (inclusive)')"
class="absence__dates__picker"
:required="true" />
required />
</div>
<label for="replacement-search-input">{{ t('dav', 'Out of office replacement (optional)') }}</label>
<NcSelectUsers
@ -28,11 +28,17 @@
:options="options"
@search="asyncFind" />
<NcTextField v-model="status" :label="t('dav', 'Short absence status')" :required="true" />
<div class="absence-long-message__wrapper">
<NcTextArea input-class="absence-long-message" v-model="message" :label="t('dav', 'Long absence Message')" :required="true" resize="none" rows="6"/>
<div :class="$style.absenceForm__longMessageContainer">
<NcTextArea
v-model="message"
:inputClass="$style.absenceForm__longMessage"
:label="t('dav', 'Long absence Message')"
required
resize="none"
rows="6" />
</div>
<div class="absence__buttons">
<div :class="$style.absenceForm__actions">
<NcButton
:disabled="loading || !valid"
variant="primary"
@ -253,40 +259,40 @@ export default {
}
</script>
<style lang="scss" scoped>
.absence {
<style module>
.absenceForm {
display: flex;
flex-direction: column;
gap: 5px;
}
&__dates {
display: flex;
gap: 10px;
width: 100%;
.absenceForm__pickerContainer {
display: flex;
gap: 10px;
width: 100%;
}
&__picker {
flex: 1 auto;
.absenceForm__picker {
flex: 1 auto;
:deep(.native-datetime-picker--input) {
margin-bottom: 0;
}
}
}
.absence-long-message {
height: calc(var(--default-line-height) * 6 * var(--font-size-small));
&__wrapper {
height: calc(var(--default-line-height) * 6 * var(--font-size-small) + var(--default-grid-baseline) * 2);
display: flex;
flex-direction: column;
justify-content: start;
}
}
&__buttons {
display: flex;
gap: 5px;
:global(.native-datetime-picker--input) {
margin-bottom: 0;
}
}
.absenceForm__longMessage {
height: calc(var(--default-line-height) * 6 * var(--font-size-small));
}
.absenceForm__longMessageContainer {
height: calc(var(--default-line-height) * 6 * var(--font-size-small) + var(--default-grid-baseline) * 2);
display: flex;
flex-direction: column;
justify-content: start;
}
.absenceForm__actions {
display: flex;
gap: 5px;
}
</style>