Responsive plugin administration page

diff --git a/tpl/default/css/shaarli.css b/tpl/default/css/shaarli.css
index f57c0bb03fede8f8ec06577757db127982eddd5d..0719ccf7190b0dcb0796ea4f2bdc02a332d85aff 100644 (file)
--- a/tpl/default/css/shaarli.css
+++ b/tpl/default/css/shaarli.css
@@ -948,4 +948,21 @@ pre {
  */
 .tools-item {
     margin: 10px 0;
+}
+
+/**
+ * PLUGIN ADMIN
+ */
+#pluginform .mobile-row {
+    font-size: 0.9em;
+}
+
+@media screen and (max-width: 64em) {
+    #pluginform .main-row, #pluginform .main-row td {
+        border-bottom-style: none;
+    }
+
+    #pluginform .mobile-row, #pluginform .mobile-row td {
+        border-top-style: none;
+    }
 }
\ No newline at end of file

diff --git a/tpl/default/pluginsadmin.html b/tpl/default/pluginsadmin.html
index 189c103b62c9fcc7ff16f21f2c6c6a357e9c112f..ec0728bd987fa0ba6da85cd198ff8b82d144e9b9 100644 (file)
--- a/tpl/default/pluginsadmin.html
+++ b/tpl/default/pluginsadmin.html
@@ -31,35 +31,48 @@
           {else}
           <table id="plugin_table">
             <thead>
-            <tr>
-              <th class="center">{'Disable'|t}</th>
-              <th class="center">{'Order'|t}</th>
-              <th>{'Name'|t}</th>
-              <th>{'Description'|t}</th>
-            </tr>
+              <tr>
+                <th class="center">{'Disable'|t}</th>
+                <th>{'Name'|t}</th>
+                <th><div class="pure-u-0 pure-u-lg-visible">{'Description'|t}</div></th>
+                <th class="center">{'Order'|t}</th>
+              </tr>
             </thead>
             <tbody>
-            {loop="$enabledPlugins"}
-            <tr data-line="{$key}" data-order="{$counter}">
-              <td class="center"><input type="checkbox" name="{$key}" id="{$key}" checked="checked"></td>
-              <td class="center">
-                {if="count($enabledPlugins)>1"}
-                  <a href="#" class="order"
-                     onclick="return orderUp(this.parentNode.parentNode.getAttribute('data-order'));">
-                    ▲
-                  </a>
-                  <a href="#" class="order"
-                     onclick="return orderDown(this.parentNode.parentNode.getAttribute('data-order'));">
-                    ▼
-                  </a>
-                {/if}
-                <input type="hidden" name="order_{$key}" value="{$counter}">
-              </td>
-              <td class="center"><label for="{$key}">{function="str_replace('_', ' ', $key)"}</label></td>
-              <td><label for="{$key}">{$value.description}</label></td>
-            </tr>
-            {/loop}
+              {loop="$enabledPlugins"}
+                <tr data-line="{$key}" data-order="{$counter}" class="main-row">
+                  <td class="center"><input type="checkbox" name="{$key}" id="{$key}" checked="checked"></td>
+                  <td class="center">
+                    <label for="{$key}"><strong>{function="str_replace('_', ' ', $key)"}</strong></label>
+                  </td>
+                  <td><div class="pure-u-0 pure-u-lg-visible"><label for="{$key}">{$value.description}</label></div></td>
+                  <td class="center">
+                    {if="count($enabledPlugins)>1"}
+                    <a href="#" class="order"
+                       onclick="return orderUp(this.parentNode.parentNode.getAttribute('data-order'));">
+                      ▲
+                    </a>
+                    <a href="#" class="order"
+                       onclick="return orderDown(this.parentNode.parentNode.getAttribute('data-order'));">
+                      ▼
+                    </a>
+                    {/if}
+                    <input type="hidden" name="order_{$key}" value="{$counter}">
+                  </td>
+                </tr>
+                <tr class="pure-u-lg-0 mobile-row">
+                  <td colspan="4"><label for="{$key}">{$value.description}</label></td>
+                </tr>
+              {/loop}
             </tbody>
+            <tfoot>
+              <tr>
+                <th class="center">{'Disable'|t}</th>
+                <th>{'Name'|t}</th>
+                <th><div class="pure-u-0 pure-u-lg-visible">{'Description'|t}</div></th>
+                <th class="center">{'Order'|t}</th>
+              </tr>
+            </tfoot>
           </table>
           {/if}
         </div>
@@ -73,18 +86,36 @@
           <p>{'No plugin disabled.'|t}</p>
           {else}
           <table>
-            <tr>
-              <th class="center">{'Enable'|t}</th>
-              <th>{'Name'|t}</th>
-              <th>{'Description'|t}</th>
-            </tr>
-            {loop="$disabledPlugins"}
-            <tr>
-              <td class="center"><input type="checkbox" name="{$key}" id="{$key}"></td>
-              <td class="center"><label for="{$key}">{function="str_replace('_', ' ', $key)"}</label></td>
-              <td><label for="{$key}">{$value.description}</label></td>
-            </tr>
-            {/loop}
+            <thead>
+              <tr>
+                <th class="center">{'Enable'|t}</th>
+                <th>{'Name'|t}</th>
+                <th><div class="pure-u-0 pure-u-lg-visible">{'Description'|t}</div></th>
+              </tr>
+            </thead>
+            <tbody>
+              {loop="$disabledPlugins"}
+                <tr class="main-row">
+                  <td class="center"><input type="checkbox" name="{$key}" id="{$key}"></td>
+                  <td class="center">
+                    <label for="{$key}"><strong>{function="str_replace('_', ' ', $key)"}</strong></label>
+                  </td>
+                  <td><div class="pure-u-0 pure-u-lg-visible">
+                    <label for="{$key}">{$value.description}</label>
+                  </div></td>
+                </tr>
+                <tr class="pure-u-lg-0 mobile-row">
+                  <td colspan="3"><label for="{$key}">{$value.description}</label></td>
+                </tr>
+              {/loop}
+            </tbody>
+            <tfoot>
+              <tr>
+                <th class="center">{'Enable'|t}</th>
+                <th>{'Name'|t}</th>
+                <th><div class="pure-u-0 pure-u-lg-visible">{'Description'|t}</div></th>
+              </tr>
+            </tfoot>
           </table>
           {/if}
         </div>
@@ -118,6 +149,9 @@
                     <div class="float_label">
                       <label for="{$key}">
                         <code>{$key}</code>
+                        {if="isset($value.desc)"}
+                          {$value.desc}
+                        {/if}
                       </label>
                     </div>
                     <div class="float_input">