From 4e4e8a0a5ca468a1d32608fb79bee4e0c61b903f Mon Sep 17 00:00:00 2001 From: Harald Bamberger Date: Tue, 19 Nov 2024 16:16:46 +0100 Subject: [PATCH] improve responsive layout of search results --- public/css/Cis4/Cis.css | 41 +++++++++++ public/css/components/searchbar/searchbar.css | 9 ++- public/js/apps/Cis.js | 12 +++- public/js/components/searchbar/employee.js | 16 ++--- .../components/searchbar/organisationunit.js | 21 +++--- public/js/components/searchbar/person.js | 4 +- public/js/components/searchbar/prestudent.js | 20 +++--- public/js/components/searchbar/raum.js | 16 ++--- public/js/components/searchbar/searchbar.js | 71 +++++++++++++------ 9 files changed, 144 insertions(+), 66 deletions(-) diff --git a/public/css/Cis4/Cis.css b/public/css/Cis4/Cis.css index 380951b21..9306481b5 100644 --- a/public/css/Cis4/Cis.css +++ b/public/css/Cis4/Cis.css @@ -473,4 +473,45 @@ html { transition-property: background,color; transition-duration: 0.3s,0.2s; transition-timing-function: ease-out,ease-out; +} +@media screen and ( max-width: 767px ) { + #nav-search { + position: static; + } + + #nav-search .searchbar_results { + top: 100%; + width: 98vw !important; + left: 1vw !important; + right: 1vw !important; + } +} + +@media screen and ( max-width: 576px ) { + .searchbar_icon img { + max-width: 65px !important; + } + + .searchbar_icon i { + font-size: 3em !important; + } + + .searchbar_grid { + grid-template-columns: [icon] 75px [data] auto; + } + + .searchbar_table, + .searchbar_tablerow, + .searchbar_tablecell { + display: block; + } + + .searchbar_tablecell.searchbar_label { + font-weight: bold; + } + + .searchbar_tablecell.searchbar_value { + padding-left: 2.5rem; + overflow-wrap: break-word; + } } \ No newline at end of file diff --git a/public/css/components/searchbar/searchbar.css b/public/css/components/searchbar/searchbar.css index 5b718a90e..c272da310 100644 --- a/public/css/components/searchbar/searchbar.css +++ b/public/css/components/searchbar/searchbar.css @@ -21,14 +21,17 @@ z-index: 9998; background-color: #fff; border: 1px solid lightgrey; - padding: 1rem; - overflow-y: auto; + padding: .5rem; top: 100%; width: 100%; left: 0; right: 0; } +.searchbar_results_scroller { + overflow-y: auto; +} + .searchbar_result { border-bottom: 1px solid lightgrey; margin-bottom: 1rem; @@ -104,4 +107,4 @@ -webkit-user-select: none; /* Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE/Edge */ - } \ No newline at end of file + } diff --git a/public/js/apps/Cis.js b/public/js/apps/Cis.js index fbb83ab57..92c1b9ec7 100644 --- a/public/js/apps/Cis.js +++ b/public/js/apps/Cis.js @@ -15,6 +15,7 @@ const app = Vue.createApp({ return { searchbaroptions: { cssclass: "", + calcheightonly: true, types: [ "mitarbeiter", "raum", @@ -75,9 +76,16 @@ const app = Vue.createApp({ }, organisationunit: { defaultaction: { - type: "function", + type: "link", + renderif: function(data) { + if(data.mailgroup) { + return true; + } + return false; + }, action: function(data) { - alert('organisationunit defaultaction ' + JSON.stringify(data)); + const link = 'mailto:' + data.mailgroup; + return link; } }, childactions: [] diff --git a/public/js/components/searchbar/employee.js b/public/js/components/searchbar/employee.js index afb947874..f1e6a67f6 100644 --- a/public/js/components/searchbar/employee.js +++ b/public/js/components/searchbar/employee.js @@ -30,8 +30,8 @@ export default {
-
Standard-Kostenstelle
-
+
Standard-Kostenstelle
+
  • {{ stdkst }}
@@ -40,8 +40,8 @@ export default {
-
Organisations-Einheit
-
+
Organisations-Einheit
+
  • {{ oe }}
@@ -50,8 +50,8 @@ export default {
-
EMail
-
+
EMail
+
{{ res.email }} @@ -59,8 +59,8 @@ export default {
-
Telefon
-
+
Telefon
+
{{ res.phone }} diff --git a/public/js/components/searchbar/organisationunit.js b/public/js/components/searchbar/organisationunit.js index e7b5861e8..09e2822a3 100644 --- a/public/js/components/searchbar/organisationunit.js +++ b/public/js/components/searchbar/organisationunit.js @@ -28,24 +28,25 @@ export default {
-
übergeordnete OrgEinheit
-
+
übergeordnete OrgEinheit
+
{{ res.parentoe_name }}
-
Gruppen-EMail
-
- +
Gruppen-EMail
+
+ {{ res.mailgroup }} + -
-
Leiter
-
+
Leiter
+
  • {{ leader.name }}
@@ -54,8 +55,8 @@ export default {
-
Mitarbeiter-Anzahl
-
+
Mitarbeiter-Anzahl
+
{{ res.number_of_people }}
@@ -64,7 +65,7 @@ export default { -
+
diff --git a/public/js/components/searchbar/person.js b/public/js/components/searchbar/person.js index 4f267cbd4..eeb476149 100644 --- a/public/js/components/searchbar/person.js +++ b/public/js/components/searchbar/person.js @@ -29,8 +29,8 @@ export default {
-
EMail
-
+
EMail
+
{{ res.mail }} diff --git a/public/js/components/searchbar/prestudent.js b/public/js/components/searchbar/prestudent.js index 0f7429075..99837fe4b 100644 --- a/public/js/components/searchbar/prestudent.js +++ b/public/js/components/searchbar/prestudent.js @@ -31,36 +31,36 @@ export default {
-
Prestudent_id
-
+
Prestudent_id
+
{{ res.prestudent_id }}
-
Student_uid
-
+
Student_uid
+
{{ res.uid }}
-
Person_id
-
+
Person_id
+
{{ res.person_id }}
-
Studiengang
-
+
Studiengang
+
{{ res.bezeichnung }}
-
EMail
-
+
EMail
+
{{ res.email }} diff --git a/public/js/components/searchbar/raum.js b/public/js/components/searchbar/raum.js index a0e0e464d..4a55b417a 100644 --- a/public/js/components/searchbar/raum.js +++ b/public/js/components/searchbar/raum.js @@ -25,20 +25,20 @@ export default {
-
Standort
-
{{ res.standort }}
+
Standort
+
{{ res.standort }}
-
Sitzplätze
-
{{ res.sitzplaetze }}
+
Sitzplätze
+
{{ res.sitzplaetze }}
-
Gebäude
-
{{ res.building }}
+
Gebäude
+
{{ res.building }}
-
Zusatz Informationen
-
+
Zusatz Informationen
+
diff --git a/public/js/components/searchbar/searchbar.js b/public/js/components/searchbar/searchbar.js index de408fa77..a1e0af854 100644 --- a/public/js/components/searchbar/searchbar.js +++ b/public/js/components/searchbar/searchbar.js @@ -36,30 +36,33 @@ export default {
-
- - +
-
-
- -
-
{{ this.error }}
-
Es wurden keine Ergebnisse gefunden.
- +
+
+
+ +
+
{{ this.error }}
+
Es wurden keine Ergebnisse gefunden.
+ +
+
{ + this.calcSearchResultHeight(); + }); + } + }, methods: { updateSearchOptions: function() { this.searchsettings.types = []; @@ -98,12 +108,26 @@ export default { this.searchsettings.types.push(this.searchoptions.types[idx]); } }, + calcSearchResultHeight: function() { + const rect = this.$refs.results.getBoundingClientRect(); + if( rect.height > 0 && rect.height < (window.innerHeight * 0.8) ) { + this.$refs.result.style.height = Math.ceil(rect.height) + 'px'; + } else { + this.$refs.result.style.height = Math.floor(window.innerHeight * 0.8) + 'px'; + } + }, calcSearchResultExtent: function() { - var rect = this.$refs.searchbox.getBoundingClientRect(); - this.$refs.result.style.top = Math.floor(rect.bottom + 3) + 'px'; - this.$refs.result.style.right = Math.floor(window.innerWidth - rect.right) + 'px'; - this.$refs.result.style.width = Math.floor(window.innerWidth * 0.75) + 'px'; - this.$refs.result.style.height = Math.floor(window.innerHeight * 0.75) + 'px'; + if(!this.showresult) { + return; + } + if(this.searchoptions?.calcheightonly === undefined + || this.searchoptions.calcheightonly === false) { + var rect = this.$refs.searchbox.getBoundingClientRect(); + this.$refs.result.style.top = Math.floor(rect.bottom + 3) + 'px'; + this.$refs.result.style.right = Math.floor(rect.right) + 'px'; + this.$refs.result.style.width = Math.floor(rect.width) + 'px'; + } + this.calcSearchResultHeight(); }, search: function() { if( this.searchtimer !== null ) { @@ -159,6 +183,7 @@ export default { if( this.searchsettings.searchstr.length >= 2 ) { this.showresult = true; window.addEventListener('resize', this.calcSearchResultExtent); + this.calcSearchResultExtent(); } }, searchfocusin: function(e) {