switched gadget-attributes and classes to page layout API

account.html

@@ -20,9 +20,9 @@
 
     <div id="account" data-role="page" data-theme="slapos-white">
       <div class="ui-content">
-        <div class="content_element"></div>
-        <div class="content_element">
-          <div class="erp5_gadget" data-gadget="actionMenu" data-gadget-id="account_actions">
+        <div class="span_1"></div>
+        <div class="span_1">
+          <div class="gadget" data-gadget-type="actionMenu" data-gadget-id="account_actions">
             <!-- action menu -->
           </div>
         </div>

css/themes.css

@@ -877,16 +877,9 @@ html head + body .ui-body-slapos-black.ui-focus{
     right: 0.25em;
   }
 }
-/* content grid */
-.popup_element {
-  padding-top: .75em;
-  padding-left: .75em;
-  padding-right: .75em;
-}
-.popup_element p {
-  margin-bottom: 0.15em;
-}
-.content_element {
+
+/* ============================= content grid ============================= */
+.span_1, .span_2 {
   display: inline-block;
   vertical-align: top;
   width: 45%;
@@ -895,27 +888,32 @@ html head + body .ui-body-slapos-black.ui-focus{
   /* ~ 98% for 2 col layout */
   padding-top: 2%;
 }
-.content_element_fullscreen {
+.span_2 {
   width: 96% /* 2% padding-left/right */
 }
 /* is this padding really necessary? */
-.content_element .ui-controlgroup-vertical,
-.content_element .ui-controlgroup-horizontal,
-.content_element form {
+.span_1 .ui-controlgroup-vertical,
+.span_2 .ui-controlgroup-vertical,
+.span_1 .ui-controlgroup-horizontal,
+.span_2 .ui-controlgroup-horizontal,
+.span_1 form,
+.span_2 form {
   margin-top: 1em;
   margin-bottom: 1em;
   vertical-align: middle;
 }
 @media (max-width: 40em) {
-  .content_element {
+  .span_1, .span_2 {
     width: 100%;
     padding: 0;
   }
 }
-.content_element .ui-input-search {
+.span_1 .ui-input-search,
+.span_2 .ui-input-search {
   width: 50%;
 }
-.content_element .ui-table-wrapper .ui-input-search {
+.span_1 .ui-table-wrapper .ui-input-search,
+.span_2 .ui-table-wrapper .ui-input-search{
   width: auto;
   margin: 0;
   box-shadow: none;
@@ -924,12 +922,14 @@ html head + body .ui-body-slapos-black.ui-focus{
   border-bottom-width: 1px;
 }
 @media (max-width: 45em) {
-  .content_element .ui-input-search {
+  .span_1 .ui-input-search,
+  .span_2 .ui-input-search {
     width: 100%;
   }
 }
 @media (min-width: 45em) {
-  .content_element .ui-input-search {
+  .span_1 .ui-input-search,
+  .span_2 .ui-input-search {
     width: 60%;
   }
 }

invoices.html

@@ -20,8 +20,8 @@
 
     <div id="invoices" data-role="page" data-theme="slapos-white">
       <div class="ui-content">
-        <div class="content_element content_element_fullscreen">
-          <table class="erp5_gadget" data-gadget="listbox" data-gadget-id="invoices_01">
+        <div class="span_2">
+          <table class="gadget" data-gadget-type="listbox" data-gadget-id="invoices_01">
             <!-- dynamic -->
           </table>
         </div>

js/erp5_loader.js

@@ -218,6 +218,7 @@
     * @param {boolean} update Update or create gadget
     * @returns {objects} fragment
     */
+   // TODO: parameters are not good, modify into something more generic!
     constructListbox: function (config, answer, fields, query, total, update) {
       var fragment, bar, wrap, arr, local_popup, global_popup, set, id;
 
@@ -2656,7 +2657,7 @@
 
     // fetch gadgets
     // WARNING: slow & IE8 compliant?
-    gadgets = active.querySelectorAll("[data-gadget]");
+    gadgets = active.querySelectorAll("[data-gadget-type]");
 
     // load gadgets
     for (i = 0; i < gadgets.length; i += 1) {
@@ -2664,7 +2665,7 @@
       parent = gadget.parentNode;
       gadget_id = gadget.getAttribute("data-gadget-id");
       method = "construct" + util.capFirstLetter(
-        gadget.getAttribute("data-gadget")
+        gadget.getAttribute("data-gadget-type")
       );
 
       // TODO: merge with updatePageElement
@@ -2733,7 +2734,7 @@
           active.getElementsByTagName("div")[0].appendChild(
             util.generateErrorMessage(
               "Error: Could not generate gadget " +
-                gadget.getAttribute("data-gadget") + ".", ""
+                gadget.getAttribute("data-gadget-id") + ".", ""
             )
           );
         });

networks.html

@@ -20,15 +20,15 @@
 
     <div id="networks" data-role="page" data-theme="slapos-white">
       <div class="ui-content">
-        <div class="content_element"></div>
-        <div class="content_element">
-          <div class="erp5_gadget" data-gadget="actionMenu" data-gadget-id="network_actions">
+        <div class="span_1"></div>
+        <div class="span_1">
+          <div class="gadget" data-gadget-type="actionMenu" data-gadget-id="network_actions">
             <!-- action menu -->
           </div>
         </div>
         <hr>
-        <div class="content_element content_element_fullscreen">
-          <table class="erp5_gadget" data-gadget="listbox" data-gadget-id="networks_01">
+        <div class="span_2">
+          <table class="gadget" data-gadget-type="listbox" data-gadget-id="networks_01">
             <!-- dynamic -->
           </table>
         </div>

servers.html

@@ -20,15 +20,15 @@
 
     <div id="servers" data-role="page" data-theme="slapos-white">
       <div class="ui-content">
-        <div class="content_element"></div>
-        <div class="content_element">
-          <div class="erp5_gadget" data-gadget="actionMenu" data-gadget-id="computer_actions">
+        <div class="span_1"></div>
+        <div class="span_1">
+          <div class="gadget" data-gadget-type="actionMenu" data-gadget-id="computer_actions">
             <!-- action menu -->
           </div>
         </div>
         <hr>
-        <div class="content_element content_element_fullscreen">
-          <table class="erp5_gadget" data-gadget="listbox" data-gadget-id="computer_01">
+        <div class="span_2">
+          <table class="gadget" data-gadget-type="listbox" data-gadget-id="computer_01">
             <!-- dynamic -->
           </table>
         </div>

services.html

@@ -20,15 +20,15 @@
 
     <div id="services" data-role="page" data-theme="slapos-white">
       <div class="ui-content">
-        <div class="content_element"></div>
-        <div class="content_element">
-          <div class="erp5_gadget" data-gadget="actionMenu" data-gadget-id="service_actions">
+        <div class="span_1"></div>
+        <div class="span_1">
+          <div class="gadget" data-gadget-type="actionMenu" data-gadget-id="service_actions">
             <!-- action menu -->
           </div>
         </div>
         <hr>
-        <div class="content_element content_element_fullscreen">
-          <table class="erp5_gadget" data-gadget="listbox" data-gadget-id="services_01">
+        <div class="span_2">
+          <table class="erp5_gadget" data-gadget-type="listbox" data-gadget-id="services_01">
             <!-- dynamic -->
           </table>
         </div>