mirror of
https://github.com/FH-Complete/FHC-Core.git
synced 2026-07-16 14:32:18 +00:00
replaced form-control with custom css construct
This commit is contained in:
Simon Gschnell
@@ -9,18 +9,6 @@ $includesArray = array(
|
||||
|
||||
$this->load->view('templates/CISHTML-Header', $includesArray);
|
||||
?>
|
||||
<!--
|
||||
|
||||
<student-profil></student-profil>
|
||||
<component :is="StudentProfil"></component>
|
||||
<h2>Profil</h2>
|
||||
|
||||
<hr>
|
||||
<component :is="<?php //echo "StudentProfil"; ?>" ></component>
|
||||
we can pass information from the php view file to the public js file throughz interpolating data from php into vue props
|
||||
<Profil <?php //echo "uid=$uid" ?> view=<?php //echo $view? boolval(1): boolval(0); ?>></Profil>
|
||||
|
||||
-->
|
||||
|
||||
<div id="content" >
|
||||
|
||||
|
||||
@@ -46,6 +46,65 @@
|
||||
box-shadow:none;
|
||||
}
|
||||
|
||||
.fhc-form .form-floating > .form-control:focus ~ .floating-title, .form-floating > .form-control:not(:placeholder-shown) ~ .floating-title, .form-floating > .form-select ~ .floating-title{
|
||||
opacity: .65;
|
||||
transform: scale(.85) translateY(-.5rem) translateX(.15rem);
|
||||
}
|
||||
|
||||
.fhc-form .form-floating > .floating-title{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
padding: 1rem .75rem;
|
||||
pointer-events: none;
|
||||
border: 1px solid transparent;
|
||||
transform-origin: 0 0;
|
||||
transition: opacity .1s ease-in-out,transform .1s ease-in-out;
|
||||
}
|
||||
|
||||
.floating-title{
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.form-floating>.form-control, .form-floating>.form-select{
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
/* FORM UNDERLINE
|
||||
*/
|
||||
.form-underline{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-content: space-between;
|
||||
|
||||
}
|
||||
.form-underline .form-underline-content{
|
||||
border-width: 1px;
|
||||
border-color: transparent transparent #dee2e6 transparent;
|
||||
border-style: solid;
|
||||
padding-bottom: 0.25rem;
|
||||
padding-left: 0.5rem;
|
||||
|
||||
/*optional not wrapping text that is horizontally scrollable and does not display a scrollbar */
|
||||
white-space: nowrap;
|
||||
overflow: auto;
|
||||
scrollbar-width: none;
|
||||
|
||||
}
|
||||
|
||||
.form-underline .form-underline-content::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.form-underline .form-underline-titel{
|
||||
opacity: 0.65;
|
||||
font-size: .85rem;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
/* dl {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
@@ -38,7 +38,6 @@ Vue.$collapseFormatter = function(data){
|
||||
const app = Vue.createApp({
|
||||
|
||||
components: {
|
||||
Base,
|
||||
StudentProfil,
|
||||
MitarbeiterProfil,
|
||||
ViewStudentProfil,
|
||||
@@ -68,18 +67,20 @@ const app = Vue.createApp({
|
||||
}
|
||||
this.view = res.data?.view;
|
||||
this.data = res.data?.data;
|
||||
//* only for testing purposes and needs to be deleted after
|
||||
this.data.base = "Base";
|
||||
|
||||
});
|
||||
},
|
||||
template:`
|
||||
<div>
|
||||
|
||||
<div v-if="notFoundUID">
|
||||
<div v-if="notFoundUID">
|
||||
|
||||
<h3>Es wurden keine oder mehrere Profile für {{this.notFoundUID}} gefunden</h3>
|
||||
|
||||
</div>
|
||||
|
||||
<component v-else :is="view" :data="data" ></component>
|
||||
|
||||
<h3>Es wurden keine oder mehrere Profile für {{this.notFoundUID}} gefunden</h3>
|
||||
</div>
|
||||
<component v-else :is="view" :data="data" ></component>
|
||||
</div>`
|
||||
|
||||
|
||||
|
||||
@@ -216,7 +216,7 @@ export default {
|
||||
Geburtsdatum: this.data.gebdatum,
|
||||
Geburtsort: this.data.gebort,
|
||||
Kurzzeichen: this.data.kurzbz,
|
||||
Telefon: this.data.telefonklappe + (this.data.standort_telefon?this.data.standort_telefon:""),
|
||||
Telefon: (this.data.standort_telefon?this.data.standort_telefon:"") + " " + this.data.telefonklappe,
|
||||
Büro: this.data.ort_kurzbz,
|
||||
};
|
||||
},
|
||||
@@ -348,7 +348,7 @@ export default {
|
||||
|
||||
|
||||
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="gy-3 row justify-content-center align-items-center">
|
||||
|
||||
|
||||
|
||||
@@ -377,20 +377,25 @@ export default {
|
||||
|
||||
<!-- COLUMNS WITH MULTIPLE ROWS NEXT TO PROFIL PICTURE -->
|
||||
<div class="col-12 col-sm-6">
|
||||
<div class="row">
|
||||
<div class="row gy-4">
|
||||
<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 class="form-underline ">
|
||||
<div class="form-underline-titel">Nachname</div>
|
||||
<span class="form-underline-content">{{data.nachname}} </span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -405,11 +410,15 @@ 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>
|
||||
|
||||
|
||||
@@ -432,21 +441,25 @@ export default {
|
||||
Mitarbeiter 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-floating mb-2">
|
||||
<!-- print Telefon link -->
|
||||
|
||||
|
||||
|
||||
<a v-if="bez=='Telefon'" :href="get_mitarbeiter_standort_telefon" readonly class="form-control form-control-plaintext border-bottom" :id="'floating'+bez">
|
||||
<input :role="get_mitarbeiter_standort_telefon?'button':''" readonly :value="wert?wert:'-'" class="w-100" style="border:none; outline:none;" />
|
||||
</a>
|
||||
<div class="form-underline">
|
||||
<div class="form-underline-titel">{{bez }}</div>
|
||||
|
||||
<!-- otherwise print input field -->
|
||||
<input v-else readonly class="form-control form-control-plaintext border-bottom" :id="'floating'+bez" :value="wert?wert:'-'">
|
||||
<label :for="'floating'+bez">{{bez}}</label>
|
||||
</div>
|
||||
<!-- print Telefon link -->
|
||||
<a :href="get_mitarbeiter_standort_telefon" v-if="bez=='Telefon'" :href="get_mitarbeiter_standort_telefon" class="form-underline-content">{{wert?wert:'-'}}</a>
|
||||
|
||||
<!-- else print information -->
|
||||
<span v-else class="form-underline-content">{{wert?wert:'-'}}</span>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -489,29 +502,36 @@ export default {
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div v-for="(wert,bezeichnung) in personKontakt">
|
||||
|
||||
|
||||
|
||||
<!-- 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">
|
||||
|
||||
<i class="fa-solid fa-envelope" style="color:rgb(0, 100, 156)"></i>
|
||||
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class=" form-floating mb-2">
|
||||
<a :href="'mailto:'+email.email" readonly class="form-control form-control-plaintext border-bottom" :id="'floating'+email.type">
|
||||
<input role="button" readonly :value="email.email" class="w-100" style="border:none; outline:none;" />
|
||||
</a>
|
||||
<label :for="'floating'+email.type">{{email.type }}</label>
|
||||
|
||||
|
||||
<div class="col-11">
|
||||
|
||||
<div class="form-underline">
|
||||
<div class="form-underline-titel">{{email.type}}</div>
|
||||
<a :href="'mailto:'+email.email" class="form-underline-content">{{email.email}} </a>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -541,49 +561,43 @@ export default {
|
||||
</div>
|
||||
<div class="card-body ">
|
||||
|
||||
<div v-for="element in privateKontakte" class="align-items-center row justify-content-center">
|
||||
<div class="gy-3 row ">
|
||||
<div v-for="element in privateKontakte" class="col-12">
|
||||
<div class="gy-3 row align-items-center justify-content-center">
|
||||
<div class="col-1 text-center" >
|
||||
|
||||
<i class="fa-solid " :class="{...(element.kontakt.includes('@')?{'fa-envelope':true}:{'fa-phone':true})}" style="color:rgb(0, 100, 156)"></i>
|
||||
</div>
|
||||
<div :class="{...(element.anmerkung? {'col-11':true, 'col-md-5':true, 'col-xl-11':true, 'col-xxl-5':true} : {'col-9':true, 'col-xl-9':true})}">
|
||||
<div :class="{...(element.anmerkung? {'col-11':true, 'col-md-6':true, 'col-xl-11':true, 'col-xxl-6':true} : {'col-10':true, 'col-xl-9':true, 'col-xxl-10':true})}">
|
||||
|
||||
<!-- rendering KONTAKT emails -->
|
||||
<div v-if="element.kontakt.includes('@')" class=" form-floating mb-2">
|
||||
|
||||
|
||||
|
||||
<a :href="'mailto:'+element.kontakt" readonly class="form-control form-control-plaintext border-bottom" :id="'floating'+element.kontakttyp">
|
||||
<input role="button" readonly :value="element.kontakt" class="w-100" style="border:none; outline:none;" />
|
||||
</a>
|
||||
<label :for="'floating'+element.kontakttyp">{{element.kontakttyp}}</label>
|
||||
|
||||
|
||||
</div>
|
||||
<!-- rendering KONTAKT phones -->
|
||||
<div v-else class=" form-floating mb-2">
|
||||
|
||||
|
||||
<a :href="'tel:'+element.kontakt" readonly class="form-control form-control-plaintext border-bottom" :id="'floating'+element.kontakttyp">
|
||||
<input role="button" readonly :value="element.kontakt" class="w-100" style="border:none; outline:none;" />
|
||||
</a>
|
||||
<label :for="'floating'+element.kontakttyp">{{element.kontakttyp}}</label>
|
||||
|
||||
|
||||
<div class="form-underline ">
|
||||
<div class="form-underline-titel">{{element.kontakttyp}}</div>
|
||||
<a :href="'mailto:'+element.kontakt" v-if="element.kontakt.includes('@')" class="form-underline-content">{{element.kontakt}} </a>
|
||||
<a v-else :href="'tel:'+element.kontakt" class="form-underline-content">{{element.kontakt}} </a>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div v-if="element?.anmerkung" class="offset-1 offset-md-0 col-9 col-md-4 offset-xl-1 offset-xxl-0 col-xl-9 col-xxl-4 order-2 order-md-1 order-xl-1 order-sm-1 order-xxl-1 ">
|
||||
<div class=" form-floating mb-2">
|
||||
<input readonly class="form-control form-control-plaintext border-bottom" id="floatingAnmerkung" :value="element.anmerkung">
|
||||
<label for="floatingAnmerkung">Anmerkung</label>
|
||||
</div>
|
||||
<div v-if="element?.anmerkung" class="offset-1 offset-md-0 offset-xl-1 offset-xxl-0 order-2 order-sm-1 col-10 col-md-4 col-xl-9 col-xxl-4 ">
|
||||
|
||||
<div class="form-underline ">
|
||||
<div class="form-underline-titel">Anmerkung</div>
|
||||
<span class="form-underline-content">{{element.anmerkung}} </span>
|
||||
</div>
|
||||
<div class="col-2 order-2 order-sm-2 order-md-2 order-lg-1 col-xl-2 col-xxl-2 allign-middle">
|
||||
|
||||
|
||||
</div>
|
||||
<div class="col-1 col-sm-1 order-2 order-lg-1 col-xl-2 col-xxl-1 allign-middle">
|
||||
<i v-if="element.zustellung" class="fa-solid fa-check"></i>
|
||||
<i v-else="element.zustellung" class="fa-solid fa-xmark"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -597,7 +611,10 @@ export default {
|
||||
<div class="card-header">Private Adressen</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div v-for="element in privateAdressen" class="row justify-content-center align-items-center">
|
||||
<div class="gy-3 row ">
|
||||
<div v-for="element in privateAdressen" class="col-12">
|
||||
<div class="gy-3 row justify-content-center align-items-center">
|
||||
|
||||
<!-- column 1 in the address row -->
|
||||
|
||||
<div class="col-1 text-center">
|
||||
@@ -605,35 +622,43 @@ export default {
|
||||
<i class="fa fa-location-dot fa-lg" style="color:#00649C "></i>
|
||||
|
||||
</div>
|
||||
<div class="col ">
|
||||
<div class=" form-floating mb-2">
|
||||
<input readonly class="form-control form-control-plaintext border-bottom" id="floatingStrasse" :value="element.strasse">
|
||||
<label for="floatingStrasse">Strasse</label>
|
||||
</div>
|
||||
<div class="col-11 col-sm-8 col-xl-11 col-xxl-8 order-1">
|
||||
|
||||
<div class="form-underline ">
|
||||
<div class="form-underline-titel">Strasse</div>
|
||||
<span class="form-underline-content">{{element.strasse}} </span>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="w-100 "></div>
|
||||
|
||||
<!-- column 2 in the address row -->
|
||||
<div class="col-11 offset-1 offset-md-0 offset-xl-1 col-xl-6 order-xl-1 col-md-3 col-sm-6 col-xs-6 order-sm-1">
|
||||
<div class=" form-floating mb-2">
|
||||
<input readonly class="form-control form-control-plaintext border-bottom" id="floatingTyp" :value="element.adr_typ">
|
||||
<label for="floatingTyp">Typ</label>
|
||||
<div class="offset-1 offset-sm-0 offset-xl-1 offset-xxl-0 order-2 order-sm-4 order-xl-2 order-xxl-4 col-11 col-sm-5 col-xl-11 col-xxl-5 ">
|
||||
|
||||
|
||||
<div class="form-underline ">
|
||||
<div class="form-underline-titel">Typ</div>
|
||||
<span class="form-underline-content">{{element.adr_typ}} </span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="offset-1 order-3 order-sm-3 col-11 col-sm-6 col-xl-7 col-xxl-6 ">
|
||||
|
||||
<div class="form-underline ">
|
||||
<div class="form-underline-titel">Ort</div>
|
||||
<span class="form-underline-content">{{element.ort}} </span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-11 offset-1 col-xl-11 col-md-5 col-sm-11 col-xs-11 ">
|
||||
<div class=" form-floating mb-2">
|
||||
<input readonly class="form-control form-control-plaintext border-bottom" id="floatingOrt" :value="element.ort">
|
||||
<label for="floatingOrt">Ort</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-11 offset-1 offset-sm-0 offset-md-0 col-xl-5 order-xl-2 col-md-3 col-sm-5 col-xs-5 order-sm-2">
|
||||
<div class=" form-floating mb-2">
|
||||
<input readonly class="form-control form-control-plaintext border-bottom" id="floatingPLZ" :value="element.plz">
|
||||
<label for="floatingPLZ">PLZ</label>
|
||||
<div class="offset-1 offset-sm-0 order-4 order-sm-2 order-xl-4 order-xxl-2 col-11 col-sm-3 col-xl-4 col-xxl-3 ">
|
||||
<div class="form-underline ">
|
||||
<div class="form-underline-titel">PLZ</div>
|
||||
<span class="form-underline-content">{{element.plz}} </span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -129,7 +129,7 @@ export default {
|
||||
|
||||
get_mitarbeiter_standort_telefon(){
|
||||
if(this.data.standort_telefon){
|
||||
return "tel:"+ this.data.telefonklappe + this.data.standort_telefon;
|
||||
return "tel:"+ this.data.telefonklappe + this.data.standort_telefon ;
|
||||
}else{
|
||||
return null;
|
||||
}
|
||||
@@ -167,7 +167,7 @@ export default {
|
||||
return {
|
||||
|
||||
Kurzzeichen: this.data.kurzbz,
|
||||
Telefon: this.data.telefonklappe + (this.data.standort_telefon?this.data.standort_telefon:""),
|
||||
Telefon: (this.data.standort_telefon?this.data.standort_telefon:"") + " " + this.data.telefonklappe ,
|
||||
Büro: this.data.ort_kurzbz,
|
||||
};
|
||||
},
|
||||
@@ -333,44 +333,7 @@ export default {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4">
|
||||
|
||||
|
||||
<div class=" col-lg-12">
|
||||
|
||||
<div class="card">
|
||||
|
||||
<div class="card-header">
|
||||
Mitarbeiter Information
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div v-for="(wert,bez) in specialData" class="col-md-6 col-sm-12 ">
|
||||
|
||||
|
||||
<div class=" form-floating mb-2">
|
||||
<!-- print Telefon link -->
|
||||
<a v-if="bez=='Telefon'" :href="get_mitarbeiter_standort_telefon" readonly class="form-control form-control-plaintext border-bottom" :id="'floating'+bez">
|
||||
<input :role="get_mitarbeiter_standort_telefon?'button':''" readonly :value="wert?wert:'-'" class="w-100" style="border:none; outline:none;" />
|
||||
</a>
|
||||
<!-- otherwise print input field -->
|
||||
<input v-else readonly class="form-control form-control-plaintext border-bottom" :id="'floating'+bez" :value="wert?wert:'-'">
|
||||
<label :for="'floating'+bez">{{bez}}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- END OF THE FIRST KAESTCHEN -->
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- START OF SECOND PROFIL INFORMATION COLUMN -->
|
||||
@@ -418,10 +381,11 @@ export default {
|
||||
<div class="col">
|
||||
<div class=" form-floating mb-2">
|
||||
|
||||
<a :href="'mailto:'+email.email" readonly class="form-control form-control-plaintext border-bottom" :id="'floating'+email.type">
|
||||
<input role="button" readonly :value="email.email" class="w-100" style="border:none; outline:none;" />
|
||||
<a :href="'mailto:'+email.email" class="form-control form-control-plaintext border-bottom" :id="'floating'+email.type">
|
||||
{{email.email}}
|
||||
</a>
|
||||
<label :for="'floating'+email.type">{{email.type }}</label>
|
||||
<div class="floating-title">{{email.type }}</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -444,6 +408,50 @@ export default {
|
||||
</div></div>
|
||||
|
||||
|
||||
<!-- SECOND ROW OF SECOND COLUMN IN MAIN CONTENT -->
|
||||
<div class="row mb-4">
|
||||
|
||||
|
||||
<div class=" col-lg-12">
|
||||
|
||||
<div class="card">
|
||||
|
||||
<div class="card-header">
|
||||
Mitarbeiter Information
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div v-for="(wert,bez) in specialData" class="col-md-6 col-sm-12 ">
|
||||
|
||||
|
||||
<div class=" form-floating mb-2">
|
||||
<!-- print Telefon link -->
|
||||
<template v-if="bez=='Telefon'">
|
||||
<a :href="get_mitarbeiter_standort_telefon" class="form-control form-control-plaintext border-bottom" :id="'floating'+bez">
|
||||
{{wert?wert:'-'}}
|
||||
</a>
|
||||
<div class="floating-title">{{bez }}</div>
|
||||
</template>
|
||||
|
||||
<!-- otherwise print input field -->
|
||||
<template v-else>
|
||||
<input readonly class="form-control form-control-plaintext border-bottom" :id="'floating'+bez" :value="wert?wert:'-'">
|
||||
<label :for="'floating'+bez">{{bez }}</label>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- END OF SECOND ROW OF SECOND COLUMN IN MAIN CONTENT -->
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- END OF THE SECOND INFORMATION COLUMN -->
|
||||
|
||||
@@ -155,7 +155,7 @@ export default {
|
||||
Studiengang: this.data.studiengang,
|
||||
Semester: this.data.semester,
|
||||
Verband: this.data.verband,
|
||||
Gruppe: this.data.gruppe,
|
||||
Gruppe: this.data.gruppe.trim(),
|
||||
};
|
||||
},
|
||||
|
||||
@@ -419,19 +419,24 @@ export default {
|
||||
<div class="col-12 ">
|
||||
|
||||
<div class="row align-items-center">
|
||||
<!--
|
||||
<div class="col-1 text-center">
|
||||
|
||||
<i class="fa-solid fa-envelope" style="color:rgb(0, 100, 156)"></i>
|
||||
|
||||
</div>
|
||||
-->
|
||||
<div class="col">
|
||||
<div class=" form-floating mb-2">
|
||||
|
||||
<a :href="'mailto:'+email.email" readonly class="form-control form-control-plaintext border-bottom" :id="'floating'+email.type">
|
||||
<input role="button" readonly :value="email.email" class="w-100" style="border:none; outline:none;" />
|
||||
{{email.email}}
|
||||
</a>
|
||||
<label :for="'floating'+email.type">{{email.type }}</label>
|
||||
<div class="floating-title"> <i class="fa-solid fa-envelope" style="color:rgb(0, 100, 156)"></i> {{email.type }}</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -464,27 +469,28 @@ export default {
|
||||
<div v-for="element in privateKontakte" class="align-items-center row justify-content-center">
|
||||
<div class="col-1 text-center" >
|
||||
|
||||
<i class="fa-solid " :class="{...(element.kontakt.includes('@')?{'fa-envelope':true}:{'fa-phone':true})}" style="color:rgb(0, 100, 156)"></i>
|
||||
<!--<i class="fa-solid " :class="{...(element.kontakt.includes('@')?{'fa-envelope':true}:{'fa-phone':true})}" style="color:rgb(0, 100, 156)"></i>-->
|
||||
</div>
|
||||
<div :class="{...(element.anmerkung? {'col-11':true, 'col-md-5':true, 'col-xl-11':true, 'col-xxl-5':true} : {'col-9':true, 'col-xl-9':true})}">
|
||||
|
||||
<!-- rendering KONTAKT emails -->
|
||||
<div v-if="element.kontakt.includes('@')" class=" form-floating mb-2">
|
||||
|
||||
<a :href="'mailto:'+element.kontakt" readonly class="form-control form-control-plaintext border-bottom" :id="'floating'+element.kontakttyp">
|
||||
<input role="button" readonly :value="element.kontakt" class="w-100" style="border:none; outline:none;" />
|
||||
<a :href="'mailto:'+element.kontakt" class="form-control form-control-plaintext border-bottom" :id="'floating'+element.kontakttyp">
|
||||
{{element.kontakt}}
|
||||
</a>
|
||||
<label :for="'floating'+element.kontakttyp">{{element.kontakttyp}}</label>
|
||||
<div class="floating-title"><i class="fa-solid fa-envelope" style="color:rgb(0, 100, 156)"></i> {{element.kontakttyp }}</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- rendering KONTAKT phones -->
|
||||
<div v-else class=" form-floating mb-2">
|
||||
|
||||
<a :href="'tel:'+element.kontakt" readonly class="form-control form-control-plaintext border-bottom" :id="'floating'+element.kontakttyp">
|
||||
<input role="button" readonly :value="element.kontakt" class="w-100" style="border:none; outline:none;" />
|
||||
<a :href="'tel:'+element.kontakt" class="form-control form-control-plaintext border-bottom" :id="'floating'+element.kontakttyp">
|
||||
{{element.kontakt}}
|
||||
</a>
|
||||
<label :for="'floating'+element.kontakttyp">{{element.kontakttyp}}</label>
|
||||
<div class="floating-title"><i class="fa-solid fa-phone" style="color:rgb(0, 100, 156)"></i> {{element.kontakttyp }}</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@@ -61,7 +61,7 @@ export default {
|
||||
Studiengang: this.data.studiengang,
|
||||
Semester: this.data.semester,
|
||||
Verband: this.data.verband,
|
||||
Gruppe: this.data.gruppe,
|
||||
Gruppe: this.data.gruppe.trim(),
|
||||
};
|
||||
},
|
||||
|
||||
@@ -224,40 +224,7 @@ export default {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4">
|
||||
|
||||
|
||||
<div class=" col-lg-12">
|
||||
|
||||
<div class="card">
|
||||
|
||||
<div class="card-header">
|
||||
Studenten Information
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div v-for="(wert,bez) in specialData" 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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- END OF THE FIRST KAESTCHEN -->
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- START OF SECOND PROFIL INFORMATION COLUMN -->
|
||||
@@ -305,10 +272,10 @@ export default {
|
||||
<div class="col">
|
||||
<div class=" form-floating mb-2">
|
||||
|
||||
<a :href="'mailto:'+email.email" readonly class="form-control form-control-plaintext border-bottom" :id="'floating'+email.type">
|
||||
<input role="button" readonly :value="email.email" class="w-100" style="border:none; outline:none;" />
|
||||
<a :href="'mailto:'+email.email" class="form-control form-control-plaintext border-bottom" :id="'floating'+email.type">
|
||||
{{email.email}}
|
||||
</a>
|
||||
<label :for="'floating'+email.type">{{email.type }}</label>
|
||||
<div class="floating-title">{{email.type }}</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -331,8 +298,41 @@ export default {
|
||||
</div>
|
||||
</div></div>
|
||||
|
||||
|
||||
<!-- SECOND ROW OF SECOND COLUMN IN MAIN CONTENT -->
|
||||
<div class="row mb-4">
|
||||
|
||||
|
||||
<div class=" col-lg-12">
|
||||
|
||||
<div class="card">
|
||||
|
||||
<div class="card-header">
|
||||
Studenten Information
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div v-for="(wert,bez) in specialData" 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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!-- END OF SECOND ROW OF SECOND COLUMN IN MAIN CONTENT -->
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user