started on new themes list

blueprints.yaml

@@ -1,7 +1,7 @@
 name: Administration Panel - Basic
 version: 1.0.0
 description: Adds an advanced administration panel to manage your site
-icon: check-square
+icon: empire
 author:
   name: Team Grav
   email: devs@getgrav.org

classes/admin.php

@@ -281,24 +281,6 @@ class Admin
         return array_shift($path) . ($path ? '[' . implode('][', $path) . ']' : '');
     }
 
-    /**
-     * Get all themes.
-     *
-     * @return array
-     */
-    public function themes()
-    {
-        if (!$this->localPackages) {
-            $this->localPackages = new LocalPackages();
-        }
-
-        return $this->localPackages['themes']->toArray();
-
-        /** @var Themes $themes */
-        /*$themes = $this->grav['themes'];
-        return $themes->all();*/
-    }
-
     /**
      * Get all routes.
      *
@@ -323,10 +305,22 @@ class Admin
         }
 
         return $this->localPackages['plugins'];
+    }
 
-        /** @var Plugins $plugins */
+    /**
-        /*$plugins = $this->grav['plugins'];
+     * Get all themes.
-        return $plugins->all();*/
+     *
+     * @return array
+     */
+    public function themes()
+    {
+
+
+        if (!$this->localPackages) {
+            $this->localPackages = new LocalPackages();
+        }
+
+        return $this->localPackages['themes'];
     }
 
     /**

themes/grav/css-compiled/template.css

@@ -991,6 +991,38 @@ tr {
   background-image: -webkit-linear-gradient(#349886, #67cbb9);
   background-image: linear-gradient(#349886, #67cbb9); }
 
+.no-flick, .card-item {
+  -webkit-transform: translate3d(0, 0, 0); }
+
+.card-row {
+  -webkit-box-pack: justify;
+  -moz-box-pack: justify;
+  box-pack: justify;
+  -webkit-justify-content: space-between;
+  -moz-justify-content: space-between;
+  -ms-justify-content: space-between;
+  -o-justify-content: space-between;
+  justify-content: space-between;
+  -ms-flex-pack: justify; }
+
+.card-item {
+  overflow: hidden;
+  padding: 1rem;
+  margin: 0;
+  position: relative;
+  width: 31%;
+  background: #fff;
+  margin-bottom: 2rem; }
+  @media only all and (min-width: 48em) and (max-width: 59.938em) {
+    .card-item {
+      width: 48%; } }
+  @media only all and (max-width: 47.938em) {
+    .card-item {
+      width: 100%; } }
+  .card-item h4 {
+    font-size: 1.2rem;
+    line-height: 1.2; }
+
 #footer {
   text-align: center;
   padding: 3rem 0 1rem; }
@@ -1748,5 +1780,7 @@ body.remodal_active .remodal {
       width: 25%; }
   .gpm .plugin-info tr:hover {
     background: inherit; }
+.gpm .themes {
+  padding: 3rem; }
 
 /*# sourceMappingURL=template.css.map */

themes/grav/scss/template/_admin.scss

@@ -365,6 +365,35 @@ $update-height: 3rem;
     }
 }
 
+.no-flick{-webkit-transform:translate3d(0,0,0);}
+
+.card-row {
+    @include justify-content(space-between);
+}
+
+.card-item {
+    @extend .no-flick;
+    overflow: hidden;
+    padding: 1rem;
+    margin: 0;
+    position: relative;
+    width: 31%;
+    @include breakpoint(tablet-range) {
+        width: 48%;
+    }
+    @include breakpoint(mobile-only) {
+        width: 100%;
+    }
+
+    background: $white;
+    margin-bottom: 2rem;
+
+    h4 {
+        font-size: 1.2rem;
+        line-height: 1.2;
+    }
+}
+
 #footer {
     text-align: center;
     padding: 3rem 0 1rem;

themes/grav/scss/template/_gpm.scss

@@ -55,4 +55,8 @@
             background: inherit;
         }
     }
+
+    .themes {
+        padding: $padding-default;
+    }
 }

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

@@ -13,7 +13,6 @@
 <table>
     {% for slug, package in admin.plugins %}
         {% set plugin = package.toArray() %}
-        {% set data   = package.getData() %}
 
         <tr>
             <td class="gpm-name">

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

@@ -0,0 +1,31 @@
+<div class="grav-update themes">
+    <p>
+        <i class="fa fa-bullhorn"></i>
+        One or more of your themes has an <strong>update available</strong>.
+        <button class="button button-small secondary">Update All Themes</button>
+    </p>
+</div>
+
+<h1>
+    Installed Themes
+</h1>
+
+<div class="themes card-row grid fixed-blocks pure-g">
+    {% for slug, package in admin.themes %}
+        {% set theme = package.toArray() %}
+        <div class="theme card-item pure-u-1-3">
+            <div class="gpm-screenshot">
+                <img src="{{ theme.thumbnail }}" />
+            </div>
+            <div class="gpm-name">
+                <i class="fa fa-fw fa-{{ theme.icon }}"></i>
+                <a href="{{ base_url_relative }}/themes/{{ slug|url_encode }}">{{ theme.name }}</a> <span class="gpm-version">v{{ theme.version }}</span>
+            </div>
+            <div class="gpm-actions">
+                <a class="{{ theme.get('enabled') ? 'enabled' : 'disabled' }}" href="{{ base_url_relative }}/themes/{{ slug }}/task:{{ theme.get('enabled') ? 'disable' : 'enable' }}">
+                    <i class="fa fa-fw fa-toggle-{{ theme.get('enabled') ? 'on' : 'off' }}"></i>
+                </a>
+            </div>
+        </div>
+    {% endfor %}
+</div>

themes/grav/templates/themes.html.twig

@@ -1,62 +1,37 @@
 {% extends 'partials/base.html.twig' %}
 
+{% if admin.route %}
+    {% set package = admin.themes[admin.route] %}
+    {% set theme     = package.toArray() %}
+{% endif %}
+
+{% block titlebar %}
+    {% if not admin.route %}
+        <div class="button-bar">
+            <button class="button" type="submit" name="task" value="add"><i class="fa fa-plus"></i> Add</button>
+        </div>
+        <h1><i class="fa fa-fw fa-plug"></i> Themes</h1>
+    {% else %}
+        <div class="button-bar">
+            <button class="button" type="submit" name="task" value="add"><i class="fa fa-check"></i> Save</button>
+        </div>
+        <h1><i class="fa fa-fw fa-plug"></i> Theme: {{ theme.name|e }}</h1>
+    {% endif %}
+{% endblock %}
+
 {% block content %}
 
-    <div class="admin-block">
+    <div class="gpm gpm-themes">
-        {% if not admin.route %}
-        <h1>
-            Themes
-        </h1>
 
         {% include 'partials/messages.html.twig' %}
 
-        <form method="post">
+        {% if not admin.route %}
-            <input type="hidden" name="task" value="set_theme"/>
+            {%  include 'partials/themes-list.html.twig' %}
-            <table class="themes">
-                {% for theme in admin.themes %}
-                {% set blueprints = theme.blueprints() %}
-                <tr>
-                    <td>
-                        <h3><a href="{{ base_url }}/themes/{{ blueprints.name }}">{{ blueprints.get('name') }}</a></h3>
-                        {% if blueprints.get('thumbnail') %}
-                        <img src="{{ blueprints.get('thumbnail') }}" class="thumbnail" />
-                        {% endif %}
-                    </td>
-                    <td class="details">
-                        <ul>
-                            <li><span>Author:</span> {{ blueprints.get('author') }}</li>
-                            <li><span>URL:</span> {{ blueprints.get('url') }}</li>
-                            <li><span>Email:</span> {{ blueprints.get('email') }}</li>
-                            <li><a href="#" class="tooltip" data-asTooltip-position="s" title="{{ blueprints.get('description')|e }}">Description</a></li>
-                        </ul>
-                    </td>
-                    <td>
-                        {% if config.get('system.pages.theme') == blueprints.name %}
-                        <button disabled="disabled">Default</button>
-                        {% else %}
-                        <button name="theme" value="{{ blueprints.name }}">Default</button>
-                        {% endif %}
-                    </td>
-                </tr>
-                {% endfor %}
-            </table>
-        </form>
         {% else %}
-            {% set theme = admin.themes[admin.route] %}
+            {% include 'partials/themes-details.html.twig' %}
-            {% set blueprints = theme.blueprints() %}
-
-            <h1>
-                {{ blueprints.get('name')|e }}
-                <small>{{ blueprints.get('version') ? 'v' ~ blueprints.get('version')|e }}</small>
-            </h1>
-
-            {% include 'partials/messages.html.twig' %}
-
-            <p>{{ blueprints.get('description') }}</p>
-
-            {% include 'partials/blueprints.html.twig' with { data: theme } %}
         {% endif %}
-
     </div>
 {% endblock %}
 
+
+