Merge branch 'master' into matdev
This commit is contained in:
Sebastian Frank
22
.eslintrc
22
.eslintrc
@@ -1,8 +1,20 @@
|
|||||||
{
|
{
|
||||||
"parser": "babel-eslint",
|
"parserOptions": {
|
||||||
"rules": {
|
"parser": "babel-eslint",
|
||||||
|
"ecmaVersion": 6,
|
||||||
|
"sourceType": "module",
|
||||||
|
"impliedStrict": true
|
||||||
|
},
|
||||||
|
"env": {
|
||||||
|
"browser": true,
|
||||||
|
"es6": true
|
||||||
|
},
|
||||||
|
extends: [
|
||||||
|
"eslint:recommended",
|
||||||
|
"plugin:vue/recommended"
|
||||||
|
],
|
||||||
|
"rules": {
|
||||||
|
"indent": ["error", 4],
|
||||||
|
"no-console": 0
|
||||||
},
|
},
|
||||||
"plugins": [
|
|
||||||
"html"
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
92
package-lock.json
generated
92
package-lock.json
generated
@@ -2037,55 +2037,12 @@
|
|||||||
"isarray": "1.0.0"
|
"isarray": "1.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"dom-serializer": {
|
|
||||||
"version": "0.1.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.0.tgz",
|
|
||||||
"integrity": "sha1-BzxpdUbOB4DOI75KKOKT5AvDDII=",
|
|
||||||
"dev": true,
|
|
||||||
"requires": {
|
|
||||||
"domelementtype": "1.1.3",
|
|
||||||
"entities": "1.1.1"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"domelementtype": {
|
|
||||||
"version": "1.1.3",
|
|
||||||
"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.1.3.tgz",
|
|
||||||
"integrity": "sha1-vSh3PiZCiBrsUVRJJCmcXNgiGFs=",
|
|
||||||
"dev": true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"domain-browser": {
|
"domain-browser": {
|
||||||
"version": "1.1.7",
|
"version": "1.1.7",
|
||||||
"resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.1.7.tgz",
|
"resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.1.7.tgz",
|
||||||
"integrity": "sha1-hnqksJP6oF8d4IwG9NeyH9+GmLw=",
|
"integrity": "sha1-hnqksJP6oF8d4IwG9NeyH9+GmLw=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"domelementtype": {
|
|
||||||
"version": "1.3.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.0.tgz",
|
|
||||||
"integrity": "sha1-sXrtguirWeUt2cGbF1bg/BhyBMI=",
|
|
||||||
"dev": true
|
|
||||||
},
|
|
||||||
"domhandler": {
|
|
||||||
"version": "2.4.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.1.tgz",
|
|
||||||
"integrity": "sha1-iS5HAAqZvlW783dP/qBWHYh5wlk=",
|
|
||||||
"dev": true,
|
|
||||||
"requires": {
|
|
||||||
"domelementtype": "1.3.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"domutils": {
|
|
||||||
"version": "1.6.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/domutils/-/domutils-1.6.2.tgz",
|
|
||||||
"integrity": "sha1-GVjMC0yUJuntNn+xyOhUiRsPo/8=",
|
|
||||||
"dev": true,
|
|
||||||
"requires": {
|
|
||||||
"dom-serializer": "0.1.0",
|
|
||||||
"domelementtype": "1.3.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"dot-case": {
|
"dot-case": {
|
||||||
"version": "2.1.1",
|
"version": "2.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/dot-case/-/dot-case-2.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/dot-case/-/dot-case-2.1.1.tgz",
|
||||||
@@ -2180,12 +2137,6 @@
|
|||||||
"tapable": "0.2.8"
|
"tapable": "0.2.8"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"entities": {
|
|
||||||
"version": "1.1.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/entities/-/entities-1.1.1.tgz",
|
|
||||||
"integrity": "sha1-blwtClYhtdra7O+AuQ7ftc13cvA=",
|
|
||||||
"dev": true
|
|
||||||
},
|
|
||||||
"errno": {
|
"errno": {
|
||||||
"version": "0.1.4",
|
"version": "0.1.4",
|
||||||
"resolved": "https://registry.npmjs.org/errno/-/errno-0.1.4.tgz",
|
"resolved": "https://registry.npmjs.org/errno/-/errno-0.1.4.tgz",
|
||||||
@@ -2412,13 +2363,14 @@
|
|||||||
"rimraf": "2.6.1"
|
"rimraf": "2.6.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"eslint-plugin-html": {
|
"eslint-plugin-vue": {
|
||||||
"version": "3.2.0",
|
"version": "3.12.0",
|
||||||
"resolved": "https://registry.npmjs.org/eslint-plugin-html/-/eslint-plugin-html-3.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-3.12.0.tgz",
|
||||||
"integrity": "sha512-jQLPqZNty889RrieCScFY3hJAJNeo0pX2ixCIPaXw/1wq5ZadKQkkh94ObqRfYzwrzD75HqEVGykmtDXEkReKg==",
|
"integrity": "sha1-6a0J1sYo+ytleAaP7aVEA896lNs=",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"htmlparser2": "3.9.2"
|
"requireindex": "1.1.0",
|
||||||
|
"vue-eslint-parser": "2.0.0-beta.7"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"eslint-scope": {
|
"eslint-scope": {
|
||||||
@@ -3164,20 +3116,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"htmlparser2": {
|
|
||||||
"version": "3.9.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.9.2.tgz",
|
|
||||||
"integrity": "sha1-G9+HrMoPP55T+k/M6w9LTLsAszg=",
|
|
||||||
"dev": true,
|
|
||||||
"requires": {
|
|
||||||
"domelementtype": "1.3.0",
|
|
||||||
"domhandler": "2.4.1",
|
|
||||||
"domutils": "1.6.2",
|
|
||||||
"entities": "1.1.1",
|
|
||||||
"inherits": "2.0.3",
|
|
||||||
"readable-stream": "2.3.3"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"http-deceiver": {
|
"http-deceiver": {
|
||||||
"version": "1.2.7",
|
"version": "1.2.7",
|
||||||
"resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz",
|
"resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz",
|
||||||
@@ -6496,6 +6434,12 @@
|
|||||||
"resolve-from": "1.0.1"
|
"resolve-from": "1.0.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"requireindex": {
|
||||||
|
"version": "1.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/requireindex/-/requireindex-1.1.0.tgz",
|
||||||
|
"integrity": "sha1-5UBLgVV+91225JxacgBIk/4D4WI=",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
"requires-port": {
|
"requires-port": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
|
||||||
@@ -7453,6 +7397,18 @@
|
|||||||
"resolved": "https://registry.npmjs.org/vue/-/vue-2.4.2.tgz",
|
"resolved": "https://registry.npmjs.org/vue/-/vue-2.4.2.tgz",
|
||||||
"integrity": "sha512-GB5r+CsrCHIB1PoXt4wgBienjF3WGYOIaTK27tDk96sZxpL5RwRrsi9I3ECwFt8x8qAmxT2xk1vsY2Vpcn9nIw=="
|
"integrity": "sha512-GB5r+CsrCHIB1PoXt4wgBienjF3WGYOIaTK27tDk96sZxpL5RwRrsi9I3ECwFt8x8qAmxT2xk1vsY2Vpcn9nIw=="
|
||||||
},
|
},
|
||||||
|
"vue-eslint-parser": {
|
||||||
|
"version": "2.0.0-beta.7",
|
||||||
|
"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-2.0.0-beta.7.tgz",
|
||||||
|
"integrity": "sha512-S62CeCnpOZ4WfFFW/DCvu5L8Pxy6bsWEDAt8sLHI03BH0x4rbcRZgfi45GiVe/FKUl79xDI1RuCPrZmqguHCtg==",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {
|
||||||
|
"debug": "2.6.8",
|
||||||
|
"eslint-scope": "3.7.1",
|
||||||
|
"espree": "3.5.0",
|
||||||
|
"lodash": "4.17.4"
|
||||||
|
}
|
||||||
|
},
|
||||||
"vue-hot-reload-api": {
|
"vue-hot-reload-api": {
|
||||||
"version": "2.1.0",
|
"version": "2.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.1.0.tgz",
|
||||||
|
|||||||
@@ -23,7 +23,7 @@
|
|||||||
"css-loader": "^0.28.5",
|
"css-loader": "^0.28.5",
|
||||||
"eslint": "^4.5.0",
|
"eslint": "^4.5.0",
|
||||||
"eslint-loader": "^1.9.0",
|
"eslint-loader": "^1.9.0",
|
||||||
"eslint-plugin-html": "^3.2.0",
|
"eslint-plugin-vue": "^3.12.0",
|
||||||
"less": "^2.7.2",
|
"less": "^2.7.2",
|
||||||
"less-loader": "^4.0.5",
|
"less-loader": "^4.0.5",
|
||||||
"vue-hot-reload-api": "^2.1.0",
|
"vue-hot-reload-api": "^2.1.0",
|
||||||
|
|||||||
110
src/app.less
110
src/app.less
@@ -58,11 +58,12 @@ img {line-height:0;}
|
|||||||
# General Settings
|
# General Settings
|
||||||
--------------------------------------------------------------*/
|
--------------------------------------------------------------*/
|
||||||
html,body {
|
html,body {
|
||||||
font-family: 'Open Sans', sans-serif;
|
position: relative;
|
||||||
font-size:15px;
|
font-family: @font_family;
|
||||||
line-height:1.4;
|
font-size: @font_size;
|
||||||
color:#000;
|
line-height: @line_height_base;
|
||||||
background:#f5f3f4;
|
color: @text_color;
|
||||||
|
background: @gray_light;
|
||||||
}
|
}
|
||||||
.clear {clear:both;}
|
.clear {clear:both;}
|
||||||
.section_padding {padding:100px 0px;}
|
.section_padding {padding:100px 0px;}
|
||||||
@@ -70,15 +71,16 @@ html,body {
|
|||||||
/*--------------------------------------------------------------
|
/*--------------------------------------------------------------
|
||||||
# Typo
|
# Typo
|
||||||
--------------------------------------------------------------*/
|
--------------------------------------------------------------*/
|
||||||
p {margin-bottom:20px; color:#000;}
|
p {margin-bottom:20px; color: @text_color;}
|
||||||
h1 {display: block; font-size: 25px; font-weight: 600; line-height: 1.2; margin-bottom:10px; text-align:left; color:#333;}
|
h1, h2, h3, h4, h5{display: block; line-height: @line_height_heading;}
|
||||||
h2 {display: block; font-size: 45px; font-weight: 600; line-height: 1.2; margin-bottom:10px; text-align:center;}
|
h1 {font-size: 25px; font-weight: 600; margin-bottom:10px; text-align:left; color: #333;}
|
||||||
h3 {display: block; font-size: 20px; font-weight: 300; line-height: 1.2; letter-spacing:2px;}
|
h2 {font-size: 45px; font-weight: 600; margin-bottom:10px; text-align:center;}
|
||||||
h4 {display: block; font-size: 15px; font-weight: 600; line-height: 1.2;}
|
h3 {font-size: 20px; font-weight: 300; letter-spacing:2px;}
|
||||||
h5 {display: block; font-size: 18px; font-weight: 600; line-height: 1.2; border-bottom:dotted 1px #999; padding-bottom:5px; margin-top:20px; margin-bottom:20px;}
|
h4 {font-size: 15px; font-weight: 600;}
|
||||||
|
h5 {font-size: 18px; font-weight: 600; border-bottom:dotted 1px #999; padding-bottom:5px; margin-top:20px; margin-bottom:20px;}
|
||||||
strong {font-weight:700;}
|
strong {font-weight:700;}
|
||||||
mark {color:#ac1526;}
|
mark {color: @cms_brand_secondary;}
|
||||||
a {text-decoration:none; color:#ac1526;}
|
a {text-decoration:none; color: @cms_brand_secondary;}
|
||||||
a:hover {color:#901624;}
|
a:hover {color:#901624;}
|
||||||
|
|
||||||
|
|
||||||
@@ -87,25 +89,23 @@ a:hover {color:#901624;}
|
|||||||
--------------------------------------------------------------*/
|
--------------------------------------------------------------*/
|
||||||
.input_holder {margin-bottom:20px; display:block;}
|
.input_holder {margin-bottom:20px; display:block;}
|
||||||
.input_header {margin-bottom:10px;}
|
.input_header {margin-bottom:10px;}
|
||||||
.input_description {font-size:13px; color:#666;}
|
.input_description {font-size:13px; color: @text_color;}
|
||||||
input, textarea, select {
|
input, textarea, select {
|
||||||
font-family: 'Open Sans', sans-serif;
|
font-family: @font_family;
|
||||||
width:100%;
|
width: 100%;
|
||||||
display:block;
|
display: block;
|
||||||
height:35px;
|
height: 35px;
|
||||||
padding:0px 10px;
|
padding: 0px 10px;
|
||||||
color:#333;
|
color: @text_color;
|
||||||
backrgound:#FFF;
|
background: white;
|
||||||
border:solid 1px #CCC;
|
border: solid 1px #CCC;
|
||||||
outline:none;
|
outline: none;
|
||||||
font-size:13px;
|
font-size: 14px;
|
||||||
transition:all 0.3s;
|
transition: all 0.3s;
|
||||||
-webkit-transition:all 0.3s;
|
|
||||||
-moz-transition:all 0.3s;
|
|
||||||
}
|
}
|
||||||
textarea {padding:10px; height:auto;}
|
textarea {padding:10px; height:auto;}
|
||||||
input:focus, textarea:focus, select:focus {background:#FFF; border-color:#28b78d;}
|
input:focus, textarea:focus, select:focus {background:#FFF; border-color: @cms_brand_primary;}
|
||||||
label {font-weight:600; color:#333;}
|
label {font-weight:600; color: @text_color;}
|
||||||
|
|
||||||
input[type="checkbox"] {
|
input[type="checkbox"] {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -149,15 +149,15 @@ input[type="checkbox"] {
|
|||||||
-webkit-transition: background 0.25s linear;
|
-webkit-transition: background 0.25s linear;
|
||||||
}
|
}
|
||||||
input[type=checkbox]:checked ~ .check_checkbox {
|
input[type=checkbox]:checked ~ .check_checkbox {
|
||||||
border: 1px solid #28b78d;
|
border: 1px solid @cms_brand_primary;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type=checkbox]:checked ~ .check_checkbox:before{
|
input[type=checkbox]:checked ~ .check_checkbox:before{
|
||||||
background: #28b78d!important;
|
background: @cms_brand_primary!important;
|
||||||
}
|
}
|
||||||
button{
|
button{
|
||||||
height: 40px;
|
height: 40px;
|
||||||
background: @cms_brand_secondary;
|
background: @gray_dark;
|
||||||
border: none;
|
border: none;
|
||||||
color: #FFF;
|
color: #FFF;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@@ -168,7 +168,7 @@ button{
|
|||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
}
|
}
|
||||||
.cell_checkbox label {width:18px; height:18px; display:block; cursor:pointer; z-index:10; position: absolute; top:50%; margin-top:-9px;}
|
.cell_checkbox label {width:18px; height:18px; display:block; cursor:pointer; z-index:10; position: absolute; top:50%; margin-top:-9px;}
|
||||||
.checkbox_holder:hover .check_checkbox {border: 1px solid #28b78d;}
|
.checkbox_holder:hover .check_checkbox {border: 1px solid @cms_brand_primary;}
|
||||||
|
|
||||||
/*--------------------------------------------------------------
|
/*--------------------------------------------------------------
|
||||||
# CMS CONTENT FORM
|
# CMS CONTENT FORM
|
||||||
@@ -186,8 +186,8 @@ button{
|
|||||||
/*--------------------------------------------------------------
|
/*--------------------------------------------------------------
|
||||||
# Content Area
|
# Content Area
|
||||||
--------------------------------------------------------------*/
|
--------------------------------------------------------------*/
|
||||||
.content_area {position:absolute; left:70px; top:40px; right:0px; transition:all 0.3s;}
|
.content_area {position:absolute; left:70px; top:40px; right:0px; height: 100%;}
|
||||||
.content_main {position:relative; top:0px; padding:25px; transition:all 0.3s;}
|
.content_main {position:relative; top:0px; padding:25px;}
|
||||||
|
|
||||||
.cms_content_main_headline {margin-bottom:20px; position:relative;}
|
.cms_content_main_headline {margin-bottom:20px; position:relative;}
|
||||||
.content_open_sidebar {left:250px;}
|
.content_open_sidebar {left:250px;}
|
||||||
@@ -207,16 +207,16 @@ button{
|
|||||||
/*--------------------------------------------------------------
|
/*--------------------------------------------------------------
|
||||||
# CMS ADD BUTTON
|
# CMS ADD BUTTON
|
||||||
--------------------------------------------------------------*/
|
--------------------------------------------------------------*/
|
||||||
.button {
|
/*.button {
|
||||||
display:inline-block;
|
display: inline-block;
|
||||||
height:30px;
|
height: 30px;
|
||||||
line-height:30px;
|
line-height: 30px;
|
||||||
padding:0px 20px 0px 40px;
|
padding: 0px 20px 0px 40px;
|
||||||
border-radius:20px;
|
border-radius: 20px;
|
||||||
color:#FFF;
|
color: #FFF;
|
||||||
font-weight:600;
|
font-weight: 600;
|
||||||
font-size:14px;
|
font-size: 14px;
|
||||||
transition:background 0.3s;
|
transition: background 0.3s;
|
||||||
}
|
}
|
||||||
.button i {font-size:16px; line-height:28px; position:absolute; left:20px;}
|
.button i {font-size:16px; line-height:28px; position:absolute; left:20px;}
|
||||||
.button:hover {color:#FFF;}
|
.button:hover {color:#FFF;}
|
||||||
@@ -225,7 +225,7 @@ button{
|
|||||||
position:absolute;
|
position:absolute;
|
||||||
top:0px;
|
top:0px;
|
||||||
right:0px;
|
right:0px;
|
||||||
background:#28b78d;
|
background:@cms_brand_primary;
|
||||||
}
|
}
|
||||||
.cms_add_button:hover {background:#189671;}
|
.cms_add_button:hover {background:#189671;}
|
||||||
.button_action {
|
.button_action {
|
||||||
@@ -234,38 +234,32 @@ button{
|
|||||||
font-size:13px;
|
font-size:13px;
|
||||||
position:relative;
|
position:relative;
|
||||||
margin-left:20px;
|
margin-left:20px;
|
||||||
background:#152129;
|
background: @gray_dark;
|
||||||
padding:0px 10px 0px 30px;
|
padding:0px 10px 0px 30px;
|
||||||
}
|
}
|
||||||
.button_action i {line-height:25px; left:10px;}
|
.button_action i {line-height:25px; left:10px;}
|
||||||
.button_action:hover {background:#1f3441;}
|
.button_action:hover {background:#1f3441;}*/
|
||||||
|
|
||||||
|
|
||||||
/*--------------------------------------------------------------
|
/*--------------------------------------------------------------
|
||||||
# BACK BUTTON
|
# BACK BUTTON
|
||||||
--------------------------------------------------------------*/
|
--------------------------------------------------------------*/
|
||||||
.back_button {display:block; float:left; height:30px; width:25px; background:#1f3441; text-align:center; line-height:30px; color:#FFF; font-size:20px; margin-right:10px;}
|
.back_button {display:block; float:left; height:30px; width:25px; background:#1f3441; text-align:center; line-height:30px; color:#FFF; font-size:20px; margin-right:10px;}
|
||||||
.back_button:hover {background:#28b78d; color:#FFF;}
|
.back_button:hover {background:@cms_brand_primary; color:#FFF;}
|
||||||
|
|
||||||
/*--------------------------------------------------------------
|
|
||||||
# Content Tables
|
|
||||||
--------------------------------------------------------------*/
|
|
||||||
.content_table_headline {margin-bottom:10px;}
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------------------------------------------------------
|
/*--------------------------------------------------------------
|
||||||
# Table Footer
|
# Table Footer
|
||||||
--------------------------------------------------------------*/
|
--------------------------------------------------------------*/
|
||||||
.table_footer {float:right; text-align:right; line-height:25px; margin-top:20px; display:block; color:#666; margin-bottom:20px;}
|
.table_footer {float:right; text-align:right; line-height:25px; margin-top:20px; display:block; color: @text_color; margin-bottom:20px;}
|
||||||
.cms_paging {float:right; margin-left:10px; display:block; /*border:solid 1px #CCC;*/ background:#FFF;}
|
.cms_paging {float:right; margin-left:10px; display:block; /*border:solid 1px #CCC;*/ background:#FFF;}
|
||||||
.cms_paging ul {list-style-type:none;}
|
.cms_paging ul {list-style-type:none;}
|
||||||
.cms_paging ul li {float:left; margin-right:2px;}
|
.cms_paging ul li {float:left; margin-right:2px;}
|
||||||
.cms_paging ul li:last-child {margin-right:0px;}
|
.cms_paging ul li:last-child {margin-right:0px;}
|
||||||
.cms_paging ul li a {transition:all 0.3s; color:#FFF; text-align:center; display:block; height:25px; width:25px; line-height:25px; background:#CCC;}
|
.cms_paging ul li a {transition:all 0.3s; color:#FFF; text-align:center; display:block; height:25px; width:25px; line-height:25px; background:#CCC;}
|
||||||
.cms_paging ul li i {}
|
.cms_paging ul li i {}
|
||||||
.cms_paging ul li.active a {background:#28b78d; color:#FFF;}
|
.cms_paging ul li.active a {background:@cms_brand_primary; color:#FFF;}
|
||||||
.cms_paging ul li a:hover {background:#28b78d; color:#FFF;}
|
.cms_paging ul li a:hover {background:@cms_brand_primary; color:#FFF;}
|
||||||
|
|
||||||
|
|
||||||
/*--------------------------------------------------------------
|
/*--------------------------------------------------------------
|
||||||
# Breakpoints
|
# Breakpoints
|
||||||
|
|||||||
@@ -14,7 +14,7 @@
|
|||||||
</my-input>
|
</my-input>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<button v-for="(b, i) in buttons" :key="i" @click.prevent="buttonClick(b.type)">{{ b.label }}</button>
|
<button class="button" v-for="(b, i) in buttons" :key="i" @click.prevent="buttonClick(b.type)">{{ b.label }}</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</template>
|
</template>
|
||||||
@@ -70,9 +70,9 @@ export default {
|
|||||||
},
|
},
|
||||||
buttonClick(type) {
|
buttonClick(type) {
|
||||||
switch(type) {
|
switch(type) {
|
||||||
case 'submit':
|
case 'submit':
|
||||||
this.submit();
|
this.submit();
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
submit() {
|
submit() {
|
||||||
|
|||||||
@@ -1,215 +1,274 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="cms_table">
|
<div class="cms_table">
|
||||||
<div class="table_header">
|
|
||||||
<!-- <div class="table_row"> -->
|
<!-- Header -->
|
||||||
<div v-for="(col, i) in columns"
|
<div class="table_header">
|
||||||
:class="['table_cell', {['sortable']: col.orderBy}]"
|
<div v-for="(col, i) in columns"
|
||||||
:key="i">
|
:class="['table_cell', {['sortable']: col.orderBy, [`align-${col.align}`]: col.align}]"
|
||||||
<div @click="orderBy(col.orderBy)" v-if="col.orderBy">
|
:key="i">
|
||||||
{{ col.heading }}
|
|
||||||
<i class="icon icon-angle-up" aria-hidden="true" v-if="currentOrderBy !== col.orderBy"></i>
|
<!-- Column with sorting -->
|
||||||
<i class="icon icon-angle-circled-down" aria-hidden="true" v-else-if="currentOrderDesc"></i>
|
<div @click="orderBy(col.orderBy)" v-if="col.orderBy">
|
||||||
<i class="icon icon-angle-circled-up" aria-hidden="true" v-else></i>
|
{{ col.heading }}
|
||||||
</div>
|
|
||||||
<div v-else>{{ col.heading }}</div>
|
<i class="icon icon-angle-up" aria-hidden="true" v-if="currentOrderBy !== col.orderBy"></i>
|
||||||
</div>
|
<i class="icon icon-angle-circled-down" aria-hidden="true" v-else-if="currentOrderDesc"></i>
|
||||||
<div class="table_cell cell_settings" v-if="actions.length"></div>
|
<i class="icon icon-angle-circled-up" aria-hidden="true" v-else></i>
|
||||||
<!-- </div> -->
|
</div>
|
||||||
</div>
|
|
||||||
<div class="table_content" is="transition-group" name="list">
|
<!-- Column without sorting -->
|
||||||
|
<div v-else>{{ col.heading }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="table_cell cell_settings" v-if="actions.length"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Content -->
|
||||||
|
<div class="table_content" is="transition-group" name="list">
|
||||||
<div class="table_row" v-for="(row, ri) in rows" :key="ri">
|
<div class="table_row" v-for="(row, ri) in rows" :key="ri">
|
||||||
<div class="table_cell" v-for="(col, ci) in columns" :key="ci + 'c'">
|
|
||||||
<span v-if="col.prop">{{ getProp(row, col.prop) }}</span>
|
<!-- Row content -->
|
||||||
|
<div v-for="(col, ci) in columns"
|
||||||
|
:class="['table_cell', {[`align-${col.align}`]: col.align}]"
|
||||||
|
:key="ci + 'c'">
|
||||||
|
|
||||||
|
<span v-if="col.prop" :title="getProp(row, col.prop)">{{ getProp(row, col.prop) }}</span>
|
||||||
<span v-else-if="col.render">{{ col.render(row) }}</span>
|
<span v-else-if="col.render">{{ col.render(row) }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table_cell cell_settings" v-if="actions.length" ref="row_actions">
|
<!-- Row actions -->
|
||||||
<div title="Open actions" class="actions_btn" @click="openActions">
|
<div class="table_cell cell_settings" v-if="actions.length" ref="row_actions">
|
||||||
|
<ul class="actions_container">
|
||||||
|
<li v-for="(a, i) in actions" :title="a.title" @click="a.action(row)" :key="i">
|
||||||
|
<i :class="['icon', a.icon]"></i>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div title="Open actions" class="actions_btn" @click="toggleActions">
|
||||||
<i class="icon icon-cog" aria-hidden="true"></i>
|
<i class="icon icon-cog" aria-hidden="true"></i>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<ul class="actions_container">
|
|
||||||
<li v-for="(a, i) in actions">
|
|
||||||
<div :title="a.title" @click="a.action(row)">
|
|
||||||
<i :class="['icon', a.icon]"></i>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<div title="Close actions" @click="closeActions">
|
|
||||||
<i class="icon icon-cog"></i>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'My-Table',
|
name: 'My-Table',
|
||||||
props: {
|
props: {
|
||||||
actions: {
|
actions: {
|
||||||
type: Array,
|
type: Array,
|
||||||
default() {
|
default() {
|
||||||
return [ ];
|
return [ ];
|
||||||
}
|
|
||||||
},
|
|
||||||
columns: {
|
|
||||||
type: Array,
|
|
||||||
default() {
|
|
||||||
return [ ];
|
|
||||||
}
|
|
||||||
},
|
|
||||||
rows: {
|
|
||||||
type: Array,
|
|
||||||
default() {
|
|
||||||
return [ ];
|
|
||||||
}
|
|
||||||
},
|
|
||||||
currentOrderBy: {
|
|
||||||
type: String
|
|
||||||
},
|
|
||||||
currentOrderDesc: {
|
|
||||||
type: Boolean
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
orderBy(col) {
|
|
||||||
console.log(col);
|
|
||||||
this.$emit('sort', {
|
|
||||||
orderBy: col,
|
|
||||||
orderDesc: false
|
|
||||||
});
|
|
||||||
},
|
|
||||||
getProp(row, prop) {
|
|
||||||
let props = prop.split('.');
|
|
||||||
let val = row;
|
|
||||||
props.forEach((p) => {
|
|
||||||
if (typeof val == 'object') {
|
|
||||||
val = val[p];
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return val;
|
|
||||||
},
|
|
||||||
openActions(event) {
|
|
||||||
const parent = event.currentTarget.parentNode;
|
|
||||||
this.$refs.row_actions.forEach((item) => {
|
|
||||||
if (item !== parent)
|
|
||||||
item.classList.remove("open")
|
|
||||||
});
|
|
||||||
parent.classList.add("open");
|
|
||||||
},
|
|
||||||
closeActions(event) {
|
|
||||||
const parent = event.currentTarget.parentNode.parentNode.parentNode;
|
|
||||||
parent.classList.remove("open");
|
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
}
|
columns: {
|
||||||
|
type: Array,
|
||||||
|
default() {
|
||||||
|
return [ ];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
rows: {
|
||||||
|
type: Array,
|
||||||
|
default() {
|
||||||
|
return [ ];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
currentOrderBy: {
|
||||||
|
type: String
|
||||||
|
},
|
||||||
|
currentOrderDesc: {
|
||||||
|
type: Boolean
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
orderBy(col) {
|
||||||
|
console.log(col);
|
||||||
|
this.$emit('sort', {
|
||||||
|
orderBy: col,
|
||||||
|
orderDesc: false
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getProp(row, prop) {
|
||||||
|
let props = prop.split('.');
|
||||||
|
let val = row;
|
||||||
|
props.forEach((p) => {
|
||||||
|
if (typeof val == 'object') {
|
||||||
|
val = val[p];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return val;
|
||||||
|
},
|
||||||
|
toggleActions(event) {
|
||||||
|
const parent = event.currentTarget.parentNode;
|
||||||
|
this.$refs.row_actions.forEach((item) => {
|
||||||
|
if (item !== parent)
|
||||||
|
item.classList.remove("open")
|
||||||
|
});
|
||||||
|
parent.classList.toggle("open");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
@import "../mixins";
|
@import "~mixins";
|
||||||
.list-item {
|
|
||||||
display: inline-block;
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
.list-enter-active, .list-leave-active {
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
.list-enter, .list-leave-to /* .list-leave-active below version 2.1.8 */ {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(30px);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------------------------------------------------------
|
.list-item {
|
||||||
# Content Tables
|
display: inline-block;
|
||||||
--------------------------------------------------------------*/
|
margin-right: 10px;
|
||||||
.cms_table{
|
}
|
||||||
display: table;
|
.list-enter-active, .list-leave-active {
|
||||||
width: 100%;
|
transition: all 0.2s;
|
||||||
overflow: hidden;
|
}
|
||||||
border-collapse: collapse;
|
.list-enter, .list-leave-to /* .list-leave-active below version 2.1.8 */ {
|
||||||
table-layout: fixed;
|
opacity: 0;
|
||||||
|
transform: translateY(30px);
|
||||||
|
}
|
||||||
|
|
||||||
.table_header, .table_content{margin: 0px -25px;}
|
/*--------------------------------------------------------------
|
||||||
.table_header{
|
# Content Tables
|
||||||
display: table-header-group;
|
--------------------------------------------------------------*/
|
||||||
}
|
|
||||||
|
|
||||||
.table_content{
|
.cms_table {
|
||||||
display: table-row-group;
|
.table_header{
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table_row{
|
.table_row{
|
||||||
display: table-row;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
background: white;
|
background: white;
|
||||||
&:nth-child(even) {
|
&:nth-child(even) {
|
||||||
background: #f5f3f4;
|
background: @gray_light;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.table_cell {
|
.table_cell {
|
||||||
display: table-cell;
|
|
||||||
vertical-align: middle;
|
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
padding: 10px 15px;
|
padding: 10px 15px;
|
||||||
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&.sortable{
|
@media (min-width: @screen-sm-min) {
|
||||||
&:hover{
|
.cms_table{
|
||||||
cursor: pointer;
|
display: table;
|
||||||
|
table-layout: fixed;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
border-collapse: collapse;
|
||||||
|
|
||||||
|
.table_header, .table_content{margin: 0px -25px;}
|
||||||
|
.table_header{
|
||||||
|
display: table-header-group;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table_content{
|
||||||
|
display: table-row-group;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table_row{
|
||||||
|
display: table-row;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
background: white;
|
||||||
|
&:nth-child(even) {
|
||||||
|
background: @gray_light;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.table_cell {
|
||||||
|
display: table-cell;
|
||||||
|
vertical-align: middle;
|
||||||
|
font-size: 13px;
|
||||||
|
padding: 10px 15px;
|
||||||
|
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
&.sortable:hover{cursor: pointer;}
|
||||||
|
|
||||||
|
&.align-center{text-align: center;}
|
||||||
|
&.align-left{text-align: left;}
|
||||||
|
&.align-right{text-align: right;}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* === Other cell types === */
|
||||||
|
/*.cell_checkbox {width:40px;}
|
||||||
|
.cell_image {width:120px; line-height:0;} .cell_image img {width:100%;}
|
||||||
|
.cell_title {position:relative;}
|
||||||
|
.cell_title a {color:#000;} .cell_title a:hover {color:#28b78d;}*/
|
||||||
|
|
||||||
|
/*.cell_date {}
|
||||||
|
.cell_author {}
|
||||||
|
.cell_category {}
|
||||||
|
.cell_status {position:relative; padding-left:20px;}
|
||||||
|
|
||||||
|
.cell_status:before {
|
||||||
|
content:"";
|
||||||
|
display:block;
|
||||||
|
position:absolute;
|
||||||
|
left:0px; top:50%;
|
||||||
|
margin-top:-5px;
|
||||||
|
width:12px; height:12px;
|
||||||
|
border-radius:100%;
|
||||||
|
background:#88c87a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cell_status_online {color:#28b78d;} .cell_status_online:before {background-color:#28b78d;}
|
||||||
|
.cell_status_offline {color:#ea5e5d;} .cell_status_offline:before {background-color:#ea5e5d;}
|
||||||
|
.cell_status_remaining {color:#5fb1e9;} .cell_status_remaining:before {background-color:#5fb1e9;}
|
||||||
|
.cell_status_expired {color:#eba760;} .cell_status_expired:before {background-color:#eba760;}
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* === Cell settings === */
|
||||||
|
.cell_settings {
|
||||||
|
.clearfix();
|
||||||
|
|
||||||
|
.actions_btn{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions_container{
|
||||||
|
list-style-type: none;
|
||||||
|
|
||||||
|
.icon:hover{
|
||||||
|
cursor: pointer;
|
||||||
|
color: @cms_brand_primary;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/*.cell_checkbox {width:40px;}
|
li {
|
||||||
.cell_image {width:120px; line-height:0;} .cell_image img {width:100%;}
|
display: inline-block;
|
||||||
.cell_title {position:relative;}
|
padding-right: 5px;
|
||||||
.cell_title a {color:#000;} .cell_title a:hover {color:#28b78d;}*/
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* === Other cell types === */
|
@media (min-width: @screen-sm-min) {
|
||||||
/*.cell_date {}
|
.cell_settings {
|
||||||
.cell_author {}
|
|
||||||
.cell_category {}
|
|
||||||
.cell_status {position:relative; padding-left:20px;}
|
|
||||||
|
|
||||||
.cell_status:before {
|
|
||||||
content:"";
|
|
||||||
display:block;
|
|
||||||
position:absolute;
|
|
||||||
left:0px; top:50%;
|
|
||||||
margin-top:-5px;
|
|
||||||
width:12px; height:12px;
|
|
||||||
border-radius:100%;
|
|
||||||
background:#88c87a;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cell_status_online {color:#28b78d;} .cell_status_online:before {background-color:#28b78d;}
|
|
||||||
.cell_status_offline {color:#ea5e5d;} .cell_status_offline:before {background-color:#ea5e5d;}
|
|
||||||
.cell_status_remaining {color:#5fb1e9;} .cell_status_remaining:before {background-color:#5fb1e9;}
|
|
||||||
.cell_status_expired {color:#eba760;} .cell_status_expired:before {background-color:#eba760;}
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* === Cell settings === */
|
|
||||||
.cell_settings {
|
|
||||||
.clearfix();
|
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 40px;
|
width: 22.4px + 2*15px;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
overflow: visible;
|
overflow: visible !important;
|
||||||
|
|
||||||
|
|
||||||
.actions_btn{
|
.actions_btn{
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
z-index: 20;
|
z-index: 20;
|
||||||
&:hover{
|
&:hover{
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@@ -217,55 +276,45 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.actions_container {
|
.actions_container {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: -1;
|
|
||||||
top: -5px;
|
|
||||||
right: 0;
|
|
||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
|
top: 50%;
|
||||||
|
margin-top: -16px;
|
||||||
|
right: 7px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
overflow: hidden;
|
pointer-events: none;
|
||||||
|
transition: opacity 0.3s;
|
||||||
|
|
||||||
|
color: white;
|
||||||
|
background: @cms_brand_primary;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
background: @cms_bg_lighter;
|
|
||||||
transition: all 0.3s;
|
|
||||||
white-space: nowrap;
|
|
||||||
|
|
||||||
li {
|
li {
|
||||||
display: inline-block;
|
|
||||||
|
|
||||||
&:last-child{
|
&:last-child{
|
||||||
border-left: 1px solid @text_color;
|
border-right: 1px solid white;
|
||||||
padding-left: 5px;
|
padding-right: 10px;
|
||||||
|
margin-right: 26px;
|
||||||
.icon:before{
|
.icon:before{
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
li+li{
|
.icon:hover{
|
||||||
margin-left: 5px;
|
cursor: pointer;
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
color: @text_color;
|
color: @text_color;
|
||||||
&:hover{
|
|
||||||
cursor: pointer;
|
|
||||||
color: @cms_brand_primary;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.open {
|
&.open {
|
||||||
.actions_container{
|
.actions_btn {color: white; &:hover{color: black;}}
|
||||||
|
.actions_container {
|
||||||
|
pointer-events: all;
|
||||||
|
z-index: 10;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
z-index: 1;
|
|
||||||
transition: all 0.3s;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -20,131 +20,131 @@ import MyInput from './my-input.vue';
|
|||||||
import { ObserveVisibility } from 'vue-observe-visibility/dist/vue-observe-visibility';
|
import { ObserveVisibility } from 'vue-observe-visibility/dist/vue-observe-visibility';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "ScrollTable",
|
name: "ScrollTable",
|
||||||
directives: {
|
directives: {
|
||||||
ObserveVisibility
|
ObserveVisibility
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
MyTable,
|
MyTable,
|
||||||
MyInput
|
MyInput
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
actions: {
|
actions: {
|
||||||
type: Array,
|
type: Array,
|
||||||
default() {
|
default() {
|
||||||
return [ ];
|
return [ ];
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
columns: {
|
columns: {
|
||||||
type: Array,
|
type: Array,
|
||||||
default() {
|
default() {
|
||||||
return [ ];
|
return [ ];
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
newRows: {
|
newRows: {
|
||||||
type: Array,
|
type: Array,
|
||||||
default() {
|
default() {
|
||||||
return [ ];
|
return [ ];
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
offset: {
|
offset: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 0
|
default: 0
|
||||||
},
|
},
|
||||||
limit: {
|
limit: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 10
|
default: 10
|
||||||
},
|
},
|
||||||
orderBy: {
|
orderBy: {
|
||||||
type: String
|
type: String
|
||||||
},
|
},
|
||||||
orderDesc: {
|
orderDesc: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
},
|
},
|
||||||
search: {
|
search: {
|
||||||
type: String
|
type: String
|
||||||
},
|
},
|
||||||
loading: {
|
loading: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
},
|
},
|
||||||
hasMore: {
|
hasMore: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true
|
default: true
|
||||||
},
|
},
|
||||||
handler: {
|
handler: {
|
||||||
type: Function,
|
type: Function,
|
||||||
default: () => {}
|
default: () => {}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
newRows(rows) {
|
newRows(rows) {
|
||||||
rows.forEach(row => {
|
rows.forEach(row => {
|
||||||
this.rowsToPush.push(row);
|
this.rowsToPush.push(row);
|
||||||
});
|
});
|
||||||
this.currentOffset += rows.length;
|
this.currentOffset += rows.length;
|
||||||
this.pushRows(); // for transition
|
this.pushRows(); // for transition
|
||||||
},
|
},
|
||||||
loading(l) {
|
loading(l) {
|
||||||
if (!l) {
|
if (!l) {
|
||||||
// delay after loading for visibility observer
|
// delay after loading for visibility observer
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.loadingDelayed = false;
|
this.loadingDelayed = false;
|
||||||
}, 200);
|
}, 200);
|
||||||
} else {
|
} else {
|
||||||
this.loadingDelayed = true;
|
this.loadingDelayed = true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
rows: [ ],
|
rows: [ ],
|
||||||
rowsToPush: [ ],
|
rowsToPush: [ ],
|
||||||
currentOffset: this.offset,
|
currentOffset: this.offset,
|
||||||
currentOrderBy: this.orderBy,
|
currentOrderBy: this.orderBy,
|
||||||
currentOrderDesc: this.orderDesc,
|
currentOrderDesc: this.orderDesc,
|
||||||
currentSearch: this.search,
|
currentSearch: this.search,
|
||||||
loadingDelayed: false,
|
loadingDelayed: false,
|
||||||
reloadTriggered: false
|
reloadTriggered: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
visibilityChanged(isVisible, entry) {
|
visibilityChanged(isVisible) {
|
||||||
if (isVisible) {
|
if (isVisible) {
|
||||||
// infinite scrolling
|
// infinite scrolling
|
||||||
this.reloadTriggered = false;
|
this.reloadTriggered = false;
|
||||||
this.handler(this.currentOffset, this.limit, this.currentOrderBy, this.currentOrderDesc, this.currentSearch);
|
this.handler(this.currentOffset, this.limit, this.currentOrderBy, this.currentOrderDesc, this.currentSearch);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
pushRows() {
|
pushRows() {
|
||||||
let row = this.rowsToPush.shift();
|
let row = this.rowsToPush.shift();
|
||||||
if (row) {
|
if (row) {
|
||||||
this.rows.push(row);
|
this.rows.push(row);
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.pushRows();
|
this.pushRows();
|
||||||
}, 20);
|
}, 20);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
clear() {
|
clear() {
|
||||||
this.currentOffset = 0;
|
this.currentOffset = 0;
|
||||||
this.rows = [];
|
this.rows = [];
|
||||||
this.rowsToPush = [];
|
this.rowsToPush = [];
|
||||||
},
|
},
|
||||||
sort(e) {
|
sort(e) {
|
||||||
if (e.orderBy == this.currentOrderBy) {
|
if (e.orderBy == this.currentOrderBy) {
|
||||||
this.currentOrderDesc = !this.currentOrderDesc;
|
this.currentOrderDesc = !this.currentOrderDesc;
|
||||||
} else {
|
} else {
|
||||||
this.currentOrderDesc = false;
|
this.currentOrderDesc = false;
|
||||||
}
|
}
|
||||||
this.currentOrderBy = e.orderBy;
|
this.currentOrderBy = e.orderBy;
|
||||||
this.reloadTriggered = true;
|
this.reloadTriggered = true;
|
||||||
this.clear();
|
this.clear();
|
||||||
},
|
},
|
||||||
searchChanged(e) {
|
searchChanged(e) {
|
||||||
this.currentSearch = e;
|
this.currentSearch = e;
|
||||||
this.reloadTriggered = true;
|
this.reloadTriggered = true;
|
||||||
this.clear();
|
this.clear();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -14,27 +14,6 @@
|
|||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- User Profile -->
|
|
||||||
<div class="user_profile">
|
|
||||||
<a class="trigger">
|
|
||||||
<div class="image"><i class="icon icon-person" aria-hidden="true"></i></div>
|
|
||||||
<div class="text">Hans Zimmer <div class="role">Administrator</div></div>
|
|
||||||
<div class="btn"><i class="icon icon-arrow-up" aria-hidden="true"></i></div>
|
|
||||||
</a>
|
|
||||||
<div class="content">
|
|
||||||
<ul>
|
|
||||||
<li><a href="#">
|
|
||||||
<i class="icon icon-color-wand" aria-hidden="true"></i>
|
|
||||||
<div class="title">Profil anpassen</div>
|
|
||||||
</a></li>
|
|
||||||
<li><a href="#">
|
|
||||||
<i class="icon icon-log-out" aria-hidden="true"></i>
|
|
||||||
<div class="title">Ausloggen</div>
|
|
||||||
</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -49,7 +28,7 @@
|
|||||||
left: 0px;
|
left: 0px;
|
||||||
top: 40px;
|
top: 40px;
|
||||||
bottom: 0px;
|
bottom: 0px;
|
||||||
background: @cms_bg_light;
|
background: @ui_bg;
|
||||||
color: white;
|
color: white;
|
||||||
width: 70px;
|
width: 70px;
|
||||||
transition: all 0.3s;
|
transition: all 0.3s;
|
||||||
@@ -59,7 +38,8 @@
|
|||||||
height:100%; /*overflow-y:scroll;*/
|
height:100%; /*overflow-y:scroll;*/
|
||||||
|
|
||||||
&>.inner {
|
&>.inner {
|
||||||
position:relative; width:auto;
|
position:relative;
|
||||||
|
width:auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -84,7 +64,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active {background:#28b78d;}
|
&.active {background: @cms_brand_primary;}
|
||||||
// &.active .fa {background:#19435e;}
|
// &.active .fa {background:#19435e;}
|
||||||
|
|
||||||
/*&.active .submenu {border-top:solid 1px rgba(255,255,255,0.2);}*/
|
/*&.active .submenu {border-top:solid 1px rgba(255,255,255,0.2);}*/
|
||||||
@@ -123,7 +103,7 @@
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
left: 100%;
|
left: 100%;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
background: #152129;
|
background: @gray_dark;
|
||||||
width: 180px;
|
width: 180px;
|
||||||
height: auto;
|
height: auto;
|
||||||
transition: all 0.3s;
|
transition: all 0.3s;
|
||||||
@@ -146,7 +126,7 @@
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
border-color: rgba(255, 255, 255, 0);
|
border-color: rgba(255, 255, 255, 0);
|
||||||
border-right-color: #f5f3f4;
|
border-right-color: @gray_light;
|
||||||
border-width: 10px;
|
border-width: 10px;
|
||||||
margin-top: -10px;
|
margin-top: -10px;
|
||||||
}
|
}
|
||||||
@@ -155,54 +135,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/*--------------------------------------------------------------
|
|
||||||
# Left Sidebar (User Profile)
|
|
||||||
--------------------------------------------------------------*/
|
|
||||||
.user_profile {
|
|
||||||
position:fixed; bottom:0px; left:0px; right:0px; cursor:pointer; width:230px;
|
|
||||||
&>.trigger {
|
|
||||||
.clearfix();
|
|
||||||
display:block;
|
|
||||||
|
|
||||||
// a {display:block; width:100%; height:100%;}
|
|
||||||
|
|
||||||
.image {float:left; width:45px; height:45px; padding-top:7px; text-align:center;}
|
|
||||||
.image .icon {font-size:22px; color:#FFF;}
|
|
||||||
.image img {width:70%; margin:0 auto; display:block;}
|
|
||||||
|
|
||||||
.text {float:left; line-height:1; color:#FFF; font-size:14px; padding-left:15px; padding-top: 9px;}
|
|
||||||
.text .role {font-size:12px; color:rgba(255,255,255,0.5); display:block; margin-top:0px;}
|
|
||||||
|
|
||||||
&:hover {background:rgba(40,183,141,0.3);}
|
|
||||||
|
|
||||||
.btn {position:absolute; right:0px; top:0px; width:auto; height:auto; padding-top:12px; padding-right:20px;}
|
|
||||||
.btn .icon {color:#FFF; font-size:18px; transition:all 0.3s;}
|
|
||||||
}
|
|
||||||
|
|
||||||
&>.content {
|
|
||||||
display:none; color:#FFF; padding-bottom:30px;
|
|
||||||
|
|
||||||
ul{
|
|
||||||
list-style-type: none;
|
|
||||||
|
|
||||||
li{
|
|
||||||
padding:0px; line-height:1.2; color:#FFF; position:relative;
|
|
||||||
.icon {color:#FFF; font-size:20px; text-align:center; position:relative; left:0; float:left; height:45px; width:45px; line-height:45px;}
|
|
||||||
.navigation_text {position:relative; font-size:14px; display:block; color:#FFF; text-align:left; float:left; padding:0px 10px 0px 15px; width:180px; line-height:45px;}
|
|
||||||
a {color:#FFF; display:block; height:45px;}
|
|
||||||
&:after {clear:both; content:""; display:block;}
|
|
||||||
&:hover {background:rgba(40,183,141,0.3);}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.open {
|
|
||||||
background:rgba(40,183,141,0.3);
|
|
||||||
&>.trigger{background:rgba(40,183,141,0.5);}
|
|
||||||
.icon-arrow-up{transform: rotate(180deg);}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media(max-width: @screen-xs-max) {
|
@media(max-width: @screen-xs-max) {
|
||||||
.sidebar {
|
.sidebar {
|
||||||
left:inherit; position:relative; width:100%; top:0px; margin-bottom:30px;
|
left:inherit; position:relative; width:100%; top:0px; margin-bottom:30px;
|
||||||
|
|||||||
@@ -1,80 +1,205 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="topbar">
|
<div class="topbar">
|
||||||
<div class="logo"><a href="#"><img src="assets/images/cms_logo.png" alt=""></a></div>
|
<div class="logo"><a href="#"><img src="assets/images/cms_logo.png" alt=""></a></div>
|
||||||
<div class="name">Meine Website</div>
|
<div class="name">Meine Website</div>
|
||||||
</div>
|
|
||||||
|
<!-- User Profile -->
|
||||||
|
<div class="user_profile" ref="user_profile">
|
||||||
|
<a class="trigger" @click.prevent="toggleMenu">
|
||||||
|
<div class="image"><i class="icon icon-user" aria-hidden="true"></i></div>
|
||||||
|
<div class="text"> {{ login.Company }} <div class="role">Administrator</div></div>
|
||||||
|
<div class="trigger_btn"><i class="icon icon-arrow-down" aria-hidden="true"></i></div>
|
||||||
|
</a>
|
||||||
|
<nav class="user_menu">
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">
|
||||||
|
<i class="icon icon-color-wand" aria-hidden="true"></i>
|
||||||
|
<div class="title">Profil anpassen</div>
|
||||||
|
</a></li>
|
||||||
|
<li><a href="#">
|
||||||
|
<i class="icon icon-log-out" aria-hidden="true"></i>
|
||||||
|
<div class="title">Logout</div>
|
||||||
|
</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "Topbar",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
login: this.$store.state.persist.login
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toggleMenu() {
|
||||||
|
this.$refs.user_profile.classList.toggle("open");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
@import "../mixins.less";
|
@import "../mixins.less";
|
||||||
|
|
||||||
.topbar {
|
@bar_height: 40px;
|
||||||
.clearfix();
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
left: 0px;
|
|
||||||
background: @cms_bg_light;
|
|
||||||
color: white;
|
|
||||||
height: 40px;
|
|
||||||
z-index: 1500;
|
|
||||||
|
|
||||||
&>.logo {
|
/*--------------------------------------------------------------
|
||||||
display: block;
|
# Topbar (Sitename)
|
||||||
width: 70px;
|
--------------------------------------------------------------*/
|
||||||
height: 40px;
|
.topbar {
|
||||||
float: left;
|
.clearfix();
|
||||||
position: relative;
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0px;
|
||||||
|
background: @ui_bg;
|
||||||
|
color: white;
|
||||||
|
height: @bar_height;
|
||||||
|
z-index: 1500;
|
||||||
|
|
||||||
a {
|
&>.logo {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 70px;
|
||||||
height: 100%;
|
height: @bar_height;
|
||||||
|
float: left;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: rgba(40,183,141,0.3);
|
background: rgba(40,183,141,0.3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width:32px;
|
display: block;
|
||||||
height:auto;
|
width: 30px;
|
||||||
margin:0 auto;
|
height: auto;
|
||||||
padding-top:4px;
|
margin: 0 auto;
|
||||||
display:block;
|
padding-top: 4px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&>.name {
|
&>.name {
|
||||||
float: left;
|
float: left;
|
||||||
width: auto;
|
width: auto;
|
||||||
line-height: 40px;
|
line-height: @bar_height;
|
||||||
padding-left: 15px;
|
padding-left: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&>.navbutton {
|
// &>.navbutton {
|
||||||
|
// display: block;
|
||||||
|
// float: left;
|
||||||
|
// width: auto;
|
||||||
|
// height: 100%;
|
||||||
|
// font-size: 22px;
|
||||||
|
// margin-left: 40px;
|
||||||
|
// height: @bar_height;
|
||||||
|
// width: 40px;
|
||||||
|
// padding-top: 4px;
|
||||||
|
// cursor: pointer;
|
||||||
|
// text-align: center;
|
||||||
|
// color: white;
|
||||||
|
|
||||||
|
// &:hover {
|
||||||
|
// background: fade(@cms_brand_primary, 30%);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
|
||||||
|
/*--------------------------------------------------------------
|
||||||
|
# Topbar (User Profile)
|
||||||
|
--------------------------------------------------------------*/
|
||||||
|
.user_profile {
|
||||||
|
float: right;
|
||||||
|
|
||||||
|
&>.trigger {
|
||||||
|
.clearfix();
|
||||||
display: block;
|
display: block;
|
||||||
float: left;
|
padding: 4px 10px;
|
||||||
width: auto;
|
font-size: 0;
|
||||||
height: 100%;
|
|
||||||
font-size: 22px;
|
|
||||||
margin-left: 40px;
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
padding-top: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
text-align: center;
|
|
||||||
color: white;
|
color: white;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
cursor: pointer;
|
||||||
background: fade(@cms_brand_primary, 30%);
|
background: fade(@cms_brand_primary, 30%);
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<script>
|
.icon{
|
||||||
export default {
|
font-size: 22px;
|
||||||
name: "Topbar"
|
}
|
||||||
}
|
|
||||||
</script>
|
.image, .text, .trigger_btn{
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
div+div{
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image {
|
||||||
|
max-height: @bar_height - 8px;
|
||||||
|
img{
|
||||||
|
width:70%; margin:0 auto; display:block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
font-size: 12px;
|
||||||
|
|
||||||
|
.role{
|
||||||
|
display: block;
|
||||||
|
font-size: 11px;
|
||||||
|
color: fade(white, 50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.user_menu {
|
||||||
|
display: none;
|
||||||
|
background: @cms_brand_primary;
|
||||||
|
|
||||||
|
ul{
|
||||||
|
list-style-type: none;
|
||||||
|
|
||||||
|
li{
|
||||||
|
.clearfix();
|
||||||
|
.icon {
|
||||||
|
float: left;
|
||||||
|
width: 45px;
|
||||||
|
line-height: 45px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
float: left;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 45px;
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
color: white;
|
||||||
|
height: 45px;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
background: darken(@cms_brand_primary, 5%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.open {
|
||||||
|
.user_menu{display: block;}
|
||||||
|
&>.trigger{background: fade(@cms_brand_primary, 50%);}
|
||||||
|
.trigger_btn .icon:before{transform: rotate(180deg);}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
368
src/main.js
368
src/main.js
@@ -13,212 +13,212 @@ Vue.use(Vuex);
|
|||||||
const router = new VueRouter();
|
const router = new VueRouter();
|
||||||
|
|
||||||
const store = new Vuex.Store({
|
const store = new Vuex.Store({
|
||||||
state: {
|
state: {
|
||||||
api: {},
|
api: {},
|
||||||
navigation: [],
|
navigation: [],
|
||||||
persist: {
|
persist: {
|
||||||
login: {},
|
login: {},
|
||||||
authToken: '',
|
authToken: '',
|
||||||
jwt: {},
|
jwt: {},
|
||||||
credentials: {}
|
credentials: {}
|
||||||
}
|
}
|
||||||
},
|
|
||||||
mutations: {
|
|
||||||
setAPI(state, payload) {
|
|
||||||
state.api = payload;
|
|
||||||
},
|
},
|
||||||
setNavigation(state, payload) {
|
mutations: {
|
||||||
for (var i = 0; i < payload.length; i++) {
|
setAPI(state, payload) {
|
||||||
state.navigation.push(payload[i]); // = payload;
|
state.api = payload;
|
||||||
}
|
},
|
||||||
},
|
setNavigation(state, payload) {
|
||||||
setCredentials(state, payload) {
|
for (var i = 0; i < payload.length; i++) {
|
||||||
state.persist.credentials = {
|
state.navigation.push(payload[i]); // = payload;
|
||||||
username: payload.username,
|
|
||||||
password: payload.password
|
|
||||||
};
|
|
||||||
objectToPersist(state.persist, 'persistantStore');
|
|
||||||
},
|
|
||||||
setLogin(state, payload) {
|
|
||||||
state.persist.login = payload.User;
|
|
||||||
state.persist.authToken = payload.AuthToken;
|
|
||||||
state.persist.jwt = JwtDecode(payload.AuthToken);
|
|
||||||
objectToPersist(state.persist, 'persistantStore');
|
|
||||||
},
|
|
||||||
clearLogin(state) {
|
|
||||||
state.persist.login = {};
|
|
||||||
state.persist.authToken = '';
|
|
||||||
state.persist.jwt = {};
|
|
||||||
state.persist.credentials = {};
|
|
||||||
objectToPersist(state.persist, 'persistantStore');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
actions: {
|
|
||||||
apiRequest(context, payload) {
|
|
||||||
let doRequest = () => {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
Axios({
|
|
||||||
method: payload.method ? payload.method : 'get',
|
|
||||||
baseURL: context.state.api.baseURL,
|
|
||||||
url: payload.endpoint,
|
|
||||||
params: payload.params,
|
|
||||||
data: payload.data,
|
|
||||||
headers: {
|
|
||||||
'X-Auth-Token': context.state.persist.authToken
|
|
||||||
}
|
}
|
||||||
})
|
},
|
||||||
.then(response => {
|
setCredentials(state, payload) {
|
||||||
console.log(response);
|
state.persist.credentials = {
|
||||||
resolve(response.data);
|
username: payload.username,
|
||||||
})
|
password: payload.password
|
||||||
.catch(error => {
|
};
|
||||||
console.dir(error);
|
objectToPersist(state.persist, 'persistantStore');
|
||||||
reject(error);
|
},
|
||||||
})
|
setLogin(state, payload) {
|
||||||
});
|
state.persist.login = payload.User;
|
||||||
};
|
state.persist.authToken = payload.AuthToken;
|
||||||
|
state.persist.jwt = JwtDecode(payload.AuthToken);
|
||||||
if (payload.endpoint != 'login') {
|
objectToPersist(state.persist, 'persistantStore');
|
||||||
// no jwt check for login call
|
},
|
||||||
|
clearLogin(state) {
|
||||||
// empty username = not logged in
|
state.persist.login = {};
|
||||||
if (!context.state.persist.credentials.username) {
|
state.persist.authToken = '';
|
||||||
return new Promise((resolve, reject) => {
|
state.persist.jwt = {};
|
||||||
// show login page
|
state.persist.credentials = {};
|
||||||
router.push('/login');
|
objectToPersist(state.persist, 'persistantStore');
|
||||||
reject(['not logged in']);
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
let now = Math.round(Date.now() / 1000);
|
|
||||||
if (context.state.persist.jwt.exp < (now + 300)) {
|
|
||||||
// too old jwt, logout
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
context.commit('clearLogin');
|
|
||||||
router.push('/login');
|
|
||||||
reject(['jwt too old, logout']);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if ((context.state.persist.jwt.exp - 60) < now) {
|
|
||||||
// jwt near expire, get new one
|
|
||||||
console.log("getting new jwt");
|
|
||||||
|
|
||||||
return context.dispatch('login', context.state.persist.credentials)
|
|
||||||
.then(() => {
|
|
||||||
console.log("LOOOGIIIINNN");
|
|
||||||
return doRequest();
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
throw error;
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return doRequest();
|
|
||||||
},
|
},
|
||||||
login(context, payload) {
|
actions: {
|
||||||
return new Promise((resolve, reject) => {
|
apiRequest(context, payload) {
|
||||||
context.dispatch('apiRequest', {
|
let doRequest = () => {
|
||||||
method: 'post',
|
return new Promise((resolve, reject) => {
|
||||||
endpoint: 'login',
|
Axios({
|
||||||
data: payload
|
method: payload.method ? payload.method : 'get',
|
||||||
})
|
baseURL: context.state.api.baseURL,
|
||||||
.then(data => {
|
url: payload.endpoint,
|
||||||
context.commit('setCredentials', payload);
|
params: payload.params,
|
||||||
context.commit('setLogin', data);
|
data: payload.data,
|
||||||
resolve(data.User);
|
headers: {
|
||||||
})
|
'X-Auth-Token': context.state.persist.authToken
|
||||||
.catch(error => {
|
}
|
||||||
if (error.response && error.response.data && error.response.data.error) {
|
})
|
||||||
reject(error.response.data.error);
|
.then(response => {
|
||||||
} else {
|
console.log(response);
|
||||||
reject([]);
|
resolve(response.data);
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.dir(error);
|
||||||
|
reject(error);
|
||||||
|
})
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
if (payload.endpoint != 'login') {
|
||||||
|
// no jwt check for login call
|
||||||
|
|
||||||
|
// empty username = not logged in
|
||||||
|
if (!context.state.persist.credentials.username) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
// show login page
|
||||||
|
router.push('/login');
|
||||||
|
reject(['not logged in']);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
let now = Math.round(Date.now() / 1000);
|
||||||
|
if (context.state.persist.jwt.exp < (now + 300)) {
|
||||||
|
// too old jwt, logout
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
context.commit('clearLogin');
|
||||||
|
router.push('/login');
|
||||||
|
reject(['jwt too old, logout']);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if ((context.state.persist.jwt.exp - 60) < now) {
|
||||||
|
// jwt near expire, get new one
|
||||||
|
console.log("getting new jwt");
|
||||||
|
|
||||||
|
return context.dispatch('login', context.state.persist.credentials)
|
||||||
|
.then(() => {
|
||||||
|
console.log("LOOOGIIIINNN");
|
||||||
|
return doRequest();
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
throw error;
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
|
||||||
});
|
return doRequest();
|
||||||
|
},
|
||||||
|
login(context, payload) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
context.dispatch('apiRequest', {
|
||||||
|
method: 'post',
|
||||||
|
endpoint: 'login',
|
||||||
|
data: payload
|
||||||
|
})
|
||||||
|
.then(data => {
|
||||||
|
context.commit('setCredentials', payload);
|
||||||
|
context.commit('setLogin', data);
|
||||||
|
resolve(data.User);
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
if (error.response && error.response.data && error.response.data.error) {
|
||||||
|
reject(error.response.data.error);
|
||||||
|
} else {
|
||||||
|
reject([]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
function objectToPersist(obj, key) {
|
function objectToPersist(obj, key) {
|
||||||
try {
|
try {
|
||||||
const serialized = JSON.stringify(obj);
|
const serialized = JSON.stringify(obj);
|
||||||
localStorage.setItem(key ? key : 'persistant', serialized);
|
localStorage.setItem(key ? key : 'persistant', serialized);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error(error);
|
console.error(error);
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
function persistToObject(key) {
|
function persistToObject(key) {
|
||||||
try {
|
try {
|
||||||
const serialized = localStorage.getItem(key ? key : 'persistant');
|
const serialized = localStorage.getItem(key ? key : 'persistant');
|
||||||
if (serialized === null) {
|
if (serialized === null) {
|
||||||
return undefined;
|
return undefined;
|
||||||
|
}
|
||||||
|
return JSON.parse(serialized);
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error);
|
||||||
|
return undefined;
|
||||||
}
|
}
|
||||||
return JSON.parse(serialized);
|
|
||||||
} catch (error) {
|
|
||||||
console.log(error);
|
|
||||||
return undefined;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// get store persist part from localStorage
|
// get store persist part from localStorage
|
||||||
let persist = persistToObject('persistantStore');
|
let persist = persistToObject('persistantStore');
|
||||||
if (persist) {
|
if (persist) {
|
||||||
store.state.persist = persist;
|
store.state.persist = persist;
|
||||||
}
|
}
|
||||||
|
|
||||||
// load init
|
// load init
|
||||||
Axios.get('conf/init.json')
|
Axios.get('conf/init.json')
|
||||||
.then(results => {
|
.then(results => {
|
||||||
// set navigation
|
// set navigation
|
||||||
if (!Array.isArray(results.data.navigation)) {
|
if (!Array.isArray(results.data.navigation)) {
|
||||||
alert('invalid data in init.json');
|
alert('invalid data in init.json');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const navigation = results.data.navigation.map(({name, to, icon, show}) => {return {name, to, icon, show}});
|
const navigation = results.data.navigation.map(({name, to, icon, show}) => {return {name, to, icon, show}});
|
||||||
|
|
||||||
store.commit("setNavigation", navigation);
|
store.commit("setNavigation", navigation);
|
||||||
|
|
||||||
// set api config in store
|
// set api config in store
|
||||||
store.commit("setAPI", results.data.api);
|
store.commit("setAPI", results.data.api);
|
||||||
|
|
||||||
// add routes
|
// add routes
|
||||||
let routes = [];
|
let routes = [];
|
||||||
let rIdx = 0;
|
let rIdx = 0;
|
||||||
results.data.navigation.forEach(({name, to, content, data}) => routes.push({
|
results.data.navigation.forEach(({name, to, content, data}) => routes.push({
|
||||||
name: name,
|
name: name,
|
||||||
path: to,
|
path: to,
|
||||||
meta: {
|
meta: {
|
||||||
title: name
|
title: name
|
||||||
},
|
},
|
||||||
component: Vue.component(name + rIdx++, {
|
component: Vue.component(name + rIdx++, {
|
||||||
template: '<div id="' + name + rIdx + '">' + content + '</div>',
|
template: '<div id="' + name + rIdx + '">' + content + '</div>',
|
||||||
components: Views,
|
components: Views,
|
||||||
data: function(data) {
|
data: function(data) {
|
||||||
if (typeof data != 'object') {
|
if (typeof data != 'object') {
|
||||||
return () => { return {}; };
|
return () => { return {}; };
|
||||||
}
|
}
|
||||||
return () => { return data; };
|
return () => { return data; };
|
||||||
}(data)
|
}(data)
|
||||||
})
|
})
|
||||||
}));
|
}));
|
||||||
router.addRoutes(routes);
|
router.addRoutes(routes);
|
||||||
router.beforeEach((to, from, next) => {
|
router.beforeEach((to, from, next) => {
|
||||||
console.log(to);
|
console.log(to);
|
||||||
document.title = (to.meta && to.meta.title) ? results.data.title + ': ' + to.meta.title : results.data.title;
|
document.title = (to.meta && to.meta.title) ? results.data.title + ': ' + to.meta.title : results.data.title;
|
||||||
next();
|
next();
|
||||||
});
|
});
|
||||||
|
|
||||||
// load app, when init finishs
|
// load app, when init finishs
|
||||||
new Vue({
|
new Vue({
|
||||||
el: '#vue-app',
|
el: '#vue-app',
|
||||||
render: h => h(App),
|
render: h => h(App),
|
||||||
router,
|
router,
|
||||||
store
|
store
|
||||||
});
|
});
|
||||||
})
|
})
|
||||||
.catch(error => {
|
.catch(error => {
|
||||||
alert('error loading: ' + error.message);
|
alert('error loading: ' + error.message);
|
||||||
});
|
});
|
||||||
@@ -3,15 +3,22 @@
|
|||||||
@screen-md: 1024px;
|
@screen-md: 1024px;
|
||||||
@screen-lg: 1200px;
|
@screen-lg: 1200px;
|
||||||
|
|
||||||
@text_color: black;
|
@font_family: "Open Sans", sans-serif;
|
||||||
|
@text_color: #333;
|
||||||
|
@font_size: 14px;
|
||||||
|
|
||||||
|
@line_height_base: 1.4;
|
||||||
|
@line_height_heading: 1.2;
|
||||||
|
|
||||||
|
|
||||||
|
@gray_dark: #152129;
|
||||||
|
@gray_light: #f5f3f4;
|
||||||
|
|
||||||
@cms_bg_lighter: #e0e0e0;
|
|
||||||
@cms_bg_light: #1a2e3b;
|
|
||||||
@cms_dark_border: #152129;
|
|
||||||
|
|
||||||
@cms_brand_primary: #28b78d;
|
@cms_brand_primary: #28b78d;
|
||||||
@cms_brand_secondary: #152129;
|
@cms_brand_secondary: #ac1526;
|
||||||
|
|
||||||
|
@ui_bg: #1a2e3b;
|
||||||
|
|
||||||
/*****************************************/
|
/*****************************************/
|
||||||
|
|
||||||
|
|||||||
@@ -1,294 +0,0 @@
|
|||||||
<template>
|
|
||||||
|
|
||||||
<!-- Content Headline -->
|
|
||||||
<div class="cms_content_main_headline"><h1>Beiträge // News</h1> <a href="#" class="button cms_add_button"><i class="ion-plus-round"></i> Eintrag hinzufügen</a></div>
|
|
||||||
|
|
||||||
<!-- Searching -->
|
|
||||||
<div class="cms_content_search_section">
|
|
||||||
<div class="searchbar_left">
|
|
||||||
<form action="" method="GET">
|
|
||||||
<span class="cms_searchbox">
|
|
||||||
<i class="fa fa-search" aria-hidden="true"></i>
|
|
||||||
<input style="resize: none;" class="input_search" placeholder="Suchen" name="search" size="" value="" type="text">
|
|
||||||
<input style="display:none;" type="submit">
|
|
||||||
</span>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
<!-- <div class="searchbar_right">
|
|
||||||
<form action="" method="GET">
|
|
||||||
<span class="cms_searchbox">
|
|
||||||
<i class="fa fa-refresh" aria-hidden="true"></i>
|
|
||||||
<input style="resize: none;" class="input_search_replace" placeholder="Suchen & Ersetzen" name="search" size="" value="" type="text">
|
|
||||||
</span>
|
|
||||||
<input style="display:none;" type="submit">
|
|
||||||
</form>
|
|
||||||
</div> -->
|
|
||||||
<div class="clear"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Content Table Headline -->
|
|
||||||
<div class="content_table_headline">
|
|
||||||
25 Einträge // 5 Selektiert <a href="#" class="button button_action"><i class="ion-gear-a"></i>Aktion</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Table -->
|
|
||||||
<div class="cms_content_table">
|
|
||||||
<div class="cms_table_row_header">
|
|
||||||
<!-- Row -->
|
|
||||||
<div class="cms_table_row">
|
|
||||||
<div class="table_cell cell_checkbox"><div class="checkbox_holder"><input id="check_id1" type="checkbox" name="check_id1" value=""><label for="check_id1"></label><div class="check_checkbox"></div></div></div>
|
|
||||||
<div class="table_cell cell_image">Beitragsbild <i class="fa fa-angle-down" aria-hidden="true"></i></div>
|
|
||||||
<div class="table_cell cell_title">Titel <i class="fa fa-angle-down" aria-hidden="true"></i></div>
|
|
||||||
<div class="table_cell cell_date">Datum <i class="fa fa-angle-down" aria-hidden="true"></i></div>
|
|
||||||
<div class="table_cell cell_author">Autor <i class="fa fa-angle-down" aria-hidden="true"></i></div>
|
|
||||||
<div class="table_cell">Kategorie <i class="fa fa-angle-down" aria-hidden="true"></i></div>
|
|
||||||
<div class="table_cell cell_status_container"><span class="cell_status_head">Status <i class="fa fa-chevron-circle-down" aria-hidden="true"></i></span></div>
|
|
||||||
<div class="table_cell cell_settings"><span class="cell_edit_cols">Spalten anpassen <i class="fa fa-columns" aria-hidden="true"></i></span></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="cms_table_row_content">
|
|
||||||
<!-- Row -->
|
|
||||||
<div class="cms_table_row">
|
|
||||||
<div class="table_cell cell_checkbox"><div class="checkbox_holder"><input id="check_id2" type="checkbox" name="check_id2" value=""><label for="check_id2"></label><div class="check_checkbox"></div></div></div>
|
|
||||||
<div class="table_cell cell_image"><a href="#"><img src="project-files/img/placeholder_image.jpg" alt=""></a></div>
|
|
||||||
<div class="table_cell cell_title"><a href="#">Wilkommen auf unserer Website</a></div>
|
|
||||||
<div class="table_cell cell_date">20.03.2017</div>
|
|
||||||
<div class="table_cell cell_author">Administrator</div>
|
|
||||||
<div class="table_cell">News</div>
|
|
||||||
<div class="table_cell cell_status_container"><span class="cell_status cell_status_online"><span class="cell_status_text">online</span></span></div>
|
|
||||||
<div class="table_cell cell_settings">
|
|
||||||
<a class="cell_settings_click"><i class="fa fa-cog" aria-hidden="true"></i></a>
|
|
||||||
|
|
||||||
<div class="cell_settings_inner">
|
|
||||||
|
|
||||||
<div class="cell_settings_inner_container">
|
|
||||||
<div class="cell_settings_inner_section">
|
|
||||||
<ul>
|
|
||||||
<li><a href="#"><i class="fa fa-pencil" aria-hidden="true"></i></a></li>
|
|
||||||
<li><a href="#"><i class="fa fa-files-o" aria-hidden="true"></i></a></li>
|
|
||||||
<div class="clear"></div>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="cell_settings_inner_section">
|
|
||||||
<ul>
|
|
||||||
<li><a href="#"><i class="fa fa-eye-slash" aria-hidden="true"></i></a></li>
|
|
||||||
<li><a href="#"><i class="fa fa-times" aria-hidden="true"></i></a></li>
|
|
||||||
<div class="clear"></div>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="cell_settings_inner_section cell_settings_inner_section_last">
|
|
||||||
<ul>
|
|
||||||
<li><a class="cell_settings_close"><i class="fa fa-cog" aria-hidden="true"></i></a></li>
|
|
||||||
<div class="clear"></div>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="clear"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="clear"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Row -->
|
|
||||||
<div class="cms_table_row">
|
|
||||||
<div class="table_cell cell_checkbox"><div class="checkbox_holder"><input id="check_id3" type="checkbox" name="check_id3" value=""><label for="check_id3"></label><div class="check_checkbox"></div></div></div>
|
|
||||||
<div class="table_cell cell_image"><a href="#"><img src="project-files/img/placeholder_image.jpg" alt=""></a></div>
|
|
||||||
<div class="table_cell cell_title"><a href="#">Wilkommen auf unserer Website</a></div>
|
|
||||||
<div class="table_cell cell_date">20.03.2017</div>
|
|
||||||
<div class="table_cell cell_author">Administrator</div>
|
|
||||||
<div class="table_cell">News</div>
|
|
||||||
<div class="table_cell cell_status_container"><span class="cell_status cell_status_online"><span class="cell_status_text">online</span></span></div>
|
|
||||||
<div class="table_cell cell_settings">
|
|
||||||
<a class="cell_settings_click"><i class="fa fa-cog" aria-hidden="true"></i></a>
|
|
||||||
|
|
||||||
<div class="cell_settings_inner">
|
|
||||||
|
|
||||||
<div class="cell_settings_inner_container">
|
|
||||||
<div class="cell_settings_inner_section">
|
|
||||||
<ul>
|
|
||||||
<li><a href="#"><i class="fa fa-pencil" aria-hidden="true"></i></a></li>
|
|
||||||
<li><a href="#"><i class="fa fa-files-o" aria-hidden="true"></i></a></li>
|
|
||||||
<div class="clear"></div>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="cell_settings_inner_section">
|
|
||||||
<ul>
|
|
||||||
<li><a href="#"><i class="fa fa-eye-slash" aria-hidden="true"></i></a></li>
|
|
||||||
<li><a href="#"><i class="fa fa-times" aria-hidden="true"></i></a></li>
|
|
||||||
<div class="clear"></div>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="cell_settings_inner_section cell_settings_inner_section_last">
|
|
||||||
<ul>
|
|
||||||
<li><a class="cell_settings_close"><i class="fa fa-cog" aria-hidden="true"></i></a></li>
|
|
||||||
<div class="clear"></div>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="clear"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="clear"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Row -->
|
|
||||||
<div class="cms_table_row">
|
|
||||||
<div class="table_cell cell_checkbox"><div class="checkbox_holder"><input id="check_id4" type="checkbox" name="check_id4" value=""><label for="check_id4"></label><div class="check_checkbox"></div></div></div>
|
|
||||||
<div class="table_cell cell_image"><a href="#"><img src="project-files/img/placeholder_image.jpg" alt=""></a></div>
|
|
||||||
<div class="table_cell cell_title"><a href="#">Wilkommen auf unserer Website</a></div>
|
|
||||||
<div class="table_cell cell_date">20.03.2017</div>
|
|
||||||
<div class="table_cell cell_author">Administrator</div>
|
|
||||||
<div class="table_cell">News</div>
|
|
||||||
<div class="table_cell cell_status_container"><span class="cell_status cell_status_offline"><span class="cell_status_text">offline</span></span></div>
|
|
||||||
<div class="table_cell cell_settings">
|
|
||||||
<a class="cell_settings_click"><i class="fa fa-cog" aria-hidden="true"></i></a>
|
|
||||||
|
|
||||||
<div class="cell_settings_inner">
|
|
||||||
|
|
||||||
<div class="cell_settings_inner_container">
|
|
||||||
<div class="cell_settings_inner_section">
|
|
||||||
<ul>
|
|
||||||
<li><a href="#"><i class="fa fa-pencil" aria-hidden="true"></i></a></li>
|
|
||||||
<li><a href="#"><i class="fa fa-files-o" aria-hidden="true"></i></a></li>
|
|
||||||
<div class="clear"></div>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="cell_settings_inner_section">
|
|
||||||
<ul>
|
|
||||||
<li><a href="#"><i class="fa fa-eye-slash" aria-hidden="true"></i></a></li>
|
|
||||||
<li><a href="#"><i class="fa fa-times" aria-hidden="true"></i></a></li>
|
|
||||||
<div class="clear"></div>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="cell_settings_inner_section cell_settings_inner_section_last">
|
|
||||||
<ul>
|
|
||||||
<li><a class="cell_settings_close"><i class="fa fa-cog" aria-hidden="true"></i></a></li>
|
|
||||||
<div class="clear"></div>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="clear"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="clear"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Row -->
|
|
||||||
<div class="cms_table_row">
|
|
||||||
<div class="table_cell cell_checkbox"><div class="checkbox_holder"><input id="check_id5" type="checkbox" name="check_id5" value=""><label for="check_id5"></label><div class="check_checkbox"></div></div></div>
|
|
||||||
<div class="table_cell cell_image"><a href="#"><img src="project-files/img/placeholder_image.jpg" alt=""></a></div>
|
|
||||||
<div class="table_cell cell_title"><a href="#">Wilkommen auf unserer Website</a></div>
|
|
||||||
<div class="table_cell cell_date">20.03.2017</div>
|
|
||||||
<div class="table_cell cell_author">Administrator</div>
|
|
||||||
<div class="table_cell">News</div>
|
|
||||||
<div class="table_cell cell_status_container"><span class="cell_status cell_status_remaining"><span class="cell_status_text">ausstehend</span></span></div>
|
|
||||||
<div class="table_cell cell_settings">
|
|
||||||
<a class="cell_settings_click"><i class="fa fa-cog" aria-hidden="true"></i></a>
|
|
||||||
|
|
||||||
<div class="cell_settings_inner">
|
|
||||||
|
|
||||||
<div class="cell_settings_inner_container">
|
|
||||||
<div class="cell_settings_inner_section">
|
|
||||||
<ul>
|
|
||||||
<li><a href="#"><i class="fa fa-pencil" aria-hidden="true"></i></a></li>
|
|
||||||
<li><a href="#"><i class="fa fa-files-o" aria-hidden="true"></i></a></li>
|
|
||||||
<div class="clear"></div>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="cell_settings_inner_section">
|
|
||||||
<ul>
|
|
||||||
<li><a href="#"><i class="fa fa-eye-slash" aria-hidden="true"></i></a></li>
|
|
||||||
<li><a href="#"><i class="fa fa-times" aria-hidden="true"></i></a></li>
|
|
||||||
<div class="clear"></div>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="cell_settings_inner_section cell_settings_inner_section_last">
|
|
||||||
<ul>
|
|
||||||
<li><a class="cell_settings_close"><i class="fa fa-cog" aria-hidden="true"></i></a></li>
|
|
||||||
<div class="clear"></div>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="clear"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="clear"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Row -->
|
|
||||||
<div class="cms_table_row">
|
|
||||||
<div class="table_cell cell_checkbox"><div class="checkbox_holder"><input id="check_id6" type="checkbox" name="check_id6" value=""><label for="check_id6"></label><div class="check_checkbox"></div></div></div>
|
|
||||||
<div class="table_cell cell_image"><a href="#"><img src="project-files/img/placeholder_image.jpg" alt=""></a></div>
|
|
||||||
<div class="table_cell cell_title"><a href="#">Wilkommen auf unserer Website</a></div>
|
|
||||||
<div class="table_cell cell_date">20.03.2017</div>
|
|
||||||
<div class="table_cell cell_author">Administrator</div>
|
|
||||||
<div class="table_cell">News</div>
|
|
||||||
<div class="table_cell cell_status_container"><span class="cell_status cell_status_expired"><span class="cell_status_text">abgelaufen</span></span></div>
|
|
||||||
|
|
||||||
<div class="table_cell cell_settings">
|
|
||||||
<a class="cell_settings_click"><i class="fa fa-cog" aria-hidden="true"></i></a>
|
|
||||||
|
|
||||||
<div class="cell_settings_inner">
|
|
||||||
|
|
||||||
<div class="cell_settings_inner_container">
|
|
||||||
<div class="cell_settings_inner_section">
|
|
||||||
<ul>
|
|
||||||
<li><a href="#"><i class="fa fa-pencil" aria-hidden="true"></i></a></li>
|
|
||||||
<li><a href="#"><i class="fa fa-files-o" aria-hidden="true"></i></a></li>
|
|
||||||
<div class="clear"></div>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="cell_settings_inner_section">
|
|
||||||
<ul>
|
|
||||||
<li><a href="#"><i class="fa fa-eye-slash" aria-hidden="true"></i></a></li>
|
|
||||||
<li><a href="#"><i class="fa fa-times" aria-hidden="true"></i></a></li>
|
|
||||||
<div class="clear"></div>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="cell_settings_inner_section cell_settings_inner_section_last">
|
|
||||||
<ul>
|
|
||||||
<li><a class="cell_settings_close"><i class="fa fa-cog" aria-hidden="true"></i></a></li>
|
|
||||||
<div class="clear"></div>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="clear"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="clear"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- <div class="table_footer">
|
|
||||||
1-5 / 25
|
|
||||||
<div class="cms_paging">
|
|
||||||
<ul>
|
|
||||||
<li><a href="#"><i class="ion-ios-arrow-left"></i></a></li>
|
|
||||||
<li><a href="#">1</a></li>
|
|
||||||
<li class="active"><a href="#">2</a></li>
|
|
||||||
<li><a href="#">3</a></li>
|
|
||||||
<li><a href="#">4</a></li>
|
|
||||||
<li><a href="#">5</a></li>
|
|
||||||
<li><a href="#">...</a></li>
|
|
||||||
<li><a href="#">10</a></li>
|
|
||||||
<li><a href="#"><i class="ion-ios-arrow-right"></i></a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div> -->
|
|
||||||
</template>
|
|
||||||
@@ -8,13 +8,12 @@
|
|||||||
</header>
|
</header>
|
||||||
<input type="text" value="" name="" placeholder="Titel hier eintragen">
|
<input type="text" value="" name="" placeholder="Titel hier eintragen">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="input_holder">
|
<div class="input_holder">
|
||||||
<header class="input_header">
|
<header class="input_header">
|
||||||
<label for="">Permalink</label>
|
<label for="">Permalink</label>
|
||||||
<div class="input_description">Hier steht ein Beschreibungstext für etwas begriffsstutzige Menschen, die eine Beschreibung zum Befüllen des Feldes brauchen.</div>
|
<div class="input_description">Hier steht ein Beschreibungstext für etwas begriffsstutzige Menschen, die eine Beschreibung zum Befüllen des Feldes brauchen.</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<input type="text" value="" name="" placeholder="Permalink">
|
<input type="text" value="" name="" placeholder="Permalink">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -23,10 +22,10 @@
|
|||||||
<label for="">Inhalt</label>
|
<label for="">Inhalt</label>
|
||||||
<div class="input_description">Hier steht ein Beschreibungstext für etwas begriffsstutzige Menschen, die eine Beschreibung zum Befüllen des Feldes brauchen.</div>
|
<div class="input_description">Hier steht ein Beschreibungstext für etwas begriffsstutzige Menschen, die eine Beschreibung zum Befüllen des Feldes brauchen.</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<textarea name="" id="" rows="10" placeholder="Dies ist ein normales Textfeld"></textarea>
|
<textarea name="" id="" rows="10" placeholder="Dies ist ein normales Textfeld"></textarea>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Fieldgroup -->
|
<!-- Fieldgroup -->
|
||||||
<div class="cms_fieldgroup fieldgroup_open">
|
<div class="cms_fieldgroup fieldgroup_open">
|
||||||
<header class="cms_fieldgroup_header">Feldergruppe <div class="cms_fieldgroup_trigger"><i class="ion-chevron-down"></i></div></header>
|
<header class="cms_fieldgroup_header">Feldergruppe <div class="cms_fieldgroup_trigger"><i class="ion-chevron-down"></i></div></header>
|
||||||
@@ -36,7 +35,7 @@
|
|||||||
<label for="">Noch ein Feld</label>
|
<label for="">Noch ein Feld</label>
|
||||||
<!-- <div class="input_description">Hier steht ein Beschreibungstext für etwas begriffsstutzige Menschen, die eine Beschreibung zum Befüllen des Feldes brauchen.</div> -->
|
<!-- <div class="input_description">Hier steht ein Beschreibungstext für etwas begriffsstutzige Menschen, die eine Beschreibung zum Befüllen des Feldes brauchen.</div> -->
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<input type="text" value="" name="" placeholder="Noch ein Feld">
|
<input type="text" value="" name="" placeholder="Noch ein Feld">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -1,9 +1,4 @@
|
|||||||
<template>
|
<template>
|
||||||
<!-- <div class="LoginForm">
|
|
||||||
<h2>Login</h2>
|
|
||||||
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
<div id="login_form">
|
<div id="login_form">
|
||||||
<div class="holder">
|
<div class="holder">
|
||||||
<div class="logo">
|
<div class="logo">
|
||||||
@@ -11,29 +6,10 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
|
|
||||||
<p class="intro_text">Bitte melde dich mit deinen Benutzerdaten an.</p>
|
<p class="intro_text">Bitte melde dich mit deinen Benutzerdaten an.</p>
|
||||||
|
|
||||||
<my-form :elements="elements" :buttons="buttons" :submitHandler="login"></my-form>
|
<my-form :elements="elements" :buttons="buttons" :submitHandler="login"></my-form>
|
||||||
|
|
||||||
<!-- <form class="login_form" action="index.php" method="post">
|
|
||||||
<div class="login_input login_user">
|
|
||||||
<input required="required" placeholder="Benutzername" type="text" name="user" />
|
|
||||||
</div>
|
|
||||||
<div class="login_input login_pw">
|
|
||||||
<input required="required" placeholder="Passwort" type="password" name="passwort" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="login_input login_submit">
|
|
||||||
<input type="submit" name="submit_login" value="Anmelden" class="submit" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</form> -->
|
|
||||||
|
|
||||||
<!-- <div class="login_error">
|
|
||||||
<p>Login fehlgeschlagen.</p>
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
<div style="clear:both;"></div>
|
<div style="clear:both;"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -41,65 +17,60 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import MyForm from "../../components/my-form.vue";
|
import MyForm from "components/my-form";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "LoginForm",
|
name: "LoginForm",
|
||||||
components: {
|
components: {
|
||||||
MyForm
|
MyForm
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
username: "",
|
username: "",
|
||||||
password: "",
|
password: "",
|
||||||
elements: {
|
elements: {
|
||||||
username: {
|
username: {
|
||||||
placeholder: "Benutzername",
|
placeholder: "Benutzername",
|
||||||
icon: "icon-user",
|
icon: "icon-user",
|
||||||
type: "text",
|
type: "text",
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
password: {
|
password: {
|
||||||
placeholder: "Passwort",
|
placeholder: "Passwort",
|
||||||
icon: "icon-key",
|
icon: "icon-key",
|
||||||
type: "password",
|
type: "password",
|
||||||
required: true
|
required: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
buttons: [
|
buttons: [{
|
||||||
{
|
label: "login",
|
||||||
label: "login",
|
type: "submit"
|
||||||
type: "submit"
|
}]
|
||||||
}
|
}
|
||||||
]
|
},
|
||||||
}
|
methods: {
|
||||||
},
|
login(formData) {
|
||||||
methods: {
|
this.$store.dispatch("login", formData)
|
||||||
login(formData) {
|
.then(user => {
|
||||||
this.$store.dispatch("login", formData)
|
console.log("---- user login --------");
|
||||||
.then(user => {
|
console.log(user);
|
||||||
console.log("---- user login --------");
|
this.$router.go(-1);
|
||||||
console.log(user);
|
})
|
||||||
this.$router.go(-1);
|
.catch(error => {
|
||||||
})
|
console.log("---- login error -------");
|
||||||
.catch(error => {
|
console.log(error);
|
||||||
console.log("---- login error -------");
|
});
|
||||||
console.log(error);
|
}
|
||||||
});
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
@import "../../mixins";
|
@import "~mixins";
|
||||||
|
|
||||||
/*--------------------------------------------------------------
|
/*--------------------------------------------------------------
|
||||||
# LOGINBOX
|
# LOGINBOX
|
||||||
--------------------------------------------------------------*/
|
--------------------------------------------------------------*/
|
||||||
|
|
||||||
#login_form{
|
#login_form{
|
||||||
/* Disply on top */
|
/* Disply on top */
|
||||||
position: fixed;
|
position: fixed;
|
||||||
@@ -151,65 +122,9 @@ export default {
|
|||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
border: solid 1px @cms_dark_border;
|
border: solid 1px @gray_dark;
|
||||||
background: white;
|
background: white;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/*.login_input {
|
|
||||||
margin-bottom:10px;
|
|
||||||
border:none;
|
|
||||||
height:40px;
|
|
||||||
position:relative;
|
|
||||||
}
|
|
||||||
.login_input:before {
|
|
||||||
|
|
||||||
}
|
|
||||||
.login_form {
|
|
||||||
text-align:center;
|
|
||||||
}
|
|
||||||
.login_user:before {content:"\f007";}
|
|
||||||
.login_pw:before {content:"\f084";}
|
|
||||||
.login_submit {
|
|
||||||
width:auto;
|
|
||||||
margin:0 auto;
|
|
||||||
display:inline-block;
|
|
||||||
margin-top:10px;
|
|
||||||
}
|
|
||||||
.login_submit:before {content:"\f090"; left:15px; top:6px;}
|
|
||||||
|
|
||||||
.login_input input {
|
|
||||||
border:none;
|
|
||||||
background:none;
|
|
||||||
height:40px;
|
|
||||||
width:100%;
|
|
||||||
padding: 0px 10px 0px 35px;
|
|
||||||
background:#f4f4f4;
|
|
||||||
border:solid 1px #FFF;
|
|
||||||
}
|
|
||||||
.loginbox_content .login_input input:focus {border:solid 1px #152129; background:#FFF;}
|
|
||||||
.login_form input[type="submit"] {
|
|
||||||
height:40px;
|
|
||||||
background:#152129;
|
|
||||||
border:none;
|
|
||||||
color:#FFF;
|
|
||||||
cursor:pointer;
|
|
||||||
text-transform:uppercase;
|
|
||||||
width:auto;
|
|
||||||
margin:0px auto 0 auto;
|
|
||||||
padding: 0px 20px 0px 40px;
|
|
||||||
border-radius:20px;
|
|
||||||
}
|
|
||||||
.login_form input[type="submit"]:hover {
|
|
||||||
background:#1f3441;
|
|
||||||
}
|
|
||||||
.login_error {
|
|
||||||
display:block;
|
|
||||||
text-align:center;
|
|
||||||
color:#FFF;
|
|
||||||
line-height:1.2;
|
|
||||||
margin-top:20px;
|
|
||||||
}*/
|
|
||||||
/*.login_error p {text-transform:uppercase; display:inline-block; background:#c70e00; padding:5px; font-weight:600; font-size:14px;}*/
|
|
||||||
</style>
|
</style>
|
||||||
@@ -38,12 +38,12 @@ export default {
|
|||||||
heading: 'ID',
|
heading: 'ID',
|
||||||
prop: 'ID',
|
prop: 'ID',
|
||||||
orderBy: 'id',
|
orderBy: 'id',
|
||||||
align: 'left'
|
align: 'right'
|
||||||
}, {
|
}, {
|
||||||
heading: 'Benutzername',
|
heading: 'Benutzername',
|
||||||
prop: 'Username',
|
prop: 'Username',
|
||||||
orderBy: 'username',
|
orderBy: 'username',
|
||||||
align: 'center'
|
align: 'left'
|
||||||
}, {
|
}, {
|
||||||
heading: 'Firma',
|
heading: 'Firma',
|
||||||
prop: 'Company',
|
prop: 'Company',
|
||||||
@@ -66,7 +66,7 @@ export default {
|
|||||||
}, {
|
}, {
|
||||||
heading: 'Render',
|
heading: 'Render',
|
||||||
render(row) {
|
render(row) {
|
||||||
return 'ID:' + row.ID;
|
return 'ID:' + row.ID;
|
||||||
}
|
}
|
||||||
}],
|
}],
|
||||||
newRows: [ ],
|
newRows: [ ],
|
||||||
|
|||||||
@@ -13,63 +13,62 @@ var env = process.env.WEBPACK_ENV;
|
|||||||
|
|
||||||
// Differ settings based on production flag
|
// Differ settings based on production flag
|
||||||
if (env === 'production') {
|
if (env === 'production') {
|
||||||
var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
|
var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
|
||||||
|
|
||||||
plugins.push(new UglifyJsPlugin({
|
plugins.push(new UglifyJsPlugin({
|
||||||
minimize: true,
|
minimize: true,
|
||||||
sourceMap: true
|
sourceMap: true
|
||||||
}
|
}
|
||||||
));
|
));
|
||||||
plugins.push(new webpack.DefinePlugin({
|
plugins.push(new webpack.DefinePlugin({
|
||||||
'process.env': {
|
'process.env': {
|
||||||
NODE_ENV: '"production"'
|
NODE_ENV: '"production"'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
));
|
));
|
||||||
|
|
||||||
appName = appName + '.js';
|
appName = appName + '.js';
|
||||||
} else {
|
} else {
|
||||||
appName = appName + '.js';
|
appName = appName + '.js';
|
||||||
}
|
}
|
||||||
|
|
||||||
// Main Settings config
|
// Main Settings config
|
||||||
module.exports = {
|
module.exports = {
|
||||||
entry: [
|
entry: [
|
||||||
'intersection-observer',
|
'intersection-observer',
|
||||||
'babel-polyfill',
|
'babel-polyfill',
|
||||||
entryPoint
|
entryPoint
|
||||||
],
|
],
|
||||||
devtool: 'source-map',
|
devtool: 'source-map',
|
||||||
output: {
|
output: {
|
||||||
path: exportPath,
|
path: exportPath,
|
||||||
publicPath: '/build',
|
publicPath: '/build',
|
||||||
filename: appName
|
filename: appName
|
||||||
},
|
},
|
||||||
module: {
|
module: {
|
||||||
loaders: [
|
loaders: [{
|
||||||
{
|
enforce: "pre",
|
||||||
test: /\.(vue|js)$/,
|
test: /\.(vue|js)$/,
|
||||||
loader: 'eslint-loader',
|
loader: 'eslint-loader',
|
||||||
exclude: /node_modules/
|
exclude: /node_modules/
|
||||||
},
|
}, {
|
||||||
{
|
test: /\.vue$/,
|
||||||
test: /\.vue$/,
|
loader: 'vue-loader'
|
||||||
loader: 'vue-loader'
|
}, {
|
||||||
},
|
test: /\.js$/,
|
||||||
{
|
exclude: /(node_modules|bower_components)/,
|
||||||
test: /\.js$/,
|
loader: 'babel-loader',
|
||||||
exclude: /(node_modules|bower_components)/,
|
query: {
|
||||||
loader: 'babel-loader',
|
presets: ['es2015']
|
||||||
query: {
|
}
|
||||||
presets: ['es2015']
|
}]
|
||||||
}
|
},
|
||||||
}
|
resolve: {
|
||||||
]
|
alias: {
|
||||||
},
|
'vue$': 'vue/dist/vue.esm.js'
|
||||||
resolve: {
|
},
|
||||||
alias: {
|
modules: [path.resolve(__dirname, "src"), "node_modules"],
|
||||||
'vue$': 'vue/dist/vue.esm.js'
|
extensions: [".vue", ".js", ".less"]
|
||||||
}
|
},
|
||||||
},
|
plugins
|
||||||
plugins
|
|
||||||
};
|
};
|
||||||
Reference in New Issue
Block a user