add table for displaying dir content

2024-12-04 19:39:37 +01:00
parent 1ec2ed1d00
commit e70c6db10f
19 changed files with 1122 additions and 5 deletions
--- a/templates/_partials/_row.html.twig
+++ b/templates/_partials/_row.html.twig
@ -0,0 +1,11 @@
+<tr>
+    <td>
+        {% if file.type == 'dir' %}
+            {{ ux_icon('folder:closed', {height: '32px', width: '32px'}) }}
+        {% else %}
+            {{ ux_icon('file:default', {height: '32px', width: '32px'}) }}
+        {% endif %}
+    </td>
+    <td>{{ file.name }}</td>
+    <td>{{ file.size }}</td>
+</tr>
--- a/templates/_partials/_table.html.twig
+++ b/templates/_partials/_table.html.twig
@ -0,0 +1,13 @@
+<table class="table table-striped table-bordered w-75 mt-5">
+    <thead>
+    <tr>
+        <td>Expand</td>
+        <th>Name</th>
+        <th>Size</th>
+    </thead>
+    <tbody>
+    {% for dirContent in content %}
+    {% include '_partials/_row.html.twig' with {file: dirContent} %}
+    {% endfor %}
+    </tbody>
+</table>
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <title>Files | {% block title %}{% endblock %}</title>
+        <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text><text y=%221.3em%22 x=%220.2em%22 font-size=%2276%22 fill=%22%23fff%22>sf</text></svg>">
+        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+        {% block stylesheets %}
+        {% endblock %}
+
+        {% block javascripts %}
+            {% block importmap %}{{ importmap('app') }}{% endblock %}
+        {% endblock %}
+    </head>
+    <body>
+        {% block body %}{% endblock %}
+    </body>
+</html>
--- a/templates/home.html.twig
+++ b/templates/home.html.twig
@ -0,0 +1,11 @@
+{% extends 'base.html.twig' %}
+
+{% block title %}Home{% endblock %}
+
+{% block body %}
+    <center class="mt-5">
+        <h1>Welcome to the File Explorer</h1>
+        <p>Use the navigation bar to explore the files and directories.</p>
+        {% include '_partials/_table.html.twig' %}
+    </center>
+{% endblock %}