Skip to content

Commit 76757a1

Browse files
m5om5o
committed
add flip book component
* setup parcel-bundler with vue.js * `npm init -y` * `npm install parcel-bundler` * add Vue.js FlipBook Component * refactor html markup
1 parent a1540c2 commit 76757a1

14 files changed

+7191
-25
lines changed

‎.gitignore

+5
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
# jekyll
12
_site
23
.sass-cache
34
.jekyll-metadata
5+
6+
# vue.js
7+
node_modules
8+
.cache

‎Gemfile

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
source "https://rubygems.org"
22

3-
gem 'github-pages'
3+
gem 'github-pages', group: :jekyll_plugins

‎README.md

+25
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,28 @@
11
# Homepage
22

33
The homepage of Vue on Rails
4+
5+
## Development
6+
7+
### Jekyll
8+
9+
```
10+
$ bundle install
11+
$ jekyll serve
12+
```
13+
14+
### Vue.js component
15+
16+
```
17+
$ npm run dev
18+
```
19+
20+
## Production
21+
22+
[GitHub Pages](https://pages.github.com/) will automatically build the homepage.
23+
The `vue.js` component has to be built manually, if changes where made:
24+
25+
```
26+
$ npm run build
27+
# commit changes in _js/ and assets/js
28+
```

‎_js/FlipBook.vue

+100
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<template>
2+
<div>
3+
<div class="book-container">
4+
<div class="book-item book-style-vueonrails" v-bind:class="classObject" v-on:click="flipBook">
5+
<div class="book-front">
6+
<div class="book-cover-back"></div>
7+
<div class="book-cover">
8+
<div class="book-cover-content">
9+
<h2 class="font-weight-light display-5">Vue on Rails</h2>
10+
<hr class="w-25">
11+
<span class="font-weight-light small">Discover how to build delightful web app using Vue.js and Ruby on Rails</span>
12+
</div>
13+
</div>
14+
</div>
15+
<div class="book-page">
16+
<div class="book-content book-content-current">
17+
<div class="logo d-flex justify-content-center mx-auto mb-3">
18+
<div class="logo-text align-self-center">VR</div>
19+
</div>
20+
<p class="lead">
21+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
22+
</p>
23+
</div>
24+
</div>
25+
<div class="book-back">
26+
<div class="bg-light py-3 mt-5">
27+
<div class="logo d-flex justify-content-center mx-auto">
28+
<div class="logo-text align-self-center">VR</div>
29+
</div>
30+
</div>
31+
<p class="text-center text-light small py-4 px-4">
32+
Explain the concept of Rails first &amp; Vue first-class approach
33+
<i class="text-dark mx-1">&bull;</i> Build some real-world applications with Vue on Rails
34+
<i class="text-dark mx-1">&bull;</i> Scaffold a Vue component and get up to speed quickly
35+
<i class="text-dark mx-1">&bull;</i> Explore different ways to deploy Vue Component
36+
<i class="text-dark mx-1">&bull;</i> Make frustration-free configuration for Vue on Rails
37+
<i class="text-dark mx-1">&bull;</i> Learn enough Vue to be dangerous
38+
<i class="text-dark mx-1">&bull;</i> Deploying &amp; Testing
39+
</p>
40+
</div>
41+
<div class="book-right"></div>
42+
<div class="book-left">
43+
<div class="book-left-content">
44+
<div class="d-flex justify-content-between align-items-center h-100 px-3">
45+
<span class="text-dark font-weight-bold">Vue on Rails</span>
46+
<span class="text-light text-right small">
47+
<span class="mr-2">With <i class="fas fa-heart text-danger"></i> by</span>
48+
Richard LaFranchi &amp; Bryan Lim
49+
</span>
50+
</div>
51+
</div>
52+
</div>
53+
<div class="book-top"></div>
54+
<div class="book-bottom"></div>
55+
</div>
56+
</div>
57+
58+
<div class="mt-4" v-if="isDebug">
59+
<button class="btn" v-on:click="flipBook">Flip</button>
60+
<button class="btn" v-on:click="openBook">Inside</button>
61+
</div>
62+
63+
</div>
64+
</template>
65+
66+
<script>
67+
export default {
68+
name: 'Book',
69+
data() {
70+
return {
71+
isDebug: false,
72+
viewCover: true,
73+
viewBack: false,
74+
viewInside: false
75+
};
76+
},
77+
computed: {
78+
classObject: function() {
79+
return {
80+
'book-view-cover': this.viewCover && !this.viewInside,
81+
'book-view-back': this.viewBack,
82+
'book-view-inside': this.viewInside
83+
}
84+
}
85+
},
86+
methods: {
87+
flipBook: function() {
88+
this.viewCover = !this.viewCover
89+
this.viewBack = !this.viewBack
90+
this.viewInside = false
91+
},
92+
openBook: function() {
93+
if ( this.viewBack ) {
94+
this.flipBook()
95+
}
96+
this.viewInside = !this.viewInside
97+
}
98+
}
99+
};
100+
</script>

‎_js/vue.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import Vue from 'vue'
2+
import FlipBook from './FlipBook'
3+
4+
new Vue({
5+
el: '[data-vuejs="app"]',
6+
components: { VueonrailsBook: FlipBook }
7+
})

‎_layouts/default.html

+6-2
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,11 @@
1717
<body>
1818
{{ content }}
1919

20-
{% include js_getclicky.html %}
21-
{% include js_getdrip.html %}
20+
{%- if jekyll.environment == "production" -%}
21+
{% include js_getclicky.html %}
22+
{% include js_getdrip.html %}
23+
{%- endif -%}
24+
25+
<script src="{{ '/assets/js/vue.js' | relative_url }}"></script>
2226
</body>
2327
</html>

‎_sass/_custom.scss

-9
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,6 @@ body {
55
padding-top: 3rem;
66
}
77

8-
.vuejs-book {
9-
border-top: .75rem solid #f9c301;
10-
width: 22rem;
11-
height: 30rem;
12-
background: #1a1a1a;
13-
padding: 1.25rem;
14-
padding-top: 5rem;
15-
}
16-
178
.section-teaser {
189
background-color: #a60202;
1910
background: url("#{ $baseurl }/assets/img/bg-pattern.png"), linear-gradient(to left, #ad0303, #34495e, #48b081);

‎_sass/_form_floating_labels.scss

+1
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
margin-bottom: 0; /* Override default `<label>` margin */
2222
line-height: 1.5;
2323
color: #495057;
24+
pointer-events: none;
2425
cursor: text; /* Match the input under the label */
2526
border: 1px solid transparent;
2627
border-radius: .25rem;

0 commit comments

Comments
 (0)