various updates

remove dependence on jQuery
add image delete
Admin ui fix for mobile
image updates to new style
update comments

app/views/faq.html

@@ -23,7 +23,7 @@
                 </h2>
                 <div id="collapse1" class="accordion-collapse collapse" aria-labelledby="generalHeading1" data-bs-parent="#generalAccordion">
                     <div class="ml-5 accordion-body context-main context-other-bg" id="general1">
-                        <span class="text-lead">
+                        <span class="text-lead text-primary">
                             Yes, {SITENAME} is a responsive web-app and it works seamlessly on mobile devices. 
                             The front-end is powered by Bootstrap 5.2.3 the original design system used by twitter. 
                             In addition to the powerful tools behind the scenes, every page on {SITENAME} has been tested to work on devices of all sizes.
@@ -39,7 +39,7 @@
                 </h2>
                 <div id="collapse2" class="accordion-collapse collapse" aria-labelledby="generalHeading2" data-bs-parent="#generalAccordion">
                     <div class="accordion-body context-main context-other-bg" id="general2">
-                        <span class="text-lead">
+                        <span class="text-lead text-primary">
                             Yes, in more ways than one. 
                             Since {SITENAME} is designed as a responsive web-app, its accessible from any browser connected to the internet. 
                             Behind the scenes, the app can be installed on any server hardware and has been tested with both nginx and Apache web-servers.
@@ -55,7 +55,7 @@
                 </h2>
                 <div id="collapse3" class="accordion-collapse collapse" aria-labelledby="generalHeading3" data-bs-parent="#generalAccordion">
                     <div class="accordion-body context-main context-other-bg" id="general3">
-                        <span class="text-lead">
+                        <span class="text-lead text-primary">
                             {SITENAME} is open source and available free of charge through <a href="{ROOT_URL}libraries/ttp/git" class="text-decoration-none">GitLab</a> and <a href="{ROOT_URL}libraries/ttp/packagist" class="text-decoration-none">Packagist</a>. 
                             The developer behind the project is <a href="https://joeykimsey.com/" class="text-decoration-none">Joey Kimsey</a> and he can be contacted through his website for development services.
                         </span>

app/views/footer/social.html

@@ -1,29 +1,29 @@
 <div class="d-flex justify-content-center justify-content-md-end mt-3 mt-md-0">
-<ul class="list-unstyled d-flex mb-0">
-    <li class="ms-3">
-        <a class="context-main" href="{ROOT_URL}fb">
-            <span class="fa-brands fa-fw fa-facebook"></span>
-        </a>
-    </li>
-    <li class="ms-3">
-        <a class="context-main" href="{ROOT_URL}twitter">
-            <span class="fa-brands fa-fw fa-twitter"></span>
-        </a>
-    </li>
-    <li class="ms-3">
-        <a class="context-main" href="{ROOT_URL}in">
-            <span class="fa-brands fa-fw fa-linkedin"></span>
-        </a>
-    </li>
-    <li class="ms-3">
-        <a class="context-main" href="{ROOT_URL}youtube">
-            <span class="fa-brands fa-fw fa-youtube"></span>
-        </a>
-    </li>
-    <li class="ms-3">
-        <a class="context-main" href="{ROOT_URL}git">
-            <span class="fa-brands fa-fw fa-github"></span>
-        </a>
-    </li>
+    <ul class="list-unstyled d-flex mb-0">
+        <li class="ms-3">
+            <a class="context-main" href="{ROOT_URL}fb">
+                <span class="fa-brands fa-fw fa-facebook"></span>
+            </a>
+        </li>
+        <li class="ms-3">
+            <a class="context-main" href="{ROOT_URL}twitter">
+                <span class="fa-brands fa-fw fa-twitter"></span>
+            </a>
+        </li>
+        <li class="ms-3">
+            <a class="context-main" href="{ROOT_URL}in">
+                <span class="fa-brands fa-fw fa-linkedin"></span>
+            </a>
+        </li>
+        <li class="ms-3">
+            <a class="context-main" href="{ROOT_URL}youtube">
+                <span class="fa-brands fa-fw fa-youtube"></span>
+            </a>
+        </li>
+        <li class="ms-3">
+            <a class="context-main" href="{ROOT_URL}git">
+                <span class="fa-brands fa-fw fa-github"></span>
+            </a>
+        </li>
     </ul>
 </div>

app/views/forms/folderSelect.html

@@ -1,17 +1,17 @@
 Folder: <strong>{FOLDER_SELECT_ROOT}</strong>
 <div class="list-group mx-0 mx-auto">
     {LOOP}
-    <label class="list-group-item d-flex justify-content-between align-items-center">
-        <div class="d-flex align-items-center">
-            <input class="form-check-input me-2" type="radio" name="folderSelect" value="{location}" data-bs-toggle="collapse" data-bs-target="#top-{folderName}">
-            <span>
-                {folderName}
-            </span>
+        <label class="list-group-item d-flex align-items-center">
+            <input class="form-check-input me-2" type="radio" name="folderSelect" value="{location}">
+            <button class="btn d-flex justify-content-between align-items-center w-100" type="button" aria-expanded="false" aria-controls="top-{folderName}" data-bs-toggle="collapse" data-bs-target="#top-{folderName}">
+                <span class="d-flex flex-grow-1">
+                    {folderName}
+                </span>
+                <i class="fa fa-solid fa-caret-down"></i>
+            </button>
+        </label>
+        <div id="top-{folderName}" class="collapse">
+            {subdirs}
         </div>
-        {folderexpand}
-    </label>
-    <div id="top-{folderName}" class="collapse">
-        {subdirs}
-    </div>
     {/LOOP}
 </div>

app/views/forms/folderSelectParent.html

@@ -1,12 +1,12 @@
 {LOOP}
-    <label class="list-group-item d-flex justify-content-between align-items-center">
-        <div class="d-flex align-items-center">
-            <input class="form-check-input me-2" type="radio" name="folderSelect" value="{location}" data-bs-toggle="collapse" data-bs-target="#{parentfolderName}-{folderName}">
-            <span>
-                {folderName}
+    <label class="list-group-item d-flex align-items-center">
+        <input class="form-check-input me-2" type="radio" name="folderSelect" value="{location}">
+        <button class="btn d-flex justify-content-between align-items-center w-100" type="button" aria-expanded="false" aria-controls="{parentfolderName}-{folderName}" data-bs-toggle="collapse" data-bs-target="#{parentfolderName}-{folderName}">
+            <span class="d-flex flex-grow-1">
+                {spacer}{folderName}
             </span>
-        </div>
-        {folderexpand}
+            <i class="fa fa-solid fa-caret-down"></i>
+        </button>
     </label>
     <div id="{parentfolderName}-{folderName}" class="collapse">
         {subdirs}

app/views/index.html

@@ -29,7 +29,7 @@
                 </div>
             </div>
             <div class="carousel-item">
-                <img src="{ROOT_URL}app/images/ttp-github.png" class="bd-placeholder-img" alt="Third slide">
+                <img src="{ROOT_URL}app/images/ttp-gitlab.png" class="bd-placeholder-img" alt="Third slide">
                 <div class="container">
                     <div class="carousel-caption text-end bg-dark px-4">
                         <h1>Open Source</h1>