add basic frame, basic login page
This commit is contained in:
parent
2c21a2bdd8
commit
c6badd6a90
assets
fonts
images
cms_template
conf
src
@ -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",
|
||||
|
||||
Binary file not shown.
@ -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" />
|
||||
|
||||
|
Before 
(image error) Size: 5.9 KiB After 
(image error) Size: 6.9 KiB
|
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
assets/images/cms_logo.png
Normal file
BIN
assets/images/cms_logo.png
Normal file
Binary file not shown.
|
After 
(image error) Size: 1.1 KiB |
BIN
assets/images/cms_logo_dark.png
Normal file
BIN
assets/images/cms_logo_dark.png
Normal file
Binary file not shown.
|
After 
(image error) Size: 1.1 KiB |
BIN
assets/images/cms_logo_white.png
Normal file
BIN
assets/images/cms_logo_white.png
Normal file
Binary file not shown.
|
After 
(image error) Size: 1.0 KiB |
BIN
assets/images/placeholder_image.jpg
Normal file
BIN
assets/images/placeholder_image.jpg
Normal file
Binary file not shown.
|
After 
(image error) Size: 5.6 KiB |
BIN
assets/images/userprofile_placeholder.png
Normal file
BIN
assets/images/userprofile_placeholder.png
Normal file
Binary file not shown.
|
After 
(image error) Size: 1.6 KiB |
@ -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>
|
||||
|
||||
@ -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>"
|
||||
}
|
||||
]
|
||||
|
||||
37
src/app.less
37
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;}
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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>
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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'; } /* '' */
|
||||
@ -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);
|
||||
|
||||
|
||||
@ -34,4 +34,15 @@
|
||||
/* Animation center compensation - margins should be symmetric */
|
||||
/* remove if not needed */
|
||||
margin-left: .2em;
|
||||
}
|
||||
}
|
||||
|
||||
.clearfix() {
|
||||
&:before,
|
||||
&:after {
|
||||
content: " "; // 1
|
||||
display: table; // 2
|
||||
}
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
@ -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>
|
||||
|
||||
90
src/views/forms/formdemo.vue
Normal file
90
src/views/forms/formdemo.vue
Normal file
@ -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>
|
||||
@ -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>
|
||||
Loading…
x
Reference in New Issue
Block a user