Extension Manager: some first attempts at styling

I'm not really happy yet, but it will be improved in coming commits

4 files changed, 120 insertions, 451 deletions

diff --git a/lib/plugins/extension/GuiExtension.php b/lib/plugins/extension/GuiExtension.php
index d26c389ab..a8c22dcbc 100644
--- a/lib/plugins/extension/GuiExtension.php
+++ b/lib/plugins/extension/GuiExtension.php
@@ -23,13 +23,44 @@ class GuiExtension extends Gui
         $classes = $this->getClasses();
 
         $html = "<section class=\"$classes\">";
+
+        $html .= '<div class="screenshot">';
         $html .= $this->thumbnail();
+        $html .= '</div>';
+
+        $html.= '<h2>';
+        $html .= '<bdi>' . hsc($this->extension->getDisplayName()) . '</bdi>';
+        if ($this->extension->isBundled()) {
+            $html .= ' <span class="version">' . hsc('<' . $this->getLang('status_bundled') . '>') . '</span>';
+        } elseif ($this->extension->getInstalledVersion()) {
+            $html .= ' <span class="version">' . hsc($this->extension->getInstalledVersion()) . '</span>';
+        }
         $html .= $this->popularity();
-        $html .= $this->info();
+        $html .= '</h2>';
+
+        $html .= '<div class="main">';
+        $html .= '<h3>' . $this->author() . '</h3>';
+        $html .= '<p>' . hsc($this->extension->getDescription()) . '</p>';
+        $html .= '</div>';
+
+
+
+
+        $html .= '<div class="details">';
         $html .= $this->notices();
         $html .= $this->mainLinks();
         $html .= $this->details();
+        $html .= '</div>';
+
+        // show the available version if there is one
+        if ($this->extension->getDownloadURL() && $this->extension->getLastUpdate()) {
+            $html .= ' <div class="version">' . $this->getLang('available_version') . ' ' .
+                hsc($this->extension->getLastUpdate()) . '</div>';
+        }
+
+        $html .= '<div class="actions">';
         $html .= $this->actions();
+        $html .= '</div>';
 
 
         $html .= '</section>';
@@ -72,11 +103,10 @@ class GuiExtension extends Gui
             $img['src'] = DOKU_BASE . 'lib/plugins/extension/images/plugin.png';
         }
 
-        $html = '<div class="screenshot">';
+        $html = '';
         if ($link) $html .= '<a ' . buildAttributes($link) . '>';
         $html .= '<img ' . buildAttributes($img) . ' />';
         if ($link) $html .= '</a>';
-        $html .= '</div>';
 
         return $html;
 
@@ -89,18 +119,8 @@ class GuiExtension extends Gui
      */
     protected function info()
     {
-        $html = '<h2>';
-        $html .= '<bdi>' . hsc($this->extension->getDisplayName()) . '</bdi>';
-        if($this->extension->isBundled()) {
-            $html .= ' <span class="version">' . hsc('<'.$this->getLang('status_bundled').'>') . '</span>';
-        } elseif($this->extension->getInstalledVersion()) {
-            $html .= ' <span class="version">' . hsc($this->extension->getInstalledVersion()) . '</span>';
-        }
-        $html .= '</h2>';
 
-        $html .= $this->author();
 
-        $html .= '<p>' . hsc($this->extension->getDescription()) . '</p>';
 
         return $html;
     }
@@ -153,7 +173,6 @@ class GuiExtension extends Gui
         }
 
 
-
         $html .= '</div>';
 
         return $html;
@@ -229,10 +248,12 @@ class GuiExtension extends Gui
             $list['conflicts'] = $this->linkExtensions($this->extension->getConflictList());
         }
 
+        $html .= '<dl>';
         foreach ($list as $key => $value) {
             $html .= '<dt>' . $this->getLang($key) . '</dt>';
             $html .= '<dd>' . $value . '</dd>';
         }
+        $html .= '</dl>';
 
         $html .= '</details>';
         return $html;
@@ -289,12 +310,6 @@ class GuiExtension extends Gui
         $actions = [];
         $errors = [];
 
-        // show the available version if there is one
-        if ($this->extension->getDownloadURL() && $this->extension->getLastUpdate()) {
-            $html .= ' <span class="version">' . $this->getLang('available_version') . ' ' .
-                hsc($this->extension->getLastUpdate()) . '</span>';
-        }
-
         // gather available actions and possible errors to show
         try {
             Installer::ensurePermissions($this->extension);
@@ -442,124 +457,4 @@ class GuiExtension extends Gui
     }
 
     // endregion
-
-
-    /**
-     * Extension main description
-     *
-     * @return string The HTML code
-     */
-    public function makeLegend()
-    {
-        $html = '<div>';
-        $html .= '<h2>';
-        $html .= sprintf(
-            $this->getLang('extensionby'),
-            '<bdi>' . hsc($this->extension->getDisplayName()) . '</bdi>',
-            $this->author()
-        );
-        $html .= '</h2>' . DOKU_LF;
-
-        $html .= $this->makeScreenshot();
-
-        $popularity = $this->extension->getPopularity();
-        if ($popularity !== false && !$this->extension->isBundled()) {
-            $popularityText = sprintf($this->getLang('popularity'), round($popularity * 100, 2));
-            $html .= '<div class="popularity" title="' . $popularityText . '">' .
-                '<div style="width: ' . ($popularity * 100) . '%;">' .
-                '<span class="a11y">' . $popularityText . '</span>' .
-                '</div></div>' . DOKU_LF;
-        }
-
-        if ($this->extension->getDescription()) {
-            $html .= '<p><bdi>';
-            $html .= hsc($this->extension->getDescription()) . ' ';
-            $html .= '</bdi></p>' . DOKU_LF;
-        }
-
-        $html .= $this->makeLinkbar();
-        $html .= $this->makeInfo();
-        $html .= $this->makeNoticeArea();
-        $html .= '</div>' . DOKU_LF;
-        return $html;
-    }
-
-
-    /**
-     * Plugin/template details
-     *
-     * @return string The HTML code
-     */
-    public
-    function makeInfo()
-    {
-        $default = $this->getLang('unknown');
-
-
-        $list = [];
-
-        $list['status'] = $this->makeStatus();
-
-
-        if ($this->extension->getDonationURL()) {
-            $list['donate'] = '<a href="' . $this->extension->getDonationURL() . '" class="donate">' .
-                $this->getLang('donate_action') . '</a>';
-        }
-
-        if (!$this->extension->isBundled()) {
-            $list['downloadurl'] = $this->shortlink($this->extension->getDownloadURL(), $default);
-            $list['repository'] = $this->shortlink($this->extension->getSourcerepoURL(), $default);
-        }
-
-        if ($this->extension->isInstalled()) {
-            if ($this->extension->getInstalledVersion()) {
-                $list['installed_version'] = hsc($this->extension->getInstalledVersion());
-            }
-            if (!$this->extension->isBundled()) {
-                $updateDate = $this->extension->getManager()->getLastUpdate();
-                $list['install_date'] = $updateDate ? hsc($updateDate) : $default;
-            }
-        }
-
-        if (!$this->extension->isInstalled() || $this->extension->isUpdateAvailable()) {
-            $list['available_version'] = $this->extension->getLastUpdate()
-                ? hsc($this->extension->getLastUpdate())
-                : $default;
-        }
-
-
-        if (!$this->extension->isBundled() && $this->extension->getCompatibleVersions()) {
-            $html .= '<dt>' . $this->getLang('compatible') . '</dt>';
-            $html .= '<dd>';
-            foreach ($this->extension->getCompatibleVersions() as $date => $version) {
-                $html .= '<bdi>' . $version['label'] . ' (' . $date . ')</bdi>, ';
-            }
-            $html = rtrim($html, ', ');
-            $html .= '</dd>';
-        }
-        if ($this->extension->getDependencyList()) {
-            $html .= '<dt>' . $this->getLang('depends') . '</dt>';
-            $html .= '<dd>';
-            $html .= $this->makeLinkList($extension->getDependencies());
-            $html .= '</dd>';
-        }
-
-        if ($this->extension->getSimilarExtensions()) {
-            $html .= '<dt>' . $this->getLang('similar') . '</dt>';
-            $html .= '<dd>';
-            $html .= $this->makeLinkList($extension->getSimilarExtensions());
-            $html .= '</dd>';
-        }
-
-        if ($this->extension->getConflicts()) {
-            $html .= '<dt>' . $this->getLang('conflicts') . '</dt>';
-            $html .= '<dd>';
-            $html .= $this->makeLinkList($extension->getConflicts());
-            $html .= '</dd>';
-        }
-        $html .= '</dl>' . DOKU_LF;
-        return $html;
-    }
-
-
 }
diff --git a/lib/plugins/extension/admin.php b/lib/plugins/extension/admin.php
index f26da7a6c..c8d440d2a 100644
--- a/lib/plugins/extension/admin.php
+++ b/lib/plugins/extension/admin.php
@@ -163,6 +163,8 @@ class admin_plugin_extension extends AdminPlugin
     {
         echo '<h1>' . $this->getLang('menu') . '</h1>';
 
+        echo '<div id="extension__list">';
+
         $ext = \dokuwiki\plugin\extension\Extension::createFromId('aichat');
         $gui = new \dokuwiki\plugin\extension\GuiExtension($ext);
         echo $gui->render();
@@ -179,6 +181,8 @@ class admin_plugin_extension extends AdminPlugin
         $gui = new \dokuwiki\plugin\extension\GuiExtension($ext);
         echo $gui->render();
 
+        echo '</div>';
+
         return;
 
         echo '<div id="extension__manager">' . DOKU_LF;
diff --git a/lib/plugins/extension/all.less b/lib/plugins/extension/all.less
deleted file mode 100644
index 3d9688e14..000000000
--- a/lib/plugins/extension/all.less
+++ /dev/null
@@ -1,37 +0,0 @@
-
-@media only screen and (max-width: 600px) {
-
-#extension__list .legend {
-    > div {
-        padding-left: 0;
-    }
-
-    div.screenshot {
-        margin: 0 .5em .5em 0;
-    }
-
-    h2 {
-        width: auto;
-        float: none;
-    }
-
-    div.linkbar {
-        clear: left;
-    }
-}
-
-[dir=rtl] #extension__list .legend {
-    > div {
-        padding-right: 0;
-    }
-
-    div.screenshot {
-        margin: 0 0 .5em .5em;
-    }
-
-    div.linkbar {
-        clear: right;
-    }
-}
-
-} /* /@media */
diff --git a/lib/plugins/extension/style.less b/lib/plugins/extension/style.less
index 261fa1c48..110d0a024 100644
--- a/lib/plugins/extension/style.less
+++ b/lib/plugins/extension/style.less
@@ -46,6 +46,7 @@
         border-bottom: solid 1px @ini_background_alt;
         z-index: 2;
     }
+
     .panelHeader {
         background-color: @ini_background_alt;
         margin: 0 0 10px 0;
@@ -59,300 +60,106 @@
     }
 }
 
-/*
- * extensions table
- */
-#extension__list {
-    ul.extensionList {
-        margin-left: 0;
-        margin-right: 0;
-        padding: 0;
-        list-style: none;
-    }
 
-    ul.extensionList li {
-        margin: 0 0 .5em;
-        padding: 0 0 .5em;
-        color: @ini_text;
+#extension__list {
+    section.extension {
+        display: grid;
+        grid-template-columns: auto 1fr 15em;
+        grid-template-rows: repeat(3);
+        gap: 1em;
+        margin-bottom: 1em;
         border-bottom: 1px solid @ini_border;
-        overflow: hidden;
-    }
-
-    button {
-        margin-bottom: .3em;
-    }
-}
-
-/**
- * extension table left column
- */
-#extension__list .legend {
-    position: relative;
-    width: 75%;
-    float: left;
-
-    // padding
-    > div {
-        padding: 0 .5em 0 132px;
-        border-right: 1px solid @ini_background_alt;
-        overflow: hidden;
-    }
-
-    // screenshot
-    div.screenshot {
-        margin-top: 4px;
-        margin-left: -132px;
-        max-width: 120px;
-        float: left;
-        position: relative;
 
-        img {
-            width: 120px;
-            height: 70px;
-            border-radius: 5px;
-            box-shadow: 2px 2px 2px #666;
-        }
-
-        span {
-            min-height: 24px;
-            min-width: 24px;
-            position: absolute;
-            left: 0;
-            top: 0;
-        }
-    }
-
-    // plugin headline
-    h2 {
-        width: 100%;
-        float: right;
-        margin: 0.2em 0 0.5em;
-        font-size: 100%;
-        font-weight: normal;
-        border: none;
+        > h2 {
+            grid-column: 1 / span 2;
+            grid-row: 1;
+            margin: 0; // is added by grid gap
+            position: relative;
 
-        strong {
-            font-size: 120%;
-            font-weight: bold;
-            vertical-align: baseline;
-        }
-    }
-
-    // description
-    p {
-        margin: 0 0 0.6em 0;
-    }
-
-    // popularity bar
-    div.popularity {
-        background-color: @ini_background;
-        border: 1px solid silver;
-        height: .4em;
-        margin: 0 auto;
-        padding: 1px;
-        width: 5.5em;
-        position: absolute;
-        right: .5em;
-        top: 0.2em;
-
-        div {
-            background-color: @ini_border;
-            height: 100%;
-        }
-    }
-
-    // Docs, Bugs, Tags
-    div.linkbar {
-        font-size: 85%;
-
-        span.tags {
-            padding-left: 18px;
-            background: transparent url(images/tag.png) no-repeat 0 0;
-        }
+            .version {
+                font-size: 80%;
+                font-weight: normal;
+            }
 
-        a.bugs {
-            padding-left: 18px;
-            background: transparent url(images/bug.gif) no-repeat 0 0;
+            .popularity {
+                font-size: 1rem;
+                background-color: @ini_background;
+                border: 1px solid @ini_border;
+                height: .4em;
+                margin: 0 auto;
+                padding: 1px;
+                width: 5.5em;
+                position: absolute;
+                right: 0;
+                top: 0.25em;
+
+                div {
+                    background-color: @ini_border;
+                    height: 100%;
+                }
+            }
         }
-    }
-
-    // more info button
-    a.info {
-        background: transparent url(images/down.png) no-repeat 0 0;
-        border-width: 0;
-        height: 13px;
-        width: 13px;
-        text-indent: -9999px;
-        float: right;
-        margin: .5em 0 0;
-        overflow: hidden;
 
-        &.close {
-            background: transparent url(images/up.png) no-repeat 0 0;
+        > .screenshot {
+            grid-column: 1;
+            grid-row: 2;
         }
-    }
 
-    // detailed info box
-    dl.details {
-        margin: 0.4em 0 0 0;
-        font-size: 85%;
-        border-top: 1px solid @ini_background_alt;
-        clear: both;
-
-        dt {
-            clear: left;
-            float: left;
-            width: 25%;
-            margin: 0;
-            text-align: right;
-            font-weight: normal;
-            padding: 0.2em 5px 0 0;
-            font-weight: bold;
+        > .main {
+            grid-column: 2;
+            grid-row: 2;
         }
 
-        dd {
-            margin-left: 25%;
-            padding: 0.2em 0 0 5px;
+        > .details {
+            grid-column: 1 / span 2;
+            grid-row: 3;
 
-            a.donate {
-                padding-left: 18px;
-                background: transparent url(images/donate.png) left center no-repeat;
+            .linkbar {
+                line-height: 1.2em;
+                font-size: 90%;
             }
-        }
-    }
-}
-
-[dir=rtl] #extension__list .legend {
-    float: right;
 
-    > div {
-        padding: 0 132px 0 .5em;
-        border-left: 1px solid @ini_background_alt;
-        border-right-width: 0;
-    }
-
-    div.screenshot {
-        margin-left: 0;
-        margin-right: -132px;
-        float: right;
-
-        span {
-            left: auto;
-            right: 0;
-        }
-    }
-
-    h2 {
-        float: left;
-    }
-
-    div.popularity {
-        right: auto;
-        left: .5em;
-    }
-
-    div.linkbar span.tags,
-    dl.details dd a.donate {
-        padding-left: 0;
-        padding-right: 18px;
-        background-position: top right;
-    }
-
-    a.info {
-        float: left;
-    }
-
-    dl.details {
-        dt {
-            clear: right;
-            float: right;
-            text-align: left;
-            padding-left: 5px;
-            padding-right: 0;
-        }
-
-        dd {
-            margin-left: 0;
-            margin-right: 25%;
-            padding-left: 0;
-            padding-right: 5px;
+            details {
+                font-size: 90%;
+                border: 1px solid transparent; // fixes jumping summary
+                summary {
+                    cursor: pointer;
+                    float: right;
+                    margin-top: -1.2em;
+                    line-height: 1.2em;
+                }
+
+                dl {
+                    margin-top: 1em;
+
+                    dt {
+                        float: left;
+                        clear: left;
+                        width: 30%;
+                        text-align: right;
+                        margin-right: 1em;
+                    }
+
+                    dd {
+                        float: left;
+                        width: 60%;
+                        margin-left: 1em;
+                    }
+                }
+            }
         }
-    }
-}
-
-/*
- * Enabled/Disabled overrides
- */
-#extension__list {
 
-    &.hasDisplayOptions {
-        .enabled,
-        .disabled,
-        .updatable {
-            display: none;
+        > .version {
+            grid-column: 3;
+            grid-row: 1;
+            align-self: end;
         }
 
-        &.enabled .enabled,
-        &.disabled .disabled,
-        &.updatable .updatable {
-            display: block;
+        > .actions {
+            grid-column: 3;
+            grid-row: 2 / span 2;
         }
     }
-
-    .enabled div.screenshot span {
-        background: transparent url(images/enabled.png) no-repeat 2px 2px;
-    }
-
-    .disabled div.screenshot span {
-        background: transparent url(images/disabled.png) no-repeat 2px 2px;
-    }
-
-    .disabled .legend {
-        opacity: 0.7;
-    }
-}
-
-/**
- * extension table right column
- */
-#extension__manager .actions {
-    padding: 0;
-    font-size: 95%;
-    width: 25%;
-    float: right;
-    text-align: right;
-
-    .version {
-        display: block;
-    }
-
-    p {
-        margin: 0.2em 0;
-        text-align: center;
-    }
-
-    p.permerror {
-        margin-left: 0.4em;
-        text-align: left;
-        padding-left: 19px;
-        background: transparent url(images/warning.png) center left no-repeat;
-        line-height: 18px;
-        font-size: 12px;
-    }
-}
-
-[dir=rtl] #extension__manager .actions {
-    float: left;
-    text-align: left;
-
-    p.permerror {
-        margin-left: 0;
-        margin-right: 0.4em;
-        text-align: right;
-        padding-left: 0;
-        padding-right: 19px;
-        background-position: center right;
-    }
 }
 
 /**