feat: use icons for files

feat: add breadcrumb navigation
feat: uiux improvements. no scroll, direct link
2025-09-09 05:39:18 +02:00 · 2025-09-08 22:17:08 +02:00 · 2025-09-08 22:11:16 +02:00 · 2025-09-06 16:58:17 +02:00 · 2025-09-06 16:38:36 +02:00 · 2025-09-06 09:53:08 +02:00
4 changed files with 1204 additions and 685 deletions
--- a/.gitea/workflows/deploy.yml
+++ b/.gitea/workflows/deploy.yml
@@ -29,9 +29,9 @@ jobs:
          cp style.css dist/
          cp script.js dist/

-          # Traiter index.html : supprimer la section de développement
-          # Utiliser awk pour supprimer les lignes 15-25 (section dev-form)
-          awk 'NR < 15 || NR > 25' index.html > dist/index.html
+          # Traiter index.html : supprimer la section de développement uniquement
+          # Utiliser sed pour supprimer le contenu entre les marqueurs START_DEV_SECTION et END_DEV_SECTION
+          sed '/<!-- START_DEV_SECTION -->/,/<!-- END_DEV_SECTION -->/d' index.html > dist/index.html

          # Vérifier que les fichiers sont créés
          ls -la dist/
--- a/index.html
+++ b/index.html
@@ -5,6 +5,8 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index of /</title>
    <link rel="stylesheet" href="style.css">
+    <!-- Prism.js pour la coloration syntaxique -->
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" rel="stylesheet">
 </head>
 <body>
    <div id="page-container">
@@ -12,6 +14,7 @@
        <div id="header">
            <h1>Index of <span id="current-path">/</span></h1>
            
+            <!-- START_DEV_SECTION -->
            <!-- Formulaire de développement pour tester différentes URLs -->
            <div id="dev-form" class="dev-section">
                <h2>Mode Développement</h2>
@@ -21,8 +24,11 @@
                    
                    <button type="submit">Explorer</button>
                </form>
-                <div id="config-info"></div>
            </div>
+            <!-- END_DEV_SECTION -->
+            
+            <!-- Configuration info - toujours présent même en production -->
+            <div id="config-info"></div>

            <!-- Section d'erreur -->
            <div id="error-section" class="error" style="display: none;">
@@ -69,5 +75,8 @@
    </div>

    <script src="script.js"></script>
+    <!-- Prism.js core et langages communs -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
 </body>
 </html>
--- a/script.js
+++ b/script.js
--- a/style.css
+++ b/style.css
@@ -34,6 +34,23 @@ h1 {
  margin-bottom: 20px;
 }

+/* Styles pour la navigation breadcrumb dans le titre */
+.path-segment {
+  color: #0066cc;
+  text-decoration: none;
+  font-weight: normal;
+  cursor: pointer;
+}
+
+.path-segment:hover {
+  text-decoration: underline;
+  color: #004499;
+}
+
+.path-segment:active {
+  color: #002266;
+}
+
 /* Section développement */
 .dev-section {
  background-color: #f0f0f0;
@@ -133,6 +150,15 @@ tr:hover {
  background-color: #e6f3ff;
 }

+/* Lignes cliquables */
+.clickable-row {
+  cursor: pointer;
+}
+
+.clickable-row:hover {
+  background-color: #e6f3ff !important;
+}
+
 /* Liens et dossiers */
 .folder-link {
  color: #0066cc;
@@ -157,24 +183,41 @@ tr:hover {
  font-weight: bold;
 }

-/* Bouton copier lien */
-.copy-btn {
+/* Boutons d'actions */
+.copy-btn,
+.open-btn {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 2px 6px;
  font-size: 11px;
  cursor: pointer;
  border-radius: 2px;
+  margin-left: 2px;
 }

-.copy-btn:hover {
+.copy-btn:hover,
+.open-btn:hover {
  background-color: #e0e0e0;
 }

-.copy-btn:active {
+.copy-btn:active,
+.open-btn:active {
  background-color: #d0d0d0;
 }

+.open-btn {
+  background-color: #007acc;
+  color: white;
+}
+
+.open-btn:hover {
+  background-color: #005999;
+}
+
+.open-btn:active {
+  background-color: #004d80;
+}
+
 /* Tailles de fichiers */
 .file-size {
  text-align: right;
@@ -244,8 +287,8 @@ tr:hover {
  }

  #content-section {
-    flex: 0 0 25%; /* Tableau prend seulement 25% de la hauteur */
-    overflow-y: auto;
+    flex: none; /* Tableau prend l'espace nécessaire */
+    overflow-y: visible;
  }

  #files-table {
@@ -271,8 +314,8 @@ tr:hover {
  }

  #content-section {
-    flex: 0 0 20%; /* Encore moins d'espace pour le tableau sur mobile */
-    overflow-y: auto;
+    flex: none; /* Tableau prend l'espace nécessaire */
+    overflow-y: visible;
  }

  #files-table {
@@ -328,7 +371,6 @@ tr:hover {
 }

 .preview-content {
-  padding: 15px;
  background-color: white;
  flex: 1;
  overflow-y: auto;
@@ -361,7 +403,7 @@ tr:hover {

 .preview-content iframe {
  width: 100%;
-  height: 500px;
+  height: 100%;
  border: 1px solid #ddd;
 }

@@ -399,6 +441,7 @@ tr:hover {
 .rst-content {
  line-height: 1.6;
  color: #333;
+  margin: 10px;
 }

 .markdown-content h1,
@@ -646,6 +689,58 @@ tr:hover {
  font-weight: bold;
 }

+/* Styles pour la coloration syntaxique */
+.preview-content pre[class*="language-"],
+.preview-content code[class*="language-"] {
+  background-color: #f8f8f8;
+  font-family: "Consolas", "Monaco", "Lucida Console", monospace;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.preview-content pre[class*="language-"] {
+  overflow: auto;
+  max-height: 600px;
+}
+
+.preview-content code[class*="language-"] {
+  padding: 2px 4px;
+}
+
+/* Ajustements pour les thèmes Prism */
+.preview-content .token.comment,
+.preview-content .token.prolog,
+.preview-content .token.doctype,
+.preview-content .token.cdata {
+  color: #6a737d;
+  font-style: italic;
+}
+
+.preview-content .token.string,
+.preview-content .token.attr-value {
+  color: #032f62;
+}
+
+.preview-content .token.keyword,
+.preview-content .token.operator {
+  color: #d73a49;
+  font-weight: bold;
+}
+
+.preview-content .token.function,
+.preview-content .token.class-name {
+  color: #6f42c1;
+}
+
+.preview-content .token.number,
+.preview-content .token.boolean {
+  color: #005cc5;
+}
+
+.preview-content .token.variable {
+  color: #e36209;
+}
+
 /* Footer */
 address {
  margin-top: 30px;
@@ -668,3 +763,9 @@ address {
 .icon-parent::before {
  content: "⬆️ ";
 }
+
+/* Icônes dynamiques pour les fichiers */
+.file-icon {
+  margin-right: 0.5em;
+  font-size: 1em;
+}
Author	SHA1	Message	Date
Bertrand Benjamin	e43539d8e0	feat: use icons for files All checks were successful Deploy MinIO Explorer / deploy (push) Successful in 1m50s Details	2025-09-09 05:39:18 +02:00
Bertrand Benjamin	6dd88bf1aa	feat: add breadcrumb navigation All checks were successful Deploy MinIO Explorer / deploy (push) Successful in 51s Details	2025-09-08 22:17:08 +02:00
Bertrand Benjamin	510959340d	feat: uiux improvements. no scroll, direct link	2025-09-08 22:11:16 +02:00
Bertrand Benjamin	cc6ae5d606	feat: improve preview style All checks were successful Deploy MinIO Explorer / deploy (push) Successful in 47s Details	2025-09-06 16:58:17 +02:00
Bertrand Benjamin	ef69a6ec20	build: fix dev tool cleaning in CICD All checks were successful Deploy MinIO Explorer / deploy (push) Successful in 34s Details	2025-09-06 16:38:36 +02:00
Bertrand Benjamin	c2b7530d20	feat: add code coloration All checks were successful Deploy MinIO Explorer / deploy (push) Successful in 47s Details	2025-09-06 09:53:08 +02:00
Bertrand Benjamin	edf273e604	feat: improve directives parsing All checks were successful Deploy MinIO Explorer / deploy (push) Successful in 40s Details	2025-09-06 09:47:55 +02:00
Bertrand Benjamin	e097d19f07	fix: nothing is shown All checks were successful Deploy MinIO Explorer / deploy (push) Successful in 34s Details	2025-09-05 12:05:31 +02:00
Bertrand Benjamin	4e988fc15d	fix: avoid null error All checks were successful Deploy MinIO Explorer / deploy (push) Successful in 44s Details	2025-09-05 12:02:40 +02:00
Bertrand Benjamin	0512357fd0	fix: innerhtml All checks were successful Deploy MinIO Explorer / deploy (push) Successful in 34s Details	2025-09-05 11:58:28 +02:00