From d0cf86585a174ef777accb102d71f0fcb6668169 Mon Sep 17 00:00:00 2001
From: cgfhtw <christopher.gerbrich@technikum-wien.at>
Date: Tue, 5 Nov 2024 11:42:18 +0100
Subject: [PATCH] Visual update for search icons

---
 public/css/components/searchbar.css           | 74 +++++++++++++------
 public/js/components/searchbar/result/cms.js  |  2 +-
 public/js/components/searchbar/result/dms.js  |  2 +-
 .../components/searchbar/result/employee.js   |  2 +-
 .../searchbar/result/mergedperson.js          |  2 +-
 .../searchbar/result/organisationunit.js      |  2 +-
 .../js/components/searchbar/result/person.js  |  2 +-
 .../components/searchbar/result/prestudent.js |  2 +-
 public/js/components/searchbar/result/room.js |  2 +-
 .../js/components/searchbar/result/student.js |  2 +-
 .../searchbar/result/template/frame.js        |  5 +-
 11 files changed, 64 insertions(+), 33 deletions(-)

diff --git a/public/css/components/searchbar.css b/public/css/components/searchbar.css
index 61032d227..37eeaef83 100644
--- a/public/css/components/searchbar.css
+++ b/public/css/components/searchbar.css
@@ -97,37 +97,69 @@
 /* new variant with template/frame */
 
 .searchbar-result {
-    border-bottom: 1px solid lightgrey;
-    margin-bottom: 1rem;
-    padding-bottom: 1rem;
+	border-bottom: 1px solid lightgrey;
+	margin-bottom: 1rem;
+	padding-bottom: 1rem;
 }
 
 .searchbar-actions {
-    display: flex;
-    flex-wrap: wrap;
-    gap: .5rem;
-    padding: 0;
-    margin: 1rem 0 0;
+	display: flex;
+	flex-wrap: wrap;
+	gap: .5rem;
+	padding: 0;
+	margin: 1rem 0 0;
 }
 
 .searchbar-square-image {
-    position: relative;
-    display: block;
-    height: 0;
-    padding-bottom: 100%;
+	position: relative;
+	display: block;
+	height: 0;
+	padding-bottom: 100%;
+}
+.searchbar-square-image > * {
+	position: absolute;
+	top: 0;
+	left: 0;
+	height: 100%;
+	width: 100%;
+}
+.searchbar-square-image > img {
+	object-fit: cover;
+}
+.searchbar-square-image > div {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	overflow: hidden;
+	color: rgba(var(--bs-white-rgb),1);
+	background-color: rgba(var(--bs-primary-rgb),var(--bs-bg-opacity));
+}
+.searchbar-square-image.rounded-circle > img,
+.searchbar-square-image.rounded-circle > div {
+	border-radius: 50%;
 }
 
-.searchbar-square-image > * {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
+.searchbar-rounded-image {
+	display: block;
+	width: 100%;
 }
-.searchbar-square-image img {
-    object-fit: cover;
+.searchbar-rounded-image > img {
+	width: 100%;
+}
+.searchbar-rounded-image > div {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	overflow: hidden;
+	color: rgba(var(--bs-white-rgb),1);
+	background-color: rgba(var(--bs-primary-rgb),var(--bs-bg-opacity));
+	height: calc((100px - .75em) * 1.3);
+}
+.searchbar-rounded-image > img,
+.searchbar-rounded-image > div {
+	border-radius: .25rem;
 }
 
 .no-margin-paragraphs p {
-    margin: 0;
+	margin: 0;
 }
\ No newline at end of file
diff --git a/public/js/components/searchbar/result/cms.js b/public/js/components/searchbar/result/cms.js
index af2d6b0bb..5befdb413 100644
--- a/public/js/components/searchbar/result/cms.js
+++ b/public/js/components/searchbar/result/cms.js
@@ -69,7 +69,7 @@ export default {
 		:res="res"
 		:actions="actions"
 		:title="res.title"
-		image-fallback="fas fa-newspaper fa-4x p-4 text-white bg-primary"
+		image-fallback="fas fa-newspaper fa-4x"
 		@actionexecuted="$emit('actionexecuted')"
 		>
 		<img v-if="flag" :src="flag" class="ms-2">
diff --git a/public/js/components/searchbar/result/dms.js b/public/js/components/searchbar/result/dms.js
index 74fc9440b..ad770f1c6 100644
--- a/public/js/components/searchbar/result/dms.js
+++ b/public/js/components/searchbar/result/dms.js
@@ -44,7 +44,7 @@ export default {
 		:res="res"
 		:actions="actions"
 		:title="res.name"
-		:image-fallback="'fas fa-' + icon + ' fa-4x p-5 text-white bg-primary'"
+		:image-fallback="'fas fa-' + icon + ' fa-4x'"
 		@actionexecuted="$emit('actionexecuted')"
 		>
 		<div class="searchbar_table">
diff --git a/public/js/components/searchbar/result/employee.js b/public/js/components/searchbar/result/employee.js
index 1c4da075a..2fa07bf5a 100644
--- a/public/js/components/searchbar/result/employee.js
+++ b/public/js/components/searchbar/result/employee.js
@@ -16,7 +16,7 @@ export default {
 		:actions="actions"
 		:title="res.name"
 		:image="res.photo_url"
-		image-fallback="fas fa-user-circle fa-7x"
+		image-fallback="fas fa-user fa-4x"
 		@actionexecuted="$emit('actionexecuted')"
 		>
 		<div class="searchbar_table">
diff --git a/public/js/components/searchbar/result/mergedperson.js b/public/js/components/searchbar/result/mergedperson.js
index 8f12540be..cfb7fe5a6 100644
--- a/public/js/components/searchbar/result/mergedperson.js
+++ b/public/js/components/searchbar/result/mergedperson.js
@@ -48,7 +48,7 @@ export default {
 		:actions="actions"
 		:title="person.name"
 		:image="this.person.photo_url"
-		image-fallback="fas fa-user-circle fa-7x"
+		image-fallback="fas fa-user fa-4x"
 		@actionexecuted="$emit('actionexecuted')"
 		>
 		<div class="searchbar_table">
diff --git a/public/js/components/searchbar/result/organisationunit.js b/public/js/components/searchbar/result/organisationunit.js
index f9b6870e0..129479277 100644
--- a/public/js/components/searchbar/result/organisationunit.js
+++ b/public/js/components/searchbar/result/organisationunit.js
@@ -22,7 +22,7 @@ export default {
 		:res="res"
 		:actions="actions"
 		:title="res.name"
-		image-fallback="fas fa-sitemap fa-4x p-4 text-white bg-primary"
+		image-fallback="fas fa-sitemap fa-4x"
 		@actionexecuted="$emit('actionexecuted')"
 		>
 		<div class="searchbar_table">
diff --git a/public/js/components/searchbar/result/person.js b/public/js/components/searchbar/result/person.js
index daa968e72..bc4e75ee8 100644
--- a/public/js/components/searchbar/result/person.js
+++ b/public/js/components/searchbar/result/person.js
@@ -21,7 +21,7 @@ export default {
 		:actions="actions"
 		:title="res.name"
 		:image="res.photo_url"
-		image-fallback="fas fa-user-circle fa-7x"
+		image-fallback="fas fa-user fa-4x"
 		@actionexecuted="$emit('actionexecuted')"
 		>
 		<div class="searchbar_table">
diff --git a/public/js/components/searchbar/result/prestudent.js b/public/js/components/searchbar/result/prestudent.js
index 4a11ac941..f3df3e8ca 100644
--- a/public/js/components/searchbar/result/prestudent.js
+++ b/public/js/components/searchbar/result/prestudent.js
@@ -21,7 +21,7 @@ export default {
 		:actions="actions"
 		:title="res.name + ' (' + res.status + ' ' + res.stg_kuerzel + ')'"
 		:image="res.photo_url"
-		image-fallback="fas fa-user-circle fa-7x"
+		image-fallback="fas fa-user fa-4x"
 		@actionexecuted="$emit('actionexecuted')"
 		>
 		<div class="searchbar_table">
diff --git a/public/js/components/searchbar/result/room.js b/public/js/components/searchbar/result/room.js
index 6da1e970a..23ce6b463 100644
--- a/public/js/components/searchbar/result/room.js
+++ b/public/js/components/searchbar/result/room.js
@@ -33,7 +33,7 @@ export default {
 		:res="res"
 		:actions="actions"
 		:title="res.ort_kurzbz"
-		image-fallback="fas fa-door-open fa-4x p-4 text-white bg-primary"
+		image-fallback="fas fa-door-open fa-4x"
 		@actionexecuted="$emit('actionexecuted')"
 		>
 		<div class="searchbar_table">
diff --git a/public/js/components/searchbar/result/student.js b/public/js/components/searchbar/result/student.js
index 3eb401d97..bb3512e3a 100644
--- a/public/js/components/searchbar/result/student.js
+++ b/public/js/components/searchbar/result/student.js
@@ -21,7 +21,7 @@ export default {
 		:actions="actions"
 		:title="res.name"
 		:image="res.photo_url"
-		image-fallback="fas fa-user-circle fa-7x"
+		image-fallback="fas fa-user fa-4x"
 		@actionexecuted="$emit('actionexecuted')"
 		>
 		<div class="searchbar_table">
diff --git a/public/js/components/searchbar/result/template/frame.js b/public/js/components/searchbar/result/template/frame.js
index 87078a166..336c2d9f9 100644
--- a/public/js/components/searchbar/result/template/frame.js
+++ b/public/js/components/searchbar/result/template/frame.js
@@ -22,14 +22,13 @@ export default {
 					:res="res"
 					:action="actions.defaultaction"
 					@actionexecuted="$emit('actionexecuted')"
-					class="searchbar-square-image"
+					class="searchbar-rounded-image"
 					>
 					<img
 						v-if="image"
 						:src="image"
-						class="rounded-circle"
 						/>
-					<div v-else class="d-flex justify-content-center align-items-center rounded-circle overflow-hidden">
+					<div v-else>
 						<i :class="imageFallback"></i>
 					</div>
 				</result-action>