Skip to content

Commit dbb2157

Browse files
luventaluventa
committed
update: #139 bulma 0.3.1
1 parent 8ce8761 commit dbb2157

File tree

5 files changed

+136
-118
lines changed

5 files changed

+136
-118
lines changed

‎client/App.vue‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,10 @@ export default {
6565
$fa-font-path: '~font-awesome/fonts/';
6666
@import '~font-awesome/scss/font-awesome';
6767
68+
html {
69+
background-color: whitesmoke;
70+
}
71+
6872
.nprogress-container {
6973
position: fixed !important;
7074
width: 100%;

‎client/views/components/Quill.vue‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
<template>
22
<div class="box">
3-
<h3 class="title">
4-
Your powerful, rich text editor.
5-
<a href="http://quilljs.com">http://quilljs.com</a>
6-
</h3>
3+
<h1 class="title">Your powerful, rich text editor.</h1>
4+
<h2 class="subtitle"><a href="http://quilljs.com">http://quilljs.com</a></h2>
75
<quill :options="{ theme: 'snow' }">
86
<h2>One Ring to Rule Them All</h2>
97
<p><a href="http://en.wikipedia.org/wiki/One_Ring">http://en.wikipedia.org/wiki/One_Ring</a></p>

‎client/views/ui/Form.vue‎

Lines changed: 126 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div>
33
<div class="tile is-ancestor">
4-
<div class="tile is-parent is-2">
4+
<div class="tile is-parent is-4">
55
<article class="tile is-child box">
66
<h1 class="title">Controls</h1>
77
<div class="block">
@@ -12,13 +12,17 @@
1212
<label class="label">Username</label>
1313
<p class="control has-icon has-icon-right">
1414
<input class="input is-success" type="text" placeholder="Text input" value="bulma">
15-
<i class="fa fa-check"></i>
15+
<span class="icon is-small">
16+
<i class="fa fa-check"></i>
17+
</span>
1618
<span class="help is-success">This username is available</span>
1719
</p>
1820
<label class="label">Email</label>
1921
<p class="control has-icon has-icon-right">
2022
<input class="input is-danger" type="text" placeholder="Email input" value="hello@">
21-
<i class="fa fa-warning"></i>
23+
<span class="icon is-small">
24+
<i class="fa fa-warning"></i>
25+
</span>
2226
<span class="help is-danger">This email is invalid</span>
2327
</p>
2428
<label class="label">Subject</label>
@@ -58,7 +62,7 @@
5862
</article>
5963
</div>
6064

61-
<div class="tile is-parent is-2">
65+
<div class="tile is-parent is-5 is-vertical">
6266
<article class="tile is-child box">
6367
<h1 class="title">Colors</h1>
6468
<div class="block">
@@ -79,9 +83,6 @@
7983
</p>
8084
</div>
8185
</article>
82-
</div>
83-
84-
<div class="tile is-parent is-2">
8586
<article class="tile is-child box">
8687
<h1 class="title">Sizes</h1>
8788
<div class="block">
@@ -101,7 +102,7 @@
101102
</article>
102103
</div>
103104

104-
<div class="tile is-parent is-3">
105+
<div class="tile is-parent">
105106
<article class="tile is-child box">
106107
<h1 class="title">States</h1>
107108
<div class="block">
@@ -144,18 +145,26 @@
144145
</div>
145146
</article>
146147
</div>
148+
</div>
149+
150+
<div class="tile is-ancestor">
147151

148152
<div class="tile is-parent is-3">
149153
<article class="tile is-child box">
150-
<h1 class="title">With Font Awesome icons</h1>
154+
<h1 class="title">With Icon</h1>
155+
<h2 class="subtitle"><a href="http://fontawesome.io/">Font Awesome Icons</a></h2>
151156
<div class="block">
152157
<p class="control has-icon">
153158
<input class="input" type="email" placeholder="Email">
154-
<i class="fa fa-envelope"></i>
159+
<span class="icon is-small">
160+
<i class="fa fa-envelope"></i>
161+
</span>
155162
</p>
156163
<p class="control has-icon">
157164
<input class="input" type="password" placeholder="Password">
158-
<i class="fa fa-lock"></i>
165+
<span class="icon is-small">
166+
<i class="fa fa-lock"></i>
167+
</span>
159168
</p>
160169
<p class="control">
161170
<button class="button is-success">
@@ -165,82 +174,114 @@
165174
</div>
166175
</article>
167176
</div>
168-
</div>
169177

170-
<div class="tile is-ancestor">
171178
<div class="tile is-parent">
172179
<article class="tile is-child box">
173-
<h1 class="title">Addons</h1>
180+
<h1 class="title">Cleave.js</h1>
181+
<h2 class="subtitle">Format your &lt;input/&gt; content when you are typing</h2>
174182
<div class="columns">
175183
<div class="column">
176-
<p class="control has-addons">
177-
<input class="input" type="text" placeholder="Find a repository">
178-
<a class="button is-info">Search</a>
179-
</p>
180-
</div>
181-
<div class="column">
182-
<p class="control has-addons">
183-
<span class="select">
184-
<select>
185-
<option>$</option>
186-
<option>£</option>
187-
<option>€</option>
188-
</select>
189-
</span>
190-
<input class="input is-expanded" type="text" placeholder="Amount of money">
191-
<a class="button is-success">
192-
Transfer
193-
</a>
194-
</p>
195-
</div>
196-
<div class="column">
197-
<p class="control has-addons has-addons-centered">
198-
<span class="select">
199-
<select>
200-
<option>$</option>
201-
<option>£</option>
202-
<option>€</option>
203-
</select>
204-
</span>
205-
<input class="input" type="text" placeholder="Amount of money">
206-
<a class="button is-success">
207-
Transfer
208-
</a>
209-
</p>
184+
<div class="control">
185+
<label class="label">Credit card number</label>
186+
<cleave class="input" placeholder="Enter credit card number" :options="{ creditCard: true }"></cleave>
187+
</div>
188+
<div class="control">
189+
<label class="label">Phone number</label>
190+
<cleave class="input" type="tel" placeholder="Enter phone number" :options="{ phone: true, phoneRegionCode: 'cn' }"></cleave>
191+
</div>
192+
<div class="control">
193+
<label class="label">Numeral</label>
194+
<cleave class="input" placeholder="Enter numeral" :options="{ numeral: true, numeralThousandsGroupStyle: 'thousand' }"></cleave>
195+
</div>
210196
</div>
211197
<div class="column">
212-
<p class="control has-addons has-addons-right">
213-
<span class="select">
214-
<select>
215-
<option>$</option>
216-
<option>£</option>
217-
<option>€</option>
218-
</select>
219-
</span>
220-
<input class="input" type="text" placeholder="Amount of money">
221-
<a class="button is-success">
222-
Transfer
223-
</a>
224-
</p>
198+
<div class="control">
199+
<label class="label">Date</label>
200+
<cleave class="input" placeholder="YYYY/MM/DD" :value="'20160901'" :options="{ date: true, datePattern: ['Y', 'm', 'd'] }"></cleave>
201+
</div>
202+
<div class="control">
203+
<cleave class="input" placeholder="MM/YY" :options="{ date: true, datePattern: ['m', 'y'] }"></cleave>
204+
</div>
225205
</div>
226206
<div class="column">
227-
<div class="control is-grouped">
228-
<p class="control is-expanded">
229-
<input class="input" type="text" placeholder="Find a repository">
230-
</p>
231-
<p class="control">
232-
<a class="button is-info">
233-
Search
234-
</a>
235-
</p>
207+
<div class="control">
208+
<label class="label">Custom options</label>
209+
<cleave class="input" placeholder="Blocks: [4, 3, 3, 4]" :options="{ blocks: [4, 3, 3, 4], uppercase: true }"></cleave>
210+
</div>
211+
<div class="control">
212+
<cleave class="input" placeholder="Delimiter: '·'" :options="{ delimiter: '·', blocks: [3, 3, 3, 3], uppercase: true }"></cleave>
213+
</div>
214+
<div class="control">
215+
<cleave class="input" :options="{ prefix: 'PREFIX', delimiter: '-', blocks: [6, 4, 4, 4], uppercase: true }"></cleave>
236216
</div>
237217
</div>
238218
</div>
239219
</article>
240220
</div>
221+
241222
</div>
242223

243224
<div class="tile is-ancestor">
225+
<div class="tile is-parent">
226+
<article class="tile is-child box">
227+
<h1 class="title">Addons</h1>
228+
<div class="block">
229+
<p class="control has-addons">
230+
<input class="input" type="text" placeholder="Find a repository">
231+
<a class="button is-info">Search</a>
232+
</p>
233+
<p class="control has-addons">
234+
<span class="select">
235+
<select>
236+
<option>$</option>
237+
<option>£</option>
238+
<option>€</option>
239+
</select>
240+
</span>
241+
<input class="input is-expanded" type="text" placeholder="Expanded">
242+
<a class="button is-success">
243+
Transfer
244+
</a>
245+
</p>
246+
<p class="control has-addons has-addons-centered">
247+
<span class="select">
248+
<select>
249+
<option>$</option>
250+
<option>£</option>
251+
<option>€</option>
252+
</select>
253+
</span>
254+
<input class="input" type="text" placeholder="Centered">
255+
<a class="button is-success">
256+
Transfer
257+
</a>
258+
</p>
259+
<p class="control has-addons has-addons-right">
260+
<span class="select">
261+
<select>
262+
<option>$</option>
263+
<option>£</option>
264+
<option>€</option>
265+
</select>
266+
</span>
267+
<input class="input" type="text" placeholder="Pull right">
268+
<a class="button is-success">
269+
Transfer
270+
</a>
271+
</p>
272+
<div class="control is-grouped">
273+
<p class="control is-expanded">
274+
<input class="input" type="text" placeholder="Expanded and Grouped">
275+
</p>
276+
<p class="control">
277+
<a class="button is-info">
278+
Search
279+
</a>
280+
</p>
281+
</div>
282+
</div>
283+
</article>
284+
</div>
244285
<div class="tile is-parent">
245286
<article class="tile is-child box">
246287
<h1 class="title">Horizontal form</h1>
@@ -291,45 +332,6 @@
291332
</article>
292333
</div>
293334
</div>
294-
295-
<div class="tile is-ancestor">
296-
<div class="tile is-parent">
297-
<article class="tile is-child box">
298-
<h1 class="title">Cleave.js - Format your &lt;input/&gt; content when you are typing</h1>
299-
<div class="block">
300-
<div class="control">
301-
<label class="label">Credit card number formatting</label>
302-
<cleave class="input" placeholder="Enter credit card number" :options="{ creditCard: true }"></cleave>
303-
</div>
304-
<div class="control">
305-
<label class="label">Phone number formatting</label>
306-
<cleave class="input" type="tel" placeholder="Enter phone number" :options="{ phone: true, phoneRegionCode: 'cn' }"></cleave>
307-
</div>
308-
<div class="control">
309-
<label class="label">Date formatting</label>
310-
<cleave class="input" placeholder="YYYY/MM/DD" :value="'20160901'" :options="{ date: true, datePattern: ['Y', 'm', 'd'] }"></cleave>
311-
</div>
312-
<div class="control">
313-
<cleave class="input" placeholder="MM/YY" :options="{ date: true, datePattern: ['m', 'y'] }"></cleave>
314-
</div>
315-
<div class="control">
316-
<label class="label">Numeral formatting</label>
317-
<cleave class="input" placeholder="Enter numeral" :options="{ numeral: true, numeralThousandsGroupStyle: 'thousand' }"></cleave>
318-
</div>
319-
<div class="control">
320-
<label class="label">Custom options</label>
321-
<cleave class="input" placeholder="Blocks: [4, 3, 3, 4]" :options="{ blocks: [4, 3, 3, 4], uppercase: true }"></cleave>
322-
</div>
323-
<div class="control">
324-
<cleave class="input" placeholder="Delimiter: '·'" :options="{ delimiter: '·', blocks: [3, 3, 3, 3], uppercase: true }"></cleave>
325-
</div>
326-
<div class="control">
327-
<cleave class="input" :options="{ prefix: 'PREFIX', delimiter: '-', blocks: [6, 4, 4, 4], uppercase: true }"></cleave>
328-
</div>
329-
</div>
330-
</article>
331-
</div>
332-
</div>
333335
</div>
334336
</template>
335337

@@ -344,12 +346,26 @@ export default {
344346
}
345347
</script>
346348

347-
<style scoped>
349+
<style lang="scss" scoped>
350+
@import '~bulma/sass/utilities/mixins';
351+
348352
.button {
349353
margin: 5px 0 0;
350354
}
351355
352356
.control .button {
353357
margin: inherit;
354358
}
359+
360+
.control.has-addons {
361+
@include mobile() {
362+
input {
363+
width: 100%;
364+
}
365+
366+
input.is-expanded {
367+
flex-shrink: 1;
368+
}
369+
}
370+
}
355371
</style>

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
"dependencies": {
3636
"animate.css": "3.5.2",
3737
"animejs": "1.1.3",
38-
"bulma": "0.2.3",
38+
"bulma": "0.3.1",
3939
"font-awesome": "4.7.0",
4040
"mdi": "1.7.22",
4141
"plotly.js": "1.21.2",

‎yarn.lock‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1098,9 +1098,9 @@ builtin-status-codes@^3.0.0:
10981098
version "3.0.0"
10991099
resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
11001100

1101-
bulma@0.2.3:
1102-
version "0.2.3"
1103-
resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.2.3.tgz#086394c65e74aa8081e658bdcf6742f81107936e"
1101+
bulma@0.3.1:
1102+
version "0.3.1"
1103+
resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.3.1.tgz#0166be77e7a5f62ede01b0be3f1e77e954978bd2"
11041104

11051105
call-matcher@^1.0.1:
11061106
version "1.0.1"

0 commit comments

Comments
 (0)