From 9227d18970c4b2647e8aca19dc3c0fbb6c591dc8 Mon Sep 17 00:00:00 2001 From: Anton Vakhrushev Date: Fri, 22 Jun 2018 22:49:59 +0300 Subject: [PATCH] Rewrite about page with Vue --- package-lock.json | 15 ------ package.json | 2 - source/_assets/about_me/about.vue | 71 +++++++++++++++++++++++++++ source/_assets/about_me/index.js | 64 ++---------------------- source/_assets/about_me/style.scss | 31 ------------ source/_assets/components/button.scss | 10 +++- source/_assets/predictor/demo.vue | 1 - source/_assets/vars.scss | 2 - source/about/me.html.twig | 12 +---- 9 files changed, 86 insertions(+), 122 deletions(-) create mode 100644 source/_assets/about_me/about.vue delete mode 100644 source/_assets/about_me/style.scss diff --git a/package-lock.json b/package-lock.json index 56fc606..b162363 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 597b52d..8f50821 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/source/_assets/about_me/about.vue b/source/_assets/about_me/about.vue new file mode 100644 index 0000000..38cdd8e --- /dev/null +++ b/source/_assets/about_me/about.vue @@ -0,0 +1,71 @@ + + + + + diff --git a/source/_assets/about_me/index.js b/source/_assets/about_me/index.js index bfef25b..6e0721d 100644 --- a/source/_assets/about_me/index.js +++ b/source/_assets/about_me/index.js @@ -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') }); diff --git a/source/_assets/about_me/style.scss b/source/_assets/about_me/style.scss deleted file mode 100644 index f889104..0000000 --- a/source/_assets/about_me/style.scss +++ /dev/null @@ -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; - } -} diff --git a/source/_assets/components/button.scss b/source/_assets/components/button.scss index ba85310..dd60ca7 100644 --- a/source/_assets/components/button.scss +++ b/source/_assets/components/button.scss @@ -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%); + } } diff --git a/source/_assets/predictor/demo.vue b/source/_assets/predictor/demo.vue index d61066b..7f08db2 100644 --- a/source/_assets/predictor/demo.vue +++ b/source/_assets/predictor/demo.vue @@ -80,7 +80,6 @@ export default {