Skip to content

Commit 571a63e

Browse files
jiyuujinjiyuujin
authored
Merge pull request #461 from vuejs-jp/feature/event-section
イベントセクション
2 parents fdc0886 + f26e18a commit 571a63e

File tree

11 files changed

+194
-11
lines changed

11 files changed

+194
-11
lines changed

‎app/components/EventPageSection.vue

+17-3
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
<script setup lang="ts">
2-
// import EventSection from '~/components/event/EventSection.vue'
2+
import EventSection from '~/components/event/EventSection.vue'
33
import StoreSection from '~/components/event/StoreSection.vue'
44
</script>
55

66
<template>
77
<section class="event-wrapper">
88
<div class="event-root">
9-
<!--
109
<EventSection />
11-
-->
1210
<StoreSection />
1311
</div>
1412
</section>
@@ -32,5 +30,21 @@ css({
3230
background: '{color.white}',
3331
'grid-template-columns': 'minmax(0, 1fr)',
3432
},
33+
'@tablet': {
34+
'.event-wrapper': {
35+
padding: '40px',
36+
},
37+
'.event-root': {
38+
maxWidth: '888px',
39+
},
40+
},
41+
'@mobile': {
42+
'.event-wrapper': {
43+
padding: '20px',
44+
},
45+
'.event-root': {
46+
maxWidth: '730px',
47+
},
48+
},
3549
})
3650
</style>

‎app/components/event/EventSection.vue

+143-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,145 @@
1+
<script setup lang="ts">
2+
import SectionTitle from '~/components/SectionTitle.vue'
3+
import MarkDownText from '~/components/MarkDownText.vue'
4+
</script>
5+
16
<template>
2-
<section>EventSection</section>
7+
<div class="event">
8+
<SectionTitle id="event" color="vue.blue" :title="'Events'" yamato-title="イベント" />
9+
<div class="explain">
10+
<MarkDownText path="event" />
11+
</div>
12+
<div class="event-menu">
13+
<div class="event-card">
14+
<img
15+
width="690"
16+
height="388"
17+
:alt="'リフレッシュメントスペース supported by giftee'"
18+
:src="'event/refreshment_space.png'"
19+
decoding="async"
20+
/>
21+
<div class="title">リフレッシュメントスペース<br />supported by giftee</div>
22+
<div class="description">
23+
喉が渇いたらお茶やコーヒーはいかがですか？
24+
小腹を満たすお菓子もご用意しています。もちろん無料です。
25+
</div>
26+
</div>
27+
<div class="event-card">
28+
<img
29+
width="690"
30+
height="388"
31+
:alt="'クリエイティブウォール'"
32+
:src="'event/creative_wall.png'"
33+
decoding="async"
34+
/>
35+
<div class="title">クリエイティブウォール</div>
36+
<div class="description">
37+
自由に書き込みができるビッグなクリエイティブウォールを会場入口に設置します。自分の名前や、Vue.js
38+
に対する熱い想いなど、なんでも書き込み OK。記念写真にもピッタリです。
39+
</div>
40+
</div>
41+
<div class="event-card">
42+
<img
43+
width="690"
44+
height="388"
45+
:alt="'ハンズオン'"
46+
:src="'event/hands_on.png'"
47+
decoding="async"
48+
/>
49+
<div class="title">ハンズオン</div>
50+
<div class="description">
51+
一緒に手を動かしながら Vue.js
52+
アプリケーション開発を体験できるハンズオンを実施します。詳しくは<nuxt-link
53+
to="/#handson"
54+
title="ハンズオンについて"
55+
>ハンズオンについて</nuxt-link
56+
>をご覧ください。
57+
</div>
58+
</div>
59+
<div class="event-card">
60+
<img
61+
width="690"
62+
height="388"
63+
:alt="'タトゥースペース'"
64+
:src="'event/tattoo_space.png'"
65+
decoding="async"
66+
/>
67+
<div class="title">タトゥースペース</div>
68+
<div class="description">
69+
顔や手に Vue Fes Japan
70+
特製タトゥーシールを貼り付けて、フェス気分を盛り上げましょう。おなじみの Vue.js や Nuxt
71+
などのロゴマークをその場ですぐに付けられます。
72+
</div>
73+
</div>
74+
</div>
75+
</div>
376
</template>
77+
78+
<style lang="ts" scoped>
79+
css({
80+
'.event': {
81+
padding: '40px',
82+
display: 'grid',
83+
placeItems: 'center',
84+
gap: '40px',
85+
},
86+
'.explain': {
87+
maxWidth: '760px',
88+
display: 'flex',
89+
justifyContent: 'center',
90+
'::v-deep(p)': {
91+
textAlign: 'left',
92+
}
93+
},
94+
'.event-menu': {
95+
display: 'flex',
96+
flexWrap: 'wrap',
97+
gap: '2em',
98+
justifyContent: 'center',
99+
},
100+
'.event-card': {
101+
'--img-size': '475px',
102+
maxWidth: '475px',
103+
display: 'flex',
104+
flexDirection: 'column',
105+
gap: '0.6em',
106+
'.title': {
107+
fontWeight: 'bold',
108+
fontSize: '22px',
109+
whiteSpace: 'pre-wrap',
110+
lineHeight: '1.2',
111+
},
112+
'.description': {
113+
fontSize: '16px',
114+
'::v-deep(a)': {
115+
textDecoration: 'underline',
116+
'&:hover': {
117+
opacity: 0.4,
118+
transition: '.2s',
119+
},
120+
},
121+
}
122+
},
123+
'@tablet': {
124+
'.explain': {
125+
maxWidth: '730px',
126+
},
127+
'.event-card': {
128+
'--img-size': '368px',
129+
maxWidth: '368px',
130+
},
131+
},
132+
'@mobile': {
133+
'.event': {
134+
padding: '80px 20px',
135+
},
136+
'.explain': {
137+
maxWidth: '690px',
138+
},
139+
'.event-card': {
140+
'--img-size': '690px',
141+
maxWidth: '690px',
142+
},
143+
},
144+
});
145+
</style>

‎app/components/event/StoreSection.vue

+28-6
Original file line numberDiff line numberDiff line change
@@ -62,10 +62,10 @@ css({
6262
'.store-root': {
6363
color: '{color.vue.blue}',
6464
background: '{color.white}',
65-
padding: 'calc({space.8} * 3)',
65+
padding: '40px',
6666
display: 'flex',
6767
flexDirection: 'column',
68-
gap: 'calc({space.8} * 3)',
68+
gap: 'calc({space.8} * 10)',
6969
justifyContent: 'center',
7070
},
7171
@@ -90,7 +90,7 @@ css({
9090
'.store-menu': {
9191
display: 'flex',
9292
flexWrap: 'wrap',
93-
gap: '2em',
93+
gap: '28px',
9494
justifyContent: 'center',
9595
},
9696
'.store-card': {
@@ -103,6 +103,9 @@ css({
103103
fontWeight: 'bold',
104104
lineHeight: '1',
105105
},
106+
'.text': {
107+
width: '308px',
108+
},
106109
'.price': {
107110
fontSize: '22px',
108111
fontWeight: 'bold',
@@ -112,8 +115,6 @@ css({
112115
'.store-info': {
113116
display: 'flex',
114117
justifyContent: 'center',
115-
paddingTop: 'calc({space.8} * 5)',
116-
paddingBottom: 'calc({space.8} * 5)',
117118
},
118119
'.store-purchase': {
119120
display: 'flex',
@@ -140,6 +141,27 @@ css({
140141
'.button': {
141142
display: 'flex',
142143
justifyContent: 'center'
143-
}
144+
},
145+
'@tablet': {
146+
'.store-card': {
147+
'--img-size': '232px',
148+
maxWidth: '232px',
149+
},
150+
'.text': {
151+
width: '232px',
152+
},
153+
},
154+
'@mobile': {
155+
'.store-root': {
156+
padding: '20px',
157+
},
158+
'.store-card': {
159+
'--img-size': '329px',
160+
maxWidth: '329px',
161+
},
162+
'.text': {
163+
width: '329px',
164+
},
165+
},
144166
});
145167
</style>

‎app/composables/useLocale.ts

+1
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ export function useLocale(path: Path) {
3636
.with('store', () => `/${locale.value}/top/store`)
3737
.with('pre-order', () => `/${locale.value}/top/pre-order`)
3838
.with('current-day-sales', () => `/${locale.value}/top/current-day-sales`)
39+
.with('event', () => `/${locale.value}/top/event`)
3940

4041
// set sponsors markdown
4142
m = all.reduce((prev: any, s: Sponsor) => {

‎app/content/ja/top/event.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
Vue Fes Japan 2023 では、セッションやライトニングトーク以外にも、より Vue.js を楽しんでいただくための企画を多数ご用意しています。ぜひお立ち寄りください。<br>
2+
<br>
3+
※画像はすべてイメージです。

‎app/public/event/creative_wall.png

519 KB
Loading

‎app/public/event/hands_on.png

273 KB
Loading

‎app/public/event/refreshment_space.png

404 KB
Loading

‎app/public/event/tattoo_space.png

202 KB
Loading

‎app/utils/constants.ts

+1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ export const navFullLinks = (showTimetable: boolean) =>
1717
{ text: 'Message', link: '/#message' },
1818
{ text: 'Speakers', link: '/#speakers' },
1919
...[showTimetable ? { text: 'Time table', link: '/#timetable' } : undefined],
20+
{ text: 'Events', link: '/#events' },
2021
{ text: 'Ticket', link: '/#ticket' },
2122
{ text: 'Access', link: '/#access' },
2223
{ text: 'Sponsors', link: '/#sponsors' },

‎tests/cypress/e2e/top.cy.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -354,7 +354,7 @@ describe('top', () => {
354354
it('render', () => {
355355
cy.viewport(769, 600)
356356
loadPage()
357-
cy.wait(1500)
357+
cy.wait(2000)
358358
cy.get('.hamburger-menu').should('be.visible').click({ force: true })
359359
cy.get('.mobile-menu')
360360
.should('be.visible')

0 commit comments

Comments
 (0)