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

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>
+            </v-table-row>
-                <div>SEO-URL</div>
+            <v-table-row>
-                <div>Users</div>
+                <v-cell class="description">Meta-Data</v-cell>
-                <div>VENOM-Status</div>
+                <v-cell>{include(includes/switch;id=${switch.id};name=permissionEditMetaData)}</v-cell>
-            </div>
+                <v-cell>{include(includes/switch;id=${switch.id};name=permissionViewMetaData)}</v-cell>
-            <div>
+            </v-table-row>
-                <h4>Edit</h4>
+            <v-table-row>
-                {include(includes/switch;id=${switch.id};name=permissionEditMetaData)}
+                <v-cell class="description">Pages</v-cell>
-                {include(includes/switch;id=${switch.id};name=permissionEditPages)}
+                <v-cell>{include(includes/switch;id=${switch.id};name=permissionEditPages)}</v-cell>
-                {include(includes/switch;id=${switch.id};name=permissionEditRoles)}
+                <v-cell>{include(includes/switch;id=${switch.id};name=permissionViewPages)}</v-cell>
-                {include(includes/switch;id=${switch.id};name=permissionEditSeoUrl)}
+            </v-table-row>
-                {include(includes/switch;id=${switch.id};name=permissionEditUsers)}
+            <v-table-row>
-                {include(includes/switch;id=${switch.id};name=permissionEditVenomStatus)}
+                <v-cell class="description">Roles</v-cell>
-            </div>
+                <v-cell>{include(includes/switch;id=${switch.id};name=permissionEditRoles)}</v-cell>
-            <div>
+                <v-cell>{include(includes/switch;id=${switch.id};name=permissionViewRoles)}</v-cell>
-                <h4>View</h4>
+            </v-table-row>
-                {include(includes/switch;id=${switch.id};name=permissionViewMetaData)}
+            <v-table-row>
-                {include(includes/switch;id=${switch.id};name=permissionViewPages)}
+                <v-cell class="description">SEO-URL</v-cell>
-                {include(includes/switch;id=${switch.id};name=permissionViewRoles)}
+                <v-cell>{include(includes/switch;id=${switch.id};name=permissionEditSeoUrl)}</v-cell>
-                {include(includes/switch;id=${switch.id};name=permissionViewSeoUrl)}
+                <v-cell>{include(includes/switch;id=${switch.id};name=permissionViewSeoUrl)}</v-cell>
-                {include(includes/switch;id=${switch.id};name=permissionViewUsers)}
+            </v-table-row>
-                {include(includes/switch;id=${switch.id};name=permissionViewVenomStatus)}
+            <v-table-row>
-            </div>
+                <v-cell class="description">Users</v-cell>
-        </v-table-row>
+                <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

@@ -1,96 +1,73 @@
 <div class="users-edit">
     <header>
-         <h2>User: engineertrooper</h2>
+        <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>
-    <v-input
-            class="input-group"
-            data-label="Username"
-            required
-            name="newUserName"
-            data-error="New User Name is required">EngineerTrooper
-    </v-input>
-</div>
-<div>
-    <v-input
-            class="input-group"
-            data-label="Author Name"
-            required
-            name="newAuthorName"
-            data-error="Author Name is required">Dominic Seela
-    </v-input>
-</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">
-        <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>
-            {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>
-<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)}
     </div>
-</div>
+    <h3>User Data</h3>
+    <div>
+        {include(includes/input;class=input-group;label=Username;name=newUserName;error=New User Name is required;default=EngineerTrooper)}
+    </div>
+    <div>
+        {include(includes/input;class=input-group;label=Author Name;name=newAuthorName;error=New Author Name is required;default=Dominic Seela)}
+    </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>
+        {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>
+    <v-table class="privileges">
+        <h3>Privileges</h3>
+        <v-table-body>
+            <v-table-row>
+                <v-cell class="name">Module</v-cell>
+                <v-cell class="name">Edit</v-cell>
+                <v-cell class="name">View</v-cell>
+            </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>
+            {include(includes/btn;type=valid;content=Save)}
+            {include(includes/btn;type=primary;content=Reset)}
+            {include(includes/btn;type=warn;content=Delete User)}
+        </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)}