studvw reduce height of elements e.g:

- tabulator header filter
 - tabulator rows
 - form input and select
 - primevue autocomplete
 - primevue tabs
This commit is contained in:
Harald Bamberger
2026-02-24 17:23:50 +01:00
parent 7680a5c773
commit ee0fa9f7d4
8 changed files with 106 additions and 55 deletions
+43 -5
View File
@@ -12,22 +12,22 @@ html {
font-size: .875em;
}
html.fs_xx-small {
font-size: .5em;
font-size: .625em;
}
html.fs_x-small {
font-size: .625em;
font-size: .6875em;
}
html.fs_small {
font-size: .75em;
}
html.fs_normal {
font-size: .875em;
font-size: .8125em;
}
html.fs_big {
font-size: 1em;
font-size: .875em;
}
html.fs_huge {
font-size: 1.125em;
font-size: 1em;
}
#appMenu {
@@ -185,3 +185,41 @@ html.fs_huge {
.tiny-90 div.tox.tox-tinymce {
height: 90% !important;
}
/* slim begin */
.stv .form-label {
margin-bottom: .15rem;
}
.stv .form-control,
.stv .form-select,
.stv .input-group-text {
padding-top: .15rem;
padding-bottom: .15rem;
line-height: 1.25;
}
:root {
--bs-body-line-height: 1.25;
}
.stv .tabulator-row .tabulator-cell,
.stv .tabulator-header-filter input {
padding-top: 1px !important;
padding-bottom: 1px !important;
}
.stv .tabulator-row {
min-height: 18px;
}
.stv .btn {
--bs-btn-padding-y: 0.15rem;
--bs-btn-line-height: 1.25;
}
.stv .p-button.p-button-icon-only {
padding-top: 0;
padding-bottom: 0;
}
/* slim ende */
@@ -112,7 +112,7 @@ export default {
}
},
template: `
<div class="core-header d-flex justify-content-start align-items-center w-100 overflow-auto pb-3 gap-3" style="max-height:9rem; min-width: 37.5rem;">
<div class="core-header d-flex justify-content-start align-items-center w-100 overflow-auto pb-2 gap-3" style="max-height:9rem; min-width: 37.5rem;">
<template v-if="typeHeader==='student'">
<div
@@ -122,7 +122,7 @@ export default {
>
<img
class="d-block rounded"
style="height: 84px;"
style="height: 75px;"
alt="Profilbild"
:src="getFotoSrc(person.foto)"
/>
@@ -164,14 +164,14 @@ export default {
this.updateStudent(this.modelValue);
},
template: `
<core-form ref="form" class="stv-details-details" @submit.prevent="save">
<core-form ref="form" class="stv-details-details mb-4" @submit.prevent="save">
<div class="position-sticky top-0 z-1">
<button type="submit" class="btn btn-primary position-absolute top-0 end-0" :disabled="!changedLength">{{$p.t('ui', 'speichern')}}</button>
</div>
<fieldset class="overflow-hidden">
<fieldset class="overflow-hidden mb-2">
<legend>Person</legend>
<template v-if="data">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 g-3 mb-3">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 gx-3 gy-1 mb-1">
<form-input
v-if="!config.hiddenFields.includes('person_id')"
container-class="col stv-details-details-person_id"
@@ -211,7 +211,7 @@ export default {
>
</form-input>
</div>
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 g-3 mb-3">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 gx-3 gy-1 mb-1">
<form-input
v-if="!config.hiddenFields.includes('anrede')"
container-class="col stv-details-details-anrede"
@@ -243,7 +243,7 @@ export default {
>
</form-input>
</div>
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 g-3 mb-3">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 gx-3 gy-1 mb-1">
<form-input
v-if="!config.hiddenFields.includes('nachname')"
container-class="col stv-details-details-nachname"
@@ -286,7 +286,7 @@ export default {
</form-input>
</div>
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 g-3 mb-3">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 gx-3 gy-1 mb-1">
<form-input
v-if="!config.hiddenFields.includes('gebdatum')"
container-class="col stv-details-details-gebdatum"
@@ -337,7 +337,7 @@ export default {
<option v-for="nation in lists.nations" :key="nation.nation_code" :value="nation.nation_code" :disabled="nation.sperre">{{nation.kurztext}}</option>
</form-input>
</div>
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 g-3 mb-3">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 gx-3 gy-1 mb-1">
<form-input
v-if="!config.hiddenFields.includes('matr_nr')"
@@ -380,7 +380,7 @@ export default {
<option v-for="(bezeichnung, key) in familienstaende" :key="key" :value="key">{{bezeichnung}}</option>
</form-input>
</div>
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 g-3 mb-3">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 gx-3 gy-1 mb-1">
<form-input
v-if="!config.hiddenFields.includes('foto')"
container-class="col stv-details-details-foto"
@@ -420,16 +420,16 @@ export default {
v-if="!config.hideUDFs"
@load="udfsLoaded"
v-model="data"
class="row-cols-3 g-3 mb-3"
class="row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 gx-3 gy-1 mb-1"
ci-model="person/person"
:pk="{person_id:modelValue.person_id}"
>
</core-udf>
</fieldset>
<fieldset v-if="data?.student_uid" class="overflow-hidden">
<fieldset v-if="data?.student_uid" class="overflow-hidden mb-2">
<legend>{{$p.t('person', 'studentIn')}}</legend>
<template v-if="data">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 g-3 mb-3">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 gx-3 gy-1 mb-1">
<form-input
v-if="!config.hiddenFields.includes('student_uid')"
container-class="col stv-details-details-student_uid"
@@ -471,7 +471,7 @@ export default {
>
</form-input>
</div>
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 g-3 mb-3">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 gx-3 gy-1 mb-1">
<form-input
v-if="!config.hiddenFields.includes('semester')"
container-class="col stv-details-details-semester"
@@ -260,9 +260,9 @@ export default {
<div class="position-sticky top-0 z-1">
<button type="submit" class="btn btn-primary position-absolute top-0 end-0" :disabled="!deltaLength">Speichern</button>
</div>
<fieldset class="overflow-hidden">
<fieldset class="overflow-hidden mb-2">
<legend>{{$p.t('lehre', 'title_zgv')}} {{modelValue.nachname}} {{modelValue.vorname}}</legend>
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 g-3 mb-3">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 gx-3 gy-1 mb-1">
<form-input
v-if="!config.hiddenFields.includes('prestudent_id')"
container-class="col stv-details-prestudent-prestudent_id"
@@ -284,7 +284,7 @@ export default {
>
</form-input>
</div>
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 g-3 mb-3">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 gx-3 gy-1 mb-1">
<form-input
v-if="!config.hiddenFields.includes('zgv_code')"
container-class="col stv-details-prestudent-zgv_code"
@@ -348,7 +348,7 @@ export default {
<option v-for="nation in lists.nations" :key="nation.nation_code" :value="nation.nation_code" :disabled="nation.sperre">{{nation.kurztext}}</option>
</form-input>
</div>
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 g-3 mb-3">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 gx-3 gy-1 mb-1">
<form-input
v-if="!config.hiddenFields.includes('zgvmas_code')"
container-class="col stv-details-prestudent-zgvmas_code"
@@ -413,7 +413,7 @@ export default {
</form-input>
</div>
<!--ZGV Doktor-->
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 g-3 mb-3">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 gx-3 gy-1 mb-1">
<form-input
v-if="!config.hiddenFields.includes('zgvdoktor_code')"
container-class="col stv-details-prestudent-zgvdoktor_code"
@@ -477,11 +477,13 @@ export default {
<option v-for="nation in lists.nations" :key="nation.nation_code" :value="nation.nation_code" :disabled="nation.sperre">{{nation.kurztext}}</option>
</form-input>
</div>
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 g-3 mb-3">
<template class="col pt-4 d-flex align-items-center">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 gx-3 gy-1 mb-1">
<div
class="col pt-4 d-flex align-items-center"
v-if="!config.hiddenFields.includes('zgv_erfuellt')"
>
<form-input
v-if="!config.hiddenFields.includes('zgv_erfuellt')"
container-class="form-check stv-details-prestudent-zgv_erfuellt"
:label="$p.t('infocenter', 'zgvErfuellt')"
type="checkbox"
@@ -489,10 +491,12 @@ export default {
name="zgv_erfuellt"
>
</form-input>
</template>
<template class="col pt-4 d-flex align-items-center">
</div>
<div
class="col pt-4 d-flex align-items-center"
v-if="!config.hiddenFields.includes('zgvmas_erfuellt')"
>
<form-input
v-if="!config.hiddenFields.includes('zgvmas_erfuellt')"
container-class="form-check stv-details-prestudent-zgvmas_erfuellt"
:label="$p.t('lehre', 'zgvMasterErfuellt')"
type="checkbox"
@@ -500,10 +504,12 @@ export default {
name="zgvmas_erfuellt"
>
</form-input>
</template>
<template class="col pt-4 d-flex align-items-center">
</div>
<div
class="col pt-4 d-flex align-items-center"
v-if="!config.hiddenFields.includes('zgvdoktor_erfuellt')"
>
<form-input
v-if="!config.hiddenFields.includes('zgvdoktor_erfuellt')"
container-class="form-check stv-details-prestudent-zgvdoktor_erfuellt"
:label="$p.t('lehre', 'zgvDoktorErfuellt')"
type="checkbox"
@@ -511,12 +517,12 @@ export default {
name="zgvdoktor_erfuellt"
>
</form-input>
</template>
</div>
</div>
</fieldset>
<fieldset class="overflow-hidden">
<fieldset class="overflow-hidden mb-2">
<legend>PrestudentIn</legend>
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-3 g-3 mb-3">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-3 gx-3 gy-1 mb-1">
<form-input
v-if="!config.hiddenFields.includes('aufmerksamdurch_kurzbz')"
container-class="col stv-details-prestudent-aufmerksamdurch_kurzbz"
@@ -551,7 +557,7 @@ export default {
</form-input>
</div>
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-3 g-3 mb-3">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-3 gx-3 gy-1 mb-1">
<form-input
v-if="!config.hiddenFields.includes('aufnahmeschluessel')"
container-class="col stv-details-prestudent-aufnahmeschluessel"
@@ -563,9 +569,11 @@ export default {
>
</form-input>
<template class="col pt-4 d-flex align-items-center">
<div
v-if="!config.hiddenFields.includes('facheinschlaegigBerufstaetig')"
class="col pt-4 d-flex align-items-center"
>
<form-input
v-if="!config.hiddenFields.includes('facheinschlaegigBerufstaetig')"
container-class="form-check stv-details-prestudent-facheinschlaegigBerufstaetig"
:label="$p.t('person', 'facheinschlaegigBerufstaetig')"
type="checkbox"
@@ -573,7 +581,7 @@ export default {
name="facheinschlberuf"
>
</form-input>
</template>
</div>
<form-input
v-if="!config.hiddenFields.includes('standort_code')"
@@ -587,7 +595,7 @@ export default {
</form-input>
</div>
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-3 g-3 mb-3">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-3 gx-3 gy-1 mb-1">
<form-input
v-if="!config.hiddenFields.includes('studiengang_kz')"
container-class="col stv-details-prestudent-studiengang_kz"
@@ -611,7 +619,7 @@ export default {
</form-input>
</div>
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-3 g-3 mb-3">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-3 gx-3 gy-1 mb-1">
<form-input
v-if="!config.hiddenFields.includes('anmerkung')"
container-class="col stv-details-prestudent-anmerkung"
@@ -623,9 +631,11 @@ export default {
</form-input>
<div class="col">
<div class="row g-3 align-items-center mb-3">
<template class="col-12 col-md-6 pt-4 d-flex align-items-center">
<div
class="col-12 col-md-6 pt-4 d-flex align-items-center"
v-if="!config.hiddenFields.includes('bismelden')"
>
<form-input
v-if="!config.hiddenFields.includes('bismelden')"
container-class="col form-check stv-details-prestudent-bismelden"
:label="$p.t('person', 'bismelden')"
type="checkbox"
@@ -634,10 +644,12 @@ export default {
:disabled="!hasBismeldenPermission"
>
</form-input>
</template>
<template class="col-12 col-md-6 pt-4 d-flex align-items-center">
</div>
<div
class="col-12 col-md-6 pt-4 d-flex align-items-center"
v-if="!config.hiddenFields.includes('dual')"
>
<form-input
v-if="!config.hiddenFields.includes('dual')"
container-class="col form-check stv-details-prestudent-dual"
:label="$p.t('lehre', 'dual')"
type="checkbox"
@@ -645,7 +657,7 @@ export default {
name="dual"
>
</form-input>
</template>
</div>
</div>
</div>
@@ -677,7 +689,7 @@ export default {
v-if="!config.hideUDFs"
@load="udfsLoaded"
v-model="data"
class="row-cols-3 g-3 mb-3"
class="row-cols-3 gx-3 gy-1 mb-1"
ci-model="crm/prestudent"
:pk="{prestudent_id:modelValue.prestudent_id}"
>
@@ -73,7 +73,7 @@ export default{
},
},
template: `
<div class="stv-details-prestudent-history h-100 pt-3">
<div class="stv-details-prestudent-history h-100">
<core-filter-cmpt
ref="table"
:tabulator-options="tabulatorOptions"
@@ -501,8 +501,8 @@ export default {
@table-built="translateTabulator"
>
<template #filter>
<div class="card">
<div class="card-body">
<div class="card mt-2">
<div class="card-body p-2">
<list-filter @change="updateFilter" />
</div>
</div>
@@ -95,7 +95,7 @@ export default {
:key="i"
v-model="filters[i]"
:filter-config="filterConfig"
class="mt-3"
class="mt-2"
@remove="remove(i)"
/>
</div>`
+2 -1
View File
@@ -219,13 +219,14 @@ export default {
:scrollable="true"
:lazy="true"
:activeIndex="calcActiveIndex"
:pt="{navContainer:{style: 'flex: 0 0 auto;'}, panelContainer:{class: 'overflow-y-scroll', style: 'flex: 1 1 auto;'}}"
:pt="{navContainer:{style: 'flex: 0 0 auto;'}, panelContainer:{class: 'overflow-y-scroll p-2', style: 'flex: 1 1 auto;'}}"
@tab-click="handleTabClick"
>
<tabpanel
v-for="tab in tabs"
:key="tab.key"
:header="tab.title + ((tab.value.showSuffix && tab.value.suffix !== '') ? ' ' + tab.value.suffix : '')"
:pt="{headerAction:{class: 'p-2'}}"
>
<keep-alive>
<component