Skip to content

Commit a037633

Browse files
author
mominur-helios
committed
make right panel table
1 parent 0d8f808 commit a037633

File tree

1 file changed

+89
-55
lines changed

1 file changed

+89
-55
lines changed

‎templates/pages/file-manager.html‎

Lines changed: 89 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,15 @@
66
ul li {
77
list-style-type: none;
88
}
9+
.dot-separator {
10+
height: 2px;
11+
width: 2px;
12+
background: #000;
13+
border-radius: 50%;
14+
}
15+
.actions span {
16+
cursor: pointer;
17+
}
918
</style>
1019
{% endblock extrastyle %}
1120

@@ -46,70 +55,95 @@
4655
</div>
4756
<div class="col-lg-9 border py-2">
4857
{% if files %}
49-
<div class="d-flex justify-content-end mb-3">
50-
<label for="fileInput">
51-
<i class="fa-solid fa-upload text-primary fs-3"></i>
52-
</label>
53-
<form method="post" action="{% url 'upload_file' %}" id="upload-file" enctype="multipart/form-data">
54-
{% csrf_token %}
55-
<input type="hidden" name="directory" value="{{ selected_directory }}">
56-
<input id="fileInput" class="d-none" onchange="submitForm()" type="file" name="file" required>
57-
</form>
58-
</div>
59-
<ul>
60-
<div class="row">
58+
<div class="table-responsive">
59+
<table class="table">
60+
<tr>
61+
<th scope="col">File Name</th>
62+
<th scope="col">File Type</th>
63+
<th scope="col">Actions</th>
64+
</tr>
6165
{% for file in files %}
62-
<div class="col-lg-3 mb-3 rounded p-1 shadow-sm">
63-
{% if file.filename|file_extension in ".jpg, .png, .gif" %}
64-
<img height="170px" data-bs-toggle="modal" data-bs-target="#file-{{forloop.counter}}" class="w-100"
65-
src="/media/{{ file.file }}" alt="df">
66-
{% elif file.filename|file_extension in ".mp4, .webm, .ogg" %}
67-
<video height="170px" data-bs-toggle="modal" data-bs-target="#file-{{forloop.counter}}" class="w-100"
68-
src="/media/{{ file.file }}"></video>
69-
{% else %}
70-
{% if file.file|file_extension in ".csv, .txt" %}
71-
<a href="/media/{{ file.file }}">{{ file.filename }}</a>
72-
{% elif file.file|file_extension == '.pdf' %}
73-
<object class="d-block" data="/media/{{ file.file }}" type="application/pdf" width="100%" height="170px">
74-
<a href="/media/{{ file.file }}">{{ file.filename }}</a>
75-
</object>
76-
{% endif %}
77-
{% endif %}
78-
<!-- Modal -->
79-
<div class="modal fade" id="file-{{forloop.counter}}" data-bs-backdrop="static" data-bs-keyboard="false"
80-
tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
81-
<div class="modal-dialog modal-dialog-centered modal-lg">
82-
<div class="modal-content">
83-
<div class="modal-header">
84-
<h1 class="modal-title fs-5" id="staticBackdropLabel">{{ file.filename }}</h1>
85-
<div class="" data-bs-dismiss="modal" aria-label="Close">
86-
<i class="fa-solid fa-circle-xmark fs-5"></i>
87-
</div>
88-
</div>
89-
<div class="modal-body">
90-
{% if file.filename|file_extension in ".jpg, .png, .gif" %}
91-
<img class="w-100" src="/media/{{ file.file }}" alt="df">
92-
{% elif file.filename|file_extension in ".mp4, .webm, .ogg" %}
93-
<video class="w-100" height="240" controls>
94-
<source src="/media/{{ file.file }}" type="video/mp4">
95-
</video>
96-
{% endif %}
66+
<tr>
67+
<td>{{ file.filename }}</td>
68+
<td>{{ file.filename|file_extension|cut:"."|upper }}</td>
69+
<td>
70+
<div class="d-flex align-items-center actions">
71+
{% if file.file|file_extension in ".csv, .txt" %}
72+
<a href="/media/{{ file.file }}">
73+
<i class="fa-solid fa-eye text-primary"></i>
74+
</a>
75+
{% elif file.file|file_extension == '.pdf' %}
76+
<object data="/media/{{ file.file }}" type="application/pdf">
77+
<a href="/media/{{ file.file }}">
78+
<i class="fa-solid fa-eye text-primary"></i>
79+
</a>
80+
</object>
81+
{% else %}
82+
<span data-bs-toggle="modal" data-bs-target="#file-{{forloop.counter}}">
83+
<i class="fa-solid fa-eye text-primary"></i>
84+
</span>
85+
{% endif %}
86+
<div class="dot-separator mx-2"></div>
87+
<span>
88+
<a href="{% url 'download_file' file.file|encoded_file_path %}">
89+
<i class="fa-solid fa-download text-success"></i>
90+
</a>
91+
</span>
92+
<div class="dot-separator mx-2"></div>
93+
<span data-bs-toggle="modal" data-bs-target="#delete-{{forloop.counter}}">
94+
<i class="fa-solid fa-trash text-danger"></i>
95+
</span>
96+
</div>
97+
</td>
98+
</tr>
99+
<!-- Modal -->
100+
<div class="modal fade" id="file-{{forloop.counter}}" data-bs-backdrop="static" data-bs-keyboard="false"
101+
tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
102+
<div class="modal-dialog modal-dialog-centered modal-lg">
103+
<div class="modal-content">
104+
<div class="modal-header">
105+
<h1 class="modal-title fs-5" id="staticBackdropLabel">{{ file.filename }}</h1>
106+
<div class="" data-bs-dismiss="modal" aria-label="Close">
107+
<i class="fa-solid fa-circle-xmark fs-5"></i>
97108
</div>
98109
</div>
110+
<div class="modal-body">
111+
{% if file.filename|file_extension in ".jpg, .png, .gif" %}
112+
<img class="w-100" src="/media/{{ file.file }}" alt="df">
113+
{% elif file.filename|file_extension in ".mp4, .webm, .ogg" %}
114+
<video class="w-100" height="240" controls>
115+
<source src="/media/{{ file.file }}" type="video/mp4">
116+
</video>
117+
{% endif %}
118+
</div>
99119
</div>
100120
</div>
101-
<hr />
102-
<div class="">
103-
<a href="{% url 'delete_file' file.file|encoded_file_path %}"><i class="fa-solid fa-trash text-danger"></i></a>
104-
<span>.</span>
105-
<a href="{% url 'download_file' file.file|encoded_file_path %}"><i class="fa-solid fa-download text-success"></i></a>
121+
</div>
122+
<!-- Delete Modal -->
123+
<div class="modal fade" id="delete-{{forloop.counter}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
124+
<div class="modal-dialog">
125+
<div class="modal-content">
126+
<div class="modal-header">
127+
<h1 class="modal-title fs-5" id="exampleModalLabel">Delete File</h1>
128+
<div class="" data-bs-dismiss="modal" aria-label="Close">
129+
<i class="fa-solid fa-circle-xmark fs-5"></i>
130+
</div>
131+
</div>
132+
<div class="modal-body">
133+
{{file.filename}}
134+
</div>
135+
<div class="modal-footer">
136+
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
137+
<a class="btn btn-danger" href="{% url 'delete_file' file.file|encoded_file_path %}">Delete</a>
138+
</div>
139+
</div>
106140
</div>
107141
</div>
108142
{% endfor %}
109-
</div>
110-
</ul>
143+
</table>
144+
</div>
111145
{% else %}
112-
<p>Select a directory</p>
146+
<p>No files</p>
113147
{% endif %}
114148
</div>
115149
</div>

0 commit comments

Comments
 (0)