blackicedbear/FHC-Core
1
0
Fork 0
mirror of https://github.com/FH-Complete/FHC-Core.git synced 2026-07-23 01:42:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Visual update for search icons

Browse Source
This commit is contained in:
cgfhtw
2024-11-05 11:42:18 +01:00
parent 3a13226298
commit d0cf86585a
11 changed files with 64 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/components/searchbar.css
+53 -21
View File
@@ -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;
}
public/js/components/searchbar/result/cms.js
+1 -1
View File
@@ -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">
public/js/components/searchbar/result/dms.js
+1 -1
View File
@@ -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">
public/js/components/searchbar/result/employee.js
+1 -1
View File
@@ -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">
public/js/components/searchbar/result/mergedperson.js
+1 -1
View File
@@ -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">
public/js/components/searchbar/result/organisationunit.js
+1 -1
View File
@@ -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">
public/js/components/searchbar/result/person.js
+1 -1
View File
@@ -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">
public/js/components/searchbar/result/prestudent.js
+1 -1
View File
@@ -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">
public/js/components/searchbar/result/room.js
+1 -1
View File
@@ -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">
public/js/components/searchbar/result/student.js
+1 -1
View File
@@ -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">
public/js/components/searchbar/result/template/frame.js
+2 -3
View File
@@ -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>