VENOM-10: Clean Up Code

This commit is contained in:
Maurice Grönwoldt 2020-12-08 18:37:59 +01:00
parent 7d540d809a
commit 85549fbd43
10 changed files with 28 additions and 35 deletions

View file

@ -1 +1 @@
main{display:flex;height:100vh;overflow:hidden}main h1{margin-top:30px;margin-bottom:20px}main h2{margin-top:35px;margin-bottom:25px}main h3{margin-top:20px;margin-bottom:15px}main h4{margin-top:15px;margin-bottom:10px}main.nav-open .menu{transform:translateX(0)}main.nav-open .app{transform:translateX(220px)}.app{transform:translateX(0);transition:transform .4s;flex-grow:1;overflow-y:auto;margin:.6rem .8rem;width:100%;max-height:100%;background:rgba(27,27,27,.5);position:relative}.app .nav-toggle{position:absolute;top:1rem;left:1rem}.menu{width:220px;background-color:#1b1b1b;box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);height:100%;position:fixed;z-index:1;top:0;left:0;overflow-x:hidden;transition:.4s;transform:translateX(-220px);display:flex;flex-direction:column}.menu .logo{text-align:center;font-family:monospace}.menu div[data-link]{padding:.75rem .5rem;position:relative}.menu div[data-link]:after{background-color:#3949ab;content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;transform:scaleX(0);transition:transform .4s;transform-origin:left}.menu div[data-link]:hover:after{transform:scaleX(1)}.menu div[data-link]:last-child{margin-top:auto}.menu div[data-link].active{font-weight:700}.content-area{width:calc(100% - 20px);padding-top:30px;margin:0 auto;display:block}.content-area header{display:block;text-align:center}.content-area header h2{margin:25px 0}.content-area .back-arrow{width:36px;height:36px}.content-area textarea{background:rgba(27,27,27,.5);color:#fff;margin:15px 0 0 0;font-family:sans-serif;font-size:1.1rem;min-width:100%}.content-area .modules div{padding:6px 20px 6px 0}.content-area .add-new,.content-area .overview{width:100%}.content-area .overview div{margin:10px 0}.content-area .overview .icon{display:inline-block}.content-area .add-new{padding-top:25px}@media only screen and (min-width:768px){.content-area{width:calc(100% - 40px)}.content-area .flexbox{display:flex}.content-area .overview{flex-grow:1;width:60%}.content-area .add-new{padding-top:0;flex-grow:1;width:40%}}@media only screen and (min-width:1024px){.content-area{max-width:860px;padding-top:0;margin:0 0 0 20px}}@media only screen and (min-width:1024px){main,main.nav-open{display:flex}main .app,main.nav-open .app{transform:translateX(0)}main .menu,main.nav-open .menu{position:relative;transform:translateX(0)}main .nav-toggle,main.nav-open .nav-toggle{display:none}}.role-edit .privileges .name{font-size:1.15rem}.role-edit .privileges .description{padding-top:2px} main{display:flex;height:100vh;overflow:hidden}main h1{margin-top:30px;margin-bottom:20px}main h2{margin-top:35px;margin-bottom:25px}main h3{margin-top:20px;margin-bottom:15px}main h4{margin-top:15px;margin-bottom:10px}main.nav-open .menu{transform:translateX(0)}main.nav-open .app{transform:translateX(220px)}.app{transform:translateX(0);transition:transform .4s;flex-grow:1;overflow-y:auto;margin:.6rem .8rem;width:100%;max-height:100%;background:rgba(27,27,27,.5);position:relative}.app .nav-toggle{position:absolute;top:1rem;left:1rem}.menu{width:220px;background-color:#1b1b1b;box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);height:100%;position:fixed;z-index:1;top:0;left:0;overflow-x:hidden;transition:.4s;transform:translateX(-220px);display:flex;flex-direction:column}.menu .logo{text-align:center;font-family:monospace}.menu div[data-link]{padding:.75rem .5rem;position:relative}.menu div[data-link]:after{background-color:#3949ab;content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;transform:scaleX(0);transition:transform .4s;transform-origin:left}.menu div[data-link]:hover:after{transform:scaleX(1)}.menu div[data-link]:last-child{margin-top:auto}.menu div[data-link].active{font-weight:700}.content-area{width:calc(100% - 20px);padding-top:30px;margin:0 auto;display:block}.content-area header{display:block;text-align:center}.content-area header h2{margin:25px 0}.content-area .back-arrow{width:36px;height:36px}.content-area textarea{background:rgba(27,27,27,.5);color:#fff;margin:15px 0 0 0;font-family:sans-serif;font-size:1.1rem;min-width:100%}.content-area .modules div{padding:6px 20px 6px 0}.content-area .add-new,.content-area .overview{width:100%}.content-area .overview div[data-link]{margin-right:10px;padding:10px;background-color:rgba(0,0,0,.3)}.content-area .overview div[data-link]:hover{background-color:rgba(0,0,0,.5)}.content-area .overview .icon{display:inline-block}.content-area .add-new{padding-top:25px}@media only screen and (min-width:768px){.content-area{width:calc(100% - 40px)}.content-area .flexbox{display:flex}.content-area .overview{flex-grow:1;width:60%}.content-area .add-new{padding-top:0;flex-grow:1;width:40%}}@media only screen and (min-width:1024px){.content-area{max-width:860px;padding-top:0;margin:0 0 0 20px}}@media only screen and (min-width:1024px){main,main.nav-open{display:flex}main .app,main.nav-open .app{transform:translateX(0)}main .menu,main.nav-open .menu{position:relative;transform:translateX(0)}main .nav-toggle,main.nav-open .nav-toggle{display:none}}.role-edit .privileges .name{font-size:1.15rem}

File diff suppressed because one or more lines are too long

View file

@ -310,6 +310,12 @@ const rippler = new VRipple();
window._openVSelect = this; window._openVSelect = this;
this.isOpen = true; this.isOpen = true;
} }
let l = $('v-label', this).classList;
if (this.isOpen) {
l.add('open');
} else {
l.remove('open');
}
} }
} }

File diff suppressed because one or more lines are too long

View file

@ -1,4 +1,4 @@
<button class="btn btn--${type}"> <button class="btn btn--${type} ${classes}">
<span class="btn-ripple"></span> <span class="btn-ripple"></span>
<span class="btn__content">${content}</span> <span class="btn__content">${content}</span>
</button> </button>

View file

@ -1,4 +1,5 @@
<v-input <v-input
class="${classes}"
data-label="${label}" data-label="${label}"
required required
name="${name}" name="${name}"

View file

@ -1,4 +1,4 @@
<v-select ${required} name="${name}"> <v-select ${required} name="${name}" class="${classes}">
<v-label empty="${label}"></v-label> <v-label empty="${label}"></v-label>
<v-options> <v-options>
{foreach(object as item)} {foreach(object as item)}

View file

@ -1,4 +1,4 @@
<v-switch data-id="${id}"> <v-switch data-id="${id}" class="${classes}">
<input type="checkbox" required name="${name}"> <input type="checkbox" required name="${name}">
<label></label> <label></label>
<span>${desc}</span> <span>${desc}</span>

View file

@ -2,27 +2,21 @@
<header> <header>
<h2>Role: ${roles.name}</h2> <h2>Role: ${roles.name}</h2>
</header> </header>
<div> <span data-link="/roles" class="icon-back">
<span data-link="/roles" class="icon-text"> {include(includes/svg;class=back-arrow;icon=vt-arrow-back)}
{include(includes/svg;class=back-arrow;icon=vt-arrow-back)} </span>
</span> <div class="spacer">
</div> {include(includes/switch;id=${switch.id};name=permissionEditMetaData;desc=Active)}
<div> {include(includes/input;class=input-group;label=Name;name=roleName;error=Name is required;default=$roles.name;classes=spacer)}
<h3>Role Status</h3>
{include(includes/switch;id=${switch.id};name=permissionEditMetaData;desc=If enabled role is active.)}
</div>
<div>
<h3>Role Name</h3>
{include(includes/input;class=input-group;label=Change Name;name=roleName;error=Role Name is required;default=Admin)}
</div> </div>
<v-table class="privileges"> <v-table class="privileges">
<h3>Privileges</h3> <h3>Privileges</h3>
<v-table-body> <v-table-body>
<v-table-row> <v-table-header>
<v-cell class="name">Module</v-cell> <v-cell class="name">Module</v-cell>
<v-cell class="name">Edit</v-cell> <v-cell class="name">Edit</v-cell>
<v-cell class="name">View</v-cell> <v-cell class="name">View</v-cell>
</v-table-row> </v-table-header>
<v-table-row> <v-table-row>
<v-cell class="description">Meta-Data</v-cell> <v-cell class="description">Meta-Data</v-cell>
<v-cell>{include(includes/switch;id=${switch.id};name=permissionEditMetaData)}</v-cell> <v-cell>{include(includes/switch;id=${switch.id};name=permissionEditMetaData)}</v-cell>

View file

@ -8,29 +8,21 @@
</span> </span>
</div> </div>
<h3>User Data</h3> <h3>User Data</h3>
<div> <div class="spacer">
{include(includes/input;class=input-group;label=Username;name=newUserName;error=New User Name is required;default=EngineerTrooper)} {include(includes/input;class=input-group;label=Username;name=newUserName;error=New User Name is required;default=EngineerTrooper)}
</div> {include(includes/input;class=input-group;label=Author Name;name=newAuthorName;error=New Author Name is required;default=Dominic Seela;classes=spacer)}
<div> {include(includes/input;class=input-group;label=E-Mail;name=newEMailAddress;error=E-Mail Address is required;default=kontakt@engineertrooper.com;classes=spacer)}
{include(includes/input;class=input-group;label=Author Name;name=newAuthorName;error=New Author Name is required;default=Dominic Seela)} {include(includes/input;class=input-group;label=Password;name=newPassword;type=password;error=Password is required;classes=spacer)}
</div> {include(includes/input;class=input-group;label=Password (Repeat);name=newPasswordRepeat;type=password;error=Password (Repeat) is required;classes=spacer)}
<div>
{include(includes/input;class=input-group;label=E-Mail;name=newEMailAddress;error=E-Mail Address is required;default=kontakt@engineertrooper.com)}
</div>
<div>
{include(includes/input;class=input-group;label=Password;name=newPassword;type=password;error=Password is required)}
</div>
<div>
{include(includes/input;class=input-group;label=Password (Repeat);name=newPasswordRepeat;type=password;error=Password (Repeat) is required)}
</div> </div>
<v-table class="privileges"> <v-table class="privileges">
<h3>Privileges</h3> <h3>Privileges</h3>
<v-table-body> <v-table-body>
<v-table-row> <v-table-header>
<v-cell class="name">Module</v-cell> <v-cell class="name">Module</v-cell>
<v-cell class="name">Edit</v-cell> <v-cell class="name">Edit</v-cell>
<v-cell class="name">View</v-cell> <v-cell class="name">View</v-cell>
</v-table-row> </v-table-header>
<v-table-row> <v-table-row>
<v-cell class="description">Meta-Data</v-cell> <v-cell class="description">Meta-Data</v-cell>
<v-cell>{include(includes/switch;id=${switch.id};name=permissionEditMetaData)}</v-cell> <v-cell>{include(includes/switch;id=${switch.id};name=permissionEditMetaData)}</v-cell>