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

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>