Skip to content

Commit e4a67cd

Browse files
streamtwstreamtw
committed
simplify html in grid view and list view
1 parent 430478a commit e4a67cd

File tree

4 files changed

+59
-84
lines changed

4 files changed

+59
-84
lines changed

‎public/css/lfm.css‎

Lines changed: 36 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -47,10 +47,6 @@
4747
text-overflow: ellipsis;
4848
}
4949

50-
.img-row {
51-
margin-bottom: 20px;
52-
}
53-
5450
.clickable {
5551
cursor: pointer;
5652
}
@@ -67,44 +63,52 @@
6763
display: none;
6864
}
6965

70-
.thumbnail {
71-
max-width: 210px;
72-
max-height: 210px;
73-
margin-bottom: 0 !important;
74-
}
75-
76-
.thumbnail-mobile {
77-
height: 60px;
78-
width: 60px;
79-
}
80-
8166
.square {
8267
width: 100%;
8368
padding-bottom: 100%;
8469
position: relative;
70+
border: 1px solid rgb(221, 221, 221);
71+
border-radius: 3px;
72+
// max-width: 210px;
73+
max-height: 210px;
8574
}
86-
.square > img, .square > .icon-container {
75+
.visible-xs .square {
76+
width: 60px;
77+
}
78+
.square > img {
79+
padding: 5px;
8780
position: absolute;
88-
top: 0;
89-
right: 0;
90-
bottom: 0;
91-
left: 0;
9281
max-width: 100%;
82+
max-height: 100%;
83+
margin: 0 auto;
84+
display: inline-block;
85+
vertical-align: middle;
86+
}
87+
.square > i {
88+
font-size: 80px;
89+
padding: 5px;
90+
position: absolute;
91+
top: calc(50% - 40px);
92+
left: calc(50% - 40px);
93+
}
94+
.visible-xs .square > i {
95+
font-size: 50px;
96+
padding: 0px auto;
97+
padding-top: 5px;
98+
top: calc(50% - 25px);
99+
left: calc(50% - 25px);
93100
}
94101

95-
.icon-container {
102+
.caption {
103+
margin-top: 10px;
104+
margin-bottom: 20px;
105+
}
106+
.caption > .btn-group {
96107
width: 100%;
97-
height: 100%;
98-
text-align: center;
99-
margin: 0 auto;
100108
}
101-
.icon-container:before {
102-
content: '';
103-
display: inline-block;
104-
vertical-align: middle ;
105-
height: 100%;
109+
.caption > .btn-group > .item_name {
110+
width: calc(100% - 25px);
106111
}
107-
.icon-container > i {
108-
display: inline-block;
109-
vertical-align: middle;
112+
.caption > .btn-group > .dropdown-toggle {
113+
width: 25px;
110114
}

‎public/js/script.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,10 @@ $('#list-sort-time').click(function() {
9090
// == Folder actions ==
9191
// ======================
9292

93+
$(document).on('click', '.file-item', function (e) {
94+
useFile($(this).data('id'));
95+
});
96+
9397
$(document).on('click', '.folder-item', function (e) {
9498
goTo($(this).data('id'));
9599
});
@@ -239,7 +243,7 @@ function download(file_name) {
239243
// == Ckeditor, Bootbox, preview ==
240244
// ==================================
241245

242-
function useFile(file) {
246+
function useFile(file_url) {
243247

244248
function getUrlParam(paramName) {
245249
var reParam = new RegExp('(?:[\?&]|&)' + paramName + '=([^&]+)', 'i');
@@ -293,7 +297,7 @@ function useFile(file) {
293297
window.opener.SetUrl(p,w,h);
294298
}
295299

296-
var url = getFileUrl(file);
300+
var url = file_url;
297301
var field_name = getUrlParam('field_name');
298302
var is_ckeditor = getUrlParam('CKEditor');
299303
var is_fcke = typeof data != 'undefined' && data['Properties']['Width'] != '';
@@ -337,17 +341,13 @@ function notify(message) {
337341
bootbox.alert(message);
338342
}
339343

340-
function getFileUrl(file) {
341-
return $("[id=\"" + file + "\"]").data('url');
342-
}
343-
344-
function fileView(file, timestamp) {
344+
function fileView(file_url, timestamp) {
345345
var rnd = makeRandom();
346346
bootbox.dialog({
347347
title: lang['title-view'],
348348
message: $('<img>')
349349
.addClass('img img-responsive center-block')
350-
.attr('src', getFileUrl(file) + '?timestamp=' + timestamp),
350+
.attr('src', file_url + '?timestamp=' + timestamp),
351351
size: 'large',
352352
onEscape: true,
353353
backdrop: true

‎src/views/grid-view.blade.php‎

Lines changed: 9 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -6,32 +6,19 @@
66
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 img-row">
77
<?php $item_name = $item->name; ?>
88
<?php $thumb_src = $item->thumb; ?>
9-
<?php $folder_path = $item->path; ?>
9+
<?php $item_path = $item->is_file ? $item->url : $item->path; ?>
1010

11-
@if($item->is_file)
12-
<div class="thumbnail clickable" onclick="useFile('{{ $item_name }}')">
13-
<div class="square" id="{{ $item_name }}" data-url="{{ $item->url }}">
14-
@else
15-
<div class="thumbnail clickable">
16-
<div data-id="{{ $folder_path }}" class="folder-item square">
17-
@endif
18-
@if($thumb_src)
19-
<img src="{{ $thumb_src }}">
20-
@else
21-
<div class="icon-container">
22-
<i class="fa {{ $item->icon }} fa-5x"></i>
23-
</div>
24-
@endif
25-
</div>
11+
<div class="square clickable {{ $item->is_file ? 'file' : 'folder'}}-item" data-id="{{ $item_path }}">
12+
@if($thumb_src)
13+
<img src="{{ $thumb_src }}">
14+
@else
15+
<i class="fa {{ $item->icon }} fa-5x"></i>
16+
@endif
2617
</div>
2718

2819
<div class="caption text-center">
2920
<div class="btn-group">
30-
@if($item->is_file)
31-
<button type="button" data-id="{{ $folder_path }}" class="item_name btn btn-default btn-xs folder-item">
32-
@else
33-
<button type="button" onclick="useFile('{{ $item_name }}')" class="item_name btn btn-default btn-xs">
34-
@endif
21+
<button type="button" data-id="{{ $item_path }}" class="item_name btn btn-default btn-xs {{ $item->is_file ? 'file' : 'folder'}}-item">
3522
{{ $item_name }}
3623
</button>
3724
<button type="button" class="btn btn-default dropdown-toggle btn-xs" data-toggle="dropdown" aria-expanded="false">
@@ -44,7 +31,7 @@
4431
<li><a href="javascript:download('{{ $item_name }}')"><i class="fa fa-download fa-fw"></i> {{ Lang::get('laravel-filemanager::lfm.menu-download') }}</a></li>
4532
<li class="divider"></li>
4633
@if($thumb_src)
47-
<li><a href="javascript:fileView('{{ $item_name }}', '{{ $item->updated }}')"><i class="fa fa-image fa-fw"></i> {{ Lang::get('laravel-filemanager::lfm.menu-view') }}</a></li>
34+
<li><a href="javascript:fileView('{{ $item_path }}', '{{ $item->updated }}')"><i class="fa fa-image fa-fw"></i> {{ Lang::get('laravel-filemanager::lfm.menu-view') }}</a></li>
4835
<li><a href="javascript:resizeImage('{{ $item_name }}')"><i class="fa fa-arrows fa-fw"></i> {{ Lang::get('laravel-filemanager::lfm.menu-resize') }}</a></li>
4936
<li><a href="javascript:cropImage('{{ $item_name }}')"><i class="fa fa-crop fa-fw"></i> {{ Lang::get('laravel-filemanager::lfm.menu-crop') }}</a></li>
5037
<li class="divider"></li>

‎src/views/list-view.blade.php‎

Lines changed: 6 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,7 @@
1212
<tr>
1313
<td>
1414
<i class="fa {{ $item->icon }}"></i>
15-
@if(!$item->is_file)
16-
<a class="folder-item clickable" data-id="{{ $item->path }}">
17-
@else
18-
<a href="javascript:useFile('{{ $item->name }}')" id="{{ $item->name }}" data-url="{{ $item->url }}">
19-
@endif
15+
<a class="{{ $item->is_file ? 'file' : 'folder'}}-item clickable" data-id="{{ $item->is_file ? $item->url : $item->path }}">
2016
{{ str_limit($item->name, $limit = 20, $end = '...') }}
2117
</a>
2218
</td>
@@ -50,30 +46,18 @@
5046
<td>
5147
<div class="media" style="height: 70px;">
5248
<div class="media-left">
53-
<div class="clickable thumbnail-mobile">
54-
@if(!$item->is_file)
55-
<div class="square folder-item" data-id="{{ $item->path }}">
49+
<div class="square {{ $item->is_file ? 'file' : 'folder'}}-item clickable" data-id="{{ $item->is_file ? $item->url : $item->path }}">
50+
@if($item->thumb)
51+
<img src="{{ $item->thumb }}">
5652
@else
57-
<div class="square" id="{{ $item->name }}" data-url="{{ $item->url }}">
53+
<i class="fa {{ $item->icon }} fa-5x"></i>
5854
@endif
59-
@if($item->thumb)
60-
<img src="{{ $item->thumb }}">
61-
@else
62-
<div class="icon-container">
63-
<i class="fa {{ $item->icon }} fa-5x"></i>
64-
</div>
65-
@endif
66-
</div>
6755
</div>
6856
</div>
6957
<div class="media-body" style="padding-top: 10px;">
7058
<div class="media-heading">
7159
<p>
72-
@if(!$item->is_file)
73-
<a class="folder-item clickable" data-id="{{ $item->path }}">
74-
@else
75-
<a href="javascript:useFile('{{ $item->name }}')" id="{{ $item->name }}" data-url="{{ $item->url }}">
76-
@endif
60+
<a class="{{ $item->is_file ? 'file' : 'folder'}}-item clickable" data-id="{{ $item->is_file ? $item->url : $item->path }}">
7761
{{ str_limit($item->name, $limit = 20, $end = '...') }}
7862
</a>
7963
&nbsp;&nbsp;

0 commit comments

Comments
 (0)