little-lines/frontend
Archived
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases 2 Activity

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>
<script setup>
import findLocation from '../../icons/Material/find-location.svg';
import clock from '../../icons/Material/clock.svg';
import check from '../../icons/Material/check-round.svg';
import cross from '../../icons/Material/cross.svg';
import findLocation from '../../icons/Adwaita/find-location.svg';
import clock from '../../icons/Adwaita/clock.svg';
import check from '../../icons/Adwaita/check-round.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';
// const destination = {
@ -262,11 +266,11 @@ export default {
wheelchairIcon() {
switch(this.nearestStructureData.infoWheelchair) {
case 'yes':
return check;
return wheelchair;
case 'limited':
return check;
return wheelchairlimited;
case 'no':
return cross;
return nowheelchair;
default:
return cross;
}
@ -276,12 +280,14 @@ export default {
wheelchairIconClass() {
// return this.nearestStructureData.infoWheelchair === 'limited' ? 'iconCheckLimited' : 'iconCheck';
switch(this.nearestStructureData.infoWheelchair) {
case 'yes':
return 'iconCheck';
case 'limited':
return 'iconCheckLimited';
case 'no':
return 'iconCheckNo';
default:
return 'iconCheck';
return 'iconCheckDefault';
}
},
@ -289,13 +295,13 @@ export default {
wheelchairAccessText() {
switch(this.nearestStructureData.infoWheelchair) {
case 'yes':
return 'Unrestricted Wheelchair access';
return 'วีลแชร์สามารถเข้าถึงได้';
case 'limited':
return 'Limited Wheelchair access';
return 'วีลแชร์เข้าถึงได้อย่างจำกัด';
case 'no':
return 'No Wheelchair access';
return 'วีลแชร์ไม่สามารถเข้าถึงได้';
default:
return 'Wheelchair access information not available';
return 'ไม่มีข้อมูลว่าวีลแชร์สามารถเข้าถึงได้หรือไม่';
}
},
@ -303,6 +309,8 @@ export default {
wheelchairTextColorClass() {
switch(this.nearestStructureData.infoWheelchair) {
case 'yes':
return 'textColorYes';
case 'limited':
return 'textColorLimited';
case 'no':
@ -532,32 +540,44 @@ export default {
padding: 0;
}
/* .iconCheck {
background-color: #26a269;
} */
.iconCheckYes {
width: 30px;
height: 30px;
filter: brightness(0) saturate(100%) invert(45%) sepia(85%) saturate(380%) hue-rotate(100deg) brightness(98%) contrast(87%);
}
.iconCheckLimited {
width: 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 {
width: 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 {
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 {
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 {
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>