VENOM-10: added textarea with style and style correction on v-selects

public/theme/admin/css/admin-panel.css

@@ -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}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}
+: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:#3949ab;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;min-width:200px}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 textarea{background:rgba(27,27,27,.5);color:#fff;margin:15px 0 0 0;font-family:sans-serif;font-size:1.1rem}.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}

tpl/admin/admin-panel.php

@@ -261,7 +261,7 @@
                 <div>
                     <div class="description">E-Mail:</div>
                     <div class="input-group">
-                        <input id="new-email-address" required name="newEMailAddress">
+                        <input id="new-email-address" required name="newEMailAddress" value="kontakt@engineertrooper.com">
                         <label for="new-email-address">kontakt@engineertrooper.com</label>
                         <span class="error">E-Mail Address is required</span>
                     </div>
@@ -303,6 +303,72 @@
         </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" value="engineertrooper">
+                        <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" value="Dominic Seela">
+                        <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" value="kontakt@engineertrooper.com">
+                        <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>
@@ -434,7 +500,15 @@
                 </div>
             </v-table-row>
             <v-table-row>
-                hier kommt das Editorfeld hin
+                <textarea name="pageTextArea" rows="25">!</textarea>
+            </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>
+                </div>
             </v-table-row>
             <v-table-row>
                 <h3>Page Information</h3>
@@ -491,5 +565,18 @@
                 Dies ist der Footer
             </v-table-footer>
         </v-table>
+
+
+        <v-table>
+            <v-table-header>
+                <h2>Next header line</h2>
+            </v-table-header>
+            <v-table-row>
+                Hier steht Content
+            </v-table-row>
+            <v-table-footer>
+                Dies ist der Footer
+            </v-table-footer>
+        </v-table>
     </div>
 </main>