little-lines/frontend
1
0
Fork 0
mirror of https://gitlab.com/little-lines/frontend.git synced 2024-11-22 04:36:52 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

update wheelchair icons display

Browse source
This commit is contained in:
Late Night Defender 2023-12-12 00:18:33 +07:00
parent e39e4f2406
commit 7a1ac02c99
1 changed files with 40 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
src/components/DestinationInfoCard.vue
View file

@ -199,10 +199,14 @@
</template> </template>
<script setup> <script setup>
import findLocation from '../../icons/Material/find-location.svg'; import findLocation from '../../icons/Adwaita/find-location.svg';
import clock from '../../icons/Material/clock.svg'; import clock from '../../icons/Adwaita/clock.svg';
import check from '../../icons/Material/check-round.svg'; import check from '../../icons/Adwaita/check-round.svg';
import cross from '../../icons/Material/cross.svg'; import cross from '../../icons/Adwaita/cross.svg';
import wheelchair from '../../icons/Adwaita/wheelchair.svg'
import wheelchairlimited from '../../icons/Adwaita/wheelchair-limited.svg'
import nowheelchair from '../../icons/Adwaita/no-wheelchair.svg'
// import DestinationInfoCard from '@/components/DestinationInfoCard.vue'; // import DestinationInfoCard from '@/components/DestinationInfoCard.vue';
// const destination = { // const destination = {
@ -262,11 +266,11 @@ export default {
wheelchairIcon() { wheelchairIcon() {
switch(this.nearestStructureData.infoWheelchair) { switch(this.nearestStructureData.infoWheelchair) {
case 'yes': case 'yes':
return check; return wheelchair;
case 'limited': case 'limited':
return check; return wheelchairlimited;
case 'no': case 'no':
return cross; return nowheelchair;
default: default:
return cross; return cross;
} }
@ -276,12 +280,14 @@ export default {
wheelchairIconClass() { wheelchairIconClass() {
// return this.nearestStructureData.infoWheelchair === 'limited' ? 'iconCheckLimited' : 'iconCheck'; // return this.nearestStructureData.infoWheelchair === 'limited' ? 'iconCheckLimited' : 'iconCheck';
switch(this.nearestStructureData.infoWheelchair) { switch(this.nearestStructureData.infoWheelchair) {
case 'yes':
return 'iconCheck';
case 'limited': case 'limited':
return 'iconCheckLimited'; return 'iconCheckLimited';
case 'no': case 'no':
return 'iconCheckNo'; return 'iconCheckNo';
default: default:
return 'iconCheck'; return 'iconCheckDefault';
} }
}, },
@ -289,13 +295,13 @@ export default {
wheelchairAccessText() { wheelchairAccessText() {
switch(this.nearestStructureData.infoWheelchair) { switch(this.nearestStructureData.infoWheelchair) {
case 'yes': case 'yes':
return 'Unrestricted Wheelchair access'; return 'วีลแชร์สามารถเข้าถึงได้';
case 'limited': case 'limited':
return 'Limited Wheelchair access'; return 'วีลแชร์เข้าถึงได้อย่างจำกัด';
case 'no': case 'no':
return 'No Wheelchair access'; return 'วีลแชร์ไม่สามารถเข้าถึงได้';
default: default:
return 'Wheelchair access information not available'; return 'ไม่มีข้อมูลว่าวีลแชร์สามารถเข้าถึงได้หรือไม่';
} }
}, },
@ -303,6 +309,8 @@ export default {
wheelchairTextColorClass() { wheelchairTextColorClass() {
switch(this.nearestStructureData.infoWheelchair) { switch(this.nearestStructureData.infoWheelchair) {
case 'yes':
return 'textColorYes';
case 'limited': case 'limited':
return 'textColorLimited'; return 'textColorLimited';
case 'no': case 'no':
@ -532,32 +540,44 @@ export default {
padding: 0; padding: 0;
} }
/* .iconCheck { .iconCheckYes {
background-color: #26a269; width: 30px;
} */ height: 30px;
filter: brightness(0) saturate(100%) invert(45%) sepia(85%) saturate(380%) hue-rotate(100deg) brightness(98%) contrast(87%);
}
.iconCheckLimited { .iconCheckLimited {
width: 30px; width: 30px;
height: 30px; height: 30px;
filter: invert(67%) sepia(20%) saturate(6000%) hue-rotate(2deg) brightness(100%) contrast(101%); filter: brightness(0) saturate(100%) invert(59%) sepia(84%) saturate(813%) hue-rotate(5deg) brightness(99%) contrast(92%);
}
.iconCheckDefault {
width: 30px;
height: 30px;
filter: brightness(0) saturate(100%) invert(59%) sepia(84%) saturate(813%) hue-rotate(5deg) brightness(99%) contrast(92%);
} }
.iconCheckNo { .iconCheckNo {
width: 30px; width: 30px;
height: 30px; height: 30px;
filter: invert(20%) sepia(100%) saturate(7500%) hue-rotate(360deg) brightness(90%) contrast(85%); filter: brightness(0) saturate(100%) invert(25%) sepia(20%) saturate(5539%) hue-rotate(326deg) brightness(86%) contrast(109%);
} }
.textColorLimited { .textColorLimited {
filter: invert(67%) sepia(20%) saturate(6000%) hue-rotate(2deg) brightness(100%) contrast(101%); filter: brightness(0) saturate(100%) invert(59%) sepia(84%) saturate(813%) hue-rotate(5deg) brightness(99%) contrast(92%);
} }
.textColorNo { .textColorNo {
filter: invert(20%) sepia(100%) saturate(7500%) hue-rotate(360deg) brightness(90%) contrast(85%); filter: brightness(0) saturate(100%) invert(25%) sepia(20%) saturate(5539%) hue-rotate(326deg) brightness(86%) contrast(109%);
} }
.textColorDefault { .textColorDefault {
filter: invert(55%) sepia(39%) saturate(601%) hue-rotate(73deg) brightness(97%) contrast(98%); filter: brightness(0) saturate(100%) invert(59%) sepia(84%) saturate(813%) hue-rotate(5deg) brightness(99%) contrast(92%);
}
.textColorYes {
filter: brightness(0) saturate(100%) invert(45%) sepia(85%) saturate(380%) hue-rotate(100deg) brightness(98%) contrast(87%);
} }
</style> </style>