VENOM-10: added, fake tables with display:grid. create v-table as html dom element
This commit is contained in:
engineerTrooper
parent
162cc4b0a4
commit
9519236662
7 changed files with 638 additions and 95 deletions
|
|
@ -1 +1 @@
|
|||
:focus{outline:0}*{box-sizing:border-box}body,html{width:100vw;height:100vh;overflow:hidden;padding:0;margin:0;background:#1f2857;background:linear-gradient(144deg,#1f2954 25%,#000 50%,#5e002c 80%);background-attachment:fixed;color:#fff;font-family:sans-serif;font-size:16px}.hide{display:none!important}main{display:flex;height:100vh;overflow:hidden}.menu{width:220px;background-color:#1b1b1b;box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);flex-shrink:0;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{padding:0 1rem;margin:1rem 1.5rem;flex-grow:1;overflow-y:auto;max-height:100%;background:RGBA(27,27,27,.5)}.content-area .max-width{max-width:300px}.content-area hr{border:.5px solid #e9e9e9;box-shadow:0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23)}.content-area .text{display:flex;position:relative;padding:5px 0}.content-area .icon{display:inline-block;width:18px;height:18px;background-size:cover;margin:0 10px 0 auto;fill:#fff}.content-area .icon-add{background-image:url(../images/icon/ic_add_circle_outline_24px.svg)}.content-area .icon-edit{background-image:url(../images/icon/ic_edit_24px.svg)}.content-area .icon-visibility{background-image:url(../images/icon/ic_visibility_24px.svg)}.content-area .add-new-role{display:flex;position:relative;align-items:center;padding:0 0 5px 0}
|
||||
:focus{outline:0}*{box-sizing:border-box}body,html{width:100vw;height:100vh;overflow:hidden;padding:0;margin:0;background:#1f2857;background:linear-gradient(144deg,#1f2954 25%,#000 50%,#5e002c 80%);background-attachment:fixed;color:#fff;font-family:sans-serif;font-size:16px}.hide{display:none!important}v-table{display:block}v-table v-table-footer,v-table v-table-header,v-table v-table-row{display:grid;grid-auto-columns:1fr;grid-auto-flow:column;-moz-column-gap:20px;column-gap:20px}v-table v-table-header h2{text-align:center}v-table v-table-row{margin:10px 0}v-table .grid12{grid-template-columns:repeat(12,[col-start] 1fr);-moz-column-gap:5px;column-gap:5px}v-table .grid12 .col-1to4{grid-column:1/3}v-table .grid12 .col-1to6{grid-column:1/6}v-table .grid12 .col-5to6{grid-column:5/6}v-table .grid12 .col-6to11{grid-column:6/11}v-table .grid12 .col-6to9{grid-column:6/9}v-table .grid12 .col-9to10{grid-column:9/10}v-table .grid12 .col-11to13{grid-column:11/13}v-label,v-option,v-options,v-select{display:inline-block;box-sizing:border-box}v-select{display:block;position:relative;margin-bottom:.5rem}v-label{padding:.5rem 1rem;background-color:#3949ab;color:#fff;cursor:pointer;display:block;border-radius:4px}v-options{position:absolute;display:flex;border-radius:4px;flex-direction:column;overflow:hidden;max-height:0;top:.5rem;left:.5rem;background-color:#1b1b1b;z-index:1000;cursor:pointer;color:#fff;box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23)}v-option{padding:.5rem 1rem}v-option:not([disabled]):hover{background-color:rgba(0,0,0,.3)}v-option[selected]{background-color:#3949ab;color:#fff}v-option[disabled]{color:#aaa}main{display:flex;height:100vh;overflow:hidden}.menu{width:220px;background-color:#1b1b1b;box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);flex-shrink:0;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{padding:0 1%;margin:1rem 1.5rem;flex-grow:1;overflow-y:auto;width:100%;max-height:100%;background:rgba(27,27,27,.5)}.content-area .inline{display:inline}.content-area .inline div{display:inline}.content-area .btn-line{margin-top:35px}.content-area .btn-line div{text-align:right}.content-area .btn-line div button{display:inline;margin-left:10px;min-width:100px}.content-area .modules div{padding:6px 20px 6px 0}.content-area .icon-cont div{display:inline-block;vertical-align:middle;margin-top:5px}.content-area .icon-cont .icon{width:18px;height:18px;background-size:cover;margin:0 15px 0 0;fill:#fff}.content-area .icon-cont .icon-add{background-image:url(../images/icon/ic_add_circle_outline_24px.svg)}.content-area .icon-cont .icon-edit{background-image:url(../images/icon/ic_edit_24px.svg)}.content-area .icon-cont .icon-visibility{background-image:url(../images/icon/ic_visibility_24px.svg)}.content-area .icon-cont .icon-delete{background-image:url(../images/icon/ic_delete_24px.svg)}.content-area .icon-cont .icon-arrow-back{background-image:url(../images/icon/ic_arrow_back_24px.svg);width:24px;height:24px}.content-area .description{margin-top:25px}.content-area .fix-pad{padding-top:14px}
|
||||
|
|
@ -1 +1 @@
|
|||
:focus{outline:0}*{box-sizing:border-box}body,html{width:100vw;height:100vh;overflow:hidden;padding:0;margin:0;background:#1f2857;background:linear-gradient(144deg,#1f2954 25%,#000 50%,#5e002c 80%);background-attachment:fixed;color:#fff;font-family:sans-serif;font-size:16px}.hide{display:none!important}.btn{border:none;background:#3949ab radial-gradient(circle at 0 0,#3949ab 0,rgba(0,0,0,.2) 100%) no-repeat;color:#fff;padding:5px 15px;margin:10px 0;cursor:pointer;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:4px;box-shadow:0 2px 5px 0 rgba(0,0,0,.26);overflow:hidden;display:flex;justify-content:center;align-items:center;transition:.5s}.btn--outline{background:0 0;border:1px solid #3949ab}.btn:focus{box-shadow:0 3px 8px 1px rgba(0,0,0,.4)}.btn--accent{background:#ff0089 radial-gradient(circle at 0 0,#ff0089 0,rgba(0,0,0,.2) 100%) no-repeat}.btn--warn{background:#f87229 radial-gradient(circle at 0 0,#f87229 0,rgba(0,0,0,.2) 100%) no-repeat}.btn-fab{border-radius:2rem;width:2em;height:2em;padding:5px}.btn-ripple{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;background:0 0}.btn-ripple__effect{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:1;width:200%;height:0;padding-bottom:200%;border-radius:50%;background:rgba(190,190,190,.3);-webkit-animation:a-ripple .4s ease-in;animation:a-ripple .4s ease-in}.btn-ripple__effect.to-remove{-webkit-animation:remove-ripple .2s linear;animation:remove-ripple .2s linear}.btn--outline .btn-ripple__effect{background:rgba(57,73,171,.5);z-index:-1}.btn__content{z-index:1;font-weight:400;pointer-events:none}@-webkit-keyframes remove-ripple{from{opacity:1}to{opacity:0}}@keyframes remove-ripple{from{opacity:1}to{opacity:0}}@-webkit-keyframes a-ripple{0%{opacity:0;padding-bottom:0;width:0}25%{opacity:1}100%{width:200%;padding-bottom:200%}}@keyframes a-ripple{0%{opacity:0;padding-bottom:0;width:0}25%{opacity:1}100%{width:200%;padding-bottom:200%}}.input-group input{background-color:rgba(0,0,0,.4);border:none;border-bottom:2px solid #3949ab;color:#fff;padding:6px}.input-group input:focus,.input-group.focus input{border-color:#ff0089}.input-group.valid input{border-color:#39ab48}.input-group.invalid input{border-color:#cf1b1b}.input-group{display:flex;flex-direction:column;margin-bottom:3px;position:relative;padding-top:.7rem}.input-group.no-space{padding-top:.1rem}.input-group label{font-size:.7rem;position:absolute;top:.7rem;left:6px;height:1rem;vertical-align:middle;transform:translateY(50%);color:#dcdcdc;transition:all .2s ease-out}.input-group input:focus~label,.input-group.focus label{top:0;left:0;transform:translateY(0);font-size:.6rem}.input-group .error{display:none}.input-group.invalid .error{margin-top:2px;display:block;font-size:.7rem;color:#f32f32}.switch{display:flex;flex-direction:row;align-items:center;padding:5px 20px 5px 5px}.switch input{position:absolute;-webkit-appearance:none;-moz-appearance:none;appearance:none;opacity:0}.switch label{display:block;border-radius:10px;width:40px;height:20px;background-color:#e9e9e9;position:relative;cursor:pointer;margin-right:.5rem}.switch label:after{content:'';background-color:#c51162;position:absolute;top:2px;left:2px;height:16px;width:16px;border-radius:10px;transition:.5s}.switch input:checked+label:after{transform:translateX(20px);background-color:#007769}
|
||||
:focus{outline:0}*{box-sizing:border-box}body,html{width:100vw;height:100vh;overflow:hidden;padding:0;margin:0;background:#1f2857;background:linear-gradient(144deg,#1f2954 25%,#000 50%,#5e002c 80%);background-attachment:fixed;color:#fff;font-family:sans-serif;font-size:16px}.hide{display:none!important}.btn{border:none;background:#3949ab radial-gradient(circle at 0 0,#3949ab 0,rgba(0,0,0,.2) 100%) no-repeat;color:#fff;padding:5px 15px;margin:10px 0;cursor:pointer;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:4px;box-shadow:0 2px 5px 0 rgba(0,0,0,.26);overflow:hidden;display:flex;justify-content:center;align-items:center;transition:.5s}.btn--outline{background:0 0;border:1px solid #3949ab}.btn:focus{box-shadow:0 3px 8px 1px rgba(0,0,0,.4)}.btn--valid{background:#39ab48 radial-gradient(circle at 0 0,#39ab48 0,rgba(0,0,0,.2) 100%) no-repeat}.btn--accent{background:#ff0089 radial-gradient(circle at 0 0,#ff0089 0,rgba(0,0,0,.2) 100%) no-repeat}.btn--warn{background:#f87229 radial-gradient(circle at 0 0,#f87229 0,rgba(0,0,0,.2) 100%) no-repeat}.btn-fab{border-radius:2rem;width:2em;height:2em;padding:5px}.btn-ripple{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;background:0 0}.btn-ripple__effect{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:1;width:200%;height:0;padding-bottom:200%;border-radius:50%;background:rgba(190,190,190,.3);-webkit-animation:a-ripple .4s ease-in;animation:a-ripple .4s ease-in}.btn-ripple__effect.to-remove{-webkit-animation:remove-ripple .2s linear;animation:remove-ripple .2s linear}.btn--outline .btn-ripple__effect{background:rgba(57,73,171,.5);z-index:-1}.btn__content{z-index:1;font-weight:400;pointer-events:none}@-webkit-keyframes remove-ripple{from{opacity:1}to{opacity:0}}@keyframes remove-ripple{from{opacity:1}to{opacity:0}}@-webkit-keyframes a-ripple{0%{opacity:0;padding-bottom:0;width:0}25%{opacity:1}100%{width:200%;padding-bottom:200%}}@keyframes a-ripple{0%{opacity:0;padding-bottom:0;width:0}25%{opacity:1}100%{width:200%;padding-bottom:200%}}.input-group input{background-color:rgba(0,0,0,.4);border:none;border-bottom:2px solid #3949ab;color:#fff;padding:6px}.input-group input:focus,.input-group.focus input{border-color:#ff0089}.input-group.valid input{border-color:#39ab48}.input-group.invalid input{border-color:#cf1b1b}.input-group{display:flex;flex-direction:column;margin-bottom:3px;position:relative;padding-top:.7rem}.input-group.no-space{padding-top:.1rem}.input-group label{font-size:.7rem;position:absolute;top:.7rem;left:6px;height:1rem;vertical-align:middle;transform:translateY(50%);color:#dcdcdc;transition:all .2s ease-out}.input-group input:focus~label,.input-group.focus label{top:0;left:0;transform:translateY(0);font-size:.6rem}.input-group .error{display:none}.input-group.invalid .error{margin-top:2px;display:block;font-size:.7rem;color:#f32f32}.switch{display:flex;flex-direction:row;align-items:center;padding:5px 20px 5px 0}.switch input{position:absolute;-webkit-appearance:none;-moz-appearance:none;appearance:none;opacity:0}.switch label{display:block;border-radius:10px;width:40px;height:20px;background-color:#e9e9e9;position:relative;cursor:pointer;margin-right:.5rem}.switch label:after{content:'';background-color:#c51162;position:absolute;top:2px;left:2px;height:16px;width:16px;border-radius:10px;transition:.5s}.switch input:checked+label:after{transform:translateX(20px);background-color:#007769}
|
||||
1
public/theme/admin/images/icon/ic_arrow_back_24px.svg
Normal file
1
public/theme/admin/images/icon/ic_arrow_back_24px.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#fff" d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
|
||||
|
After Width: | Height: | Size: 173 B |
4
public/theme/admin/images/icon/ic_delete_24px.svg
Normal file
4
public/theme/admin/images/icon/ic_delete_24px.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<path fill="#fff" d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
|
||||
<path d="M0 0h24v24H0z" fill="none"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 239 B |
|
|
@ -196,6 +196,193 @@ class VRipple {
|
|||
}
|
||||
}
|
||||
const rippler = new VRipple();
|
||||
|
||||
|
||||
|
||||
(function () {
|
||||
window._openVSelect = null;
|
||||
|
||||
requestAnimationFrame(e => {
|
||||
document.body.addEventListener('click', ev => {
|
||||
if (window._openVSelect && ev.target.closest('v-select') !== window._openVSelect) {
|
||||
window._openVSelect.toggle(false);
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
class VSelectElement extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
let self = this;
|
||||
self._in = this.attachInternals();
|
||||
self._in.role = 'select';
|
||||
self.setAttribute('tabindex', 0);
|
||||
self.update();
|
||||
}
|
||||
|
||||
static get formAssociated() {
|
||||
return true;
|
||||
}
|
||||
|
||||
static get observedAttributes() {
|
||||
return ['required', 'validity'];
|
||||
}
|
||||
|
||||
get required() {
|
||||
return this.hasAttribute('required');
|
||||
}
|
||||
|
||||
set required(flag) {
|
||||
this.toggleAttribute('required', Boolean(flag));
|
||||
}
|
||||
|
||||
get name() {
|
||||
return this.getAttribute('name');
|
||||
}
|
||||
|
||||
set name(val) {
|
||||
this.toggleAttribute('name', val);
|
||||
}
|
||||
|
||||
get form() {
|
||||
return this._in.form;
|
||||
}
|
||||
|
||||
get options() {
|
||||
return $$('v-options v-option', this);
|
||||
}
|
||||
|
||||
get selected() {
|
||||
return $$('v-options v-option[selected]', this);
|
||||
}
|
||||
|
||||
update() {
|
||||
let selected = [],
|
||||
lbl = $('v-label', this),
|
||||
fd = new FormData();
|
||||
this.selected.forEach(e => {
|
||||
selected.push(e.innerText);
|
||||
fd.append(this.name, e.value);
|
||||
})
|
||||
lbl.attributeChangedCallback('value', '', selected.join(", "));
|
||||
if (this.required && selected.length === 0) {
|
||||
this._in.setValidity({customError: true}, "Option is needed");
|
||||
} else {
|
||||
this._in.setValidity({});
|
||||
}
|
||||
this._in.setFormValue(fd);
|
||||
}
|
||||
|
||||
checkValidity() {
|
||||
return this._in.checkValidity();
|
||||
}
|
||||
|
||||
reportValidity() {
|
||||
return this._in.reportValidity();
|
||||
}
|
||||
|
||||
toggle(open) {
|
||||
if (window._openVSelect && open) {
|
||||
window._openVSelect.toggleSelect(false);
|
||||
}
|
||||
const options = $('v-options', this);
|
||||
if (!open || this.isOpen) {
|
||||
options.style.maxHeight = '0';
|
||||
window._openVSelect = false;
|
||||
this.isOpen = false;
|
||||
this.update();
|
||||
} else {
|
||||
options.focus();
|
||||
let height = 0,
|
||||
children = options.children;
|
||||
for (let i = 0; i < children.length; i++) {
|
||||
height += children[i].offsetHeight;
|
||||
}
|
||||
options.style.maxHeight = height + 'px';
|
||||
window._openVSelect = this;
|
||||
this.isOpen = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class VSelectOptionElement extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
this._in = this.attachInternals();
|
||||
this._in.role = 'option';
|
||||
this.addEventListener('click', e => {
|
||||
let parent = this.parentNode.parentNode,
|
||||
select = !this.selected;
|
||||
if (!parent.hasAttribute('multiple')) {
|
||||
parent.toggle(false);
|
||||
for (let item of parent.selected) {
|
||||
if (item !== this) {
|
||||
item.removeAttribute('selected');
|
||||
}
|
||||
}
|
||||
}
|
||||
if (!this.disabled) {
|
||||
this.attributeChangedCallback('selected', false, select, true);
|
||||
this.parentNode.parentNode.update();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
static get observedAttributes() {
|
||||
return ['selected', 'disabled', 'value'];
|
||||
}
|
||||
|
||||
attributeChangedCallback(name, oldValue, newValue, force) {
|
||||
if (name === 'selected' && this.hasAttribute('disabled')) {
|
||||
this.removeAttribute(name);
|
||||
return;
|
||||
}
|
||||
if (name === 'disabled' && newValue === true && this.hasAttribute('selected')) {
|
||||
this.attributeChangedCallback('selected', false, false);
|
||||
}
|
||||
|
||||
if (force) {
|
||||
if (newValue) {
|
||||
this.setAttribute(name, newValue);
|
||||
} else {
|
||||
this.removeAttribute(name);
|
||||
}
|
||||
}
|
||||
this[name] = newValue;
|
||||
}
|
||||
}
|
||||
|
||||
class VLabel extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
this.empty = this.getAttribute('empty') || "";
|
||||
this.innerHTML = this.getAttribute("value") || this.empty;
|
||||
this.addEventListener('click', this.openPopUp.bind(this));
|
||||
}
|
||||
|
||||
static get observedAttributes() {
|
||||
return ['empty', 'value'];
|
||||
}
|
||||
|
||||
openPopUp() {
|
||||
this.parentNode.toggle(true);
|
||||
}
|
||||
|
||||
attributeChangedCallback(name, oldValue, newValue) {
|
||||
if (name === 'value') {
|
||||
this.innerHTML = newValue || this.empty;
|
||||
}
|
||||
this[name] = newValue;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("v-label", VLabel);
|
||||
customElements.define("v-option", VSelectOptionElement);
|
||||
customElements.define("v-select", VSelectElement);
|
||||
})();
|
||||
|
||||
|
||||
|
||||
class FormHandler {
|
||||
constructor(selector, parent, cb, err) {
|
||||
this.cb = cb || console.log;
|
||||
|
|
@ -263,4 +450,4 @@ class FormHandler {
|
|||
$('.error-message', el).classList.remove('hide');
|
||||
})
|
||||
}
|
||||
})()
|
||||
})();
|
||||
2
public/theme/admin/js/scripts.min.js
vendored
2
public/theme/admin/js/scripts.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,144 +1,495 @@
|
|||
<main>
|
||||
<nav class="menu">
|
||||
<h1 class="logo">Venom</h1>
|
||||
<div data-link="">Meta Data</div>
|
||||
<div data-link="" class="active">Overview</div>
|
||||
<div data-link="">Pages</div>
|
||||
<div data-link="">Roles</div>
|
||||
<div data-link="">SEO-URL</div>
|
||||
<div data-link="">Users</div>
|
||||
<div data-link="">Venom-Status</div>
|
||||
<div data-link="">Pages</div>
|
||||
<div data-link="">Editor</div>
|
||||
<div data-link="">Meta Data</div>
|
||||
<div data-link="">SEO-URL</div>
|
||||
<div data-link="/admin/api/login/logout">Ausloggen</div>
|
||||
</nav>
|
||||
<div class="content-area">
|
||||
<v-table>
|
||||
<v-table-header>
|
||||
<h2>Roles</h2>
|
||||
<div class="max-width">
|
||||
</v-table-header>
|
||||
<v-table-row>
|
||||
<div>
|
||||
<h3>Overview</h3>
|
||||
<div class="text">Admin (secured)
|
||||
<div class="icon-cont">
|
||||
<div class="icon icon-visibility"></div>
|
||||
<div class="text">Admin (secured)</div>
|
||||
</div>
|
||||
<div class="text">Moderator
|
||||
<div class="icon-cont">
|
||||
<div class="icon icon-edit"></div>
|
||||
<div class="text">Moderator</div>
|
||||
</div>
|
||||
<div class="text">Predator
|
||||
<div class="icon-cont">
|
||||
<div class="icon icon-edit"></div>
|
||||
<div class="text">Predator</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Add new Role</h3>
|
||||
<div class="add-new-role max-width">
|
||||
<div class="input-group">
|
||||
<input id="new-role-name" required name="newRoleName">
|
||||
<label for="new-role-name">New Role Name</label>
|
||||
<span class="error">New Role Name is required</span>
|
||||
</div>
|
||||
<div class="icon icon-add"></div>
|
||||
<button class="btn btn--primary">
|
||||
<span class="btn-ripple"></span>
|
||||
<span class="btn__content">Add</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div>
|
||||
</v-table-row>
|
||||
<v-table-footer>
|
||||
Dies ist der Footer.
|
||||
</v-table-footer>
|
||||
</v-table>
|
||||
|
||||
|
||||
<v-table>
|
||||
<v-table-header>
|
||||
<h2>Role: Admin</h2>
|
||||
<div class="switch">
|
||||
</v-table-header>
|
||||
<v-table-row>
|
||||
<div class="icon-cont">
|
||||
<div class="icon icon-arrow-back"></div>
|
||||
</div>
|
||||
</v-table-row>
|
||||
<v-table-row>
|
||||
<div>
|
||||
<h3>Role Status</h3>
|
||||
<div class="switch fix-pad">
|
||||
<input type="checkbox" id="role-active" required name="roleActive">
|
||||
<label for="role-active"></label>
|
||||
<span>If enabled role is active.</span>
|
||||
</div>
|
||||
<div class="change-role-name max-width">
|
||||
<h3>Change Name</h3>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Role Name</h3>
|
||||
<div class="input-group">
|
||||
<input id="change-role-name" required name="roleName">
|
||||
<label for="change-role-name">Role Name: Admin</label>
|
||||
<span class="error">Role Name is required</span>
|
||||
<label for="change-role-name">Change Name</label>
|
||||
<span class="error">New Role Name is required</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="change-view-permissions">
|
||||
<h3>View Permissions</h3>
|
||||
<div class="checkbox-group">
|
||||
</v-table-row>
|
||||
<v-table-row>
|
||||
<div class="modules">
|
||||
<h4>Module</h4>
|
||||
<div>Meta-Data</div>
|
||||
<div>Pages</div>
|
||||
<div>Roles</div>
|
||||
<div>SEO-URL</div>
|
||||
<div>Users</div>
|
||||
<div>VENOM-Status</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Edit</h4>
|
||||
<div class="switch">
|
||||
<input type="checkbox" id="permission-edit-meta-data" required
|
||||
name="permissionEditMetaData">
|
||||
<label for="permission-edit-meta-data"></label>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="switch">
|
||||
<input type="checkbox" id="permission-edit-pages" required name="permissionEditPages">
|
||||
<label for="permission-edit-pages"></label>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="switch">
|
||||
<input type="checkbox" id="permission-edit-roles" required name="permissionEditRoles">
|
||||
<label for="permission-edit-roles"></label>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="switch">
|
||||
<input type="checkbox" id="permission-edit-seo-url" required name="permissionEditSeoUrl">
|
||||
<label for="permission-edit-seo-url"></label>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="switch">
|
||||
<input type="checkbox" id="permission-edit-label" required name="permissionEditUsers">
|
||||
<label for="permission-edit-label"></label>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="switch">
|
||||
<input type="checkbox" id="permission-edit-venom-status" required
|
||||
name="permissionEditVenomStatus">
|
||||
<label for="permission-edit-venom-status"></label>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4>View</h4>
|
||||
<div class="switch">
|
||||
<input type="checkbox" id="permission-view-meta-data" required
|
||||
name="permissionViewMetaData">
|
||||
<label for="permission-view-meta-data"></label>
|
||||
<span>Meta-Data</span>
|
||||
<span></span>
|
||||
</div>
|
||||
|
||||
<div class="switch">
|
||||
<input type="checkbox" id="permission-view-pages" required name="permissionViewPages">
|
||||
<label for="permission-view-pages"></label>
|
||||
<span>Pages</span>
|
||||
<span></span>
|
||||
</div>
|
||||
|
||||
<div class="switch">
|
||||
<input type="checkbox" id="permission-view-roles" required name="permissionViewRoles">
|
||||
<label for="permission-view-roles"></label>
|
||||
<span>Roles</span>
|
||||
<span></span>
|
||||
</div>
|
||||
|
||||
<div class="switch">
|
||||
<input type="checkbox" id="permission-view-seo-url" required name="permissionViewSeoUrl">
|
||||
<label for="permission-view-seo-url"></label>
|
||||
<span>SEO-URL</span>
|
||||
<span></span>
|
||||
</div>
|
||||
|
||||
<div class="switch">
|
||||
<input type="checkbox" id="permission-view-label" required name="permissionViewUsers">
|
||||
<label for="permission-view-label"></label>
|
||||
<span>Users</span>
|
||||
<span></span>
|
||||
</div>
|
||||
|
||||
<div class="switch">
|
||||
<input type="checkbox" id="permission-view-venom-status" required
|
||||
name="permissionViewVenomStatus">
|
||||
<label for="permission-view-venom-status"></label>
|
||||
<span>VENOM-Status</span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="change-view-permissions">
|
||||
<h3>View Permissions</h3>
|
||||
<div class="checkbox-group">
|
||||
<div class="switch">
|
||||
<input type="checkbox" id="permission-view-meta-data" required
|
||||
name="permissionViewMetaData">
|
||||
<label for="permission-view-meta-data"></label>
|
||||
<span>Meta-Data</span>
|
||||
</div>
|
||||
|
||||
<div class="switch">
|
||||
<input type="checkbox" id="permission-view-pages" required name="permissionViewPages">
|
||||
<label for="permission-view-pages"></label>
|
||||
<span>Pages</span>
|
||||
</div>
|
||||
|
||||
<div class="switch">
|
||||
<input type="checkbox" id="permission-view-roles" required name="permissionViewRoles">
|
||||
<label for="permission-view-roles"></label>
|
||||
<span>Roles</span>
|
||||
</div>
|
||||
|
||||
<div class="switch">
|
||||
<input type="checkbox" id="permission-view-seo-url" required name="permissionViewSeoUrl">
|
||||
<label for="permission-view-seo-url"></label>
|
||||
<span>SEO-URL</span>
|
||||
</div>
|
||||
|
||||
<div class="switch">
|
||||
<input type="checkbox" id="permission-view-label" required name="permissionViewUsers">
|
||||
<label for="permission-view-label"></label>
|
||||
<span>Users</span>
|
||||
</div>
|
||||
|
||||
<div class="switch">
|
||||
<input type="checkbox" id="permission-view-venom-status" required
|
||||
name="permissionViewVenomStatus">
|
||||
<label for="permission-view-venom-status"></label>
|
||||
<span>VENOM-Status</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn btn--primary">
|
||||
</v-table-row>
|
||||
<v-table-row class="btn-line">
|
||||
<div>
|
||||
<button class="btn btn--valid">
|
||||
<span class="btn-ripple"></span>
|
||||
<span class="btn__content">Save</span>
|
||||
</button>
|
||||
<button class="btn btn--primary">
|
||||
<span class="btn-ripple"></span>
|
||||
<span class="btn__content">Reset</span>
|
||||
</button>
|
||||
<button class="btn btn--warn">
|
||||
<span class="btn-ripple"></span>
|
||||
<span class="btn__content">Delete Role</span>
|
||||
</button>
|
||||
</div>
|
||||
</v-table-row>
|
||||
<v-table-footer>
|
||||
Dies ist der Footer.
|
||||
</v-table-footer>
|
||||
</v-table>
|
||||
|
||||
|
||||
<v-table>
|
||||
<v-table-header>
|
||||
<h2>Users</h2>
|
||||
</v-table-header>
|
||||
<v-table-row>
|
||||
<div>
|
||||
<h3>All Users</h3>
|
||||
<div class="icon-cont">
|
||||
<div class="icon icon-edit"></div>
|
||||
<div class="text">ALLE Alphabetisch ordnen!</div>
|
||||
</div>
|
||||
<div class="icon-cont">
|
||||
<div class="icon icon-edit"></div>
|
||||
<div class="text">derflieger (Ina Ruh)</div>
|
||||
</div>
|
||||
<div class="icon-cont">
|
||||
<div class="icon icon-edit"></div>
|
||||
<div class="text">engineertrooper (Dominic Seela)</div>
|
||||
</div>
|
||||
<div class="icon-cont">
|
||||
<div class="icon icon-edit"></div>
|
||||
<div class="text">versustunez (Maurice Grönewald)</div>
|
||||
</div>
|
||||
<div class="icon-cont">
|
||||
<div class="icon icon-edit"></div>
|
||||
<div class="text">vollglaswasser (Marie Joseph)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Add new User</h3>
|
||||
<div class="add-new-role max-width">
|
||||
<div class="input-group">
|
||||
<input id="new-user-name" required name="newUserName">
|
||||
<label for="new-user-name">New User Name</label>
|
||||
<span class="error">New User Name is required</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn--primary">
|
||||
<span class="btn-ripple"></span>
|
||||
<span class="btn__content">Add User</span>
|
||||
</button>
|
||||
</div>
|
||||
</v-table-row>
|
||||
<v-table-footer>
|
||||
Dies ist der Footer.
|
||||
</v-table-footer>
|
||||
</v-table>
|
||||
|
||||
|
||||
<v-table>
|
||||
<v-table-header>
|
||||
<h2>User: engineertrooper</h2>
|
||||
</v-table-header>
|
||||
<v-table-row>
|
||||
<div class="icon-cont">
|
||||
<div class="icon icon-arrow-back"></div>
|
||||
</div>
|
||||
</v-table-row>
|
||||
<v-table-row>
|
||||
<div>
|
||||
<div class="description">Username:</div>
|
||||
<div class="input-group">
|
||||
<input id="new-user-name" required name="newUserName">
|
||||
<label for="new-user-name">EngineerTrooper</label>
|
||||
<span class="error">User Name is required</span>
|
||||
</div>
|
||||
<div class="description">Author Name:</div>
|
||||
<div class="input-group">
|
||||
<input id="new-author-name" required name="newAuthorName">
|
||||
<label for="new-author-name">Dominic Seela</label>
|
||||
<span class="error">Author Name is required</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="description">E-Mail:</div>
|
||||
<div class="input-group">
|
||||
<input id="new-email-address" required name="newEMailAddress">
|
||||
<label for="new-email-address">kontakt@engineertrooper.com</label>
|
||||
<span class="error">E-Mail Address is required</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="description">New Password:</div>
|
||||
<div class="input-group">
|
||||
<input id="new-password" required name="newPassword">
|
||||
<label for="new-password"></label>
|
||||
<span class="error">New Password is required</span>
|
||||
</div>
|
||||
<div class="description">New Password repeat:</div>
|
||||
<div class="input-group">
|
||||
<input id="new-password-repeat" required name="newPasswordRepeat">
|
||||
<label for="new-password-repeat"></label>
|
||||
<span class="error">New Password Repeat is required</span>
|
||||
</div>
|
||||
</div>
|
||||
</v-table-row>
|
||||
<v-table-row class="btn-line">
|
||||
<div>
|
||||
<button class="btn btn--valid">
|
||||
<span class="btn-ripple"></span>
|
||||
<span class="btn__content">Save</span>
|
||||
</button>
|
||||
<button class="btn btn--primary">
|
||||
<span class="btn-ripple"></span>
|
||||
<span class="btn__content">Reset</span>
|
||||
</button>
|
||||
<button class="btn btn--warn">
|
||||
<span class="btn-ripple"></span>
|
||||
<span class="btn__content">Delete User</span>
|
||||
</button>
|
||||
</div>
|
||||
</v-table-row>
|
||||
<v-table-footer>
|
||||
Dies ist der Footer.
|
||||
</v-table-footer>
|
||||
</v-table>
|
||||
|
||||
|
||||
<v-table>
|
||||
<v-table-header>
|
||||
<h2>Pages</h2>
|
||||
</v-table-header>
|
||||
<v-table-row>
|
||||
<h3>All Pages</h3>
|
||||
</v-table-row>
|
||||
<v-table-row class="grid12">
|
||||
<div class="col-1to6">Name</div>
|
||||
<div class="col-6to9">Edit, View, Delete</div>
|
||||
<div class="col-9to10">ID</div>
|
||||
<div class="col-11to13">Status</div>
|
||||
</v-table-row>
|
||||
<v-table-row class="grid12">
|
||||
<div class="col-1to6">Sonnenuntergang am Meer</div>
|
||||
<div class="col-6to9 inline">
|
||||
<div class="icon-cont">
|
||||
<div class="icon icon-edit"></div>
|
||||
</div>
|
||||
<div class="icon-cont">
|
||||
<div class="icon icon-visibility"></div>
|
||||
</div>
|
||||
<div class="icon-cont">
|
||||
<div class="icon icon-delete"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-9to10">
|
||||
4
|
||||
</div>
|
||||
<div class="col-11to13">
|
||||
<v-select required name="pageVisibility">
|
||||
<v-label empty="Page Visibility"></v-label>
|
||||
<v-options>
|
||||
<v-option value="visible">Visible</v-option>
|
||||
<v-option value="privat">Privat</v-option>
|
||||
</v-options>
|
||||
</v-select>
|
||||
</div>
|
||||
</v-table-row>
|
||||
<v-table-row class="grid12">
|
||||
<div class="col-1to6">Fernsehen zu Zweit mit Nebenwirkungen</div>
|
||||
<div class="col-6to9 inline">
|
||||
<div class="icon-cont">
|
||||
<div class="icon icon-edit"></div>
|
||||
</div>
|
||||
<div class="icon-cont">
|
||||
<div class="icon icon-visibility"></div>
|
||||
</div>
|
||||
<div class="icon-cont">
|
||||
<div class="icon icon-delete"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-9to10">
|
||||
7
|
||||
</div>
|
||||
<div class="col-11to13">
|
||||
<v-select required name="pageVisibility">
|
||||
<v-label empty="Page Visibility"></v-label>
|
||||
<v-options>
|
||||
<v-option value="visible">Visible</v-option>
|
||||
<v-option value="privat">Privat</v-option>
|
||||
</v-options>
|
||||
</v-select>
|
||||
</div>
|
||||
</v-table-row>
|
||||
<v-table-row class="grid12">
|
||||
<div class="col-1to6">Spiele 1 und 2 und 3</div>
|
||||
<div class="col-6to9 inline">
|
||||
<div class="icon-cont">
|
||||
<div class="icon icon-edit"></div>
|
||||
</div>
|
||||
<div class="icon-cont">
|
||||
<div class="icon icon-visibility"></div>
|
||||
</div>
|
||||
<div class="icon-cont">
|
||||
<div class="icon icon-delete"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-9to10">
|
||||
14
|
||||
</div>
|
||||
<div class="col-11to13">
|
||||
<v-select required name="pageVisibility">
|
||||
<v-label empty="Page Visibility"></v-label>
|
||||
<v-options>
|
||||
<v-option value="visible">Visible</v-option>
|
||||
<v-option value="privat">Privat</v-option>
|
||||
</v-options>
|
||||
</v-select>
|
||||
</div>
|
||||
</v-table-row>
|
||||
<v-table>
|
||||
<div>
|
||||
<h3>Add new Page</h3>
|
||||
<div class="input-group">
|
||||
<input id="new-user-name" required name="newUserName">
|
||||
<label for="new-user-name">New Page Name</label>
|
||||
<span class="error">New Page Name is required</span>
|
||||
</div>
|
||||
<button class="btn btn--primary">
|
||||
<span class="btn-ripple"></span>
|
||||
<span class="btn__content">Add Page</span>
|
||||
</button>
|
||||
</div>
|
||||
</v-table>
|
||||
<v-table-footer>
|
||||
Dies ist der Footer.
|
||||
</v-table-footer>
|
||||
</v-table>
|
||||
|
||||
|
||||
<v-table>
|
||||
<v-table-header>
|
||||
<h2>Page: Fernsehen zu Zweit mit Nebenwirkungen</h2>
|
||||
</v-table-header>
|
||||
<v-table-row>
|
||||
<div class="icon-cont">
|
||||
<div class="icon icon-arrow-back"></div>
|
||||
</div>
|
||||
</v-table-row>
|
||||
<v-table-row>
|
||||
<h3>Seitenname:</h3>
|
||||
</v-table-row>
|
||||
<v-table-row>
|
||||
<div class="input-group">
|
||||
<input id="new-page-name" required name="newPageName">
|
||||
<label for="new-role-name">New Page Name</label>
|
||||
<span class="error">New Page Name is required</span>
|
||||
</div>
|
||||
</v-table-row>
|
||||
<v-table-row>
|
||||
hier kommt das Editorfeld hin
|
||||
</v-table-row>
|
||||
<v-table-row>
|
||||
<h3>Page Information</h3>
|
||||
</v-table-row>
|
||||
<v-table-row class="grid12">
|
||||
<div class="col-1to4">Author</div>
|
||||
<div class="col-5to6">ID</div>
|
||||
<div class="col-6to11">SEO-URL</div>
|
||||
<div class="col-11to13">Status</div>
|
||||
</v-table-row>
|
||||
<v-table-row class="grid12">
|
||||
<div class="col-1to4">
|
||||
<v-select required name="pageVisibility">
|
||||
<v-label empty="Current Author"></v-label>
|
||||
<v-options>
|
||||
<v-option value="engineertrooper">engineertrooper (Dominic Seela)</v-option>
|
||||
<v-option value="versustunez">versustunez (Maurice Grönewald)</v-option>
|
||||
</v-options>
|
||||
</v-select>
|
||||
</div>
|
||||
<div class="col-5to6">
|
||||
7
|
||||
</div>
|
||||
<div class="col-6to11">
|
||||
https://beispiel.seo-url.de/blabla/23455234
|
||||
</div>
|
||||
<div class="col-11to13">
|
||||
<v-select required name="pageVisibility">
|
||||
<v-label empty="Page Visibility"></v-label>
|
||||
<v-options>
|
||||
<v-option value="visible">Visible</v-option>
|
||||
<v-option value="privat">Privat</v-option>
|
||||
</v-options>
|
||||
</v-select>
|
||||
</div>
|
||||
</v-table-row>
|
||||
<v-table-row class="btn-line">
|
||||
<div>
|
||||
<button class="btn btn--valid">
|
||||
<span class="btn-ripple"></span>
|
||||
<span class="btn__content">Save</span>
|
||||
</button>
|
||||
<button class="btn btn--primary">
|
||||
<span class="btn-ripple"></span>
|
||||
<span class="btn__content">Reset</span>
|
||||
</button>
|
||||
<button class="btn btn--warn">
|
||||
<span class="btn-ripple"></span>
|
||||
<span class="btn__content">Delete Page</span>
|
||||
</button>
|
||||
</div>
|
||||
</v-table-row>
|
||||
<v-table-footer>
|
||||
Dies ist der Footer
|
||||
</v-table-footer>
|
||||
</v-table>
|
||||
</div>
|
||||
</main>
|
||||
Loading…
Reference in a new issue