├── .gitignore ├── README.md ├── babel.config.js ├── dist ├── css │ └── app.afed6e96.css ├── favicon.ico ├── fonts │ ├── element-icons.2fad952a.woff │ └── element-icons.6f0a7632.ttf ├── img │ └── grid.b3115c8e.jpg ├── index.html ├── js │ ├── app.5a2530ec.js │ ├── app.5a2530ec.js.map │ ├── chunk-vendors.71061496.js │ └── chunk-vendors.71061496.js.map └── preview.png ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html └── preview.png ├── server.js └── src ├── App.vue ├── assets ├── css │ └── main.scss └── img │ └── grid.jpg ├── components ├── ChildContainer.vue └── ChildRectangle.vue ├── const.js └── main.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | 4 | # local env files 5 | .env.local 6 | .env.*.local 7 | 8 | # Log files 9 | npm-debug.log* 10 | yarn-debug.log* 11 | yarn-error.log* 12 | 13 | # Editor directories and files 14 | .idea 15 | .vscode 16 | *.suo 17 | *.ntvs* 18 | *.njsproj 19 | *.sln 20 | *.sw* 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # flex-helper 2 | 3 | Preview 4 | 5 | Check the demo at https://flex-helper.danajanoskova.sk/ 6 | 7 | ## Project setup 8 | ``` 9 | npm install 10 | ``` 11 | 12 | ### Compiles and hot-reloads for development 13 | ``` 14 | npm run serve 15 | ``` 16 | 17 | ### Compiles and minifies for production 18 | ``` 19 | npm run build 20 | ``` 21 | 22 | ### Run your tests 23 | ``` 24 | npm run test 25 | ``` 26 | 27 | ### Lints and fixes files 28 | ``` 29 | npm run lint 30 | ``` 31 | 32 | ### Customize configuration 33 | See [Configuration Reference](https://cli.vuejs.org/config/). 34 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /dist/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DJanoskova/Vue.JS---FlexHelper/3d58448ed4ad37ea004f72189ddc2ce5860582b0/dist/favicon.ico -------------------------------------------------------------------------------- /dist/fonts/element-icons.2fad952a.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DJanoskova/Vue.JS---FlexHelper/3d58448ed4ad37ea004f72189ddc2ce5860582b0/dist/fonts/element-icons.2fad952a.woff -------------------------------------------------------------------------------- /dist/fonts/element-icons.6f0a7632.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DJanoskova/Vue.JS---FlexHelper/3d58448ed4ad37ea004f72189ddc2ce5860582b0/dist/fonts/element-icons.6f0a7632.ttf -------------------------------------------------------------------------------- /dist/img/grid.b3115c8e.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DJanoskova/Vue.JS---FlexHelper/3d58448ed4ad37ea004f72189ddc2ce5860582b0/dist/img/grid.b3115c8e.jpg -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | Flex Helper | DJanoskova
-------------------------------------------------------------------------------- /dist/js/app.5a2530ec.js: -------------------------------------------------------------------------------- 1 | (function(e){function t(t){for(var r,u,o=t[0],s=t[1],a=t[2],p=0,d=[];p\n
\n {{ displayedText }}\n
\n\n\n\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ChildRectangle.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ChildRectangle.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./ChildRectangle.vue?vue&type=template&id=0cf5e5a1&\"\nimport script from \"./ChildRectangle.vue?vue&type=script&lang=js&\"\nexport * from \"./ChildRectangle.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports","\n\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ChildContainer.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ChildContainer.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./ChildContainer.vue?vue&type=template&id=1930ef92&\"\nimport script from \"./ChildContainer.vue?vue&type=script&lang=js&\"\nexport * from \"./ChildContainer.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports","\n\n\n","import mod from \"-!../node_modules/cache-loader/dist/cjs.js??ref--12-0!../node_modules/thread-loader/dist/cjs.js!../node_modules/babel-loader/lib/index.js!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../node_modules/cache-loader/dist/cjs.js??ref--12-0!../node_modules/thread-loader/dist/cjs.js!../node_modules/babel-loader/lib/index.js!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./App.vue?vue&type=template&id=7af20c65&\"\nimport script from \"./App.vue?vue&type=script&lang=js&\"\nexport * from \"./App.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports","import Vue from 'vue'\nimport App from './App.vue'\n\nimport './assets/css/main.scss'\n\nVue.config.productionTip = false\n\nnew Vue({\n render: h => h(App),\n}).$mount('#app')\n"],"sourceRoot":""} -------------------------------------------------------------------------------- /dist/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DJanoskova/Vue.JS---FlexHelper/3d58448ed4ad37ea004f72189ddc2ce5860582b0/dist/preview.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "flex-helper", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint", 9 | "start": "node server.js" 10 | }, 11 | "dependencies": { 12 | "element-ui": "^2.6.2", 13 | "express": "^4.16.4", 14 | "vue": "^2.6.6" 15 | }, 16 | "devDependencies": { 17 | "@vue/cli-plugin-babel": "^3.5.0", 18 | "@vue/cli-plugin-eslint": "^3.5.0", 19 | "@vue/cli-service": "^3.5.0", 20 | "babel-eslint": "^10.0.1", 21 | "eslint": "^5.8.0", 22 | "eslint-plugin-vue": "^5.0.0", 23 | "node-sass": "^4.9.0", 24 | "sass-loader": "^7.1.0", 25 | "vue-template-compiler": "^2.5.21" 26 | }, 27 | "eslintConfig": { 28 | "root": true, 29 | "env": { 30 | "node": true 31 | }, 32 | "extends": [ 33 | "plugin:vue/essential", 34 | "eslint:recommended" 35 | ], 36 | "rules": {}, 37 | "parserOptions": { 38 | "parser": "babel-eslint" 39 | } 40 | }, 41 | "postcss": { 42 | "plugins": { 43 | "autoprefixer": {} 44 | } 45 | }, 46 | "browserslist": [ 47 | "> 1%", 48 | "last 2 versions", 49 | "not ie <= 8" 50 | ] 51 | } 52 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DJanoskova/Vue.JS---FlexHelper/3d58448ed4ad37ea004f72189ddc2ce5860582b0/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | Flex Helper | DJanoskova 26 | 27 | 28 | 29 | 30 | 33 |
34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /public/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DJanoskova/Vue.JS---FlexHelper/3d58448ed4ad37ea004f72189ddc2ce5860582b0/public/preview.png -------------------------------------------------------------------------------- /server.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var serveStatic = require('serve-static'); 3 | 4 | const app = express(); 5 | app.use(serveStatic(__dirname + "/dist")); 6 | 7 | var port = process.env.PORT || 5000; 8 | 9 | app.listen(port); 10 | 11 | console.log('Server started '+ port); -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 69 | -------------------------------------------------------------------------------- /src/assets/css/main.scss: -------------------------------------------------------------------------------- 1 | $primary: #ff65a3; 2 | 3 | /* theme color */ 4 | $--color-primary: $primary; 5 | 6 | /* icon font path, required */ 7 | $--font-path: '~element-ui/lib/theme-chalk/fonts'; 8 | 9 | @import "~element-ui/packages/theme-chalk/src/index"; 10 | 11 | body, html { 12 | height: 100%; 13 | } 14 | 15 | body { 16 | margin: 0; 17 | font-family: 'Montserrat', sans-serif; 18 | display: flex; 19 | flex-basis: 100%; 20 | } 21 | 22 | a { 23 | color: $primary; 24 | 25 | &:hover { 26 | color: darken($primary, 12%); 27 | } 28 | } 29 | 30 | #app { 31 | @media all and (min-width: 1024px) { 32 | padding: 0 50px; 33 | display: flex; 34 | flex: 1; 35 | align-items: center; 36 | } 37 | 38 | @media all and (max-width: 1024px) { 39 | padding: 20px; 40 | } 41 | } 42 | 43 | .el-row { 44 | width: 100%; 45 | } 46 | 47 | .flex { 48 | &-container { 49 | box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); 50 | padding: 5px; 51 | height: 400px; 52 | border-radius: 10px; 53 | margin-bottom: 30px; 54 | background: url('../img/grid.jpg'); 55 | background-size: 10px; 56 | } 57 | 58 | &-element { 59 | background: $primary; 60 | padding: 5px; 61 | border-radius: 5px; 62 | box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); 63 | color: #ffffff; 64 | margin: 5px; 65 | } 66 | } 67 | 68 | .text-center { 69 | display: flex; 70 | justify-content: center; 71 | align-items: center; 72 | } 73 | 74 | p { 75 | margin-top: 0; 76 | } 77 | 78 | pre { 79 | background: #172a5b; 80 | color: #ffffff; 81 | padding: 30px; 82 | border-radius: 10px; 83 | } 84 | 85 | hr { 86 | border: none; 87 | background: #f3f3f3; 88 | height: 1px; 89 | border-width: 1px; 90 | } 91 | 92 | .sm-mb-20 { 93 | @media all and (max-width: 1024px) { 94 | margin-bottom: 20px; 95 | } 96 | } 97 | 98 | .footer { 99 | text-align: center; 100 | 101 | @media all and (min-width: 1024px) { 102 | position: fixed; 103 | bottom: 0; 104 | height: 40px; 105 | width: 100%; 106 | left: 0; 107 | } 108 | } -------------------------------------------------------------------------------- /src/assets/img/grid.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DJanoskova/Vue.JS---FlexHelper/3d58448ed4ad37ea004f72189ddc2ce5860582b0/src/assets/img/grid.jpg -------------------------------------------------------------------------------- /src/components/ChildContainer.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | -------------------------------------------------------------------------------- /src/components/ChildRectangle.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 53 | -------------------------------------------------------------------------------- /src/const.js: -------------------------------------------------------------------------------- 1 | export const containerOptions = { 2 | 'flex-direction': ['row', 'column'], 3 | 'justify-content': ['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly'], 4 | 'align-items': ['flex-start', 'flex-end', 'center', 'baseline', 'stretch'] 5 | } -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | import './assets/css/main.scss' 5 | 6 | Vue.config.productionTip = false 7 | 8 | new Vue({ 9 | render: h => h(App), 10 | }).$mount('#app') 11 | --------------------------------------------------------------------------------