From b16b9c0c30fa414c793ac11f392fd74e05bb2e7d Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Sun, 2 Jun 2019 00:13:00 +0200 Subject: [PATCH 001/141] ES6 spread operator for babel --- .babelrc | 3 ++- package.json | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/.babelrc b/.babelrc index 9897749..ae89f39 100644 --- a/.babelrc +++ b/.babelrc @@ -1,5 +1,6 @@ { "presets": [ ["es2015", { "modules": false }] - ] + ], + "plugins": ["transform-object-rest-spread"] } diff --git a/package.json b/package.json index 0bdc6e4..6db2166 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "dependencies": { "ag-grid-vue": "^17.0.0", "axios": "^0.15.3", + "babel-plugin-transform-object-rest-spread": "^6.26.0", "connect-history-api-fallback": "^1.3.0", "debounce": "^1.0.0", "express": "^4.16.1", From bf517ed4bb5fb497857deb65538fb5ac8ad644ed Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Sun, 2 Jun 2019 00:14:01 +0200 Subject: [PATCH 002/141] Changed dev port --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 6db2166..01069c8 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "author": "Dmytro Barylo", "private": true, "scripts": { - "dev": "cross-env NODE_ENV=development webpack-dev-server --hot --port=5000", + "dev": "cross-env NODE_ENV=development webpack-dev-server --hot", "build": "cross-env NODE_ENV=production webpack --progress --hide-modules", "start": "node server.js" }, From 4f25d3fd9daac8fd0ac0aedf5448943c70e232ab Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Sun, 2 Jun 2019 00:14:45 +0200 Subject: [PATCH 003/141] Upgrader vue, vue-router, babel core and loader, and added vuex --- package.json | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 01069c8..ebcd003 100644 --- a/package.json +++ b/package.json @@ -17,15 +17,16 @@ "debounce": "^1.0.0", "express": "^4.16.1", "numeral": "^2.0.4", - "vue": "^2.1.0", + "vue": "^2.5.2", "vue-axios": "^1.2.2", "vue-data-tablee": "^0.12.1", "vue-js-modal": "^1.3.16", - "vue-router": "^2.2.1" + "vue-router": "^3.0.1", + "vuex": "^3.1.0" }, "devDependencies": { - "babel-core": "^6.0.0", - "babel-loader": "^6.0.0", + "babel-core": "^6.22.1", + "babel-loader": "^7.1.1", "babel-preset-es2015": "^6.0.0", "cross-env": "^3.0.0", "css-loader": "^0.25.0", From cbfd7506a6409eb32d11054c85979659284d07f4 Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Sun, 2 Jun 2019 00:16:37 +0200 Subject: [PATCH 004/141] Updated webpack config to be use inline mode for dev server. This way it wont iframe and we are able to set document title. --- webpack.config.js | 1 + 1 file changed, 1 insertion(+) diff --git a/webpack.config.js b/webpack.config.js index ccf0ea2..1af5d68 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -45,6 +45,7 @@ module.exports = { }, devServer: { historyApiFallback: true, + inline: true, noInfo: true }, performance: { From 7dd82eca2e21f0bd63b912c4cae71c9b61fdbe01 Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Sun, 2 Jun 2019 00:18:24 +0200 Subject: [PATCH 005/141] inline source map for better error line number --- webpack.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webpack.config.js b/webpack.config.js index 1af5d68..05f44ac 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -51,7 +51,7 @@ module.exports = { performance: { hints: false }, - // devtool: '#eval-source-map' + devtool: 'inline-source-map' } if (process.env.NODE_ENV === 'production') { From d11868961680626d6698c3dab4e627031444ea9d Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Sun, 2 Jun 2019 00:19:15 +0200 Subject: [PATCH 006/141] Updated svg icon names --- index.html | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index af6926d..264efa8 100644 --- a/index.html +++ b/index.html @@ -28,8 +28,8 @@ - - icon_requests + + Requests @@ -44,7 +44,7 @@ Upcoming - + Now Playing @@ -105,6 +105,12 @@ Radar + + + Chevron +
From 1add22c7c0cfb96a93cc2413a9be8d40125558b8 Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Sun, 2 Jun 2019 00:19:38 +0200 Subject: [PATCH 007/141] Removed and disable unused scripts --- index.html | 18 ++---------------- 1 file changed, 2 insertions(+), 16 deletions(-) diff --git a/index.html b/index.html index 264efa8..8f8e44c 100644 --- a/index.html +++ b/index.html @@ -115,21 +115,7 @@
- - + - + From 9739e0e00a65d04dff6eaef013ded18e246806c3 Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Sun, 2 Jun 2019 00:21:23 +0200 Subject: [PATCH 008/141] Import new toast plugin to main. No longer inject axios, this was throwing an error --- src/main.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/main.js b/src/main.js index 98ebaa1..2d1771a 100644 --- a/src/main.js +++ b/src/main.js @@ -3,6 +3,7 @@ import VueRouter from 'vue-router' import axios from 'axios' import router from './routes' +import Toast from './plugins/Toast' import DataTablee from 'vue-data-tablee' import VModal from 'vue-js-modal' @@ -10,12 +11,14 @@ import App from './App.vue' window.eventHub = new Vue(); -Vue.use(VueRouter, axios) +Vue.use(VueRouter) +Vue.use(Toast) Vue.use(DataTablee) Vue.use(VModal, { dialog: true }) new Vue({ el: '#app', router, - render: h => h(App) + components: { App }, + template: '' }) From c8dbe02ffccd69a58bc781c611fb8ad07cdc1d8a Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Sun, 2 Jun 2019 00:26:02 +0200 Subject: [PATCH 009/141] Updated all routes to be code async loaded, this could enable setting up code splitting per route --- src/routes.js | 90 +++++++++++++++------------------------------------ 1 file changed, 26 insertions(+), 64 deletions(-) diff --git a/src/routes.js b/src/routes.js index 778fee0..be6a4d2 100644 --- a/src/routes.js +++ b/src/routes.js @@ -1,19 +1,24 @@ +import Vue from 'vue' import VueRouter from 'vue-router'; +Vue.use(VueRouter) + + let routes = [ { name: 'home', path: '/', - components: { - 'list-router-view': require('./components/Home.vue') - } + component: (resolve) => require(['./components/Home.vue'], resolve) }, { - name: 'home-category', - path: '/list/:category', - components: { - 'list-router-view': require('./components/MoviesList.vue') - } + name: 'profile', + path: '/profile', + component: (resolve) => require(['./components/Profile.vue'], resolve) + }, + { + name: 'list', + path: '/list/:name', + component: (resolve) => require(['./components/MoviesList.vue'], resolve) }, { name: 'request', @@ -24,66 +29,18 @@ let routes = [ }, { name: 'search', - path: '/search/:query', - components: { - 'search-router-view': require('./components/MoviesList.vue') - } - }, - { - name: 'user-requests', - path: '/profile/requests', - components: { - 'user-requests-router-view': require('./components/MoviesList.vue') - } - }, - { - name: 'movie', - path: '/movie/:id', - components: { - 'page-router-view': require('./components/MoviePage.vue') - }, - beforeEnter: (to, from, next) => { - if(history.state && history.state.popup && from.name){ - eventHub.$emit('openMoviePopup', to.params.id, 'movie', false); - return; - } - next(); - } - }, - { - name: 'show', - path: '/show/:id', - components: { - 'page-router-view': require('./components/MoviePage.vue') - }, - beforeEnter: (to, from, next) => { - if(history.state && history.state.popup && from.name){ - eventHub.$emit('openMoviePopup', to.params.id, 'show', false); - return; - } - next(); - } + path: '/search', + component: (resolve) => require(['./components/MoviesList.vue'], resolve) }, { name: 'register', path: '/register', - components: { - 'search-router-view': require('./components/Register.vue') - } + component: (resolve) => require(['./components/Register.vue'], resolve) }, { name: 'signin', path: '/signin', - components: { - 'search-router-view': require('./components/Signin.vue') - } - }, - { - name: 'profile', - path: '/profile', - components: { - 'search-router-view': require('./components/Profile.vue') - } + component: (resolve) => require(['./components/Signin.vue'], resolve) }, { name: 'settings', @@ -92,12 +49,17 @@ let routes = [ 'search-router-view': require('./components/Settings.vue') } }, + // { + // name: 'user-requests', + // path: '/profile/requests', + // components: { + // 'user-requests-router-view': require('./components/MoviesList.vue') + // } + // }, { name: '404', path: '/404', - components: { - 'page-router-view': require('./components/404.vue') - } + component: (resolve) => require(['./components/404.vue'], resolve) }, { path: '*', @@ -110,7 +72,7 @@ let routes = [ ]; const router = new VueRouter({ - // mode: 'history', + mode: 'hash', base: '/', routes, linkActiveClass: 'is-active' From de9ac7baaf99d20863c8487a3d341ccc10b549ea Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Sun, 2 Jun 2019 00:26:43 +0200 Subject: [PATCH 010/141] Mediaquery for large desktop --- src/scss/media-queries.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/scss/media-queries.scss b/src/scss/media-queries.scss index b0a06d6..b75e7db 100644 --- a/src/scss/media-queries.scss +++ b/src/scss/media-queries.scss @@ -4,6 +4,7 @@ $phone-xs-width: 480px; $tablet-p-width: 768px; $tablet-l-width: 1024px; $desktop-width: 1200px; +$desktop-l-width: 1600px; // Media @mixin mobile-only{ @@ -41,6 +42,11 @@ $desktop-width: 1200px; @content; } } +@mixin desktop-lg-min{ + @media (min-width: #{$desktop-l-width}){ + @content; + } +} @mixin retina{ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){ @content; From bc884eaa049bfdb9f3fa313d1b9d6b671e954d48 Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Sun, 2 Jun 2019 00:28:08 +0200 Subject: [PATCH 011/141] =?UTF-8?q?Toast=20plugin=20=E2=9C=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/plugins/Toast/ToastComponent.vue | 191 +++++++++++++++++++++++++++ src/plugins/Toast/index.js | 57 ++++++++ 2 files changed, 248 insertions(+) create mode 100644 src/plugins/Toast/ToastComponent.vue create mode 100644 src/plugins/Toast/index.js diff --git a/src/plugins/Toast/ToastComponent.vue b/src/plugins/Toast/ToastComponent.vue new file mode 100644 index 0000000..e35062b --- /dev/null +++ b/src/plugins/Toast/ToastComponent.vue @@ -0,0 +1,191 @@ + + + + + \ No newline at end of file diff --git a/src/plugins/Toast/index.js b/src/plugins/Toast/index.js new file mode 100644 index 0000000..6bf8f19 --- /dev/null +++ b/src/plugins/Toast/index.js @@ -0,0 +1,57 @@ +import Vue from 'vue' +import ToastComponent from './ToastComponent.vue' + +const optionsDefaults = { + data: { + type: 'info', + show: true, + timeout: 3000, + + onCreate(created = null) { + }, + onEdit(editted = null) { + }, + onRemove(removed = null) { + } + } +} + +function toast(options, router) { + // merge the default options with the passed options. + const root = new Vue({ + data: { + ...optionsDefaults.data, + ...options, + router + }, + render: createElement => createElement(ToastComponent) + }) + + root.$mount(document.body.appendChild(document.createElement('div'))) +} + + +export default { + install(vue, opts) { + console.log('installing toast plugin!') + console.log('plugin options', opts) + + Vue.prototype.$notifications = { + info(options) { + toast({ type: 'info', ...options }) + }, + success(options) { + toast({ type: 'success', ...options }) + }, + warning(options) { + toast({ type: 'warning', ...options }) + }, + error(options) { + toast({ type: 'error', ...options }) + }, + simple(options) { + toast({ type: 'simple', ...options}) + } + } + } +} \ No newline at end of file From 16b967a704233bfaad0581aaa79d095bf3f4ff59 Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Sun, 2 Jun 2019 00:28:43 +0200 Subject: [PATCH 012/141] Helper util file for all seasoned api requests --- src/seasonedAPI.js | 62 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 62 insertions(+) create mode 100644 src/seasonedAPI.js diff --git a/src/seasonedAPI.js b/src/seasonedAPI.js new file mode 100644 index 0000000..a92c7b3 --- /dev/null +++ b/src/seasonedAPI.js @@ -0,0 +1,62 @@ +import axios from 'axios' + +// const BASE_URL = 'https://api.kevinmidboe.com/api/' +const BASE_URL = 'http://localhost:31459/api/' + +// TODO +// - Move autorization token and errors here? + +// - - - TMDB - - - + +const getMovie = (id, credits) => { + let url = BASE_URL + 'v2/movie/' + id + if (credits) { + url += '?credits=true' + } + console.log('uuuurl', url) + return axios.get(url) + .catch(error => console.log('error while getting movie:', error)) +} + +const getShow = (id, credits) => { + let url = BASE_URL + 'v2/show/' + id + if (credits) { + url += '?credits=true' + } + console.log('uuuurl', url) + return axios.get(url) + .catch(error => console.log('error while getting show:', error)) +} + +const getListByName = (listPath, page) => { + const url = `${BASE_URL}${listPath}?page=${page}` + return axios.get(url) + .catch(error => console.log('error while getting list by name:', error)) +} + +const search = (query, page) => { + const url = `${BASE_URL}v2/search?query=${query}&page=${page}` + return axios.get(url) + .catch(error => console.log('error while searching:', error)) +} + +// - - - Torrents - - - + +const searchTorrents = (query, filter='all', page, authorization_token) => { + // const url = `${BASE_URL}v1/pirate/search?query=${query}&filter=${filter}&page=${page}` + const url = `https://api.kevinmidboe.com/api/v1/pirate/search?query=${query}&filter=${filter}&page=${page}` + const headers = { authorization: authorization_token } + return axios.get(url, { headers: headers }) + .catch(error => console.log('error while searching for torrents:', error)) +} + +// - - - Plex/Request - - - + +const request = (id, type, authorization_token) => { + const url = `${BASE_URL}v1/plex/request/${id}&type=${type}` + const headers = { authorization: authorization_token } + return axios.post(url, { headers: headers }) + .catch(error => console.log('error while requesting item:', error)) +} + +export { getMovie, getShow, getListByName, search, searchTorrents, request } \ No newline at end of file From 3d97e5d19658f7655c983e13adf4ec92446b9e4f Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Sun, 2 Jun 2019 00:33:49 +0200 Subject: [PATCH 013/141] Started a general utils file --- src/utils.js | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 src/utils.js diff --git a/src/utils.js b/src/utils.js new file mode 100644 index 0000000..4650f07 --- /dev/null +++ b/src/utils.js @@ -0,0 +1,11 @@ +function sortableSize(string) { + const UNITS = ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; + const [numStr, unit] = string.split(' '); + if (UNITS.indexOf(unit) === -1) + return string + const exponent = UNITS.indexOf(unit) * 3 + return numStr * (Math.pow(10, exponent)) +} + + +export { sortableSize } \ No newline at end of file From 8814d774052eb4fe703592ff7da78bdda0d0e442 Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Sun, 2 Jun 2019 00:37:28 +0200 Subject: [PATCH 014/141] Removed unused packages and updated info --- package.json | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index ebcd003..e189019 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,8 @@ { - "name": "tmdb-app", - "description": "The Movie Database app ", - "version": "1.1.0", - "author": "Dmytro Barylo", + "name": "seasoned-request", + "description": "seasoned request app", + "version": "2.0.0", + "author": "Kevin Midboe", "private": true, "scripts": { "dev": "cross-env NODE_ENV=development webpack-dev-server --hot", @@ -10,13 +10,10 @@ "start": "node server.js" }, "dependencies": { - "ag-grid-vue": "^17.0.0", "axios": "^0.15.3", "babel-plugin-transform-object-rest-spread": "^6.26.0", "connect-history-api-fallback": "^1.3.0", - "debounce": "^1.0.0", "express": "^4.16.1", - "numeral": "^2.0.4", "vue": "^2.5.2", "vue-axios": "^1.2.2", "vue-data-tablee": "^0.12.1", From b3e8e447e2a060db9cc447dd6729d3ba08814c00 Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Sun, 2 Jun 2019 00:38:56 +0200 Subject: [PATCH 015/141] Removed unused demo component --- src/components/demo.vue | 221 ---------------------------------------- 1 file changed, 221 deletions(-) delete mode 100644 src/components/demo.vue diff --git a/src/components/demo.vue b/src/components/demo.vue deleted file mode 100644 index 9c2804d..0000000 --- a/src/components/demo.vue +++ /dev/null @@ -1,221 +0,0 @@ - - - \ No newline at end of file From 95629a28994745a2ae9943af57113b5089b3197f Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Sun, 2 Jun 2019 15:28:09 +0200 Subject: [PATCH 016/141] WIP component for more easily rendering svgs that are inline to be able to reach by id or class --- src/components/ui/SvgIcon.vue | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 src/components/ui/SvgIcon.vue diff --git a/src/components/ui/SvgIcon.vue b/src/components/ui/SvgIcon.vue new file mode 100644 index 0000000..79b0c9c --- /dev/null +++ b/src/components/ui/SvgIcon.vue @@ -0,0 +1,9 @@ + + + From 691d0d25abf022d8a9d66c747a87a4165fe45274 Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Sun, 2 Jun 2019 15:28:52 +0200 Subject: [PATCH 017/141] These are blank flashing lines shown while the content is being fetched. Current prop is number of lines to render --- src/components/ui/LoadingPlaceholder.vue | 99 ++++++++++++++++++++++++ 1 file changed, 99 insertions(+) create mode 100644 src/components/ui/LoadingPlaceholder.vue diff --git a/src/components/ui/LoadingPlaceholder.vue b/src/components/ui/LoadingPlaceholder.vue new file mode 100644 index 0000000..14e3ed5 --- /dev/null +++ b/src/components/ui/LoadingPlaceholder.vue @@ -0,0 +1,99 @@ + + + + + \ No newline at end of file From 7456579e55e718e7897c532967bb27f525047bfa Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Sun, 2 Jun 2019 17:15:45 +0200 Subject: [PATCH 018/141] Moved homepage banner into its own component --- src/components/Home.vue | 17 +++--- src/components/LandingBanner.vue | 89 ++++++++++++++++++++++++++++++++ 2 files changed, 98 insertions(+), 8 deletions(-) create mode 100644 src/components/LandingBanner.vue diff --git a/src/components/Home.vue b/src/components/Home.vue index eb4f778..1c955f8 100644 --- a/src/components/Home.vue +++ b/src/components/Home.vue @@ -1,24 +1,25 @@ + + \ No newline at end of file From 33750f6a65daa711390b3195fd5565b350ee4615 Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Sun, 2 Jun 2019 17:17:23 +0200 Subject: [PATCH 019/141] Removed unused stylings --- src/components/Home.vue | 76 ++------------------------------ src/components/LandingBanner.vue | 35 ++++++++++++--- 2 files changed, 32 insertions(+), 79 deletions(-) diff --git a/src/components/Home.vue b/src/components/Home.vue index 1c955f8..6ae776d 100644 --- a/src/components/Home.vue +++ b/src/components/Home.vue @@ -35,79 +35,9 @@ export default { @import "./src/scss/variables"; @import "./src/scss/media-queries"; .home{ - &__header{ - width: 100%; - height: 200px; - display: flex; - align-items: center; - justify-content: center; - background-size: cover; - background-repeat: no-repeat; - background-position: 50% 50%; - position: relative; - background-color: $c-dark; - background-image: url('~assets/arrival.jpg'); - @include tablet-min{ - height: 284px; - } - &:before{ - content: ""; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba($c-light, 0.7); - } - &-wrap{ - text-align: center; - position: relative; - } - &-title{ - font-weight: 500; - font-size: 22px; - text-transform: uppercase; - letter-spacing: 0.5px; - color: $c-dark; - margin: 0; - @include tablet-min{ - font-size: 28px; - } - } - &-subtitle{ - display: block; - font-size: 14px; - font-weight: 300; - color: $c-dark; - margin: 5px 0; - @include tablet-min{ - font-size: 16px; - } - } - &-link{ - text-decoration: none; - color: $c-dark; - font-size: 13px; - font-weight: 300; - opacity: 0.7; - transition: opacity 0.5s ease; - &:hover{ - opacity: 1; - } - span{ - display: inline-block; - vertical-align: middle; - } - &-icon{ - display: inline-block; - vertical-align: middle; - margin-right: 2px; - width: 16px; - height: 15px; - fill: $c-dark; - } - } - } + position: relative; + padding: 50px 0 0; + .wrapper{ min-height: 0; } diff --git a/src/components/LandingBanner.vue b/src/components/LandingBanner.vue index 08f7f8a..135215e 100644 --- a/src/components/LandingBanner.vue +++ b/src/components/LandingBanner.vue @@ -44,11 +44,10 @@ header { background-position: 50% 50%; position: relative; background-color: $c-dark; - // background-image: url('~assets/arrival.jpg'); - @include tablet-min{ + @include tablet-min { height: 284px; } - &:before{ + &:before { content: ""; position: absolute; top: 0; @@ -58,12 +57,12 @@ header { background: rgba($c-light, 0.7); } - .container{ + .container { text-align: center; position: relative; } - .title{ + .title { font-weight: 500; font-size: 22px; text-transform: uppercase; @@ -75,7 +74,7 @@ header { } } - .subtitle{ + .subtitle { display: block; font-size: 14px; font-weight: 300; @@ -85,5 +84,29 @@ header { font-size: 16px; } } + + .link { + text-decoration: none; + color: $c-dark; + font-size: 13px; + font-weight: 300; + opacity: 0.7; + transition: opacity 0.5s ease; + &:hover { + opacity: 1; + } + span { + display: inline-block; + vertical-align: middle; + } + &-icon { + display: inline-block; + vertical-align: middle; + margin-right: 2px; + width: 16px; + height: 15px; + fill: $c-dark; + } + } } \ No newline at end of file From 0a60c1b9a3fe454ac9ad6272b168e8ad3e7ac505 Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Sun, 2 Jun 2019 22:41:12 +0200 Subject: [PATCH 020/141] Re-wrote all of the movie component. Prevented loading poster on mobile, loading placeholders for text, moved http calls to seasonedAPI util file and all functions have been re-implemented --- src/components/Movie.vue | 505 ++++++++++++++++++--------------------- 1 file changed, 235 insertions(+), 270 deletions(-) diff --git a/src/components/Movie.vue b/src/components/Movie.vue index fc7228d..32e4faa 100644 --- a/src/components/Movie.vue +++ b/src/components/Movie.vue @@ -1,269 +1,228 @@ - \ No newline at end of file diff --git a/src/components/ui/SeasonedButton.vue b/src/components/ui/SeasonedButton.vue new file mode 100644 index 0000000..f803c21 --- /dev/null +++ b/src/components/ui/SeasonedButton.vue @@ -0,0 +1,61 @@ + + + + + \ No newline at end of file diff --git a/src/components/ui/SeasonedInput.vue b/src/components/ui/SeasonedInput.vue new file mode 100644 index 0000000..2585e18 --- /dev/null +++ b/src/components/ui/SeasonedInput.vue @@ -0,0 +1,103 @@ + + + + \ No newline at end of file From 9a10939c91bd9be17beffaa31129a2fd839e96cf Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Sun, 2 Jun 2019 22:50:54 +0200 Subject: [PATCH 024/141] Created elements for ui elements, loading-placeholder for all keyframing and styling for the pulsing placeholder text and a main.scss for global classes such as noselect which prevents hightlighting of text --- src/scss/elements.scss | 41 ++++++++++++++++++ src/scss/loading-placeholder.scss | 72 +++++++++++++++++++++++++++++++ src/scss/main.scss | 24 +++++++++++ 3 files changed, 137 insertions(+) create mode 100644 src/scss/elements.scss create mode 100644 src/scss/loading-placeholder.scss create mode 100644 src/scss/main.scss diff --git a/src/scss/elements.scss b/src/scss/elements.scss new file mode 100644 index 0000000..74093de --- /dev/null +++ b/src/scss/elements.scss @@ -0,0 +1,41 @@ +.filter { + // margin: 10px 10px 20px; + margin: 1rem; + padding: 0; + overflow: auto; + list-style: none; + border: 1px solid; + border-radius: 2px; + // overflow: hidden; + display: flex; + transition: color .2s ease; + // justify-content: space-evenly; + + &-item { + padding: 6px 15px; + background-color: $c-white; + transition: color 0.2s ease; + font-size: 13px; + font-weight: 200; + text-transform: capitalize; + text-align: center; + width: 100%; + white-space:nowrap; + // overflow: hidden; + &:nth-child(n+2) { + border-left: solid 1px; + } + &.active, &:hover { + border-color: transparent; + background-color: #091c24; + color: $c-green; + cursor: pointer; + } + @include tablet-min { + font-size: 16px; + } + } +} + +// TODO +// - add buttons \ No newline at end of file diff --git a/src/scss/loading-placeholder.scss b/src/scss/loading-placeholder.scss new file mode 100644 index 0000000..c5f6a12 --- /dev/null +++ b/src/scss/loading-placeholder.scss @@ -0,0 +1,72 @@ +@import "./src/scss/variables"; + +.movie__actions-link { + display: flex; + align-items: center; + text-decoration: none; + text-transform: uppercase; + color: rgba($c-dark, 0.5); + transition: color 0.5s ease; + font-size: 11px; + padding: 10px 0; + border-bottom: 1px solid rgba($c-dark, 0.05); + &:hover{ + color: rgba($c-dark, 0.75); + } + &.active{ + color: $c-dark; + } + &.pending{ + color: #f8bd2d; + } +} +.movie__actions-text { + margin:4.4px; + margin-left: -3px; +} + +// Loading placeholder styling +@mixin nth-children($points...) { + @each $point in $points { + &:nth-child(#{$point}) { + @content; + } + } +} + +.text-input__loading { + width: 100%; + + &--line { + height: 10px; + margin: 10px; + animation: pulse 1s infinite ease-in-out; + } + + div { + @include nth-children(1, 5, 9) { + width: 150px; + } + @include nth-children(2, 6, 10) { + width: 250px; + } + @include nth-children(3, 7) { + width: 120px; + } + @include nth-children(4, 8) { + width: 100px; + } + } + + @keyframes pulse { + 0% { + background-color: rgba(165, 165, 165, 0.1); + } + 50% { + background-color: rgba(165, 165, 165, 0.3); + } + 100% { + background-color: rgba(165, 165, 165, 0.1); + } + } +} \ No newline at end of file diff --git a/src/scss/main.scss b/src/scss/main.scss new file mode 100644 index 0000000..918d0c9 --- /dev/null +++ b/src/scss/main.scss @@ -0,0 +1,24 @@ + +.noselect { + -webkit-touch-callout: none; /* iOS Safari */ + -webkit-user-select: none; /* Safari */ + -khtml-user-select: none; /* Konqueror HTML */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* Internet Explorer/Edge */ + user-select: none; /* Non-prefixed version, currently */ +} + +.end-section { + display: flex; + justify-content: center; + width: 100%; + margin: 1rem 0; +} + +.button--group { + display: flex; + + > div:not(:first-child) { + margin-left: 1rem; + } +} \ No newline at end of file From 27cff0b0ac0439b67182a6616127398b47fd31b2 Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Sun, 2 Jun 2019 22:51:50 +0200 Subject: [PATCH 025/141] Removed unused butotn --- src/plugins/Toast/ToastComponent.vue | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/plugins/Toast/ToastComponent.vue b/src/plugins/Toast/ToastComponent.vue index e35062b..252e069 100644 --- a/src/plugins/Toast/ToastComponent.vue +++ b/src/plugins/Toast/ToastComponent.vue @@ -1,6 +1,4 @@