diff --git a/assets/fonts/config.json b/assets/fonts/config.json
index 3cf5182..816b468 100644
--- a/assets/fonts/config.json
+++ b/assets/fonts/config.json
@@ -214,6 +214,46 @@
"ion-log-out"
]
},
+ {
+ "uid": "f51722ab422ad49cb9807c0ec25298b6",
+ "css": "arrow-up",
+ "code": 62424,
+ "src": "custom_icons",
+ "selected": true,
+ "svg": {
+ "path": "M587.9 687.5L312.5 394.5 37.1 687.5 0 646.5 312.5 312.5 625 646.5Z",
+ "width": 625
+ },
+ "search": [
+ "ion-ios-arrow-up"
+ ]
+ },
+ {
+ "uid": "208eec9541a701370b5b539c522b23c2",
+ "css": "arrow-down",
+ "code": 62416,
+ "src": "custom_icons",
+ "selected": true,
+ "svg": {
+ "path": "M587.9 312.5L625 353.5 312.5 687.5 0 353.5 37.1 312.5 312.5 605.5Z",
+ "width": 625
+ },
+ "search": [
+ "ion-ios-arrow-down"
+ ]
+ },
+ {
+ "uid": "8b80d36d4ef43889db10bc1f0dc9a862",
+ "css": "user",
+ "code": 59393,
+ "src": "fontawesome"
+ },
+ {
+ "uid": "f2aa28a2548ed3d2be718d087b65ee21",
+ "css": "key",
+ "code": 59394,
+ "src": "fontawesome"
+ },
{
"uid": "efb8e2c22ada5ce5b02631e8b4be473d",
"css": "ion-alert-circled",
@@ -3812,20 +3852,6 @@
"ion-ios-arrow-back"
]
},
- {
- "uid": "208eec9541a701370b5b539c522b23c2",
- "css": "ion-ios-arrow-down",
- "code": 62416,
- "src": "custom_icons",
- "selected": false,
- "svg": {
- "path": "M587.9 312.5L625 353.5 312.5 687.5 0 353.5 37.1 312.5 312.5 605.5Z",
- "width": 625
- },
- "search": [
- "ion-ios-arrow-down"
- ]
- },
{
"uid": "758672cdc1824ed73456f753a5bb108c",
"css": "ion-ios-arrow-forward",
@@ -3896,20 +3922,6 @@
"ion-ios-arrow-thin-up"
]
},
- {
- "uid": "f51722ab422ad49cb9807c0ec25298b6",
- "css": "ion-ios-arrow-up",
- "code": 62424,
- "src": "custom_icons",
- "selected": false,
- "svg": {
- "path": "M587.9 687.5L312.5 394.5 37.1 687.5 0 646.5 312.5 312.5 625 646.5Z",
- "width": 625
- },
- "search": [
- "ion-ios-arrow-up"
- ]
- },
{
"uid": "dcf773d95d00f32634a80bf8dfd72927",
"css": "ion-ios-at-outline",
diff --git a/assets/fonts/iconfont.eot b/assets/fonts/iconfont.eot
index f19d4c1..2d36af5 100644
Binary files a/assets/fonts/iconfont.eot and b/assets/fonts/iconfont.eot differ
diff --git a/assets/fonts/iconfont.svg b/assets/fonts/iconfont.svg
index 05b329f..286e0dc 100644
--- a/assets/fonts/iconfont.svg
+++ b/assets/fonts/iconfont.svg
@@ -8,6 +8,10 @@
<missing-glyph horiz-adv-x="1000" />
<glyph glyph-name="search" unicode="" d="M643 386q0 103-73 176t-177 74-177-74-73-176 73-177 177-73 177 73 73 177z m286-465q0-29-22-50t-50-21q-30 0-50 21l-191 191q-100-69-223-69-80 0-153 31t-125 84-84 125-31 153 31 152 84 126 125 84 153 31 153-31 125-84 84-126 31-152q0-123-69-223l191-191q21-21 21-51z" horiz-adv-x="928.6" />
+<glyph glyph-name="user" unicode="" d="M714 69q0-60-35-104t-84-44h-476q-49 0-84 44t-35 104q0 48 5 90t17 85 33 73 52 50 76 19q73-72 174-72t175 72q42 0 75-19t52-50 33-73 18-85 4-90z m-143 495q0-88-62-151t-152-63-151 63-63 151 63 152 151 63 152-63 62-152z" horiz-adv-x="714.3" />
+
+<glyph glyph-name="key" unicode="" d="M464 564q0 45-31 76t-76 31-76-31-31-76q0-23 11-46-23 11-47 11-44 0-76-32t-31-76 31-75 76-32 76 32 31 75q0 24-10 47 23-11 46-11 45 0 76 31t31 76z m475-393q0-9-27-36t-37-28q-5 0-16 9t-20 19-22 22-13 14l-54-53 123-123q15-16 15-38 0-23-21-45t-46-22q-22 0-37 16l-375 374q-98-73-204-73-91 0-148 57t-57 149q0 89 53 174t138 139 175 53q91 0 148-58t57-148q0-105-73-203l198-199 54 54q-2 2-14 14t-23 21-18 21-9 15q0 10 27 37t37 28q7 0 13-6 3-3 26-25t45-44 49-48 40-44 16-23z" horiz-adv-x="1000" />
+
<glyph glyph-name="menu" unicode="" d="M857 100v-71q0-15-10-25t-26-11h-785q-15 0-25 11t-11 25v71q0 15 11 25t25 11h785q15 0 26-11t10-25z m0 286v-72q0-14-10-25t-26-10h-785q-15 0-25 10t-11 25v72q0 14 11 25t25 10h785q15 0 26-10t10-25z m0 285v-71q0-14-10-25t-26-11h-785q-15 0-25 11t-11 25v71q0 15 11 26t25 10h785q15 0 26-10t10-26z" horiz-adv-x="857.1" />
<glyph glyph-name="chatbox" unicode="" d="M148 69c-82 0-148 60-148 138v409c0 78 66 140 148 140h516c82 0 149-62 149-140v-409c0-78-67-138-149-138h-8v-125s-154 105-168 115-13 10-41 10h-299z" horiz-adv-x="812.5" />
@@ -30,10 +34,14 @@
<glyph glyph-name="compass" unicode="" d="M438 399c25 0 48-24 48-49s-23-49-48-49-49 24-49 49 23 49 49 49z m0 389c240 0 437-198 437-438s-197-438-437-438-438 198-438 438 197 438 438 438z m95-534l166 358-357-166-166-358z" horiz-adv-x="875" />
+<glyph glyph-name="arrow-down" unicode="" d="M588 538l37-41-312-334-313 334 37 41 276-293z" horiz-adv-x="625" />
+
<glyph glyph-name="arrow-left" unicode="" d="M375 625l-293-275 293-275-41-37-334 312 334 313z" horiz-adv-x="375" />
<glyph glyph-name="arrow-right" unicode="" d="M0 625l41 38 334-313-334-312-41 37 293 275z" horiz-adv-x="375" />
+<glyph glyph-name="arrow-up" unicode="" d="M588 163l-275 293-276-293-37 41 313 334 312-334z" horiz-adv-x="625" />
+
<glyph glyph-name="color-wand" unicode="" d="M273 540l500-502-66-67-500 502z m-31 64v125h63v-125h-63z m0-398v125h63v-125h-63z m180 234v62h125v-62h-125z m59 191l-88-88-45 43 88 90z m-415 0l45 45 88-90-45-43z m0-326l88 88 45-43-88-90z m-66 135v62h125v-62h-125z" horiz-adv-x="773.4" />
<glyph glyph-name="navigate" unicode="" d="M406 756c225 0 407-181 407-406s-182-406-407-406-406 181-406 406 182 406 406 406z m0-656l188 438-438-188h250v-250z" horiz-adv-x="812.5" />
diff --git a/assets/fonts/iconfont.ttf b/assets/fonts/iconfont.ttf
index 850d4bf..3d01185 100644
Binary files a/assets/fonts/iconfont.ttf and b/assets/fonts/iconfont.ttf differ
diff --git a/assets/fonts/iconfont.woff b/assets/fonts/iconfont.woff
index 45b941d..1314ef4 100644
Binary files a/assets/fonts/iconfont.woff and b/assets/fonts/iconfont.woff differ
diff --git a/assets/fonts/iconfont.woff2 b/assets/fonts/iconfont.woff2
index 11a3158..c7e311d 100644
Binary files a/assets/fonts/iconfont.woff2 and b/assets/fonts/iconfont.woff2 differ
diff --git a/assets/images/cms_logo.png b/assets/images/cms_logo.png
new file mode 100644
index 0000000..5209285
Binary files /dev/null and b/assets/images/cms_logo.png differ
diff --git a/assets/images/cms_logo_dark.png b/assets/images/cms_logo_dark.png
new file mode 100644
index 0000000..3b757f3
Binary files /dev/null and b/assets/images/cms_logo_dark.png differ
diff --git a/assets/images/cms_logo_white.png b/assets/images/cms_logo_white.png
new file mode 100644
index 0000000..0fa0d3c
Binary files /dev/null and b/assets/images/cms_logo_white.png differ
diff --git a/assets/images/placeholder_image.jpg b/assets/images/placeholder_image.jpg
new file mode 100644
index 0000000..844b8ba
Binary files /dev/null and b/assets/images/placeholder_image.jpg differ
diff --git a/assets/images/userprofile_placeholder.png b/assets/images/userprofile_placeholder.png
new file mode 100644
index 0000000..2aeab59
Binary files /dev/null and b/assets/images/userprofile_placeholder.png differ
diff --git a/cms_template/bearbeitungsmaske.html b/cms_template/bearbeitungsmaske.html
index 5c34e86..7e38240 100644
--- a/cms_template/bearbeitungsmaske.html
+++ b/cms_template/bearbeitungsmaske.html
@@ -93,98 +93,7 @@
</ul>
</div>
</div>
-
- <div class="cms_content_form">
- <form action="">
- <div class="row">
- <div class="tab8">
- <div class="input_holder">
- <header class="input_header">
- <label for="">Titel</label>
- </header>
- <input type="text" value="" name="" placeholder="Titel hier eintragen">
- </div>
-
- <div class="input_holder">
- <header class="input_header">
- <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>
- <div class="input_holder">
- <header class="input_header">
- <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>
- </header>
-
- <textarea name="" id="" rows="10" placeholder="Dies ist ein normales Textfeld"></textarea>
- </div>
-
- <!-- Fieldgroup -->
- <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>
- <div class="cms_fieldgroup_content">
- <div class="input_holder">
- <header class="input_header">
- <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> -->
- </header>
-
- <input type="text" value="" name="" placeholder="Noch ein Feld">
- </div>
-
- <div class="input_holder">
- <header class="input_header">
- <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> -->
- </header>
-
- <textarea name="" id="" rows="10" placeholder="Dies ist ein normales Textfeld"></textarea>
- </div>
- </div>
-
- </div>
-
- <!-- Fieldgroup -->
- <div class="cms_fieldgroup">
- <header class="cms_fieldgroup_header">Feldergruppe <div class="cms_fieldgroup_trigger"><i class="ion-chevron-down"></i></div></header>
- <div class="cms_fieldgroup_content">
- <div class="input_holder">
- <header class="input_header">
- <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> -->
- </header>
-
- <input type="text" value="" name="" placeholder="Noch ein Feld">
- </div>
-
- <div class="input_holder">
- <header class="input_header">
- <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> -->
- </header>
-
- <textarea name="" id="" rows="10" placeholder="Dies ist ein normales Textfeld"></textarea>
- </div>
- </div>
-
- </div>
-
-
- </div>
- <div class="tab4">
- <div class="cms_content_form_sidebar">
- Sidebar
- </div>
- </div>
- </div>
-
- </form>
- </div>
-
</div>
</div>
diff --git a/conf/init.json b/conf/init.json
index 74c27bd..e6bf4ec 100644
--- a/conf/init.json
+++ b/conf/init.json
@@ -13,19 +13,19 @@
{
"name": "Dashboard",
"to": "/",
- "icon": "fa-home",
+ "icon": "icon-compass",
"content": "<dashboard></dashboard>"
},
{
"name": "Userlist",
"to": "/userlist",
- "icon": "fa-news",
+ "icon": "icon-contacts",
"content": "<userlist></userlist>"
},
{
"name": "Logout",
"to": "/logout",
- "icon": "fa-lock",
+ "icon": "icon-log-out",
"content": "<logout></logout>"
}
]
diff --git a/src/app.less b/src/app.less
index 188e42b..d584760 100644
--- a/src/app.less
+++ b/src/app.less
@@ -155,27 +155,39 @@ input[type=checkbox]:checked ~ .check_checkbox {
input[type=checkbox]:checked ~ .check_checkbox:before{
background: #28b78d!important;
}
+button{
+ height: 40px;
+ background: @cms_brand_secondary;
+ border: none;
+ color: #FFF;
+ cursor: pointer;
+ text-transform: uppercase;
+ width: auto;
+ margin: 0px auto 0 auto;
+ padding: 0px 30px;
+ 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;}
/*--------------------------------------------------------------
# CMS CONTENT FORM
--------------------------------------------------------------*/
-.cms_content_form {}
+/*.cms_content_form {}
.cms_content_form_sidebar {background:#FFF; padding:25px; border:solid 1px #CCC;}
.cms_fieldgroup {background:#f0f0f0; border:solid 1px #CCC; margin-bottom:20px;}
.cms_fieldgroup_header {position:relative; color:#333; border-bottom:solid 1px #CCC; height:40px; line-height:40px; padding:0px 25px; font-weight:600;}
.cms_fieldgroup_content {padding:25px; display:none;}
.cms_fieldgroup_trigger {position:absolute; top:0px; width:100px; right:0px; padding-right:25px; cursor:pointer; height:40px; line-height:40px; text-align:right;}
.cms_fieldgroup_trigger i {color:#333; font-size:18px;}
-.fieldgroup_open .cms_fieldgroup_content {display:block;}
+.fieldgroup_open .cms_fieldgroup_content {display:block;}*/
/*--------------------------------------------------------------
# Content Area
--------------------------------------------------------------*/
-.cms_content_area {position:absolute; left:70px; top:40px; right:0px; transition:all 0.3s;}
-.cms_content_main {position:relative; top:0px; padding:25px; transition:all 0.3s;}
+.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;}
.cms_content_main_headline {margin-bottom:20px; position:relative;}
.content_open_sidebar {left:250px;}
@@ -183,14 +195,14 @@ input[type=checkbox]:checked ~ .check_checkbox:before{
/*--------------------------------------------------------------
# Content Search Section
--------------------------------------------------------------*/
-.cms_content_search_section {display:block; margin-bottom:30px;}
+/*.cms_content_search_section {display:block; margin-bottom:30px;}
.searchbar_left {width:70%; float:left;}
.searchbar_right {width:30%; float:left; padding-left:30px;}
.input_search_replace {background:#e5e5e5;}
.cms_searchbox {position:relative; display:block; height:35px;}
.cms_searchbox input {position:absolute; left:0px; top:0px; right:0px; padding-left:40px;}
-.cms_searchbox .fa {line-height:35px; font-size:13px; background:none; color:#999; z-index:500; position:absolute; left:15px;}
+.cms_searchbox .fa {line-height:35px; font-size:13px; background:none; color:#999; z-index:500; position:absolute; left:15px;}*/
/*--------------------------------------------------------------
# CMS ADD BUTTON
@@ -347,26 +359,21 @@ input[type=checkbox]:checked ~ .check_checkbox:before{
/*--------------------------------------------------------------
# Breakpoints
--------------------------------------------------------------*/
-@media(max-width:1100px) {
+@media(max-width: @screen-md-max) {
/*.cms_open_mobilenav {display:block;}
.cms_sidebar {left:0px;}
.cms_content_area {left:0px;}
.cms_content_sidebar {left:0px;}
-
+
.content_open_sidebar {left:225px;}
.content_open_sidebar .cms_content_sidebar {left:225px;}
.open_sidebar {left:0px;}*/
-
- .cms_sidebar {left:0px;}
-
}
-@media(max-width:768px) {
- .cms_content_sidebar, .content_open_sidebar .cms_content_sidebar {left:inherit; position:relative; width:100%; top:0px; margin-bottom:30px;}
+@media(max-width: @screen-xs-max) {
.cms_content_main {margin-left:0px;}
- .cms_content_sidebar .sub_navigation ul li {width:100%;}
-
+
.table_cell {display:block; padding:0px 5px;}
.cell_checkbox {display:table-cell; width:40px;}
.cell_image {display:none;}
diff --git a/src/app.vue b/src/app.vue
index f03e2aa..fd095d5 100644
--- a/src/app.vue
+++ b/src/app.vue
@@ -19,8 +19,8 @@
</style>
<script>
-import Topbar from './components/navigation.vue';
-import Sidebar from './components/navigation.vue';
+import Topbar from './components/topbar.vue';
+import Sidebar from './components/sidebar.vue';
export default {
name: "App",
diff --git a/src/components/login.vue b/src/components/login.vue
deleted file mode 100644
index 94cc24f..0000000
--- a/src/components/login.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<style>
-/*--------------------------------------------------------------
-# LOGINBOX
---------------------------------------------------------------*/
-#loginbox_container {
- /* Center vertically */
- display: -webkit-box;
- display: -ms-flexbox;
- display: -webkit-flex;
- display: flex;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- -webkit-justify-content: center;
- justify-content: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- -webkit-align-items: center;
- align-items: center;
- width:100%;
- height:100%;
- position:absolute;
- top:0px; left:0px; bottom:0px; right:0px;
- background:#28b78d;
-}
-.loginbox_holder {
- max-width:380px;
- width:90%;
- margin:0px;
- position:relative;
- display:block;
- /* border:solid 1px #FFF; */
- border-radius:2px;
- /*background:#FFF;*/
- height:auto;
- padding:20px;
-}
-
-.loginbox_logo {line-height:0; margin-bottom:15px; text-align:center;}
-/*.loginbox_logo p {font-size:25px; line-height:33px; color:#000;}
-.loginbox_logo_icon {width:35px; float:left; margin-right:10px;}*/
-.loginbox_logo img {width:100%; max-width:72px;}
-
-.loginbox_content {}
-p.login_intro_text {font-size:14px!important; margin-bottom:20px; line-height:1.5;}
-.loginbox_content p {text-align:center; color:#FFF; font-size:15px; line-height:1.2;}
-.login_input {
- margin-bottom:10px;
- border:none;
- height:40px;
- position:relative;
-}
-.login_input:before {
- font-family: 'FontAwesome';
- position:absolute;
- left:10px;
- top:5px;
- font-size:20px;
- color:#28b78d;
- content:"";
-}
-.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>
\ No newline at end of file
diff --git a/src/components/my-form.vue b/src/components/my-form.vue
index 3c5855b..cbaf8ef 100644
--- a/src/components/my-form.vue
+++ b/src/components/my-form.vue
@@ -1,8 +1,16 @@
<template>
<form @submit.prevent="submit()">
- <div v-for="(e, i) in elements" :key="i">
- <my-input :label="e.label" :type="e.type" v-model="formData[i]" @validate="validateData(i)"></my-input>
- <span class="error" v-if="formErrors[i]">required</span>
+ <div v-for="(item, key) in elements" :key="key">
+ <my-input
+ :description="item.description"
+ :label="item.label"
+ :name="key"
+ :placeholder="item.placeholder"
+ :type="item.type"
+ v-model="formData[key]"
+ @validate="validateData(key)">
+ </my-input>
+ <span class="error" v-if="formErrors[key]">required</span>
</div>
<div>
<button v-for="(b, i) in buttons" :key="i" @click.prevent="buttonClick(b.type)">{{ b.label }}</button>
diff --git a/src/components/my-input.vue b/src/components/my-input.vue
index 5f6ee87..edd385b 100644
--- a/src/components/my-input.vue
+++ b/src/components/my-input.vue
@@ -1,8 +1,21 @@
<template>
- <div class="My-Input">
- <label>{{ label }}</label>
- <input type="text" v-if="type == 'text'" v-model="currentValue" @blur="validate()" @change="() => $emit('change', currentValue)">
- <input type="password" v-else-if="type == 'password'" v-model="currentValue" @blur="validate()" @change="() => $emit('change', currentValue)">
+ <div class="input_holder">
+ <div class="input_header" v-if="label">
+ <label :for="name">{{ label }}</label>
+ </div>
+ <div class="input_description" v-if="description">{{ description }}</div>
+ <input type="text" v-if="type == 'text'"
+ v-model="currentValue"
+ :name="name"
+ :placeholder="placeholder"
+ @blur="validate()"
+ @change="() => $emit('change', currentValue)">
+ <input type="password" v-else-if="type == 'password'"
+ v-model="currentValue"
+ :name="name"
+ :placeholder="placeholder"
+ @blur="validate()"
+ @change="() => $emit('change', currentValue)">
</div>
</template>
@@ -10,9 +23,11 @@
export default {
name: "MyInput",
props: [
+ 'description',
'label',
- 'type',
'name',
+ 'placeholder',
+ 'type',
'value'
],
data() {
@@ -31,4 +46,4 @@ export default {
}
}
}
-</script>
+</script>
\ No newline at end of file
diff --git a/src/components/sidebar.vue b/src/components/sidebar.vue
index db7bd6e..913ad62 100644
--- a/src/components/sidebar.vue
+++ b/src/components/sidebar.vue
@@ -1,262 +1,282 @@
<template>
- <div class="cms_sidebar open_sidebar">
-
- <div class="cms_sidebar_trigger"><i class="icon icon-arrow-left" aria-hidden="true"></i></div>
-
- <div class="cms_sidebar_icons_bg"></div>
- <div class="cms_sidebar_mainnav">
- <div class="cms_sidebar_inner">
- <!-- Sidebar Section -->
- <div class="cms_sidebar_section main_navigation">
+ <div class="sidebar">
+ <div class="wrapper">
+ <div class="inner">
+ <nav class="mainnav">
<ul>
- <li><a href="#"><i class="icon icon-compass" aria-hidden="true"></i> <span class="main_navigation_text l1_title">Dashboard</span></a></li>
- <li><a href="#"><i class="icon icon-images" aria-hidden="true"></i> <span class="main_navigation_text l1_title">Medien</span></a></li>
- <li><a href="#"><i class="icon icon-document-text" aria-hidden="true"></i> <span class="main_navigation_text l1_title">Seiten</span></a></li>
+ <li v-for="(item, i) in items" :key="i">
+ <router-link :to="item.to">
+ <i :class="['icon', item.icon]"></i>
+ <div class="title">{{ item.name }}</div>
+ </router-link>
+ </li>
+
+ <hr>
+ <li><a href="#">
+ <i class="icon icon-images" aria-hidden="true"></i>
+ <div class="title">Medien</div>
+ </a></li>
+ <li><a href="#">
+ <i class="icon icon-document-text" aria-hidden="true"></i>
+ <div class="title">Seiten</div>
+ </a></li>
<li class="active">
- <a href="#"><i class="icon icon-paper-airplane" aria-hidden="true"></i> <span class="main_navigation_text l1_title">Beiträge</span></a>
+ <a href="#"><i class="icon icon-paper-airplane" aria-hidden="true"></i>
+ <div class="title">Beiträge</div></a>
<!-- Sub Navigation -->
- <div class="sub_navigation">
- <span class="sub_navigation_headline">Kategorie</span>
+ <div class="subnav">
+ <div class="subnav_headline">Kategorie</div>
<ul>
<li class="active"><a href="#">News</a></li>
<li><a href="#">Veranstaltungen</a></li>
<li><a href="#">Mitarbeiter</a></li>
- <li class="nav_add_more"><a href="#">+</a></li>
</ul>
</div>
</li>
- <li><a href="#"><i class="icon icon-cube" aria-hidden="true"></i> <span class="main_navigation_text l1_title">Module</span></a></li>
- <li><a href="#"><i class="icon icon-navigate" aria-hidden="true"></i> <span class="main_navigation_text l1_title">Navigation</span></a></li>
+ <li><a href="#">
+ <i class="icon icon-cube" aria-hidden="true"></i>
+ <div class="title">Module</div>
+ </a></li>
+ <li><a href="#">
+ <i class="icon icon-navigate" aria-hidden="true"></i>
+ <div class="title">Navigation</div>
+ </a></li>
- <li><a href="#"><i class="icon icon-chatbox" aria-hidden="true"></i> <span class="main_navigation_text l1_title">Sprachen</span></a></li>
- <li><a href="#"><i class="icon icon-pie-graph" aria-hidden="true"></i> <span class="main_navigation_text l1_title">SEO & Pagespeed</span></a></li>
+ <li><a href="#">
+ <i class="icon icon-chatbox" aria-hidden="true"></i>
+ <div class="title">Sprachen</div>
+ </a></li>
+ <li><a href="#">
+ <i class="icon icon-pie-graph" aria-hidden="true"></i>
+ <div class="title">SEO & Pagespeed</div>
+ </a></li>
- <li><a href="#"><i class="icon icon-contacts" aria-hidden="true"></i> <span class="main_navigation_text l1_title">Benutzer</span></a></li>
- <li><a href="#"><i class="icon icon-gear" aria-hidden="true"></i> <span class="main_navigation_text l1_title">Settings</span></a></li>
+ <li><a href="#">
+ <i class="icon icon-contacts" aria-hidden="true"></i>
+ <div class="title">Benutzer</div>
+ </a></li>
+ <li><a href="#">
+ <i class="icon icon-gear" aria-hidden="true"></i>
+ <div class="title">Settings</div>
+ </a></li>
</ul>
- </div>
-
+ </nav>
</div>
</div>
<!-- User Profile -->
- <!-- <div class="user_profile">
- <a class="user_profile_trigger">
- <span class="user_profile_image"><i class="icon icon-person" aria-hidden="true"></i></span>
- <span class="user_profile_text">Hans Zimmer <span class="user_role">Administrator</span></span>
- <span class="user_profile_open"><i class="fa fa-angle-up" aria-hidden="true"></i></span>
- <span style="clear:both; display:block;"></span>
+ <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="user_profile_content">
+ <div class="content">
<ul>
- <li><a href=""><i class="icon icon-color-wand" aria-hidden="true"></i><span class="navigation_text">Profil anpassen</span></a></li>
- <li><a href=""><i class="icon icon-log-out" aria-hidden="true"></i><span class="navigation_text">ausloggen</span></a></li>
+ <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>
<style lang="less">
- /*--------------------------------------------------------------
- # Left Sidebar (Main Navigation)
- --------------------------------------------------------------*/
- .cms_sidebar {position:fixed; left:0px; top:40px; bottom:0px; background:#152129; width:70px; transition:all 0.3s; z-index:2000;}
- .cms_sidebar_trigger {
- position:absolute;
- left:100%;
- bottom:5px;
- background:#1a2e3b;
- width:30px;
- height:30px;
- color:#FFF;
- padding-top:;
- text-align:center;
- font-size:20px;
- cursor:pointer;
- transition:all 0.3s;
- }
- .cms_sidebar_trigger:hover {background:#28b78d;}
- .trigger_active i:before {
- transform:rotate(180deg);
- }
+ @import "../mixins";
- .cms_sidebar_mainnav {height:100%; /*overflow-y:scroll;*/}
- .cms_sidebar_inner {position:relative; width:auto;}
- .cms_sidebar_icons_bg {background:#1a2e3b; width:70px; position:absolute; top:0px; left:0px; bottom:0px;}
- .main_navigation ul {list-style-type:none;}
- .main_navigation ul li {padding:0px; line-height:1.2; color:#FFF; position:relative; width:70px;}
- .main_navigation ul li .fa, .main_navigation ul li .icon {
- color:#FFF;
- font-size:22px;
- text-align:center;
- position:relative;
- left:0;
- margin-bottom:5px;
- display:block;
- transition:all 0.3s;
- }
- .main_navigation ul li .fa {font-size:16px;}
- .main_navigation ul li .main_navigation_text {
- position:relative;
- font-size:10px;
- display:block;
- color:#FFF;
- text-align:center;
- width:auto;
- float:none;
- line-height:1;
- /*transition:all 0.3s;*/
- }
- .main_navigation ul li a {color:#FFF; display:block; height:auto; width:70px; height:auto; padding:8px 0px; text-align:center;}
- .main_navigation ul li:after {clear:both; content:""; display:block;}
- .main_navigation ul li:hover {background:rgba(40,183,141,0.3);}
+ /*--------------------------------------------------------------
+ # Left Sidebar (Main Navigation)
+ --------------------------------------------------------------*/
+ .sidebar {
+ position: fixed;
+ left: 0px;
+ top: 40px;
+ bottom: 0px;
+ background: @cms_bg_light;
+ color: white;
+ width: 70px;
+ transition: all 0.3s;
+ z-index: 2000;
- .main_navigation ul li.active {background:#28b78d;}
- .main_navigation ul li.active .fa {background:#19435e;}
+ &>.wrapper {
+ height:100%; /*overflow-y:scroll;*/
- .main_navigation ul li.active .submenu {border-top:solid 1px rgba(255,255,255,0.2);}
- .main_navigation .submenu {margin-left:45px;}
- .main_navigation .submenu .submenu_headline {padding-left:15px;}
- .main_navigation .submenu li {}
- .main_navigation .submenu li .main_navigation_text {
- font-size:14px;
- display:block;
- color:#FFF;
- text-align:left;
- float:left;
- padding:0px 10px 0px 15px;
- width:180px;
- line-height:35px;
- }
+ &>.inner {
+ position:relative; width:auto;
+ }
+ }
- .main_navigation .submenu li a {height:35px; padding:0px; text-align:left;}
- .main_navigation .nav_add_more {border-top:solid 1px rgba(255,255,255,0.2);}
- .main_navigation .submenu li.nav_add_more .main_navigation_text {text-align:center;}
- .main_navigation .submenu li:hover {background:rgba(56,29,29,0.6);}
+ /* Main navigation */
+ .mainnav {
+ ul {
+ list-style-type: none;
+ li {
+ position: relative;
+ width: 70px;
+ padding: 0;
+ line-height: 1.2;
+ color: white;
+ text-align: center;
- /* Submenu */
- .sub_navigation {
- position:absolute;
- left:100%;
- top:0px;
- background:#152129;
- width:180px;
- height:auto;
- transition:all 0.3s;
- /*visibility:visible;
- opacity:1;*/
- visibility:hidden;
- opacity:0;
- }
- .sub_navigation ul {list-style-type:none;}
- .sub_navigation ul li {font-size:12px; display:block; text-align:left; padding:0px 10px 0px 15px; width:auto; line-height:30px; color:#FFF; position:relative;}
- .sub_navigation ul li a {color:#FFF; display:block; width:100%; height:100%; padding:0px; text-align:left;}
- .sub_navigation .nav_add_more {border-top:solid 1px rgba(255,255,255,0.2); border-bottom:solid 1px rgba(255,255,255,0.2); display:block;}
- .sub_navigation .nav_add_more a {display:block; text-align:center; color:rgba(255,255,255,0.5); font-weight:600; font-size:20px;}
- .sub_navigation ul li.active, .cms_content_sidebar .sub_navigation ul li:hover {background:#28B78D;}
- .sub_navigation ul li.active:after {
- right: 0;
- top: 50%;
- border: solid transparent;
- content: " ";
- height: 0;
- width: 0;
- position: absolute;
- pointer-events: none;
- border-color: rgba(255, 255, 255, 0);
- border-right-color: #f5f3f4;
- border-width: 10px;
- margin-top: -10px;
- }
- .sub_navigation_headline {color:#FFF; padding:0px 10px 0px 15px; font-weight:600; width:100%; display:block; border-bottom:solid 1px #FFF; line-height:50px; font-size:12px;}
+ &:after {clear:both; content:""; display:block;}
+ &:hover {
+ background:rgba(40,183,141,0.3);
+ .subnav {
+ visibility:visible;
+ opacity:1;
+ }
+ }
- .main_navigation ul li:hover .sub_navigation {
- visibility:visible;
- opacity:1;
- }
+ &.active {background:#28b78d;}
+ // &.active .fa {background:#19435e;}
+ /*&.active .submenu {border-top:solid 1px rgba(255,255,255,0.2);}*/
- /* Open Sidebar */
- .open_sidebar {width:250px;}
- .open_sidebar .sub_navigation {
- visibility:visible;
- opacity:1;
- left:70px;
- }
- .open_sidebar .main_navigation ul li.active {position:inherit;}
- .open_sidebar .sub_navigation ul li.active {position:relative;}
- .open_sidebar .main_navigation>ul>li.active>a>i:after {
- right: 0;
- top: 75%;
- border: solid transparent;
- content: " ";
- height: 0;
- width: 0;
- position: absolute;
- pointer-events: none;
- border-color: rgba(255, 255, 255, 0);
- border-right-color: #152129;
- border-width: 7px;
- margin-top: -7px;
- }
+ .icon {
+ display: block;
+ color: white;
+ font-size: 22px;
+ margin-bottom: 5px;
+ transition: all 0.3s;
+ }
- /*.open_sidebar {width:225px;}
- .open_sidebar .main_navigation ul li .main_navigation_text {
- width:auto;
- float:left;
- text-align:left;
- padding:0px 10px 0px 15px;
- line-height:40px;
- font-size:14px;
- }
- .open_sidebar .cms_sidebar_icons_bg {width:45px;}
- .open_sidebar .main_navigation ul li a {height:40px; width:auto; text-align:left; padding:0px;}
- .open_sidebar .main_navigation ul li .fa, .open_sidebar .main_navigation ul li .icon {
- float:left;
- height:40px;
- width:45px;
- line-height:40px;
- margin:0px;
- }*/
+ .title {
+ position: relative;
+ font-size: 10px;
+ width: auto;
+ float: none;
+ line-height: 1;
+ color: white;
+ /*transition:all 0.3s;*/
+ }
- /*--------------------------------------------------------------
- # Left Sidebar (User Profile)
- --------------------------------------------------------------*/
- .user_profile {position:fixed; bottom:0px; left:0px; right:0px; cursor:pointer; width:230px;}
- .user_profile_trigger {display:block;}
- .user_profile_trigger a {display:block; width:100%; height:100%;}
- .user_profile_image {float:left; width:45px; height:45px; padding-top:7px; text-align:center;}
- .user_profile_image .icon {font-size:22px; color:#FFF;}
- .user_profile_image img {width:70%; margin:0 auto; display:block;}
- .user_profile_text {float:left; line-height:1; color:#FFF; font-size:14px; padding-left:15px; padding-top: 9px;}
- .user_profile_text .user_role {font-size:12px; color:rgba(255,255,255,0.5); display:block; margin-top:0px;}
+ a {
+ display: block;
+ height: auto;
+ width: 70px;
+ height: auto;
+ padding: 8px 0px;
+ }
+ }
+ }
+ }
- .user_profile_trigger:hover {background:rgba(40,183,141,0.3);}
- .user_profile_open {position:absolute; right:0px; top:0px; width:auto; height:auto; padding-top:12px; padding-right:20px;}
- .user_profile_open .fa {color:#FFF; font-size:18px; transition:all 0.3s;}
+ /* Sub navigation */
+ .subnav {
+ position: absolute;
+ left: 100%;
+ top: 0px;
+ background: #152129;
+ width: 180px;
+ height: auto;
+ transition: all 0.3s;
+ /*visibility:visible;
+ opacity:1;*/
+ visibility: hidden;
+ opacity: 0;
+ ul {list-style-type:none;}
+ ul li {font-size:12px; display:block; text-align:left; padding:0px 10px 0px 15px; width:auto; line-height:30px; color:#FFF; position:relative;}
+ ul li a {color:#FFF; display:block; width:100%; height:100%; padding:0px; text-align:left;}
+ ul li.active, ul li:hover {background:#28B78D;}
+ ul li.active:after {
+ right: 0;
+ top: 50%;
+ border: solid transparent;
+ content: " ";
+ height: 0;
+ width: 0;
+ position: absolute;
+ pointer-events: none;
+ border-color: rgba(255, 255, 255, 0);
+ border-right-color: #f5f3f4;
+ border-width: 10px;
+ margin-top: -10px;
+ }
- .user_profile_content {display:none; color:#FFF; padding-bottom:30px;}
- .user_profile_content ul {list-style-type:none;}
- .user_profile_content li {padding:0px; line-height:1.2; color:#FFF; position:relative;}
- .user_profile_content ul li .icon {color:#FFF; font-size:20px; text-align:center; position:relative; left:0; float:left; height:45px; width:45px; line-height:45px;}
- .user_profile_content ul li .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;}
- .user_profile_content ul li a {color:#FFF; display:block; height:45px;}
- .user_profile_content ul li:after {clear:both; content:""; display:block;}
- .user_profile_content ul li:hover {background:rgba(40,183,141,0.3);}
+ .subnav_headline {color:#FFF; padding:0px 10px 0px 15px; font-weight:600; width:100%; display:block; border-bottom:solid 1px #FFF; line-height:50px; font-size:12px;}
+ }
+ }
+ /*--------------------------------------------------------------
+ # 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%;}
- .open_profile {background:rgba(40,183,141,0.3);}
- .open_profile .user_profile_trigger {background:rgba(40,183,141,0.5);}
- .open_profile .fa-angle-up {
- transform: rotate(180deg);
- }
+ .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;
+
+ .subnav ul li{
+ width: 100%;
+ }
+ }
+ }
+
+ @media(max-width: @screen-md-max) {
+ .sidebar {left:0px;}
+ }
</style>
<script>
export default {
- name: "Sidebar"
+ name: "Sidebar",
+ props: {
+ items: {
+ type: Array,
+ default() {
+ return [ ];
+ }
+ }
+ }
}
</script>
\ No newline at end of file
diff --git a/src/components/topbar.vue b/src/components/topbar.vue
index 8ecfbde..8af8a22 100644
--- a/src/components/topbar.vue
+++ b/src/components/topbar.vue
@@ -1,9 +1,7 @@
<template>
<div class="topbar">
- <div class="logo"><a href="#"><img src="project-files/img/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>
- <a class="navbutton"><i class="icon icon-menu" aria-hidden="true"></i></a>
- <div class="clear"></div>
</div>
</template>
@@ -11,11 +9,13 @@
@import "../mixins.less";
.topbar {
+ .clearfix();
position: fixed;
top: 0;
right: 0;
left: 0px;
- background: @cms_bg;
+ background: @cms_bg_light;
+ color: white;
height: 40px;
z-index: 1500;
@@ -49,27 +49,25 @@
float: left;
width: auto;
line-height: 40px;
- color: white;
padding-left: 15px;
}
&>.navbutton {
display: block;
float: left;
- font-size: 22px;
- color: white;
width: auto;
height: 100%;
+ font-size: 22px;
margin-left: 40px;
height: 40px;
width: 40px;
- /*padding:3px 10px 0px 5px;*/
padding-top: 4px;
cursor: pointer;
text-align: center;
+ color: white;
&:hover {
- background:rgba(40,183,141,0.3);
+ background: fade(@cms_brand_primary, 30%);
}
}
}
diff --git a/src/icons.less b/src/icons.less
index 5037896..8bc2ef3 100644
--- a/src/icons.less
+++ b/src/icons.less
@@ -1,7 +1,7 @@
@import "mixins";
@iconfont_path: "~/assets/fonts/";
-@iconfont_version: 1;
+@iconfont_version: 2;
@font-face {
@@ -17,6 +17,8 @@
}
.icon-search:before { content: '\e800'; } /* '' */
+.icon-user:before { content: '\e801'; } /* '' */
+.icon-key:before { content: '\e802'; } /* '' */
.icon-menu:before { content: '\f0c9'; } /* '' */
.icon-chatbox:before { content: '\f11b'; } /* '' */
.icon-document-text:before { content: '\f12e'; } /* '' */
@@ -28,7 +30,9 @@
.icon-contacts:before { content: '\f2d9'; } /* '' */
.icon-cube:before { content: '\f318'; } /* '' */
.icon-compass:before { content: '\f37c'; } /* '' */
+.icon-arrow-down:before { content: '\f3d0'; } /* '' */
.icon-arrow-left:before { content: '\f3d2'; } /* '' */
.icon-arrow-right:before { content: '\f3d3'; } /* '' */
+.icon-arrow-up:before { content: '\f3d8'; } /* '' */
.icon-color-wand:before { content: '\f416'; } /* '' */
.icon-navigate:before { content: '\f46e'; } /* '' */
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 2634c3e..6a919f7 100644
--- a/src/main.js
+++ b/src/main.js
@@ -177,8 +177,7 @@ Axios.get('conf/init.json')
alert('invalid data in init.json');
return;
}
- let navigation = [];
- results.data.navigation.forEach(({name, to}) => navigation.push({name, to}));
+ const navigation = results.data.navigation.map(({name, to, icon}) => {return {name, to, icon}});
store.commit("setNavigation", navigation);
diff --git a/src/mixins.less b/src/mixins.less
index 1985c39..9d989f8 100644
--- a/src/mixins.less
+++ b/src/mixins.less
@@ -34,4 +34,15 @@
/* Animation center compensation - margins should be symmetric */
/* remove if not needed */
margin-left: .2em;
-}
\ No newline at end of file
+}
+
+.clearfix() {
+ &:before,
+ &:after {
+ content: " "; // 1
+ display: table; // 2
+ }
+ &:after {
+ clear: both;
+ }
+}
diff --git a/src/variables.less b/src/variables.less
index ce94914..a686a5a 100644
--- a/src/variables.less
+++ b/src/variables.less
@@ -1 +1,21 @@
-@cms_bg: #1a2e3b;
+@screen-xs: 450px;
+@screen-sm: 768px;
+@screen-md: 1024px;
+@screen-lg: 1200px;
+
+@cms_bg_light: #1a2e3b;
+@cms_dark_border: #152129;
+
+@cms_brand_primary: #28b78d;
+@cms_brand_secondary: #152129;
+
+
+/*****************************************/
+
+@screen-xs-min: @screen-xs;
+@screen-xs-max: @screen-sm - 1;
+@screen-sm-min: @screen-sm;
+@screen-sm-max: @screen-md - 1;
+@screen-md-min: @screen-md;
+@screen-md-max: @screen-lg - 1;
+@screen-lg-min: @screen-lg;
\ No newline at end of file
diff --git a/src/views/foo.vue b/src/views/contentdemo.vue
similarity index 97%
rename from src/views/foo.vue
rename to src/views/contentdemo.vue
index 9bbaeca..243e5dc 100644
--- a/src/views/foo.vue
+++ b/src/views/contentdemo.vue
@@ -20,12 +20,10 @@
<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 -->
@@ -35,7 +33,6 @@
<!-- Table -->
<div class="cms_content_table">
-
<div class="cms_table_row_header">
<!-- Row -->
<div class="cms_table_row">
@@ -51,7 +48,6 @@
</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>
@@ -63,9 +59,9 @@
<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>
@@ -89,10 +85,10 @@
</div>
<div class="clear"></div>
</div>
-
+
</div>
<div class="clear"></div>
-
+
</div>
</div>
@@ -107,9 +103,9 @@
<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>
@@ -133,10 +129,10 @@
</div>
<div class="clear"></div>
</div>
-
+
</div>
<div class="clear"></div>
-
+
</div>
</div>
@@ -151,9 +147,9 @@
<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>
@@ -177,10 +173,10 @@
</div>
<div class="clear"></div>
</div>
-
+
</div>
<div class="clear"></div>
-
+
</div>
</div>
diff --git a/src/views/forms/formdemo.vue b/src/views/forms/formdemo.vue
new file mode 100644
index 0000000..932121b
--- /dev/null
+++ b/src/views/forms/formdemo.vue
@@ -0,0 +1,90 @@
+<div class="cms_content_form">
+ <form action="">
+ <div class="row">
+ <div class="tab8">
+ <div class="input_holder">
+ <header class="input_header">
+ <label for="">Titel</label>
+ </header>
+ <input type="text" value="" name="" placeholder="Titel hier eintragen">
+ </div>
+
+ <div class="input_holder">
+ <header class="input_header">
+ <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>
+
+ <div class="input_holder">
+ <header class="input_header">
+ <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>
+ </header>
+
+ <textarea name="" id="" rows="10" placeholder="Dies ist ein normales Textfeld"></textarea>
+ </div>
+
+ <!-- Fieldgroup -->
+ <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>
+ <div class="cms_fieldgroup_content">
+ <div class="input_holder">
+ <header class="input_header">
+ <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> -->
+ </header>
+
+ <input type="text" value="" name="" placeholder="Noch ein Feld">
+ </div>
+
+ <div class="input_holder">
+ <header class="input_header">
+ <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> -->
+ </header>
+
+ <textarea name="" id="" rows="10" placeholder="Dies ist ein normales Textfeld"></textarea>
+ </div>
+ </div>
+
+ </div>
+
+ <!-- Fieldgroup -->
+ <div class="cms_fieldgroup">
+ <header class="cms_fieldgroup_header">Feldergruppe <div class="cms_fieldgroup_trigger"><i class="ion-chevron-down"></i></div></header>
+ <div class="cms_fieldgroup_content">
+ <div class="input_holder">
+ <header class="input_header">
+ <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> -->
+ </header>
+
+ <input type="text" value="" name="" placeholder="Noch ein Feld">
+ </div>
+
+ <div class="input_holder">
+ <header class="input_header">
+ <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> -->
+ </header>
+
+ <textarea name="" id="" rows="10" placeholder="Dies ist ein normales Textfeld"></textarea>
+ </div>
+ </div>
+
+ </div>
+
+
+ </div>
+ <div class="tab4">
+ <div class="cms_content_form_sidebar">
+ Sidebar
+ </div>
+ </div>
+ </div>
+
+ </form>
+ </div>
\ No newline at end of file
diff --git a/src/views/forms/login.vue b/src/views/forms/login.vue
index 08c7930..5871d14 100644
--- a/src/views/forms/login.vue
+++ b/src/views/forms/login.vue
@@ -1,38 +1,75 @@
<template>
- <div class="LoginForm">
+<!-- <div class="LoginForm">
<h2>Login</h2>
- <my-form :elements="elements" :buttons="buttons" :submitHandler="login"></my-form>
+
+ </div> -->
+
+ <div id="login_form">
+ <div class="holder">
+ <div class="logo">
+ <img src="assets/images/cms_logo_white.png" alt="">
+ </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>
</div>
</template>
<script>
-import MyForm from '../../components/my-form.vue';
+import MyForm from "../../components/my-form.vue";
export default {
- name: 'LoginForm',
+ name: "LoginForm",
components: {
MyForm
},
data() {
return {
- username: '',
- password: '',
+ username: "",
+ password: "",
elements: {
username: {
- label: 'Benutzername',
- type: 'text',
+ placeholder: "Benutzername",
+ icon: "icon-user",
+ type: "text",
required: true
},
password: {
- label: 'Passwort',
- type: 'password',
+ placeholder: "Passwort",
+ icon: "icon-key",
+ type: "password",
required: true
}
},
buttons: [
{
- label: 'login',
- type: 'submit'
+ label: "login",
+ type: "submit"
}
]
}
@@ -53,3 +90,126 @@ export default {
}
}
</script>
+
+
+
+<style lang="less">
+@import "../../mixins";
+
+/*--------------------------------------------------------------
+# LOGINBOX
+--------------------------------------------------------------*/
+
+#login_form{
+ /* Disply on top */
+ position: fixed;
+ width: 100%;
+ height: 100%;
+ z-index: 3000;
+ top:0px; left:0px; bottom:0px; right:0px;
+
+ /* Center vertically */
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+
+ background: @cms_brand_primary;
+
+ &>.holder {
+ position: relative;
+ display: block;
+ max-width: 380px;
+ width: 90%;
+ height: auto;
+ margin: 0px;
+ border-radius: 2px;
+ padding: 20px;
+ }
+
+ .logo{
+ .clearfix();
+ line-height:0; margin-bottom:15px; text-align:center;
+ img {width:100%; max-width:72px;}
+ }
+
+ .content{
+ p {text-align:center; color: white; font-size:15px; line-height:1.2;}
+ }
+
+ .intro_text{
+ font-size:14px!important; margin-bottom:20px; line-height:1.5;
+ }
+
+ form{
+ text-align: center;
+ }
+
+ input{
+ height: 40px;
+ padding: 0px 15px;
+ border-color: transparent;
+
+ &:focus {
+ border: solid 1px @cms_dark_border;
+ 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>
\ No newline at end of file