Implemented collapsible rows in Plugins list to see details about the plugin itself

themes/grav/css-compiled/template.css

@@ -704,6 +704,15 @@ form .checkboxes {
 .form-list-wrapper .collection-actions {
   text-align: right; }
 
+table,
+tbody {
+  display: inline-block;
+  width: 100%; }
+
+.gpm-details {
+  width: 100%;
+  flex: auto; }
+
 td {
   border: 0;
   border-bottom: 1px solid #e1e1e1; }
@@ -711,12 +720,31 @@ td {
 tr {
   -webkit-transition: all 0.2s ease;
   -moz-transition: all 0.2s ease;
-  transition: all 0.2s ease; }
+  transition: all 0.2s ease;
+  display: flex;
+  flex-wrap: wrap; }
+  tr td {
+    display: block;
+    flex: 1; }
     tr td:first-child {
       padding-left: 3rem; }
-  tr td:last-child {
+    tr td.gpm-actions {
+      line-height: 1;
       text-align: right;
+      position: relative;
       padding-right: 3rem; }
+      tr td.gpm-actions .gpm-details-expand {
+        position: absolute;
+        top: 12px;
+        right: 12px; }
+    tr td.gpm-details {
+      margin: 0;
+      padding: 0;
+      background-color: #f7f7f7; }
+      tr td.gpm-details > .table-wrapper {
+        display: none; }
+      tr td.gpm-details tbody {
+        width: 100%; }
   tr:last-child td {
     border-bottom: 0; }
   tr:hover {

themes/grav/js/admin-all.js

@@ -79,6 +79,26 @@ $(function () {
         });
     });
 
+    // Plugins list details sliders
+    $('.gpm-name, .gpm-actions').on('click', function(e){
+        var target = $(e.target);
+
+        if (target.prop('tagName') == 'A' || target.parent('a').length) { return true; }
+
+        var wrapper = $(this).siblings('.gpm-details').find('.table-wrapper');
+        wrapper.slideToggle({
+            duration: 350,
+            complete: function(){
+                var isVisible = wrapper.is(':visible');
+                wrapper
+                    .closest('tr')
+                    .find('.gpm-details-expand i')
+                    .removeClass('fa-chevron-' + (isVisible ? 'down' : 'up'))
+                    .addClass('fa-chevron-' + (isVisible ? 'up' : 'down'));
+            }
+        });
+    });
+
     // Update plugins/themes
     $('[data-maintenance-update]').on('click', function(e) {
 

themes/grav/scss/template/_tables.scss

@@ -1,5 +1,12 @@
-table {
+table,
+tbody {
+    display: inline-block;
+    width: 100%;
+}
 
+.gpm-details {
+    width: 100%;
+    flex: auto;
 }
 
 td {
@@ -10,15 +17,42 @@ td {
 tr {
     @include transition(all 0.2s ease);
 
+    display: flex;
+    flex-wrap: wrap;
+
     td {
+        display: block;
+        flex: 1;
 
         &:first-child {
             padding-left: $padding-default;
         }
 
-        &:last-child {
+        &.gpm-actions {
+            line-height: 1;
             text-align: right;
+            position: relative;
             padding-right: $padding-default;
+            
+            .gpm-details-expand {
+                position: absolute;
+                top: 12px;
+                right: 12px;
+            }
+        }
+
+        &.gpm-details {
+            margin: 0;
+            padding: 0;
+            background-color: #f7f7f7;
+
+            > .table-wrapper {
+                display: none;
+            }
+
+            tbody {
+                width: 100%;
+            }
         }
     }
 
@@ -31,3 +65,4 @@ tr {
         background: lighten($content-bg,2%);
     }
 }
+

themes/grav/templates/partials/plugin-data.html.twig

@@ -0,0 +1,54 @@
+<table>
+    {% if plugin.author %}
+    <tr>
+        <td>Author:</td>
+        <td>
+            {% if plugin.author.url %}
+                <a href="{{ plugin.author.url }}">{{ plugin.author.name }}</a>
+            {% else %}
+                {{ plugin.author.name }}
+            {% endif %}
+            {% if plugin.author.email %}
+                - <a href="mailto:{{ plugin.author.email }}">{{ plugin.author.email }}</a>
+            {% endif %}
+        </td>
+    </tr>
+    {% endif %}
+    {% if plugin.homepage %}
+        <tr>
+            <td>Homepage:</td>
+            <td><a href="{{ plugin.homepage }}">{{ plugin.homepage }}</a></td>
+        </tr>
+    {% endif %}
+    {% if plugin.demo %}
+        <tr>
+            <td>Demo:</td>
+            <td><a href="{{ plugin.demo }}">{{ plugin.demo }}</a></td>
+        </tr>
+    {% endif %}
+    {% if plugin.bugs %}
+        <tr>
+            <td>Bug Tracker:</td>
+            <td><a href="{{ plugin.bugs }}">{{ plugin.bugs }}</a></td>
+        </tr>
+    {% endif %}
+    {% if plugin.keywords %}
+        <tr>
+            <td>Keywords:</td>
+            <td>{{ plugin.keywords|join(', ') }}</td>
+        </tr>
+    {% endif %}
+    {% if plugin.license %}
+        <tr>
+            <td>License:</td>
+            <td>{{ plugin.license }}</td>
+        </tr>
+    {% endif %}
+
+    {% if plugin.description %}
+        <tr>
+            <td>Description:</td>
+            <td>{{ plugin.description_html }}</td>
+        </tr>
+    {% endif %}
+</table>

themes/grav/templates/partials/plugins-details.html.twig

@@ -26,60 +26,7 @@
 </h1>
 <div class="gpm-item-info">
     <i class="gpm-item-icon fa fa-fw fa-{{  plugin.icon }}"></i>
-    <table>
+    {% include 'partials/plugin-data.html.twig' with { plugin: plugin } %}
-         {% if plugin.author %}
-            <tr>
-                <td>Author:</td>
-                <td>
-                    {% if plugin.author.url %}
-                        <a href="{{ plugin.author.url }}">{{ plugin.author.name }}</a>
-                    {% else %}
-                        {{ plugin.author.name }}
-                    {% endif %}
-                    {% if plugin.author.email %}
-                         - <a href="mailto:{{ plugin.author.email }}">{{ plugin.author.email }}</a>
-                    {% endif %}
-                </td>
-            </tr>
-        {% endif %}
-        {% if plugin.homepage %}
-        <tr>
-            <td>Homepage:</td>
-            <td><a href="{{ plugin.homepage }}">{{ plugin.homepage }}</a></td>
-        </tr>
-        {% endif %}
-        {% if plugin.demo %}
-        <tr>
-            <td>Demo:</td>
-            <td><a href="{{ plugin.demo }}">{{ plugin.demo }}</a></td>
-        </tr>
-        {% endif %}
-        {% if plugin.bugs %}
-            <tr>
-                <td>Bug Tracker:</td>
-                <td><a href="{{ plugin.bugs }}">{{ plugin.bugs }}</a></td>
-            </tr>
-        {% endif %}
-        {% if plugin.keywords %}
-            <tr>
-                <td>Keywords:</td>
-                <td>{{ plugin.keywords|join(', ') }}</td>
-            </tr>
-        {% endif %}
-        {% if plugin.license %}
-            <tr>
-                <td>License:</td>
-                <td>{{ plugin.license }}</td>
-            </tr>
-        {% endif %}
-
-        {% if plugin.description %}
-            <tr>
-                <td>Description:</td>
-                <td>{{ plugin.description_html }}</td>
-            </tr>
-        {% endif %}
-    </table>
 </div>
 
 {% if (installed) %}

themes/grav/templates/partials/plugins-list.html.twig

@@ -22,7 +22,6 @@
                 </span>
                 {% endif %}
                 <span class="gpm-version">v{{ plugin.version }}</span>
-
             </td>
             <td class="gpm-actions">
                 {% if (not installing and plugin.form.fields.enabled) %}
@@ -32,6 +31,12 @@
                 {% elseif (installing) %}
                     <a class="button" href="{{ base_url_relative }}/plugins/{{ slug }}/task:install"><i class="fa fa-plus"></i> Install</a>
                 {% endif %}
+                <span class="gpm-details-expand"><i class="fa fa-chevron-down"></i></span>
+            </td>
+            <td class="gpm-details">
+                <div class="table-wrapper">
+                    {% include 'partials/plugin-data.html.twig' with { plugin: plugin } %}
+                </div>
             </td>
         </tr>
     {% endfor %}