From fed4f7f9293853a886704c3e62d8bbdb458b12fe Mon Sep 17 00:00:00 2001 From: Simon Gschnell Date: Thu, 21 Dec 2023 08:53:56 +0100 Subject: [PATCH] replaced form-control with custom css construct --- application/views/Cis/Profil.php | 12 -- public/css/components/Profil.css | 59 ++++++ public/js/apps/Cis/Profil.js | 15 +- .../Cis/Profil/MitarbeiterProfil.js | 189 ++++++++++-------- .../Cis/Profil/MitarbeiterViewProfil.js | 94 +++++---- .../js/components/Cis/Profil/StudentProfil.js | 26 ++- .../Cis/Profil/StudentViewProfil.js | 78 ++++---- 7 files changed, 280 insertions(+), 193 deletions(-) diff --git a/application/views/Cis/Profil.php b/application/views/Cis/Profil.php index 059a4edc1..9e09bea62 100644 --- a/application/views/Cis/Profil.php +++ b/application/views/Cis/Profil.php @@ -9,18 +9,6 @@ $includesArray = array( $this->load->view('templates/CISHTML-Header', $includesArray); ?> -
diff --git a/public/css/components/Profil.css b/public/css/components/Profil.css index 42defa8e7..5334dfa48 100644 --- a/public/css/components/Profil.css +++ b/public/css/components/Profil.css @@ -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; diff --git a/public/js/apps/Cis/Profil.js b/public/js/apps/Cis/Profil.js index 5eac4db58..f1a1206a5 100644 --- a/public/js/apps/Cis/Profil.js +++ b/public/js/apps/Cis/Profil.js @@ -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:`
-
+
+ +

Es wurden keine oder mehrere Profile für {{this.notFoundUID}} gefunden

+ +
+ + -

Es wurden keine oder mehrere Profile für {{this.notFoundUID}} gefunden

-
-
` diff --git a/public/js/components/Cis/Profil/MitarbeiterProfil.js b/public/js/components/Cis/Profil/MitarbeiterProfil.js index b827358b8..c466c28f0 100644 --- a/public/js/components/Cis/Profil/MitarbeiterProfil.js +++ b/public/js/components/Cis/Profil/MitarbeiterProfil.js @@ -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 { -
+
@@ -377,20 +377,25 @@ export default {
-
+
-
+ - - -
+
+
Vorname
+ {{data.vorname}} +
+ + +
-
- - - + +
+
Nachname
+ {{data.nachname}}
+
@@ -405,11 +410,15 @@ export default {
-
- - - + + +
+
{{bez}}
+ {{wert?wert:'-'}}
+ + +
@@ -432,21 +441,25 @@ export default { Mitarbeiter Information
-
+
-
- + + - - - +
+
{{bez }}
- - - -
+ + {{wert?wert:'-'}} + + + {{wert?wert:'-'}} +
+ + +
@@ -489,29 +502,36 @@ export default { + +
+ -
-
+
+
+
-
-
- - - - + + +
+ +
+
{{email.type}}
+ {{email.email}}
+ +
@@ -541,49 +561,43 @@ export default {
-
+
+
+
-
+
-
+ - - - - - - - -
- -
- - - - - - - - +
+
{{element.kontakttyp}}
+ {{element.kontakt}} + {{element.kontakt}}
+ +
-
-
- - -
+
+ +
+
Anmerkung
+ {{element.anmerkung}}
-
+ + +
+
- +
+
@@ -597,7 +611,10 @@ export default {
Private Adressen
-
+
+
+
+
@@ -605,35 +622,43 @@ export default {
-
-
- - -
+
+ +
+
Strasse
+ {{element.strasse}} +
+ +
-
-
-
- - +
+ + +
+
Typ
+ {{element.adr_typ}} +
+ +
+
+ +
+
Ort
+ {{element.ort}}
-
-
- - -
-
-
-
- - +
+
+
PLZ
+ {{element.plz}}
+
+
diff --git a/public/js/components/Cis/Profil/MitarbeiterViewProfil.js b/public/js/components/Cis/Profil/MitarbeiterViewProfil.js index f7efd5d19..b20818517 100644 --- a/public/js/components/Cis/Profil/MitarbeiterViewProfil.js +++ b/public/js/components/Cis/Profil/MitarbeiterViewProfil.js @@ -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 {
-
- - -
- -
- -
- Mitarbeiter Information -
-
-
-
- - -
- - - - - - - -
-
-
- -
- -
- -
- - - - - -
+ @@ -418,10 +381,11 @@ export default {
- - + + {{email.email}} - +
{{email.type }}
+
@@ -444,6 +408,50 @@ export default {
+ +
+ + +
+ +
+ +
+ Mitarbeiter Information +
+
+
+
+ + +
+ + + + + +
+
+
+ +
+ +
+ +
+ +
+ + + diff --git a/public/js/components/Cis/Profil/StudentProfil.js b/public/js/components/Cis/Profil/StudentProfil.js index 98fa81cb6..469c72411 100644 --- a/public/js/components/Cis/Profil/StudentProfil.js +++ b/public/js/components/Cis/Profil/StudentProfil.js @@ -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 {
+
- + {{email.email}} - +
{{email.type }}
+ + +
@@ -464,27 +469,28 @@ export default {
- +
- - + + {{element.kontakt}} - +
{{element.kontakttyp }}
- - + + {{element.kontakt}} - +
{{element.kontakttyp }}
+
diff --git a/public/js/components/Cis/Profil/StudentViewProfil.js b/public/js/components/Cis/Profil/StudentViewProfil.js index 5967fe7f9..b05c68db7 100644 --- a/public/js/components/Cis/Profil/StudentViewProfil.js +++ b/public/js/components/Cis/Profil/StudentViewProfil.js @@ -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 {
-
- - -
- -
- -
- Studenten Information -
-
-
-
- - -
- - - -
-
-
- -
- -
- -
- - - - - -
+ @@ -305,10 +272,10 @@ export default {
- - + + {{email.email}} - +
{{email.type }}
@@ -331,8 +298,41 @@ export default {
- + +
+ +
+ +
+ +
+ Studenten Information +
+
+
+
+ + +
+ + + +
+
+
+ +
+ +
+ +
+ + + +
+ +