Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: ui venue change #422

Merged
merged 7 commits into from
Aug 4, 2023
Merged

feat: ui venue change #422

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
0043364
feat: ui venue change
baby230211 Jul 15, 2023
0fbaa25
fix comments
baby230211 Jul 16, 2023
268e12b
fix: memory leak on event listener
baby230211 Jul 22, 2023
a3f597d
feat: update en i18n and ui on venue
baby230211 Jul 22, 2023
14db116
update comments
baby230211 Jul 25, 2023
da5c3b3
move icon path to config
baby230211 Jul 25, 2023
c33f27d
remove chinese in english i18n
baby230211 Jul 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .nvmrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
14.18.1
69 changes: 69 additions & 0 deletions components/venue/VenueDivision.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
<template>
<div class="venue-division overflow-hidden pt-6 md:pb-10 md:pt-16">
<div class="venue-division-container mx-[10px] flex-1">
<slot />
</div>
</div>
</template>

<script>
export default {
name: 'VenueDivision',
}
</script>

<style lang="postcss" scoped>
.venue-division {
display: flex;
justify-content: center;
align-items: center;
white-space: nowrap;
color: #9387ff;
yungshenglu marked this conversation as resolved.
Show resolved Hide resolved

& >>> h3 {
padding: 0 14px;
position: relative;
display: flex;
align-items: center;
justify-content: center;

&::before {
position: absolute;
content: '';
left: -10px;
transform: translateX(-100%);
border: 4px solid #9387ff;
display: inline-block;
border-radius: 50%;
}

&::after {
position: absolute;
content: '';
right: -10px;
transform: translateX(100%);
border: 4px solid #9387ff;
display: inline-block;
border-radius: 50%;
}

margin: 0;
}

&::before {
max-width: 336px;
content: '';
width: 100%;
border-top: 1px solid #9387ff;
display: inline-block;
}

&::after {
max-width: 336px;
width: 100%;
content: '';
border-top: 1px solid #9387ff;
display: inline-block;
}
}
</style>
131 changes: 51 additions & 80 deletions components/venue/VenueDriveTab.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
</span>
</div>
<div class="md:flex md:flex-1 md:justify-center">
<div class="md:flex md:flex-col">
<div class="pt-6 text-center md:flex md:flex-col md:pt-0">
<i18n
path="carInstructions.description"
tag="span"
Expand All @@ -25,14 +25,6 @@
>{{ $t('carInstructions.destination') }}</a
>
</i18n>
<ol class="ml-[20px] list-decimal pt-6 md:pt-0">
<li
v-for="carInstruction in carInstructions"
:key="carInstruction"
>
{{ carInstruction }}
</li>
</ol>
</div>
</div>

Expand All @@ -46,15 +38,12 @@
<span> {{ $t('carInstructions.footerTitle') }} </span>
</div>
</div>

<div class="parkingInfo pt-6 md:pb-10 md:pt-16">
<div class="parkingInfo-container flex-1">
<h3>
<img class="mr-1" :src="icon.parkingPink" />
{{ $t('parkingInfo.title') }}
</h3>
</div>
</div>
<VenueDivision>
<h3>
<img class="mr-1" :src="icon.parkingPink" />
{{ $t('parkingInfo.title') }}
</h3>
</VenueDivision>
<div class="md:flex md:gap-10">
<div class="md:flex-1">
<div class="flex items-center pt-6 md:pb-4">
Expand All @@ -63,7 +52,15 @@
{{ $t('parkingInfo.car.title') }}
</h5>
</div>
<p>{{ $t('parkingInfo.car.description') }}</p>
<i18n path="parkingInfo.car.description" tag="p">
<a
href="https://www.google.com/maps/place/%E4%B8%AD%E5%A4%AE%E7%A0%94%E7%A9%B6%E9%99%A2%E4%BA%BA%E6%96%87%E7%A4%BE%E6%9C%83%E7%A7%91%E5%AD%B8%E9%A4%A8/@25.0409679,121.6068671,17z/data=!4m7!3m6!1s0x3442ab46b3aaaaab:0x6ad0b8243ddc70ef!8m2!3d25.0409679!4d121.6113732!15sCiTkuK3lpK7noJTnqbbpmaLkurrmlofnpL7mnIPnp5HlrbjppKhaLCIq5Lit5aSuIOeglOeptiDpmaIg5Lq65paHIOekvuacgyDnp5Hlrbgg6aSokgEGc2Nob29s4AEA!16s%2Fg%2F11f50wylmj?entry=tts&shorturl=1"
yungshenglu marked this conversation as resolved.
Show resolved Hide resolved
class="text-pink-500"
target="_blank"
>
{{ $t('parkingInfo.car.parkingPlace') }}
</a>
</i18n>
</div>
<div class="md:flex-1">
<div class="flex items-center pt-6 md:pb-4">
Expand Down Expand Up @@ -93,13 +90,19 @@
>
</i18n>

<i18n path="parkingInfo.moreInfo" tag="p">
<i18n class="pt-10 md:pt-0" path="parkingInfo.moreInfo" tag="p">
<a
href="https://dga.sinica.edu.tw/posts/78705"
class="text-pink-500 underline"
class="text-pink-500"
target="_blank"
>{{ $t('parkingInfo.moreInfoLinkTitle') }}</a
>
<a
href="https://dga.sinica.edu.tw/pages/1442"
class="text-pink-500"
target="_blank"
>{{ $t('parkingInfo.moreInfoLinkTitle2') }}</a
>
</i18n>
</div>
</div>
Expand All @@ -108,78 +111,46 @@

<script>
import i18n from '@/i18n/venue/index.i18n'

import VenueDivision from './VenueDivision.vue'
export default {
i18n,
name: 'VenueDriveTab',
components: { VenueDivision },
data() {
return {
icon: {
parkingInfo: {
car: '人社館地下室設有汽車停車場，車輛進入院區持證件向大門警衛換證後可駛入院區，停車費用每小時20元。',
},
}
},
computed: {
icon() {
if (this.$i18n.locale === 'en-us') {
return {
car: require('~/static/img/venue/car.svg'),
carWhite: require('~/static/img/venue/car-white.svg'),
motorWhite: require('~/static/img/venue/motor-white.svg'),
parking: require('~/static/img/venue/parking.svg'),
parkingPink: require('~/static/img/venue/parking-pink.svg'),
venueDestination: require('~/static/img/venue/en-us/venue-destination.svg'),
venueDestinationMd: require('~/static/img/venue/en-us/venue-destination-md.svg'),
}
}
return {
Copy link
Contributor

@yungshenglu yungshenglu Jul 25, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's different?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

venueDestination, venueDestinationMd
image path is different when getting in different locale

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

建議只要把不同的放進去條件判斷就好，兩邊寫在外面就可以

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

updated~

car: require('~/static/img/venue/car.svg'),
carWhite: require('~/static/img/venue/car-white.svg'),
motorWhite: require('~/static/img/venue/motor-white.svg'),
parking: require('~/static/img/venue/parking.svg'),
parkingPink: require('~/static/img/venue/parking-pink.svg'),
venueDestination: require('~/static/img/venue/venue-destination.svg'),
venueDestinationMd: require('~/static/img/venue/venue-destination-md.svg'),
},
carInstructions: [
this.$t('carInstructions.description1'),
this.$t('carInstructions.description2'),
this.$t('carInstructions.description3'),
],
parkingInfo: {
car: '人社館地下室設有汽車停車場，車輛進入院區持證件向大門警衛換證後可駛入院區，停車費用每小時20元。',
},
}
}
},
},
mounted() {
console.log(this.$i18n.locale)
},
}
</script>

<style lang="postcss" scoped>
.parkingInfo {
display: flex;
justify-content: center;
align-items: center;
white-space: nowrap;
color: #9387ff;
& >>> h3 {
padding: 0 14px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
&::before {
position: absolute;
content: '';
left: 0;
border: 4px solid #9387ff;
display: inline-block;
border-radius: 50%;
}
&::after {
position: absolute;
content: '';
right: 0;
border: 4px solid #9387ff;
display: inline-block;
border-radius: 50%;
}
margin: 0;
}
&::before {
max-width: 336px;
content: '';
width: 100%;
border-top: 1px solid #9387ff;
display: inline-block;
}
&::after {
max-width: 336px;
width: 100%;
content: '';
border-top: 1px solid #9387ff;
display: inline-block;
}
}
</style>
<style lang="postcss" scoped></style>
Loading