Skip to content

Commit daec561

Browse files
atomjaratomjar
committed
Lesson 6 Ending Code
1 parent e73b00a commit daec561

File tree

4 files changed

+327
-19
lines changed

4 files changed

+327
-19
lines changed

‎src/App.vue

+228-17
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,242 @@
11
<template>
22
<div id="app">
3-
<div id="nav">
4-
<router-link :to="{ name: 'event-list' }">List</router-link> |
5-
<router-link :to="{ name: 'event-create' }">Create</router-link>
6-
</div>
3+
<NavBar/>
74
<router-view/>
85
</div>
96
</template>
107

8+
<script>
9+
import NavBar from '@/components/NavBar.vue'
10+
11+
export default {
12+
components: {
13+
NavBar
14+
}
15+
}
16+
</script>
17+
1118
<style>
12-
#app {
13-
font-family: 'Avenir', Helvetica, Arial, sans-serif;
19+
html {
20+
-webkit-text-size-adjust: 100%;
1421
-webkit-font-smoothing: antialiased;
1522
-moz-osx-font-smoothing: grayscale;
16-
text-align: center;
17-
color: #2c3e50;
1823
}
19-
#nav {
20-
padding: 30px;
24+
body {
25+
margin: 0;
26+
font-family: 'Open Sans', sans-serif;
27+
font-size: 16px;
28+
line-height: 1.5;
2129
}
22-
23-
#nav a {
24-
font-weight: bold;
25-
color: #2c3e50;
30+
#app {
31+
box-sizing: border-box;
32+
width: 500px;
33+
padding: 0 20px 20px;
34+
margin: 0 auto;
2635
}
27-
28-
#nav a.router-link-exact-active {
29-
color: #42b983;
36+
hr {
37+
box-sizing: content-box;
38+
height: 0;
39+
overflow: visible;
40+
}
41+
a {
42+
color: #39b982;
43+
font-weight: 600;
44+
background-color: transparent;
45+
}
46+
img {
47+
border-style: none;
48+
width: 100%;
49+
}
50+
h1,
51+
h2,
52+
h3,
53+
h4,
54+
h5,
55+
h6 {
56+
display: flex;
57+
align-items: center;
58+
font-family: 'Montserrat', sans-serif;
59+
}
60+
h1 {
61+
font-size: 50px;
62+
font-weight: 700;
63+
}
64+
h2 {
65+
font-size: 38px;
66+
font-weight: 700;
67+
}
68+
h3 {
69+
font-size: 28px;
70+
font-weight: 700;
71+
}
72+
h4 {
73+
font-size: 21px;
74+
font-weight: 700;
75+
}
76+
h5 {
77+
font-size: 16px;
78+
font-weight: 700;
79+
}
80+
h6 {
81+
font-size: 15px;
82+
font-weight: 700;
83+
}
84+
b,
85+
strong {
86+
font-weight: bolder;
87+
}
88+
small {
89+
font-size: 80%;
90+
}
91+
.eyebrow {
92+
font-size: 20px;
93+
}
94+
.-text-primary {
95+
color: #39b982;
96+
}
97+
.-text-base {
98+
color: #000;
99+
}
100+
.-text-error {
101+
color: tomato;
102+
}
103+
.-text-gray {
104+
color: rgba(0, 0, 0, 0.5);
105+
}
106+
.-shadow {
107+
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.13);
108+
}
109+
.badge {
110+
display: inline-flex;
111+
height: 26px;
112+
width: auto;
113+
padding: 0 7px;
114+
margin: 0 5px;
115+
background: transparent;
116+
border-radius: 13px;
117+
font-size: 13px;
118+
font-weight: 400;
119+
line-height: 26px;
120+
}
121+
.badge.-fill-gradient {
122+
background: linear-gradient(to right, #16c0b0, #84cf6a);
123+
color: #fff;
124+
}
125+
button,
126+
label,
127+
input,
128+
optgroup,
129+
select,
130+
textarea {
131+
display: inline-flex;
132+
font-family: 'Open sans', sans-serif;
133+
font-size: 100%;
134+
line-height: 1.15;
135+
margin: 0;
136+
}
137+
button,
138+
input {
139+
overflow: visible;
140+
}
141+
button,
142+
select {
143+
text-transform: none;
144+
}
145+
button,
146+
[type='button'],
147+
[type='reset'],
148+
[type='submit'] {
149+
-webkit-appearance: none;
150+
}
151+
button::-moz-focus-inner,
152+
[type='button']::-moz-focus-inner,
153+
[type='reset']::-moz-focus-inner,
154+
[type='submit']::-moz-focus-inner {
155+
border-style: none;
156+
padding: 0;
157+
}
158+
button:-moz-focusring,
159+
[type='button']:-moz-focusring,
160+
[type='reset']:-moz-focusring,
161+
[type='submit']:-moz-focusring {
162+
outline: 2px solid #39b982;
163+
}
164+
label {
165+
color: rgba(0, 0, 0, 0.5);
166+
font-weight: 700;
167+
}
168+
input,
169+
textarea {
170+
box-sizing: border-box;
171+
border: solid 1px rgba(0, 0, 0, 0.4);
172+
}
173+
textarea {
174+
width: 100%;
175+
overflow: auto;
176+
font-size: 20px;
177+
}
178+
[type='checkbox'],
179+
[type='radio'] {
180+
box-sizing: border-box;
181+
padding: 0;
182+
}
183+
[type='number']::-webkit-inner-spin-button,
184+
[type='number']::-webkit-outer-spin-button {
185+
height: auto;
186+
}
187+
[type='search'] {
188+
-webkit-appearance: textfield;
189+
outline-offset: -2px;
190+
}
191+
[type='search']::-webkit-search-decoration {
192+
-webkit-appearance: none;
193+
}
194+
[type='text'],
195+
[type='number'],
196+
[type='search'],
197+
[type='password'] {
198+
height: 52px;
199+
width: 100%;
200+
padding: 0 10px;
201+
font-size: 20px;
202+
}
203+
[type='text']:focus,
204+
[type='number']:focus,
205+
[type='search']:focus,
206+
[type='password']:focus {
207+
border-color: #39b982;
208+
}
209+
::-webkit-file-upload-button {
210+
-webkit-appearance: button;
211+
font: inherit;
212+
}
213+
[hidden] {
214+
display: none;
215+
}
216+
select {
217+
width: 100%;
218+
height: 52px;
219+
padding: 0 24px 0 10px;
220+
vertical-align: middle;
221+
background: #fff
222+
url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E")
223+
no-repeat right 12px center;
224+
background-size: 8px 10px;
225+
border: solid 1px rgba(0, 0, 0, 0.4);
226+
border-radius: 0;
227+
-webkit-appearance: none;
228+
-moz-appearance: none;
229+
appearance: none;
230+
}
231+
select:focus {
232+
border-color: #39b982;
233+
outline: 0;
234+
}
235+
select:focus::ms-value {
236+
color: #000;
237+
background: #fff;
238+
}
239+
select::ms-expand {
240+
opacity: 0;
30241
}
31242
</style>

‎src/components/EventCard.vue

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<template>
2+
<router-link class="event-link" :to="{ name: 'event-show', params: { id: '1' } }">
3+
<div class="event-card -shadow">
4+
<span class="eyebrow">@{{ event.time }} on {{ event.date }}</span>
5+
<h4 class="title">{{ event.title }}</h4>
6+
<span>{{ event.attendees.length }} attending</span>
7+
</div>
8+
</router-link>
9+
</template>
10+
11+
<script>
12+
export default {
13+
data() {
14+
return {
15+
event: {
16+
id: 1,
17+
title: 'Beach Cleanup',
18+
date: 'Tues Aug 19, 2018',
19+
time: '6:00',
20+
attendees: [
21+
{ id: 'abc123', name: 'Adam Jahr' },
22+
{ id: 'def456', name: 'Gregg Pollack' }
23+
]
24+
}
25+
}
26+
}
27+
}
28+
</script>
29+
30+
<style scoped>
31+
.event-card {
32+
padding: 20px;
33+
margin-bottom: 24px;
34+
transition: all 0.2s linear;
35+
cursor: pointer;
36+
}
37+
.event-card:hover {
38+
transform: scale(1.01);
39+
box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.2), 0 1px 15px 0 rgba(0, 0, 0, 0.19);
40+
}
41+
.event-card > .title {
42+
margin: 0;
43+
}
44+
.event-link {
45+
color: black;
46+
text-decoration: none;
47+
font-weight: 100;
48+
}
49+
</style>

‎src/components/NavBar.vue

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<template>
2+
<div id="nav" class="nav">
3+
<router-link to="/" class="brand">Real World Events</router-link>
4+
<nav>
5+
<router-link :to="{ name: 'event-list' }">List</router-link> |
6+
<router-link :to="{ name: 'event-create' }">Create</router-link>
7+
</nav>
8+
</div>
9+
</template>
10+
11+
<script>
12+
export default {}
13+
</script>
14+
15+
<style scoped>
16+
.nav {
17+
display: flex;
18+
justify-content: space-between;
19+
align-items: center;
20+
height: 60px;
21+
}
22+
.nav > .brand {
23+
font-family: 'Montserrat', sans-serif;
24+
font-weight: 700;
25+
font-size: 1.5em;
26+
color: #39b982;
27+
text-decoration: none;
28+
}
29+
.nav .nav-item {
30+
box-sizing: border-box;
31+
margin: 0 5px;
32+
color: rgba(0, 0, 0, 0.5);
33+
text-decoration: none;
34+
}
35+
.nav .nav-item.router-link-exact-active {
36+
color: #39b982;
37+
border-bottom: solid 2px #39b982;
38+
}
39+
</style>

‎src/views/EventList.vue

+11-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,16 @@
11
<template>
22
<div>
33
<h1>Events Listing</h1>
4-
5-
<router-link :to="{ name: 'event-show', params: { id: '1' } }">Show Event #1</router-link>
4+
<EventCard/>
65
</div>
76
</template>
7+
8+
<script>
9+
import EventCard from '@/components/EventCard.vue'
10+
11+
export default {
12+
components: {
13+
EventCard
14+
}
15+
}
16+
</script>

0 commit comments

Comments
 (0)