From e7d588691ea3f1985969b36546776b8697f03e96 Mon Sep 17 00:00:00 2001
From: maximstewart <maximstewart1@gmail.com>
Date: Mon, 8 Feb 2021 19:50:06 -0600
Subject: [PATCH] Template updates

---
 src/core/static/js/react-ui-logic.js    |   4 +-
 src/core/templates/body-header.html     | 124 +++++++++++++-----------
 src/core/templates/favorites-modal.html |  42 ++++----
 src/core/templates/pages/index.html     |   8 +-
 4 files changed, 96 insertions(+), 82 deletions(-)

diff --git a/src/core/static/js/react-ui-logic.js b/src/core/static/js/react-ui-logic.js
index 757530a..e18520b 100644
--- a/src/core/static/js/react-ui-logic.js
+++ b/src/core/static/js/react-ui-logic.js
@@ -77,7 +77,7 @@ class FilesList extends React.Component {
             }
 
             final.push(
-                <div class="col-sm-12 col-md-6 col-lg-4">
+                <li class="col-sm-12 col-md-6 col-lg-4">
                     <div class="card">
                         <div class="card-header">
                             {card_header}
@@ -90,7 +90,7 @@ class FilesList extends React.Component {
                             <input hash={hash} onClick={this.openThis} ftype={filetype} class="btn btn-secondary btn-sm float-right" title={name} type="button" value="Open"/>
                         </div>
                     </div>
-                </div>
+                </li>
             );
         }
 
diff --git a/src/core/templates/body-header.html b/src/core/templates/body-header.html
index 935800e..45c8e44 100644
--- a/src/core/templates/body-header.html
+++ b/src/core/templates/body-header.html
@@ -6,76 +6,82 @@
     </button>
 
     <div id="navbarTogglerHeader" class="row collapse navbar-collapse">
-        <div class="col-sm">
-            {% if current_directory %}
-            <ul class="navbar-nav">
-                <li class="nav-item">
-                    <i id="back-btn" class="fa fa-arrow-left" aria-hidden="true" title="Back..." hash="{{dot_dots[1][1]}}">
-                        Back...
-                    </i>
-                </li>
-                <li class="nav-item">
-                    <i id="refresh-btn" class="fa fa-refresh" aria-hidden="true" title="Refresh..." hash="{{dot_dots[0][1]}}">
-                        Refresh...
-                    </i>
-                </li>
+        <!-- Left menues -->
+        {% if current_directory %}
+        <ul class="navbar-nav mr-auto">
+            <li class="nav-item">
+                <i id="back-btn" class="fa fa-arrow-left nav-link" aria-hidden="true" title="Back..." hash="{{dot_dots[1][1]}}">
+                    Back
+                </i>
+            </li>
+            <li class="nav-item">
+                <i id="refresh-btn" class="fa fa-refresh nav-link" aria-hidden="true" title="Refresh..." hash="{{dot_dots[0][1]}}">
+                    Refresh
+                </i>
+            </li>
+        </ul>
 
-                <li class="nav-item">
-                    <div class="input-group input-group-sm justify-content-center">
-                        <button title="Other Options..." class="btn btn-secondary btn-sm" data-toggle="modal" data-target="#options-modal">⚙</button>
-
-                        <input id="search-files-field" type="text" class="form-control" aria-label="Search..." placeholder="Search..." style="max-width: 260px">
-                        <div class="input-group-prepend">
-                            <span id="clear-search-btn" class="input-group-text" title="Clears search...">X</span>
-                        </div>
-
-                        <button title="File viewer..." class="btn btn-secondary btn-sm" data-toggle="modal" data-target="#file-view-modal">🖼</button>
+        <!-- Center menues -->
+        <ul class="navbar-nav ml-auto mr-auto">
+            <li class="nav-item">
+                <div class="input-group">
+                    <input id="search-files-field" type="text" class="form-control"
+                            aria-label="Search..." placeholder="Search..." style="max-width: 260px">
+                    <div class="input-group-prepend">
+                        <span id="clear-search-btn" class="input-group-text" title="Clears search...">X</span>
                     </div>
-                </li>
+                </div>
+            </li>
+            <li class="nav-item" data-toggle="modal" data-target="#favorites-modal">
+                <i class="nav-link" aria-hidden="true" title="Faves list..." >
+                    Faves List &#8597;
+                </i>
+            </li>
+            <li class="nav-item">
+                <i id="scroll-files-to-top-btn" class="nav-link" aria-hidden="true" title="Scroll to top..." >
+                    Scroll Files To Top
+                </i>
+            </li>
+            <li class="nav-item">
+                <span id="tggl-faves-btn" class="nav-link" title="Add/Delete from favorites..." >&#9734;</span>
+            </li>
+            <li class="nav-item" data-toggle="modal" data-target="#file-view-modal">
+                <i class="nav-link" aria-hidden="true" title="File viewer..." >
+                    🖼
+                </i>
+            </li>
+            {% endif %}
+        </ul>
 
-                <li class="nav-item">
-                    <div class="input-group input-group-sm justify-content-center">
-                        <button class="btn btn-sm btn-secondary" data-toggle="modal"
-                        data-target="#favorites-modal">Faves List &#8597;</button>
-                        <button id="scroll-files-to-top-btn" class="btn btn-sm btn-secondary" title="Scroll to top..." >Scroll Files To Top</button>
-                    </div>
-                </li>
-
-
-
-                <li class="nav-item">
-                    <button id="tggl-faves-btn" class="btn btn-sm btn-secondary" title="Add/Delete from favorites..." >&#9734;</button>
-                </li>
-
-                {% endif %}
-            </ul>
-        </div>
-
-        <div class="col col-lg-auto">
-            <!-- Links -->
-            <ul class="navbar-nav">
-                {% if not current_user.is_authenticated %}
+        <!-- Right menues -->
+        <ul class="navbar-nav ml-auto">
+            <li class="nav-item" data-toggle="modal" data-target="#options-modal">
+                <i class="nav-link fa fa-gear" aria-hidden="true" title="Other options..." >
+                    Settings
+                </i>
+            </li>
+            {% if not current_user.is_authenticated %}
                 <li class="nav-item dropdown">
                     <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
                         Account
                     </a>
                     <div class="dropdown-menu">
                         <a class="dropdown-item" href="{{ url_for('login') }}">
-                            <i title="Login" class="fas fa-user"></i>&nbsp;&nbsp;Login</a>
+                            <i title="Login" class="fas fa-user"></i>&nbsp;&nbsp;Login
+                        </a>
                         <a class="dropdown-item" href="{{ url_for('register') }}">
-                            <i title="Register A User..." class="fas fa-user-plus"></i>&nbsp;&nbsp;Register</a>
+                            <i title="Register A User..." class="fas fa-user-plus"></i>&nbsp;&nbsp;Register
+                        </a>
                     </div>
                 </li>
-                {% endif %}
-
-
-                {% if current_user.is_authenticated or oidc_loggedin() %}
-                    <li class="nav-item">
-                        <a class="nav-link" href="{{ url_for('logout') }}">
-                            <i class="fas fa-sign-out-alt"></i> Logout</a>
-                    </li>
-                {% endif %}
-            </ul>
-        </div>
+            {% endif %}
+            {% if current_user.is_authenticated or oidc_loggedin() %}
+                <li class="nav-item">
+                    <a class="nav-link" href="{{ url_for('logout') }}">
+                        <i class="fas fa-sign-out-alt"></i> Logout
+                    </a>
+                </li>
+            {% endif %}
+        </ul>
     </div>
 </nav>
diff --git a/src/core/templates/favorites-modal.html b/src/core/templates/favorites-modal.html
index 8312b75..8a0595a 100644
--- a/src/core/templates/favorites-modal.html
+++ b/src/core/templates/favorites-modal.html
@@ -1,26 +1,30 @@
-<!-- Favorites modal -->
-<div class="modal fade" id="favorites-modal" tabindex="-1" role="dialog">
-    <div class="modal-dialog" role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h3>Favorites:</h3>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
-                </button>
-            </div>
+{% extends "pages/index.html" %}
 
-            <div class="modal-body">
-                <div class="row">
-                    <div class="col scroller" style="max-height: 30em; overflow: auto;">
-                        <ul id="faves-list">
-                        </ul>
+{% block favorites_modal %}
+    <!-- Favorites modal -->
+    <div class="modal fade" id="favorites-modal" tabindex="-1" role="dialog">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h3>Favorites:</h3>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+
+                <div class="modal-body">
+                    <div class="row">
+                        <div class="col scroller" style="max-height: 30em; overflow: auto;">
+                            <ul id="faves-list">
+                            </ul>
+                        </div>
                     </div>
                 </div>
-            </div>
 
-            <div class="modal-footer">
-                <button type="button" data-dismiss="modal" class="btn btn-danger btn-sm">Close</button>
+                <div class="modal-footer">
+                    <button type="button" data-dismiss="modal" class="btn btn-danger btn-sm">Close</button>
+                </div>
             </div>
         </div>
     </div>
-</div>
+{% endblock favorites_modal %}
diff --git a/src/core/templates/pages/index.html b/src/core/templates/pages/index.html
index f62d70c..df3a536 100644
--- a/src/core/templates/pages/index.html
+++ b/src/core/templates/pages/index.html
@@ -14,8 +14,12 @@
 {% endblock body_header_additional %}
 
 {% block body_content_additional %}
-    <div id="files" class="row">
-    </div>
+    <ul id="files" class="row">
+    </ul>
+
+    {% block favorites_modal %}
+    {% endblock %}
+
 {% endblock body_content_additional %}
 
 {% block body_footer_additional %}