Skip to content

Commit 995682f

Browse files
dblodorndblodorn
committed
made little todo app
1 parent 5c68bc2 commit 995682f

14 files changed

+552
-48
lines changed

‎assets/fonts.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
@font-face {
2-
font-family: 'FFF Regular';
2+
font-family: 'fff-regular';
33
src: url('fonts/fff-Regular_gdi.woff');
44
}
55
@font-face {
6-
font-family: 'FFF Italic';
6+
font-family: 'fff-italic';
77
src: url('fonts/fff-RegularItalic_gdi.woff');
88
}

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
"dependencies": {
1010
"axios": "^0.19.2",
1111
"bowser": "^2.4.0",
12+
"chroma-js": "^2.1.0",
1213
"lodash": "^4.17.11",
1314
"vue": "^2.6.10",
1415
"vue-router": "^3.0.3",

‎src/App.vue

-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ const DEFAULT_TRANSITION = 'fade'
2222
2323
const Main = styled.main`
2424
width: 100%;
25-
padding: 2rem;
2625
`
2726
2827
export default {

‎src/components/Header.vue

+19-10
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,46 @@
11
<template>
22
<HeaderWrapper class="slideInDown animated show">
3-
<p>VUE / MIRAGE BOILERPLATE</p>
3+
<TitleWrapper>
4+
<H1>Vue.js / Mirage.js CRUD App Boilerplate</H1>
5+
</TitleWrapper>
46
</HeaderWrapper>
57
</template>
68

79
<script>
810
import { mapState } from 'vuex'
911
import styled from 'vue-styled-components'
12+
import { H1 } from '@/styles/components'
13+
import { colors, shared, spacing } from '@/styles/theme'
14+
15+
const TitleWrapper = styled.div`
16+
display: flex;
17+
height: ${shared.nav_height};
18+
align-items: center;
19+
padding: 0 ${spacing.single_pad};
20+
* {
21+
color: ${colors.white};
22+
}
23+
`
1024
1125
const HeaderWrapper = styled.main`
1226
width: 100%;
13-
padding: 2rem;
1427
position: sticky;
1528
top: 0;
1629
display: flex;
1730
flex-direction: row;
18-
justify-content: cener;
19-
background-color: white;
31+
background-color: #fa2b00;
2032
z-index: 100;
2133
visibility: hidden;
2234
&.show {
2335
visibility: visible;
2436
}
25-
nav {
26-
width: 100%;
27-
text-align: center;
28-
font-size: 3rem;
29-
}
3037
`
3138
3239
export default {
3340
components: {
34-
HeaderWrapper
41+
HeaderWrapper,
42+
H1,
43+
TitleWrapper
3544
}
3645
}
3746
</script>

‎src/main.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@ WebFont.load({
1919
},
2020
custom: {
2121
families: [
22-
'FFF Regular',
23-
'FFF Italic'
22+
'fff-regular',
23+
'fff-italic'
2424
],
2525
urls: ['/assets/fonts.css']
2626
},

‎src/server.js

+26-9
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,43 @@
1-
import { Server, Model, baseConfig } from 'miragejs'
1+
import { Server, Model } from 'miragejs'
22

33
export function makeServer ({ environment = 'development' } = {}) {
44
let server = new Server({
55
environment,
66
models: {
7-
user: Model
7+
todos: Model
88
},
99
seeds (server) {
10-
server.create('user', { name: 'Bob' })
11-
server.create('user', { name: 'Alice' })
10+
server.create('todo', { todo_item: 'Get Up' })
11+
server.create('todo', { todo_item: 'Take A Shower' })
12+
server.create('todo', { todo_item: 'Go To Work' })
1213
},
1314
routes () {
14-
// this.urlPrefix = 'http://localhost:8081'
1515
this.namespace = 'api'
1616

17-
this.get('/users', schema => {
18-
return schema.users.all()
17+
this.get('/todos', schema => {
18+
return schema.todos.all()
1919
})
2020

21-
this.get('/users/:id', (schema, request) => {
21+
this.get('/todos/:id', (schema, request) => {
2222
let id = request.params.id
23-
return schema.users.find(id)
23+
return schema.todos.find(id)
24+
})
25+
26+
this.post('/todos', (schema, request) => {
27+
let todo_item = JSON.parse(request.requestBody).todo_item
28+
console.log(request, schema)
29+
return schema.todos.create({ todo_item })
30+
})
31+
32+
this.del('/todos/:id', (schema, request) => {
33+
let id = request.params.id
34+
schema.todos.find(id).destroy()
35+
})
36+
37+
this.patch('/todos/:id', (schema, request) => {
38+
let id = request.params.id
39+
let newTodo = JSON.parse(request.requestBody).todo_item
40+
schema.todos.find(id).update({ todo_item: newTodo })
2441
})
2542
}
2643
})

‎src/styles/components.js

+34-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,39 @@
11
import styled from 'vue-styled-components'
2-
// import * as _ from './mixins'
2+
import * as _ from './mixins'
3+
import { colors, spacing } from './theme'
34

45
export const StyledTitle = styled.h1`
56
font-size: 2rem;
7+
padding-bottom: 1rem;
8+
`
9+
10+
export const H1 = styled.h1`
11+
${_.mediumType};
12+
color: ${colors.blue};
13+
`
14+
15+
export const H1Big = styled.h1`
16+
${_.bigType};
17+
color: ${colors.black};
18+
`
19+
20+
export const H2 = styled.h2`
21+
${_.smallType};
22+
${_.media.small`
23+
width: 100%;
24+
text-align: center;
25+
`}
26+
`
27+
28+
export const H2Big = styled.h2`
29+
${_.mediumType};
30+
`
31+
32+
export const P = styled.p`
33+
${_.mediumType};
34+
padding-bottom: ${spacing.single_pad};
35+
padding-right: ${spacing.double_pad};
36+
&:last-child {
37+
padding-bottom: 0;
38+
}
639
`

‎src/styles/global-styles.js

+22-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,29 @@
11
import { injectGlobal } from 'vue-styled-components'
2+
import * as _ from './mixins'
3+
import { spacing, colors } from './theme'
24

35
injectGlobal`
46
body,
57
h1 {
6-
font-family: 'FFF Regular', arial, sans-serif;
7-
color: black;
8+
font-family: 'fff-regular', arial, sans-serif;
9+
}
10+
button {
11+
${_.buttonStyle};
12+
}
13+
input[type="text"] {
14+
${_.buttonInit};
15+
background-color: white;
16+
height: 3rem;
17+
padding: 0 1rem;
18+
margin-right: ${spacing.single_pad};
19+
font-size: 1.25rem;
20+
border: 1px dashed ${colors.black};
21+
display: block;
22+
white-space: nowrap;
23+
border-radius: 6px;
24+
width: 100%;
25+
max-width: 75rem;
26+
overflow-x: scroll;
27+
font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
828
}
929
`

‎src/styles/mixins.js

+146-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { css } from 'vue-styled-components'
2-
import { breakpoints } from './theme'
2+
import { breakpoints, fonts, colors } from './theme'
3+
import chroma from 'chroma-js'
34

45
// Media Queries
56
export const media = {
@@ -39,3 +40,147 @@ export const media = {
3940
}
4041
`
4142
}
43+
44+
// FLEX LAYOUT
45+
export const flexColumn = css`
46+
display: flex;
47+
flex-direction: column;
48+
`
49+
export const flexColumnCentered = css`
50+
${flexColumn};
51+
align-items: center;
52+
`
53+
54+
export const flexRow = css`
55+
display: flex;
56+
flex-direction: row;
57+
`
58+
59+
export const flexRowWrap = css`
60+
${flexRow};
61+
flex-wrap: wrap;
62+
`
63+
64+
export const flexRowCenteredVert = css`
65+
${flexRow};
66+
align-items: center;
67+
`
68+
69+
export const flexRowCenteredAll = css`
70+
${flexRowCenteredVert};
71+
justify-content: center;
72+
`
73+
74+
export const flexRowSpaceBetween = css`
75+
${flexRow};
76+
justify-content: space-between;
77+
`
78+
79+
// TYPOGRAPHY
80+
export const sansFont = css`
81+
font-family: ${fonts.sans};
82+
font-weight: 700;
83+
text-transform: lowercase;
84+
`
85+
86+
export const bigType = css`
87+
font-size: ${fonts.sizes.lg};
88+
font-family: ${fonts.sans};
89+
line-height: 1.1;
90+
font-weight: bold;
91+
word-spacing: .5vmin;
92+
letter-spacing: .125vmin;
93+
margin-bottom: 3vmin;
94+
display: block;
95+
position: relative;
96+
${media.small`
97+
font-size: 3.5rem;
98+
margin: 3.5rem 0;
99+
`}
100+
`
101+
102+
export const lgBodyCopy = css`
103+
font-size: ${fonts.sizes.med_lg};
104+
font-family: ${fonts.sans};
105+
font-weight: 500;
106+
line-height: 1.35;
107+
`
108+
109+
export const mediumType = css`
110+
font-size: ${fonts.sizes.med};
111+
font-family: ${fonts.sans};
112+
font-weight: 500;
113+
line-height: 1.45;
114+
`
115+
116+
export const smallType = css`
117+
font-size: ${fonts.sizes.sm};
118+
font-family: ${fonts.sans};
119+
line-height: .8;
120+
`
121+
122+
export const microType = css`
123+
font-size: ${fonts.sizes.micro};
124+
font-family: ${fonts.sans};
125+
line-height: .8;
126+
letter-spacing: 1px;
127+
word-spacing: 2px;
128+
font-weight: 400;
129+
`
130+
131+
export const linkInit = css`
132+
-webkit-tap-highlight-color: rgba(255,255,255,0);
133+
-webkit-appearance: none;
134+
border: 0;
135+
background-color: rgba(255,255,255,0);
136+
text-decoration: none;
137+
position: relative;
138+
display: block;
139+
cursor: pointer;
140+
&:hover {
141+
text-decoration: none;
142+
}
143+
`
144+
145+
export const buttonInit = css`
146+
${linkInit};
147+
border-radius: 0;
148+
appearance: none;
149+
`
150+
151+
export const buttonStyle = css`
152+
${buttonInit};
153+
${microType};
154+
${flexRowCenteredAll};
155+
color: ${colors.white};
156+
text-transform: uppercase;
157+
height: 3rem;
158+
background-color: ${chroma(colors.blue).darken(0.2)};
159+
color: ${colors.white};
160+
border-radius: 1.5rem;
161+
will-change: background-color;
162+
transition: background-color 250ms ease;
163+
width: 10.5rem;
164+
text-decoration: none;
165+
span {
166+
padding-top: 2px;
167+
}
168+
&:hover {
169+
background-color: ${chroma(colors.blue).darken(1.5)};
170+
}
171+
&.active {
172+
background-color: ${chroma(colors.blue).darken(0.5)};
173+
}
174+
${media.small`
175+
background-color: ${chroma(colors.blue).darken(1.125)};
176+
width: auto;
177+
min-width: 10rem;
178+
padding: 0 1.5rem;
179+
span {
180+
padding-top: 2px;
181+
}
182+
&.active {
183+
background-color: ${chroma(colors.blue).darken(1.5)};
184+
}
185+
`}
186+
`

0 commit comments

Comments
 (0)