frontend and backend design enhancements

2 files changed, 97 insertions, 0 deletions

diff --git a/public/app/views/components/courses_menu.php b/public/app/views/components/courses_menu.php
new file mode 100644
index 0000000..6539f8c
--- /dev/null
+++ b/public/app/views/components/courses_menu.php
@@ -0,0 +1,97 @@
+<?php 
+/** Categories Menu
+ * -----------------------------------------------------------------------------
+ * sits in the (left) sidebar
+ * 
+ * imported variables
+ * ---
+ * @param $categories (array) : the categories tree
+ * @param $open_path (array) : 'id's array of selected categories
+ * 
+ * example call:
+ * (draw the categories-menu and set open the categories with ids 1 and 2)
+ * --- 
+ * Render::template("section/categories_menu.php",[
+ *      'categories' => $category_tree,
+ *      'open_path' => [1 ,2]
+ * ]);
+ * 
+ * -----------------------------------------------------------------------------
+ */
+
+/** tree_ul
+ * creates (recursively) a nested ul-li tree of categories
+ * --- -- -- - - -
+ * @param $tree (array) : categories array formated as tree
+ * @param $open_nodes (array) : array of categor ids that shall be marked open/selected
+ * @return $html (string)
+ */
+function tree_li($tree, $open_nodes = [], $l = 0)
+{
+    $html = "";
+
+    foreach($tree as $node) {
+
+        // if has childs ...
+        // write li ; traverse children recursively
+        if ((isset($node['childs'])) && ( $node['childs']!= [])) {
+
+            if (in_array(intval($node['rec']['id']), $open_nodes)) {
+                $inner_class = "inner show";
+                $sign = "–";
+                $a_class = "has-childs selected";
+
+            } else {
+                $inner_class = "inner";
+                $sign = "+";
+                $a_class = "has-childs";
+            }
+
+            $html .= "<li>
+                <a href='/course/{$node['rec']['id']}' class='{$a_class}'>
+                    <span class='label'>{$node['rec']['label']}</span>
+                    <span class='toggler'>{$sign}</span>
+                </a>
+                <ul class='{$inner_class}'>"
+                    . tree_li($node['childs'], $open_nodes, $l+1)
+                ."</ul>
+            </li>";
+
+
+        } else {    // else just write the li
+
+            if (in_array(intval($node['rec']['id']), $open_nodes)) {
+                $u_in = "<u>";
+                $u_out = "</u>";
+                $a_class = "selected";
+
+            } else {
+                $u_in = "";
+                $u_out = "";
+                $a_class = "";
+
+            }
+
+            $html .= "<li>
+                <a href='/course/{$node['rec']['id']}' class='{$a_class}'>
+                    <span class='label'>{$node['rec']['label']}</span>
+                </a>
+            </li>";
+        }
+    }
+
+    return $html;
+
+}
+
+
+// draw the menu (hidden on XS screens)
+// -----------------------------------------------------------------------------
+echo "<h3>Διαθέσιμη ύλη</h3>";
+echo "<ul class='hidden-xs side-bar'>". tree_li($categories, $open_path) ."</ul>";
+
+
+
+// TODO:
+// draw menu for XS screens (for example, just the 1st-level categories)
+// (maybe in an accordion so it won;t take too much area on small screens)
diff --git a/public/app/views/components/top-bar.php b/public/app/views/components/top_bar.php
index ed96e35..ed96e35 100644
--- a/public/app/views/components/top-bar.php
+++ b/public/app/views/components/top_bar.php