VENOM-2: changed code to V-Utils via VTepl -> result: minified code, added classes and flexbox, fixed data display at v-table

tpl/admin/jsTemplates/pagesList.tpl

@@ -2,16 +2,16 @@
     <header>
         <h2>Pages</h2>
     </header>
-    <div>
+        <div class="add-new">
             <h3>Add new Page</h3>
             {include(includes/input;label=New Page Name;name=newPageName;error=New Page Name is required;type=text)}
             {include(includes/btn;type=primary;content=Add)}
         </div>
-    <div>
+        <div class="overview">
             <h3>All Pages</h3>
             {foreach(pages as page,key)}
             <div data-link="/pages" data-id="${page.id}">
-            <span class="icon-text">
+            <span>
                 {include(includes/svg;icon=$page.icon)}
             </span>
                 <span>${page.name}</span>

tpl/admin/jsTemplates/roleEdit.tpl

@@ -7,50 +7,53 @@
             {include(includes/svg;class=back-arrow;icon=vt-arrow-back)}
         </span>
     </div>
-    <div class="block">
+    <div>
         <h3>Role Status</h3>
         {include(includes/switch;id=${switch.id};name=permissionEditMetaData;desc=If enabled role is active.)}
     </div>
-    <div class="block">
+    <div>
         <h3>Role Name</h3>
-        <v-input
+        {include(includes/input;class=input-group;label=Change Name;name=roleName;error=Role Name is required;default=Admin)}
-                class="input-group"
-                data-label="Change Name"
-                required
-                name="roleName"
-                data-error="Role Name is required"></v-input>
     </div>
-    <v-table>
+    <v-table class="privileges">
         <h3>Privileges</h3>
-        <v-table-row class="role-switches">
+        <v-table-body>
-            <div class="modules">
+            <v-table-row>
-                <h4>Module</h4>
+                <v-cell class="name">Module</v-cell>
-                <div>Meta-Data</div>
+                <v-cell class="name">Edit</v-cell>
-                <div>Pages</div>
+                <v-cell class="name">View</v-cell>
-                <div>Roles</div>
-                <div>SEO-URL</div>
-                <div>Users</div>
-                <div>VENOM-Status</div>
-            </div>
-            <div>
-                <h4>Edit</h4>
-                {include(includes/switch;id=${switch.id};name=permissionEditMetaData)}
-                {include(includes/switch;id=${switch.id};name=permissionEditPages)}
-                {include(includes/switch;id=${switch.id};name=permissionEditRoles)}
-                {include(includes/switch;id=${switch.id};name=permissionEditSeoUrl)}
-                {include(includes/switch;id=${switch.id};name=permissionEditUsers)}
-                {include(includes/switch;id=${switch.id};name=permissionEditVenomStatus)}
-            </div>
-            <div>
-                <h4>View</h4>
-                {include(includes/switch;id=${switch.id};name=permissionViewMetaData)}
-                {include(includes/switch;id=${switch.id};name=permissionViewPages)}
-                {include(includes/switch;id=${switch.id};name=permissionViewRoles)}
-                {include(includes/switch;id=${switch.id};name=permissionViewSeoUrl)}
-                {include(includes/switch;id=${switch.id};name=permissionViewUsers)}
-                {include(includes/switch;id=${switch.id};name=permissionViewVenomStatus)}
-            </div>
             </v-table-row>
+            <v-table-row>
+                <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=permissionViewMetaData)}</v-cell>
+            </v-table-row>
+            <v-table-row>
+                <v-cell class="description">Pages</v-cell>
+                <v-cell>{include(includes/switch;id=${switch.id};name=permissionEditPages)}</v-cell>
+                <v-cell>{include(includes/switch;id=${switch.id};name=permissionViewPages)}</v-cell>
+            </v-table-row>
+            <v-table-row>
+                <v-cell class="description">Roles</v-cell>
+                <v-cell>{include(includes/switch;id=${switch.id};name=permissionEditRoles)}</v-cell>
+                <v-cell>{include(includes/switch;id=${switch.id};name=permissionViewRoles)}</v-cell>
+            </v-table-row>
+            <v-table-row>
+                <v-cell class="description">SEO-URL</v-cell>
+                <v-cell>{include(includes/switch;id=${switch.id};name=permissionEditSeoUrl)}</v-cell>
+                <v-cell>{include(includes/switch;id=${switch.id};name=permissionViewSeoUrl)}</v-cell>
+            </v-table-row>
+            <v-table-row>
+                <v-cell class="description">Users</v-cell>
+                <v-cell>{include(includes/switch;id=${switch.id};name=permissionEditUsers)}</v-cell>
+                <v-cell>{include(includes/switch;id=${switch.id};name=permissionViewUsers)}</v-cell>
+            </v-table-row>
+            <v-table-row>
+                <v-cell class="description">VENOM-Status</v-cell>
+                <v-cell>{include(includes/switch;id=${switch.id};name=permissionEditVenomStatus)}</v-cell>
+                <v-cell>{include(includes/switch;id=${switch.id};name=permissionViewVenomStatus)}</v-cell>
+            </v-table-row>
+        </v-table-body>
     </v-table>
     <div class="btn-line">
         <div>

tpl/admin/jsTemplates/rolesList.tpl

@@ -3,18 +3,18 @@
         <h2>Roles</h2>
     </header>
     <div class="flexbox">
-        <div>
+        <div class="overview">
             <h3>Overview</h3>
             {foreach(roles as role,key)}
             <div data-link="/roles" data-id="${role.id}">
-                    <span class="icon-text">
+                    <span>
                         {include(includes/svg;icon=$role.icon)}
                     </span>
                 <span>${role.name}</span>
             </div>
             {/for}
         </div>
-        <div>
+        <div class="add-new">
             <h3>Add new Role</h3>
             {include(includes/input;label=New Role Name;name=newRoleName;error=New Role Name is required;type=text)}
             {include(includes/btn;type=primary;content=Add)}

tpl/admin/jsTemplates/userEdit.tpl

@@ -2,95 +2,72 @@
     <header>
         <h2>User: engineertrooper</h2>
     </header>
-<div>
+    <div>
     <span data-link="/users" class="icon-text">
         {include(includes/svg;class=back-arrow;icon=vt-arrow-back)}
     </span>
-</div>
+    </div>
-<div>
+    <h3>User Data</h3>
-    <v-input
+    <div>
-            class="input-group"
+        {include(includes/input;class=input-group;label=Username;name=newUserName;error=New User Name is required;default=EngineerTrooper)}
-            data-label="Username"
+    </div>
-            required
+    <div>
-            name="newUserName"
+        {include(includes/input;class=input-group;label=Author Name;name=newAuthorName;error=New Author Name is required;default=Dominic Seela)}
-            data-error="New User Name is required">EngineerTrooper
+    </div>
-    </v-input>
+    <div>
-</div>
+        {include(includes/input;class=input-group;label=E-Mail;name=newEMailAddress;error=E-Mail Address is required;default=kontakt@engineertrooper.com)}
-<div>
+    </div>
-    <v-input
+    <div>
-            class="input-group"
+        {include(includes/input;class=input-group;label=Password;name=newPassword;type=password;error=Password is required)}
-            data-label="Author Name"
+    </div>
-            required
+    <div>
-            name="newAuthorName"
+        {include(includes/input;class=input-group;label=Password (Repeat);name=newPasswordRepeat;type=password;error=Password (Repeat) is required)}
-            data-error="Author Name is required">Dominic Seela
+    </div>
-    </v-input>
+    <v-table class="privileges">
-</div>
-<div>
-    <v-input
-            class="input-group"
-            data-label="E-Mail"
-            required
-            name="newEMailAddress"
-            data-error="E-Mail Address is required">kontakt@engineertrooper.com
-    </v-input>
-</div>
-<div>
-    <v-input
-            class="input-group"
-            data-label="Password"
-            required
-            name="newPassword"
-            type="password"
-            data-error="Password is required">
-    </v-input>
-</div>
-<div>
-    <v-input
-            class="input-group"
-            data-label="Password (Repeat)"
-            required
-            name="newPasswordRepeat"
-            type="password"
-            data-error="Password is required">
-    </v-input>
-</div>
-<v-table>
         <h3>Privileges</h3>
-    <v-table-row class="role-switches">
+        <v-table-body>
-        <div class="modules">
+            <v-table-row>
-            <h4>Module</h4>
+                <v-cell class="name">Module</v-cell>
-            <div>Meta-Data</div>
+                <v-cell class="name">Edit</v-cell>
-            <div>Pages</div>
+                <v-cell class="name">View</v-cell>
-            <div>Roles</div>
-            <div>SEO-URL</div>
-            <div>Users</div>
-            <div>VENOM-Status</div>
-        </div>
-        <div>
-            <h4>Edit</h4>
-            {include(includes/switch;id=${switch.id};name=permissionEditMetaData)}
-            {include(includes/switch;id=${switch.id};name=permissionEditPages)}
-            {include(includes/switch;id=${switch.id};name=permissionEditRoles)}
-            {include(includes/switch;id=${switch.id};name=permissionEditSeoUrl)}
-            {include(includes/switch;id=${switch.id};name=permissionEditUsers)}
-            {include(includes/switch;id=${switch.id};name=permissionEditVenomStatus)}
-        </div>
-        <div>
-            <h4>View</h4>
-            {include(includes/switch;id=${switch.id};name=permissionViewMetaData)}
-            {include(includes/switch;id=${switch.id};name=permissionViewPages)}
-            {include(includes/switch;id=${switch.id};name=permissionViewRoles)}
-            {include(includes/switch;id=${switch.id};name=permissionViewSeoUrl)}
-            {include(includes/switch;id=${switch.id};name=permissionViewUsers)}
-            {include(includes/switch;id=${switch.id};name=permissionViewVenomStatus)}
-        </div>
             </v-table-row>
-</v-table>
+            <v-table-row>
-<div class="btn-line">
+                <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=permissionViewMetaData)}</v-cell>
+            </v-table-row>
+            <v-table-row>
+                <v-cell class="description">Pages</v-cell>
+                <v-cell>{include(includes/switch;id=${switch.id};name=permissionEditPages)}</v-cell>
+                <v-cell>{include(includes/switch;id=${switch.id};name=permissionViewPages)}</v-cell>
+            </v-table-row>
+            <v-table-row>
+                <v-cell class="description">Roles</v-cell>
+                <v-cell>{include(includes/switch;id=${switch.id};name=permissionEditRoles)}</v-cell>
+                <v-cell>{include(includes/switch;id=${switch.id};name=permissionViewRoles)}</v-cell>
+            </v-table-row>
+            <v-table-row>
+                <v-cell class="description">SEO-URL</v-cell>
+                <v-cell>{include(includes/switch;id=${switch.id};name=permissionEditSeoUrl)}</v-cell>
+                <v-cell>{include(includes/switch;id=${switch.id};name=permissionViewSeoUrl)}</v-cell>
+            </v-table-row>
+            <v-table-row>
+                <v-cell class="description">Users</v-cell>
+                <v-cell>{include(includes/switch;id=${switch.id};name=permissionEditUsers)}</v-cell>
+                <v-cell>{include(includes/switch;id=${switch.id};name=permissionViewUsers)}</v-cell>
+            </v-table-row>
+            <v-table-row>
+                <v-cell class="description">VENOM-Status</v-cell>
+                <v-cell>{include(includes/switch;id=${switch.id};name=permissionEditVenomStatus)}</v-cell>
+                <v-cell>{include(includes/switch;id=${switch.id};name=permissionViewVenomStatus)}</v-cell>
+            </v-table-row>
+        </v-table-body>
+    </v-table>
+    <div class="btn-line">
         <div>
             {include(includes/btn;type=valid;content=Save)}
             {include(includes/btn;type=primary;content=Reset)}
-        {include(includes/btn;type=warn;content=Delete Role)}
+            {include(includes/btn;type=warn;content=Delete User)}
+        </div>
     </div>
 </div>
-</div>

tpl/admin/jsTemplates/usersList.tpl

@@ -5,7 +5,7 @@
 </div>
 <div class="roles-list">
     <div class="flexbox">
-        <div>
+        <div class="overview">
             <h3>Overview</h3>
             {foreach(users as user,key)}
             <div data-link="/users" data-id="${user.id}">
@@ -16,7 +16,7 @@
             </div>
             {/for}
         </div>
-        <div>
+        <div class="add-new">
             <h3>Add new User</h3>
             {include(includes/input;label=New User Name;name=newUserName;error=New User Name is required;type=text)}
             {include(includes/btn;type=primary;content=Add)}