Skip to content

Commit 7985643

Browse files
drorganvidezdrorganvidez
committed
feat: Improves view file UI
1 parent 958cfc1 commit 7985643

File tree

1 file changed

+72
-57
lines changed

1 file changed

+72
-57
lines changed

‎app/modules/hubfile/templates/hubfile/view_file.html‎

Lines changed: 72 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -84,48 +84,58 @@
8484
<div class="row">
8585

8686
<!-- Sidebar: tabla de archivos -->
87-
<div class="col-md-3 mb-5 mb-md-0">
88-
<div class="card card-flush h-100">
89-
90-
<div class="card-header py-5">
91-
<div class="card-title">
92-
<div class="d-flex align-items-center position-relative my-1">
93-
<i class="ki-duotone ki-magnifier fs-3 position-absolute ms-4">
94-
<span class="path1"></span>
95-
<span class="path2"></span>
96-
</i>
97-
<input type="text"
98-
data-file-search
99-
class="form-control form-control-solid w-100 ps-12"
100-
placeholder="Search models" />
101-
</div>
102-
</div>
103-
</div>
104-
105-
<div class="card-body pt-0">
106-
<table class="table align-middle table-row-dashed fs-7 gy-3" id="kt_files_table">
107-
<thead>
108-
<tr class="text-muted fw-bold text-uppercase fs-8">
109-
<th>Name</th>
110-
</tr>
111-
</thead>
112-
<tbody>
113-
{% for f in hubfiles %}
114-
<tr>
115-
<td class="font-monospace">
116-
<a href="{{ f.get_url() }}"
117-
class="{% if f.id == selected_file.id %}fw-bold text-primary{% else %}text-muted{% endif %}">
118-
{{ f.name }}
119-
</a>
120-
</td>
121-
</tr>
122-
{% endfor %}
123-
</tbody>
124-
</table>
87+
<div class="col-md-3 mb-5 mb-md-0">
88+
<div class="card card-flush h-100 d-flex flex-column">
89+
90+
<!-- Header con buscador -->
91+
<div class="card-header py-5">
92+
<div class="card-title w-100"><!-- 👈 fuerza ancho completo -->
93+
<div class="d-flex align-items-center position-relative my-1 w-100"><!-- 👈 ancho completo -->
94+
<i class="ki-duotone ki-magnifier fs-3 position-absolute ms-4">
95+
<span class="path1"></span>
96+
<span class="path2"></span>
97+
</i>
98+
<input type="text"
99+
data-file-search
100+
class="form-control form-control-solid w-100 ps-12 small"
101+
placeholder="Search models" />
125102
</div>
126103
</div>
127104
</div>
128105

106+
<!-- Body con tabla -->
107+
<div class="card-body pt-0 flex-grow-1">
108+
<table class="table align-middle table-row-dashed fs-7 gy-3" id="kt_files_table">
109+
<thead>
110+
<tr class="text-muted fw-bold text-uppercase fs-8">
111+
<th>Name</th>
112+
</tr>
113+
</thead>
114+
<tbody>
115+
{% for f in hubfiles %}
116+
<tr>
117+
<td class="font-monospace">
118+
<a href="{{ f.get_url() }}"
119+
class="{% if f.id == selected_file.id %}fw-bold text-primary{% else %}text-muted{% endif %}">
120+
{{ f.name }}
121+
</a>
122+
</td>
123+
</tr>
124+
{% endfor %}
125+
</tbody>
126+
</table>
127+
</div>
128+
129+
<!-- Footer con botón ancho completo -->
130+
<div class="mt-auto d-flex justify-content-center pb-4 px-4">
131+
<a href="/datasets/download/{{ dataset.id }}" class="btn btn-sm btn-primary w-100">
132+
<i data-feather="download" class="me-1" style="width: 14px; height: 14px;"></i>
133+
Download all dataset ({{ dataset.get_file_total_size_for_human() }})
134+
</a>
135+
</div>
136+
</div>
137+
</div>
138+
129139

130140

131141
<!-- Contenido principal con tabs -->
@@ -138,22 +148,15 @@
138148
<ul class="nav nav-tabs nav-line-tabs nav-line-tabs-2x fs-6 px-4 pt-4" id="fileTabs" role="tablist" style="border-bottom: none;">
139149

140150
<li class="nav-item" role="presentation">
141-
<span class="nav-link disabled text-bold fw-bold">
151+
<span class="nav-link disabled fw-bold d-flex align-items-center fs-5">
152+
<i class="ki-duotone ki-file fs-2 mr-2">
153+
<span class="path1"></span>
154+
<span class="path2"></span>
155+
</i> &nbsp;
142156
{{ selected_file.name }}
143157
</span>
144158
</li>
145159

146-
<li class="nav-item ms-2" role="presentation">
147-
<a href="javascript:void(0);"
148-
onclick="copyCurrentUVL(this)"
149-
class="btn btn-sm btn-secondary d-flex align-items-center"
150-
data-bs-toggle="tooltip"
151-
data-bs-placement="bottom"
152-
title="Copy to clipboard">
153-
<i class="ki-duotone ki-copy"></i>
154-
Copy
155-
</a>
156-
</li>
157160

158161
<li class="nav-item ms-auto dropdown" role="presentation">
159162
<a class="btn btn-sm btn-secondary dropdown-toggle d-flex align-items-center"
@@ -191,7 +194,6 @@
191194
</ul>
192195
</li>
193196

194-
195197

196198
<li class="nav-item ms-2" role="presentation">
197199
<a href="{{ selected_file.get_ide_url() }}"
@@ -200,7 +202,7 @@
200202
class="btn btn-sm btn-secondary d-flex align-items-center">
201203
<img src="{{ url_for('static', filename='media/logos/flamapy_ide.svg') }}"
202204
alt="Flamapy IDE"
203-
height="20"
205+
height="18"
204206
class="me-2" />
205207
<i class="ki-outline ki-exit-right-corner"></i>
206208
</a>
@@ -212,10 +214,23 @@
212214
<!-- UVL a la izquierda -->
213215
<div class="col-md-6">
214216
<div class="bg-light rounded border p-4 h-100">
215-
<img src="{{ url_for('static', filename='media/logos/uvl_logo.svg') }}"
216-
alt="UVL Logo"
217-
height="24"
218-
class="ms-auto mb-2" />
217+
<div class="d-flex align-items-center justify-content-between mb-2">
218+
<!-- Logo a la izquierda -->
219+
<img src="{{ url_for('static', filename='media/logos/uvl_logo.svg') }}"
220+
alt="UVL Logo"
221+
height="24" />
222+
223+
<!-- Botón a la derecha -->
224+
<a href="javascript:void(0);"
225+
onclick="copyCurrentUVL(this)"
226+
class="btn btn-sm btn-secondary d-flex align-items-center"
227+
data-bs-toggle="tooltip"
228+
data-bs-placement="bottom"
229+
title="Copy to clipboard">
230+
<i class="ki-duotone ki-copy me-1"></i>
231+
Copy
232+
</a>
233+
</div>
219234
<pre class="m-0" style="white-space: pre-wrap; font-size: 0.85rem;">{{ uvl_content }}</pre>
220235

221236
</div>
@@ -299,7 +314,7 @@
299314

300315
$(function () {
301316
const table = $('#kt_files_table').DataTable({
302-
pageLength: 10,
317+
pageLength: 15,
303318
ordering: false,
304319
lengthChange: false,
305320
info: false,

0 commit comments

Comments
 (0)