Merge pull request #139 from Jerakin/feat/improved-list-style

Alternative rendering of list page
Linbreux · Feb 20, 2024 · a7890b9 · a7890b9
2 parents e7e9b58 + 3594a34
commit a7890b9
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 82 deletions.
diff --git a/static/css/wiki.css b/static/css/wiki.css
@@ -115,46 +115,18 @@ h4{
     font-family: "quicksand";
 }
 
-body {
-    font-family: "Gothic A1";
-}
-
-.folder{
-    font-family: 'Gothic A1', sans-serif;
-    font-weight: 700;
-}
 
 .alert i[class^="bi-"]{
     font-size: 1.5em;
     line-height: 1;
     margin-right: 10px;
   }
 
-#list a{
-    border-bottom: none;
-}
-
-#list a.folder{
-    border-bottom: 1px solid black;
-    font-weight: 800;
-}
-
 div.html-integration{
   background-color: var(--html-integration-background-light);
   padding: 20px;
 }
 
-.container a:any-link{
-    font-weight: 500;
-    color:black;
-    text-decoration: none;
-    border-bottom: 1px solid black;
-    padding-bottom: 2px;
-}
-
-.container a.nostyle{
-    border-bottom: none;
-}
 
 .mermaid {
     text-align: center;

diff --git a/static/css/wiki.dark.css b/static/css/wiki.dark.css
@@ -39,24 +39,21 @@ div.html-integration{
     background-color: var(--bg-codeblock-dark);
 }
 
-#list a.folder{
-    border-bottom: 1px solid var(--txt-dark);
-    font-weight: 800;
-}
-
-
-.container a:any-link{
-    color:var(--txt-dark);
-    border-bottom: 1px solid var(--txt-dark);
-}
-
-.container a.nostyle {
-    border-bottom: none;
-}
-
 .form-control,
 .form-control:focus {
     background-color: var(--bg-codeblock-dark);
     border-color: var(--bg-modal-dark);
     color: var(--txt-dark);
 }
+
+.list-group-item,
+.list-group-item {
+    background-color: var(--bg-dark);
+    color: var(--txt-dark);
+}
+
+.link-dark:visited,
+.link-dark:hover,
+.link-dark {
+    color: var(--txt-dark);
+}
diff --git a/templates/list_files.html b/templates/list_files.html
@@ -1,49 +1,16 @@
 {% extends 'base.html' %}
-{% block head %}
-    <style>
-        ul#list {
-            list-style: none;
-            padding: 0px
-        }
-
-        ul#list li {
-            margin: 5px;
-            padding-left: 15px;
-            border-left-style: solid;
-        }
-
-        ul#list li:hover {
-
-        {% if system.darktheme%}
-            background: #3f4448;
-        {%else%}
-            background: #ECECEC;
-        {%endif%}
-        }
-
-        ul#list li a {
-            font-size: 1.2em;
-
-        {% if system.darktheme%}
-            color: whitesmoke;
-        {%else%}
-            color: #222326;
-        {%endif%}
-        }
-    </style>
-{% endblock %}
 
 {% block content %}
-    <a style="float:right" href="/toggle-sorting">Sort ({% if system.listsortMTime %}last modified{% else %}a-z{% endif%})</a>
+    <a class="link-dark text-decoration-none float-end" href="/toggle-sorting">Sort ({% if system.listsortMTime %}last modified{% else %}a-z{% endif%})</a>
     <h2><b>{{ folder }}</b> ALL FILES</h2>
-    <ul id="list">
-        <li><i><a href="../">..</a></i></li>
+    <ul class="list-group list-group-flush h5">
+        <li class="list-group-item"><i class="bi bi-folder pe-3"></i><i><a class="link-dark text-decoration-none" href="../">..</a></i></li>
         {% for i in list %}
-            <li>
+            <li class="list-group-item">
                 {% if i.folder != "" and i.folder != folder %}
-                    <b><a class="folder" href="/list/{{ i.folder }}/">{{ i.folder }}/ </a></b>
+                    <i class="bi bi-folder pe-3"></i><a class="link-dark fst-italic" href="/list/{{ i.folder }}/">{{ i.folder }}/ </a>
                 {% else %}
-                    <a href="/{{ i.url }}">{{ i.doc }}</a>
+                    <i class="bi bi-file-earmark-text pe-3"></i><a class="link-dark text-decoration-none" href="/{{ i.url }}">{{ i.doc }}</a>
                 {% endif %}
             </li>
         {% endfor %}