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 all 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
65 changes: 65 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,65 @@
<template>
<div
class="venue-division flex items-center justify-center overflow-hidden whitespace-nowrap pt-6 text-primary-500 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 {
& >>> 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>
140 changes: 50 additions & 90 deletions components/venue/VenueDriveTab.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,27 +12,19 @@
</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"
class="md:my-2"
>
<a
href="https://goo.gl/maps/HfVQkZULCWNs4tfz6"
:href="carDestinationLink"
class="text-pink-500 underline"
target="_blank"
>{{ $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="parkingPlaceCarLink"
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 All @@ -74,32 +71,38 @@
</div>
<i18n path="parkingInfo.motor.description" tag="p">
<a
href="https://goo.gl/maps/DnFQvhu8QiCvRgYE7"
:href="parkingPlaceMotorLink[0]"
class="text-pink-500 underline"
target="_blank"
>{{ $t('parkingInfo.motor.descriptionLinkTitle1') }}</a
>
<a
href="https://goo.gl/maps/BaJw3ufc4rfqz5wh8"
:href="parkingPlaceMotorLink[1]"
class="text-pink-500 underline"
target="_blank"
>{{ $t('parkingInfo.motor.descriptionLinkTitle2') }}</a
>
<a
href="https://goo.gl/maps/EZ4RDMZTPYwFxAvh9"
:href="parkingPlaceMotorLink[2]"
class="text-pink-500 underline"
target="_blank"
>{{ $t('parkingInfo.motor.descriptionLinkTitle3') }}</a
>
</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"
:href="parkingMoreInfoLink[0]"
class="text-pink-500"
target="_blank"
>{{ $t('parkingInfo.moreInfoLinkTitle') }}</a
>
<a
:href="parkingMoreInfoLink[1]"
class="text-pink-500"
target="_blank"
>{{ $t('parkingInfo.moreInfoLinkTitle2') }}</a
>
</i18n>
</div>
</div>
Expand All @@ -108,78 +111,35 @@

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

import VenueDivision from './VenueDivision.vue'
import { venueDriveIconConfig } from './config/venueIconConfig'
export default {
i18n,
name: 'VenueDriveTab',
components: { VenueDivision },
data() {
return {
icon: {
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'),
carDestinationLink: 'https://goo.gl/maps/HfVQkZULCWNs4tfz6',
parkingPlaceCarLink:
'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',

parkingPlaceMotorLink: [
'https://goo.gl/maps/DnFQvhu8QiCvRgYE7',
'https://goo.gl/maps/BaJw3ufc4rfqz5wh8',
'https://goo.gl/maps/EZ4RDMZTPYwFxAvh9',
],
parkingMoreInfoLink: [
'https://dga.sinica.edu.tw/posts/78705',
'https://dga.sinica.edu.tw/pages/1442',
],
parkingInfo: {
car: '人社館地下室設有汽車停車場，車輛進入院區持證件向大門警衛換證後可駛入院區，停車費用每小時20元。',
},
}
},
computed: {
icon() {
return venueDriveIconConfig[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