Rewrite about page with Vue
This commit is contained in:
parent
f0c83831db
commit
9227d18970
15
package-lock.json
generated
15
package-lock.json
generated
@ -1641,15 +1641,6 @@
|
||||
"integrity": "sha512-5Hlm13BJVAioCHpImtFqNOF2H3ieTOHd0fmFGMxOJ9jgeFqeAwsv3u5P5cR7CSeFrkgHsT19DgFJkHV0/Mcd8g==",
|
||||
"dev": true
|
||||
},
|
||||
"backbone": {
|
||||
"version": "1.3.3",
|
||||
"resolved": "https://registry.npmjs.org/backbone/-/backbone-1.3.3.tgz",
|
||||
"integrity": "sha1-TMgOp8sWMaxHSInOQPL4vGg7KZk=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"underscore": ">=1.8.3"
|
||||
}
|
||||
},
|
||||
"balanced-match": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
|
||||
@ -5785,12 +5776,6 @@
|
||||
"is-object": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"jquery": {
|
||||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz",
|
||||
"integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg==",
|
||||
"dev": true
|
||||
},
|
||||
"js-base64": {
|
||||
"version": "2.4.0",
|
||||
"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.0.tgz",
|
||||
|
||||
@ -8,9 +8,7 @@
|
||||
"babel-core": "^6.26.3",
|
||||
"babel-loader": "^7.1.4",
|
||||
"babel-preset-env": "^1.6.1",
|
||||
"backbone": "^1.3.3",
|
||||
"css-loader": "^0.28.11",
|
||||
"jquery": "^3.3.1",
|
||||
"node-sass": "^4.9.0",
|
||||
"predictor": "git+https://github.com/anwinged/predictor.git",
|
||||
"prettier": "^1.12.1",
|
||||
|
||||
71
source/_assets/about_me/about.vue
Normal file
71
source/_assets/about_me/about.vue
Normal file
@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<section class="app">
|
||||
<p class="note">{{ fact }}</p>
|
||||
<button @click.prevent="next" class="button-next">Узнать чуть лучше</button>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _ from 'underscore';
|
||||
import Metrika from '../common/metrika';
|
||||
|
||||
const NOTES = [
|
||||
'Люблю фильм "Три идиота".',
|
||||
'Люблю кататься на велосипеде.',
|
||||
'Люблю читать фантастические книги.',
|
||||
'Люблю шоколад.',
|
||||
'На день рождения ко мне можно прийти без подарка.',
|
||||
'Не люблю пьяных людей.',
|
||||
'Предпочитаю ходить в кино на 2D-сеансы.',
|
||||
'Проехал на велосипеде 200 километров за день.',
|
||||
'Работаю программистом.',
|
||||
'Хотел бы побывать в горах.',
|
||||
];
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
notes: NOTES,
|
||||
shown: [],
|
||||
fact: '',
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.pick();
|
||||
},
|
||||
methods: {
|
||||
next() {
|
||||
this.pick();
|
||||
Metrika.hit(location.href);
|
||||
},
|
||||
pick() {
|
||||
let available = _.difference(this.notes, this.shown);
|
||||
if (_.size(available) === 0) {
|
||||
available = this.notes;
|
||||
this.shown = [];
|
||||
}
|
||||
const fact = _.sample(available);
|
||||
this.shown.push(fact);
|
||||
this.fact = fact;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../components/button';
|
||||
.app {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.note {
|
||||
display: block;
|
||||
font-size: 160%;
|
||||
margin: 2em auto;
|
||||
min-height: 3em;
|
||||
}
|
||||
|
||||
.button-next {
|
||||
@extend %button;
|
||||
}
|
||||
</style>
|
||||
@ -1,61 +1,7 @@
|
||||
import $ from 'jquery';
|
||||
import _ from 'underscore';
|
||||
import Backbone from 'backbone';
|
||||
import Metrika from '../common/metrika';
|
||||
import './style.scss';
|
||||
import Vue from 'vue';
|
||||
import About from './about.vue';
|
||||
|
||||
const PageView = Backbone.View.extend({
|
||||
notes: [
|
||||
'Люблю фильм "Три идиота".',
|
||||
'Люблю кататься на велосипеде.',
|
||||
'Люблю читать фантастические книги.',
|
||||
'Люблю шоколад.',
|
||||
'На день рождения ко мне можно прийти без подарка.',
|
||||
'Не люблю пьяных людей.',
|
||||
'Предпочитаю ходить в кино на 2D-сеансы.',
|
||||
'Проехал на велосипеде 200 километров за день.',
|
||||
'Работаю программистом.',
|
||||
'Хотел бы побывать в горах.',
|
||||
],
|
||||
|
||||
shown: [],
|
||||
|
||||
events: {
|
||||
'click #know-better': 'onClickKnowBetter',
|
||||
},
|
||||
|
||||
initialize() {
|
||||
this.render();
|
||||
},
|
||||
|
||||
render() {
|
||||
this.showRandomFact();
|
||||
return this;
|
||||
},
|
||||
|
||||
pickRandomFact() {
|
||||
let available = _.difference(this.notes, this.shown);
|
||||
if (_.size(available) === 0) {
|
||||
available = this.notes;
|
||||
this.shown = [];
|
||||
}
|
||||
|
||||
const phrase = _.sample(available);
|
||||
this.shown.push(phrase);
|
||||
|
||||
return phrase;
|
||||
},
|
||||
|
||||
showRandomFact() {
|
||||
const fact = this.pickRandomFact();
|
||||
this.$('#about-me-note').text(fact);
|
||||
},
|
||||
|
||||
onClickKnowBetter(evt) {
|
||||
evt.preventDefault();
|
||||
this.showRandomFact();
|
||||
Metrika.hit(location.href);
|
||||
},
|
||||
new Vue({
|
||||
el: '#app',
|
||||
render: h => h(About),
|
||||
});
|
||||
|
||||
new PageView({ el: $('.js-about-me') });
|
||||
|
||||
@ -1,31 +0,0 @@
|
||||
.about-me {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&__content {
|
||||
margin-top: 4em;
|
||||
}
|
||||
|
||||
&__note {
|
||||
text-align: center;
|
||||
font-size: 160%;
|
||||
max-width: 400px;
|
||||
min-height: 3em;
|
||||
}
|
||||
|
||||
&__links {
|
||||
padding: 0;
|
||||
margin-top: 2.5em;
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__link {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&__link + &__link {
|
||||
margin-left: 1em;
|
||||
}
|
||||
}
|
||||
@ -1,12 +1,20 @@
|
||||
@import '../vars';
|
||||
|
||||
$button-border-radius: 0.5em;
|
||||
$button-background-color: #405480;
|
||||
|
||||
%button {
|
||||
display: inline-block;
|
||||
color: #fff;
|
||||
background-color: #405480;
|
||||
background-color: $button-background-color;
|
||||
padding: 0.6em 1.2em;
|
||||
border: none;
|
||||
font-size: 100%;
|
||||
font-family: inherit;
|
||||
border-radius: $button-border-radius;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: darken($button-background-color, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
@ -80,7 +80,6 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../vars.scss';
|
||||
@import '../components/button';
|
||||
|
||||
.app {
|
||||
|
||||
@ -9,5 +9,3 @@ $preferred-width: 700px;
|
||||
$first-media-step: $preferred-width - 1px;
|
||||
|
||||
$mobile-margin: 0.8em;
|
||||
|
||||
$button-border-radius: 0.5em;
|
||||
|
||||
@ -9,16 +9,6 @@ title: Обо мне
|
||||
|
||||
{% block content %}
|
||||
|
||||
<section class="about-me js-about-me">
|
||||
<div class="about-me__content">
|
||||
|
||||
<p class="about-me__note" id="about-me-note"></p>
|
||||
|
||||
<p class="about-me__links">
|
||||
<a id="know-better" href="#">Узнать чуть лучше</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<div id="app"></div>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user