panel/baseui
1
0
Fork 0
Code Issues 8 Pull Requests Releases Wiki Activity

add basic frame, basic login page

Browse Source
This commit is contained in:
Anton Schubert
2017-08-29 20:58:39 +02:00
parent 2c21a2bdd8
commit c6badd6a90
27 changed files with 661 additions and 511 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/app.less
View File

@@ -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;}

4
src/app.vue
View File

@@ -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",

107
src/components/login.vue
View File

@@ -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>

14
src/components/my-form.vue
View File

@@ -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>

27
src/components/my-input.vue
View File

@@ -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>

448
src/components/sidebar.vue
View File

@@ -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>

16
src/components/topbar.vue
View File

@@ -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%);
}
}
}

6
src/icons.less
View File

@@ -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'; } /* '' */

3
src/main.js
View File

@@ -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);

13
src/mixins.less
View File

@@ -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;
}
}

22
src/variables.less
View File

@@ -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;

28
src/views/foo.vue → src/views/contentdemo.vue
View File

@@ -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
View 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>

184
src/views/forms/login.vue
View File

@@ -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>