Merge branch 'master' into matdev
This commit is contained in:
Sebastian Frank
20
.eslintrc
20
.eslintrc
@@ -1,8 +1,20 @@
|
||||
{
|
||||
"parserOptions": {
|
||||
"parser": "babel-eslint",
|
||||
"rules": {
|
||||
"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"
|
||||
}
|
||||
},
|
||||
"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": {
|
||||
"version": "1.1.7",
|
||||
"resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.1.7.tgz",
|
||||
"integrity": "sha1-hnqksJP6oF8d4IwG9NeyH9+GmLw=",
|
||||
"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": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/dot-case/-/dot-case-2.1.1.tgz",
|
||||
@@ -2180,12 +2137,6 @@
|
||||
"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": {
|
||||
"version": "0.1.4",
|
||||
"resolved": "https://registry.npmjs.org/errno/-/errno-0.1.4.tgz",
|
||||
@@ -2412,13 +2363,14 @@
|
||||
"rimraf": "2.6.1"
|
||||
}
|
||||
},
|
||||
"eslint-plugin-html": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/eslint-plugin-html/-/eslint-plugin-html-3.2.0.tgz",
|
||||
"integrity": "sha512-jQLPqZNty889RrieCScFY3hJAJNeo0pX2ixCIPaXw/1wq5ZadKQkkh94ObqRfYzwrzD75HqEVGykmtDXEkReKg==",
|
||||
"eslint-plugin-vue": {
|
||||
"version": "3.12.0",
|
||||
"resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-3.12.0.tgz",
|
||||
"integrity": "sha1-6a0J1sYo+ytleAaP7aVEA896lNs=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"htmlparser2": "3.9.2"
|
||||
"requireindex": "1.1.0",
|
||||
"vue-eslint-parser": "2.0.0-beta.7"
|
||||
}
|
||||
},
|
||||
"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": {
|
||||
"version": "1.2.7",
|
||||
"resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz",
|
||||
@@ -6496,6 +6434,12 @@
|
||||
"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": {
|
||||
"version": "1.0.0",
|
||||
"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",
|
||||
"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": {
|
||||
"version": "2.1.0",
|
||||
"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",
|
||||
"eslint": "^4.5.0",
|
||||
"eslint-loader": "^1.9.0",
|
||||
"eslint-plugin-html": "^3.2.0",
|
||||
"eslint-plugin-vue": "^3.12.0",
|
||||
"less": "^2.7.2",
|
||||
"less-loader": "^4.0.5",
|
||||
"vue-hot-reload-api": "^2.1.0",
|
||||
|
||||
78
src/app.less
78
src/app.less
@@ -58,11 +58,12 @@ img {line-height:0;}
|
||||
# General Settings
|
||||
--------------------------------------------------------------*/
|
||||
html,body {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-size:15px;
|
||||
line-height:1.4;
|
||||
color:#000;
|
||||
background:#f5f3f4;
|
||||
position: relative;
|
||||
font-family: @font_family;
|
||||
font-size: @font_size;
|
||||
line-height: @line_height_base;
|
||||
color: @text_color;
|
||||
background: @gray_light;
|
||||
}
|
||||
.clear {clear:both;}
|
||||
.section_padding {padding:100px 0px;}
|
||||
@@ -70,15 +71,16 @@ html,body {
|
||||
/*--------------------------------------------------------------
|
||||
# Typo
|
||||
--------------------------------------------------------------*/
|
||||
p {margin-bottom:20px; color:#000;}
|
||||
h1 {display: block; font-size: 25px; font-weight: 600; line-height: 1.2; margin-bottom:10px; text-align:left; color:#333;}
|
||||
h2 {display: block; font-size: 45px; font-weight: 600; line-height: 1.2; margin-bottom:10px; text-align:center;}
|
||||
h3 {display: block; font-size: 20px; font-weight: 300; line-height: 1.2; letter-spacing:2px;}
|
||||
h4 {display: block; font-size: 15px; font-weight: 600; line-height: 1.2;}
|
||||
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;}
|
||||
p {margin-bottom:20px; color: @text_color;}
|
||||
h1, h2, h3, h4, h5{display: block; line-height: @line_height_heading;}
|
||||
h1 {font-size: 25px; font-weight: 600; margin-bottom:10px; text-align:left; color: #333;}
|
||||
h2 {font-size: 45px; font-weight: 600; margin-bottom:10px; text-align:center;}
|
||||
h3 {font-size: 20px; font-weight: 300; letter-spacing:2px;}
|
||||
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;}
|
||||
mark {color:#ac1526;}
|
||||
a {text-decoration:none; color:#ac1526;}
|
||||
mark {color: @cms_brand_secondary;}
|
||||
a {text-decoration:none; color: @cms_brand_secondary;}
|
||||
a:hover {color:#901624;}
|
||||
|
||||
|
||||
@@ -87,25 +89,23 @@ a:hover {color:#901624;}
|
||||
--------------------------------------------------------------*/
|
||||
.input_holder {margin-bottom:20px; display:block;}
|
||||
.input_header {margin-bottom:10px;}
|
||||
.input_description {font-size:13px; color:#666;}
|
||||
.input_description {font-size:13px; color: @text_color;}
|
||||
input, textarea, select {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-family: @font_family;
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 35px;
|
||||
padding: 0px 10px;
|
||||
color:#333;
|
||||
backrgound:#FFF;
|
||||
color: @text_color;
|
||||
background: white;
|
||||
border: solid 1px #CCC;
|
||||
outline: none;
|
||||
font-size:13px;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s;
|
||||
-webkit-transition:all 0.3s;
|
||||
-moz-transition:all 0.3s;
|
||||
}
|
||||
textarea {padding:10px; height:auto;}
|
||||
input:focus, textarea:focus, select:focus {background:#FFF; border-color:#28b78d;}
|
||||
label {font-weight:600; color:#333;}
|
||||
input:focus, textarea:focus, select:focus {background:#FFF; border-color: @cms_brand_primary;}
|
||||
label {font-weight:600; color: @text_color;}
|
||||
|
||||
input[type="checkbox"] {
|
||||
position: absolute;
|
||||
@@ -149,15 +149,15 @@ input[type="checkbox"] {
|
||||
-webkit-transition: background 0.25s linear;
|
||||
}
|
||||
input[type=checkbox]:checked ~ .check_checkbox {
|
||||
border: 1px solid #28b78d;
|
||||
border: 1px solid @cms_brand_primary;
|
||||
}
|
||||
|
||||
input[type=checkbox]:checked ~ .check_checkbox:before{
|
||||
background: #28b78d!important;
|
||||
background: @cms_brand_primary!important;
|
||||
}
|
||||
button{
|
||||
height: 40px;
|
||||
background: @cms_brand_secondary;
|
||||
background: @gray_dark;
|
||||
border: none;
|
||||
color: #FFF;
|
||||
cursor: pointer;
|
||||
@@ -168,7 +168,7 @@ button{
|
||||
border-radius: 20px;
|
||||
}
|
||||
.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
|
||||
@@ -186,8 +186,8 @@ button{
|
||||
/*--------------------------------------------------------------
|
||||
# Content Area
|
||||
--------------------------------------------------------------*/
|
||||
.content_area {position:absolute; left:70px; top:40px; right:0px; transition:all 0.3s;}
|
||||
.content_main {position:relative; top:0px; padding:25px; transition:all 0.3s;}
|
||||
.content_area {position:absolute; left:70px; top:40px; right:0px; height: 100%;}
|
||||
.content_main {position:relative; top:0px; padding:25px;}
|
||||
|
||||
.cms_content_main_headline {margin-bottom:20px; position:relative;}
|
||||
.content_open_sidebar {left:250px;}
|
||||
@@ -207,7 +207,7 @@ button{
|
||||
/*--------------------------------------------------------------
|
||||
# CMS ADD BUTTON
|
||||
--------------------------------------------------------------*/
|
||||
.button {
|
||||
/*.button {
|
||||
display: inline-block;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
@@ -225,7 +225,7 @@ button{
|
||||
position:absolute;
|
||||
top:0px;
|
||||
right:0px;
|
||||
background:#28b78d;
|
||||
background:@cms_brand_primary;
|
||||
}
|
||||
.cms_add_button:hover {background:#189671;}
|
||||
.button_action {
|
||||
@@ -234,38 +234,32 @@ button{
|
||||
font-size:13px;
|
||||
position:relative;
|
||||
margin-left:20px;
|
||||
background:#152129;
|
||||
background: @gray_dark;
|
||||
padding:0px 10px 0px 30px;
|
||||
}
|
||||
.button_action i {line-height:25px; left:10px;}
|
||||
.button_action:hover {background:#1f3441;}
|
||||
.button_action:hover {background:#1f3441;}*/
|
||||
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# 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:hover {background:#28b78d; color:#FFF;}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Content Tables
|
||||
--------------------------------------------------------------*/
|
||||
.content_table_headline {margin-bottom:10px;}
|
||||
.back_button:hover {background:@cms_brand_primary; color:#FFF;}
|
||||
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# 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 ul {list-style-type:none;}
|
||||
.cms_paging ul li {float:left; margin-right:2px;}
|
||||
.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 i {}
|
||||
.cms_paging ul li.active a {background:#28b78d; color:#FFF;}
|
||||
.cms_paging ul li a:hover {background:#28b78d; color:#FFF;}
|
||||
|
||||
.cms_paging ul li.active a {background:@cms_brand_primary; color:#FFF;}
|
||||
.cms_paging ul li a:hover {background:@cms_brand_primary; color:#FFF;}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Breakpoints
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
</my-input>
|
||||
</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>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
@@ -1,45 +1,50 @@
|
||||
<template>
|
||||
<div class="cms_table">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="table_header">
|
||||
<!-- <div class="table_row"> -->
|
||||
<div v-for="(col, i) in columns"
|
||||
:class="['table_cell', {['sortable']: col.orderBy}]"
|
||||
:class="['table_cell', {['sortable']: col.orderBy, [`align-${col.align}`]: col.align}]"
|
||||
:key="i">
|
||||
|
||||
<!-- Column with sorting -->
|
||||
<div @click="orderBy(col.orderBy)" v-if="col.orderBy">
|
||||
{{ col.heading }}
|
||||
|
||||
<i class="icon icon-angle-up" aria-hidden="true" v-if="currentOrderBy !== col.orderBy"></i>
|
||||
<i class="icon icon-angle-circled-down" aria-hidden="true" v-else-if="currentOrderDesc"></i>
|
||||
<i class="icon icon-angle-circled-up" aria-hidden="true" v-else></i>
|
||||
</div>
|
||||
|
||||
<!-- Column without sorting -->
|
||||
<div v-else>{{ col.heading }}</div>
|
||||
</div>
|
||||
<div class="table_cell cell_settings" v-if="actions.length"></div>
|
||||
<!-- </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_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>
|
||||
</div>
|
||||
|
||||
<!-- Row actions -->
|
||||
<div class="table_cell cell_settings" v-if="actions.length" ref="row_actions">
|
||||
<div title="Open actions" class="actions_btn" @click="openActions">
|
||||
<i class="icon icon-cog" aria-hidden="true"></i>
|
||||
</div>
|
||||
|
||||
<ul class="actions_container">
|
||||
<li v-for="(a, i) in actions">
|
||||
<div :title="a.title" @click="a.action(row)">
|
||||
<li v-for="(a, i) in actions" :title="a.title" @click="a.action(row)" :key="i">
|
||||
<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 title="Open actions" class="actions_btn" @click="toggleActions">
|
||||
<i class="icon icon-cog" aria-hidden="true"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -97,24 +102,21 @@
|
||||
});
|
||||
return val;
|
||||
},
|
||||
openActions(event) {
|
||||
toggleActions(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");
|
||||
parent.classList.toggle("open");
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import "../mixins";
|
||||
@import "~mixins";
|
||||
|
||||
.list-item {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
@@ -130,12 +132,38 @@
|
||||
/*--------------------------------------------------------------
|
||||
# Content Tables
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
.cms_table {
|
||||
.table_header{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.table_row{
|
||||
position: relative;
|
||||
|
||||
background: white;
|
||||
&:nth-child(even) {
|
||||
background: @gray_light;
|
||||
}
|
||||
}
|
||||
|
||||
.table_cell {
|
||||
font-size: 13px;
|
||||
padding: 10px 15px;
|
||||
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: @screen-sm-min) {
|
||||
.cms_table{
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
|
||||
.table_header, .table_content{margin: 0px -25px;}
|
||||
.table_header{
|
||||
@@ -152,7 +180,7 @@
|
||||
|
||||
background: white;
|
||||
&:nth-child(even) {
|
||||
background: #f5f3f4;
|
||||
background: @gray_light;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -166,19 +194,21 @@
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
&.sortable{
|
||||
&:hover{
|
||||
cursor: pointer;
|
||||
&.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;}*/
|
||||
|
||||
/* === Other cell types === */
|
||||
/*.cell_date {}
|
||||
.cell_author {}
|
||||
.cell_category {}
|
||||
@@ -204,17 +234,9 @@
|
||||
/* === Cell settings === */
|
||||
.cell_settings {
|
||||
.clearfix();
|
||||
position: relative;
|
||||
width: 40px;
|
||||
text-align: right;
|
||||
overflow: visible;
|
||||
|
||||
.actions_btn{
|
||||
z-index: 20;
|
||||
&:hover{
|
||||
cursor: pointer;
|
||||
color: @cms_brand_primary;
|
||||
}
|
||||
display: none;
|
||||
}
|
||||
|
||||
.icon {
|
||||
@@ -222,48 +244,75 @@
|
||||
}
|
||||
|
||||
.actions_container{
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: -5px;
|
||||
right: 0;
|
||||
padding: 5px 10px;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 20px;
|
||||
background: @cms_bg_lighter;
|
||||
transition: all 0.3s;
|
||||
white-space: nowrap;
|
||||
list-style-type: none;
|
||||
|
||||
.icon:hover{
|
||||
cursor: pointer;
|
||||
color: @cms_brand_primary;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: @screen-sm-min) {
|
||||
.cell_settings {
|
||||
position: relative;
|
||||
width: 22.4px + 2*15px;
|
||||
text-align: right;
|
||||
overflow: visible !important;
|
||||
|
||||
|
||||
.actions_btn{
|
||||
position: relative;
|
||||
display: block;
|
||||
z-index: 20;
|
||||
&:hover{
|
||||
cursor: pointer;
|
||||
color: @cms_brand_primary;
|
||||
}
|
||||
}
|
||||
|
||||
.actions_container {
|
||||
position: absolute;
|
||||
padding: 5px 10px;
|
||||
top: 50%;
|
||||
margin-top: -16px;
|
||||
right: 7px;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.3s;
|
||||
|
||||
color: white;
|
||||
background: @cms_brand_primary;
|
||||
border-radius: 20px;
|
||||
|
||||
li {
|
||||
&:last-child{
|
||||
border-left: 1px solid @text_color;
|
||||
padding-left: 5px;
|
||||
border-right: 1px solid white;
|
||||
padding-right: 10px;
|
||||
margin-right: 26px;
|
||||
.icon:before{
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li+li{
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
color: @text_color;
|
||||
&:hover{
|
||||
.icon:hover{
|
||||
cursor: pointer;
|
||||
color: @cms_brand_primary;
|
||||
}
|
||||
color: @text_color;
|
||||
}
|
||||
}
|
||||
|
||||
&.open {
|
||||
.actions_btn {color: white; &:hover{color: black;}}
|
||||
.actions_container {
|
||||
pointer-events: all;
|
||||
z-index: 10;
|
||||
opacity: 1;
|
||||
z-index: 1;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -110,7 +110,7 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
visibilityChanged(isVisible, entry) {
|
||||
visibilityChanged(isVisible) {
|
||||
if (isVisible) {
|
||||
// infinite scrolling
|
||||
this.reloadTriggered = false;
|
||||
|
||||
@@ -14,27 +14,6 @@
|
||||
</nav>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
@@ -49,7 +28,7 @@
|
||||
left: 0px;
|
||||
top: 40px;
|
||||
bottom: 0px;
|
||||
background: @cms_bg_light;
|
||||
background: @ui_bg;
|
||||
color: white;
|
||||
width: 70px;
|
||||
transition: all 0.3s;
|
||||
@@ -59,7 +38,8 @@
|
||||
height:100%; /*overflow-y:scroll;*/
|
||||
|
||||
&>.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 .submenu {border-top:solid 1px rgba(255,255,255,0.2);}*/
|
||||
@@ -123,7 +103,7 @@
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
top: 0px;
|
||||
background: #152129;
|
||||
background: @gray_dark;
|
||||
width: 180px;
|
||||
height: auto;
|
||||
transition: all 0.3s;
|
||||
@@ -146,7 +126,7 @@
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
border-color: rgba(255, 255, 255, 0);
|
||||
border-right-color: #f5f3f4;
|
||||
border-right-color: @gray_light;
|
||||
border-width: 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) {
|
||||
.sidebar {
|
||||
left:inherit; position:relative; width:100%; top:0px; margin-bottom:30px;
|
||||
|
||||
@@ -2,27 +2,69 @@
|
||||
<div class="topbar">
|
||||
<div class="logo"><a href="#"><img src="assets/images/cms_logo.png" alt=""></a></div>
|
||||
<div class="name">Meine Website</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>
|
||||
|
||||
<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">
|
||||
@import "../mixins.less";
|
||||
|
||||
@bar_height: 40px;
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Topbar (Sitename)
|
||||
--------------------------------------------------------------*/
|
||||
.topbar {
|
||||
.clearfix();
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0px;
|
||||
background: @cms_bg_light;
|
||||
background: @ui_bg;
|
||||
color: white;
|
||||
height: 40px;
|
||||
height: @bar_height;
|
||||
z-index: 1500;
|
||||
|
||||
&>.logo {
|
||||
display: block;
|
||||
width: 70px;
|
||||
height: 40px;
|
||||
height: @bar_height;
|
||||
float: left;
|
||||
position: relative;
|
||||
|
||||
@@ -37,44 +79,127 @@
|
||||
}
|
||||
|
||||
img {
|
||||
width:32px;
|
||||
display: block;
|
||||
width: 30px;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
padding-top: 4px;
|
||||
display:block;
|
||||
}
|
||||
}
|
||||
|
||||
&>.name {
|
||||
float: left;
|
||||
width: auto;
|
||||
line-height: 40px;
|
||||
line-height: @bar_height;
|
||||
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;
|
||||
float: left;
|
||||
width: auto;
|
||||
height: 100%;
|
||||
font-size: 22px;
|
||||
margin-left: 40px;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding-top: 4px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
padding: 4px 10px;
|
||||
font-size: 0;
|
||||
color: white;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background: fade(@cms_brand_primary, 30%);
|
||||
}
|
||||
|
||||
.icon{
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.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>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Topbar"
|
||||
}
|
||||
</script>
|
||||
@@ -148,7 +148,7 @@ function objectToPersist(obj, key) {
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function persistToObject(key) {
|
||||
try {
|
||||
|
||||
@@ -3,15 +3,22 @@
|
||||
@screen-md: 1024px;
|
||||
@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_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>
|
||||
@@ -14,7 +14,6 @@
|
||||
<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>
|
||||
</header>
|
||||
|
||||
<input type="text" value="" name="" placeholder="Permalink">
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,9 +1,4 @@
|
||||
<template>
|
||||
<!-- <div class="LoginForm">
|
||||
<h2>Login</h2>
|
||||
|
||||
</div> -->
|
||||
|
||||
<div id="login_form">
|
||||
<div class="holder">
|
||||
<div class="logo">
|
||||
@@ -11,29 +6,10 @@
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
|
||||
<p class="intro_text">Bitte melde dich mit deinen Benutzerdaten an.</p>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
@@ -41,7 +17,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MyForm from "../../components/my-form.vue";
|
||||
import MyForm from "components/my-form";
|
||||
|
||||
export default {
|
||||
name: "LoginForm",
|
||||
@@ -66,12 +42,10 @@ export default {
|
||||
required: true
|
||||
}
|
||||
},
|
||||
buttons: [
|
||||
{
|
||||
buttons: [{
|
||||
label: "login",
|
||||
type: "submit"
|
||||
}
|
||||
]
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -91,15 +65,12 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style lang="less">
|
||||
@import "../../mixins";
|
||||
@import "~mixins";
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# LOGINBOX
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
#login_form{
|
||||
/* Disply on top */
|
||||
position: fixed;
|
||||
@@ -151,65 +122,9 @@ export default {
|
||||
border-color: transparent;
|
||||
|
||||
&:focus {
|
||||
border: solid 1px @cms_dark_border;
|
||||
border: solid 1px @gray_dark;
|
||||
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>
|
||||
@@ -38,12 +38,12 @@ export default {
|
||||
heading: 'ID',
|
||||
prop: 'ID',
|
||||
orderBy: 'id',
|
||||
align: 'left'
|
||||
align: 'right'
|
||||
}, {
|
||||
heading: 'Benutzername',
|
||||
prop: 'Username',
|
||||
orderBy: 'username',
|
||||
align: 'center'
|
||||
align: 'left'
|
||||
}, {
|
||||
heading: 'Firma',
|
||||
prop: 'Company',
|
||||
|
||||
@@ -46,30 +46,29 @@ module.exports = {
|
||||
filename: appName
|
||||
},
|
||||
module: {
|
||||
loaders: [
|
||||
{
|
||||
loaders: [{
|
||||
enforce: "pre",
|
||||
test: /\.(vue|js)$/,
|
||||
loader: 'eslint-loader',
|
||||
exclude: /node_modules/
|
||||
},
|
||||
{
|
||||
}, {
|
||||
test: /\.vue$/,
|
||||
loader: 'vue-loader'
|
||||
},
|
||||
{
|
||||
}, {
|
||||
test: /\.js$/,
|
||||
exclude: /(node_modules|bower_components)/,
|
||||
loader: 'babel-loader',
|
||||
query: {
|
||||
presets: ['es2015']
|
||||
}
|
||||
}
|
||||
]
|
||||
}]
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'vue$': 'vue/dist/vue.esm.js'
|
||||
}
|
||||
},
|
||||
modules: [path.resolve(__dirname, "src"), "node_modules"],
|
||||
extensions: [".vue", ".js", ".less"]
|
||||
},
|
||||
plugins
|
||||
};
|
||||
Reference in New Issue
Block a user