adds custom floating label css construct to the rest of the profil views

This commit is contained in:
Simon Gschnell
2023-12-21 11:46:42 +01:00
parent fed4f7f929
commit d6ef9c4ec4
3 changed files with 201 additions and 144 deletions
@@ -158,7 +158,7 @@ export default {
<div class="row align-items-center">
<div class="gy-3 row align-items-center">
@@ -180,20 +180,31 @@ export default {
<!-- COLUMNS WITH MULTIPLE ROWS NEXT TO PROFIL PICTURE -->
<div class="col-12 col-sm-6">
<div class="row">
<div class="gy-4 row">
<div class="col-12">
<div class=" form-floating mb-2">
<input readonly class="form-control form-control-plaintext border-bottom" id="floatingVorname" :value="data.vorname">
<label for="floatingVorname">Vorname</label>
</div>
<div class="form-underline ">
<div class="form-underline-titel">Vorname</div>
<span class="form-underline-content">{{data.vorname}} </span>
</div>
</div>
<div class="col-12">
<div class=" form-floating mb-2">
<input readonly class="form-control form-control-plaintext border-bottom" id="floatingNachname" :value="data.nachname">
<label for="floatingNachname">Nachname</label>
</div>
<div class="form-underline ">
<div class="form-underline-titel">Nachname</div>
<span class="form-underline-content">{{data.nachname}} </span>
</div>
</div>
</div>
@@ -208,11 +219,16 @@ export default {
<div v-for="(wert,bez) in personData" class="col-md-6 col-sm-12 ">
<div class=" form-floating mb-2">
<input readonly class="form-control form-control-plaintext border-bottom" :id="'floating'+bez" :value="wert?wert:'-'">
<label :for="'floating'+bez">{{bez}}</label>
<div class="form-underline ">
<div class="form-underline-titel">{{bez}}</div>
<span class="form-underline-content">{{wert?wert:'-'}} </span>
</div>
</div>
@@ -260,8 +276,8 @@ export default {
<!-- HIER SIND DIE EMAILS -->
<div v-for="email in wert" v-if="typeof wert === 'object' && bezeichnung == 'emails'" class="row justify-content-center ">
<div class="col-12 ">
<div v-if="typeof wert === 'object' && bezeichnung == 'emails'" class="gy-3 row justify-content-center ">
<div v-for="email in wert" class="col-12 ">
<div class="row align-items-center">
<div class="col-1 text-center">
@@ -270,14 +286,15 @@ export default {
</div>
<div class="col">
<div class=" form-floating mb-2">
<a :href="'mailto:'+email.email" class="form-control form-control-plaintext border-bottom" :id="'floating'+email.type">
{{email.email}}
</a>
<div class="floating-title">{{email.type }}</div>
<div class="form-underline ">
<div class="form-underline-titel">{{email.type }}</div>
<a :href="'mailto:'+email.emails" class="form-underline-content">{{email.email}} </a>
</div>
</div>
</div>
</div>
</div>
@@ -299,7 +316,7 @@ export default {
</div></div>
<!-- SECOND ROW OF SECOND COLUMN IN MAIN CONTENT -->
<div class="row mb-4">
<div class=" row mb-4">
<div class=" col-lg-12">
@@ -310,15 +327,16 @@ export default {
Studenten Information
</div>
<div class="card-body">
<div class="row">
<div class="gy-3 row">
<div v-for="(wert,bez) in specialData" class="col-md-6 col-sm-12 ">
<div class="form-underline ">
<div class="form-underline-titel">{{bez}}</div>
<span class="form-underline-content">{{wert?wert:'-'}} </span>
</div>
<div class=" form-floating mb-2">
<input readonly class="form-control form-control-plaintext border-bottom" :id="'floating'+bez" :value="wert?wert:'-'">
<label :for="'floating'+bez">{{bez}}</label>
</div>
</div>
</div>