feat(layout): added responsive card deck for start page, closes #1705

thorsten · Apr 13, 2020 · 5e9da06 · 5e9da06
1 parent 531b53b
commit 5e9da06
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 40 deletions.
diff --git a/CHANGELOG b/CHANGELOG
@@ -11,7 +11,9 @@ Version 3.1.0-alpha
 - removed REST API v1 (Thorsten)
 
 Version 3.0.2
--
+- improved handling of multiple startpage categories (Thorsten)
+- improved FAQ editing (Thorsten)
+- fixed minor bugs (Thorsten)
 
 Version 3.0.1 - 2020-03-17
 - re-added tag cloud on several pages (Thorsten)

diff --git a/phpmyfaq/assets/themes/default/templates/startpage.html b/phpmyfaq/assets/themes/default/templates/startpage.html
@@ -1,26 +1,18 @@
-<h1>
-  {{ pageHeader }}
-</h1>
+<!-- Header -->
+<div class="col-12">
+  <h1>
+    {{ pageHeader }}
+  </h1>
+</div>
+
 <!-- Start page -->
-<div class="row mb-3">
-  <div class="col-12">
-    <div class="card-deck">
-      [startPageCategories]
-      <div class="card">
-        <a href="{{ categoryUrl }}">
-          <img class="card-img-top" width="200" src="{{ categoryImage }}" alt="{{ categoryName }}" />
-        </a>
-        <div class="card-body">
-          <h5 class="card-title text-center">
-            <a href="{{ categoryUrl }}">{{ categoryName }}</a>
-          </h5>
-          <p class="card-text">{{ categoryDescription }}</p>
-        </div>
-      </div>
-      [/startPageCategories]
-    </div>
+<div class="container p-0">
+  <div class="card-deck">
+    [startPageCategories] {{ startPageCategoryDecks }} [/startPageCategories]
   </div>
 </div>
+
+<!-- Start page content -->
 <div class="row">
   <div class="col-12">
     <div class="card-columns">

diff --git a/phpmyfaq/index.php b/phpmyfaq/index.php
@@ -428,7 +428,7 @@
 }
 
 //
-// Set right column
+// Set sidebar column
 //
 if (($action === 'faq') || ($action === 'show') || ($action === 'main')) {
     $sidebarTemplate = 'sidebar-tagcloud.html';

diff --git a/phpmyfaq/src/phpMyFAQ/Category.php b/phpmyfaq/src/phpMyFAQ/Category.php
@@ -389,16 +389,21 @@ public function getHomeCategories()
             $url = sprintf('%s?action=show&amp;cat=%d', $this->config->getDefaultUrl(), $row['id']);
             $link = new Link($url, $this->config);
             $link->itemTitle = $row['name'];
-            $categories['url'][] = $link->toString();
-            $categories['name'][] = $row['name'];
-            $categories['description'][] = $row['description'];
             if ('' === $row['image']) {
                 $image = 'data:image/png;base64,' .
                     'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgDTD2qgAAAAASUVORK5CYII=';
             } else {
                 $image = 'images/' . $row['image'];
             }
-            $categories['image'][] = $image;
+
+            $category = [
+                'url' => $link->toString(),
+                'name' => $row['name'],
+                'description' => $row['description'],
+                'image' => $image
+            ];
+
+            $categories[] = $category;
         }
 
         return $categories;

diff --git a/phpmyfaq/src/phpMyFAQ/Helper/CategoryHelper.php b/phpmyfaq/src/phpMyFAQ/Helper/CategoryHelper.php
@@ -115,10 +115,10 @@ public function renderNavigation($activeCategory = 0)
                 } else {
                     if ($this->Category->treeTab[$y]['symbol'] == 'minus') {
                         $name = ($this->Category->treeTab[$y]['parent_id'] === 0)
-                                ?
-                                $name
-                                :
-                                $this->Category->categoryName[$this->Category->treeTab[$y]['id']]['name'];
+                            ?
+                            $name
+                            :
+                            $this->Category->categoryName[$this->Category->treeTab[$y]['id']]['name'];
                         $output .= $this->Category->addCategoryLink(
                             $sids,
                             $categoryId,
@@ -292,14 +292,14 @@ public function renderOptions($categoryId)
         $categories = '';
 
         if (!is_array($categoryId)) {
-            $categoryId = array(
-                array(
+            $categoryId = [
+                [
                     'category_id' => $categoryId,
                     'category_lang' => '',
-                ),
-            );
+                ],
+            ];
         } elseif (isset($categoryId['category_id'])) {
-            $categoryId = array($categoryId);
+            $categoryId = [$categoryId];
         }
 
         $i = 0;
@@ -327,4 +327,46 @@ public function renderOptions($categoryId)
 
         return $categories;
     }
+
+    /**
+     * Renders the start page category card decks
+     * @param array $categories
+     * @return string
+     */
+    public function renderStartPageCategories(array $categories): string
+    {
+        if (count($categories) === 0) {
+            return '';
+        }
+
+        $decks = '';
+        $key = 1;
+        foreach ($categories as $category) {
+            $decks .=
+                '<div class="card mb-4">' .
+                '<a href="' . $category['url'] . '">' .
+                '<img class="card-img-top img-fluid" width="200" src="' . $category['image'] . '" alt="' .
+                $category['name'] . '" />' .
+                '</a>' .
+                '<div class="card-body">' .
+                '<h4 class="card-title text-center">' .
+                '<a href="{{ categoryUrl }}">' . $category['name'] . '</a>' .
+                '</h4>' .
+                '<p class="card-text">' . $category['description'] . '</p>' .
+                '</div>' .
+                '</div>';
+            if ($key % 2 === 0) {
+                $decks .= '<div class="w-100 d-none d-sm-block d-md-none"></div>';
+            }
+            if ($key % 3 === 0) {
+                $decks .= '<div class="w-100 d-none d-md-block d-lg-none"></div>';
+            }
+            if ($key % 4 === 0) {
+                $decks .= '<div class="w-100 d-none d-lg-block d-xl-block"></div>';
+            }
+            $key++;
+        }
+
+        return $decks;
+    }
 }
diff --git a/phpmyfaq/startpage.php b/phpmyfaq/startpage.php
@@ -1,7 +1,7 @@
 <?php
 
 /**
- * The main start page with the Top10 and the latest messages.
+ * The main start page with the start page categories, the Top 10 and the latest messages.
  *
  * This Source Code Form is subject to the terms of the Mozilla Public License,
  * v. 2.0. If a copy of the MPL was not distributed with this file, You can
@@ -16,6 +16,7 @@
  */
 
 use phpMyFAQ\Filter;
+use phpMyFAQ\Helper\CategoryHelper;
 use phpMyFAQ\News;
 use phpMyFAQ\Strings;
 
@@ -25,6 +26,7 @@
 }
 
 $news = new News($faqConfig);
+$categoryHelper = new CategoryHelper();
 $archived = Filter::filterInput(INPUT_GET, 'newsid', FILTER_VALIDATE_INT);
 
 if (!is_null($archived)) {
@@ -42,10 +44,7 @@
         'mainPageContent',
         'startPageCategories',
         [
-            'categoryUrl' => $startPageCategories['url'],
-            'categoryName' => $startPageCategories['name'],
-            'categoryDescription' => $startPageCategories['description'],
-            'categoryImage' => $startPageCategories['image']
+            'startPageCategoryDecks' => $categoryHelper->renderStartPageCategories($startPageCategories)
         ]
     );
 }