Skip to content

Commit f2afbf1

Browse files
streamtwstreamtw
committed
refactor resize page for mobile devices
1 parent 92fdf81 commit f2afbf1

File tree

5 files changed

+105
-55
lines changed

5 files changed

+105
-55
lines changed

‎public/css/lfm.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
11
/* General */
22

3-
body {
4-
padding-bottom: 4rem;
5-
}
6-
73
a {
84
color: #333844;
95
text-decoration: none !important;
@@ -142,6 +138,10 @@ a {
142138

143139
/* Items */
144140

141+
#content.preserve_actions_space {
142+
padding-bottom: 4rem; /* preserve space for main actions */
143+
}
144+
145145
.square {
146146
cursor: pointer;
147147
position: relative;

‎public/js/script.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -283,7 +283,8 @@ var refreshFoldersAndItems = function (data) {
283283

284284
var hideNavAndShowEditor = function (data) {
285285
$('#nav-buttons > ul').addClass('d-none');
286-
$('#content').html(data);
286+
$('#content').html(data).removeClass('preserve_actions_space');
287+
$('#actions').addClass('d-none');
287288
}
288289

289290
function loadFolders() {
@@ -306,7 +307,7 @@ function loadItems() {
306307
$('#content').html('').removeAttr('class');
307308

308309
if (hasItems) {
309-
$('#content').addClass(response.display);
310+
$('#content').addClass(response.display).addClass('preserve_actions_space');
310311

311312
items.forEach(function (item, index) {
312313
items[(new Date()).getTime()] = item;

‎src/lang/en/lfm.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@
6363
'btn-close' => 'Close',
6464
'btn-crop' => 'Crop',
6565
'btn-copy-crop' => 'Copy & Crop',
66+
'btn-crop-free' => 'Free',
6667
'btn-cancel' => 'Cancel',
6768
'btn-confirm' => 'Confirm',
6869
'btn-resize' => 'Resize',

‎src/lang/zh-TW/lfm.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@
6262
'btn-close' => '關閉',
6363
'btn-crop' => '裁剪',
6464
'btn-copy-crop' => '裁剪為新的檔案',
65+
'btn-crop-free' => '不限比例',
6566
'btn-cancel' => '取消',
6667
'btn-confirm' => '確認',
6768
'btn-resize' => '縮放',

‎src/views/resize.blade.php‎

Lines changed: 96 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,81 @@
1-
<div class="row pt-5">
2-
<div class="col-md-8" id="containment">
1+
<style>
2+
#work_space {
3+
padding: 30px;
4+
height: 100vw;
5+
display: flex;
6+
justify-content: center;
7+
align-items: center;
8+
}
9+
10+
@media screen and (min-width: 768px) {
11+
#work_space {
12+
width: unset;
13+
height: unset;
14+
}
15+
}
16+
</style>
17+
18+
<div class="container">
19+
<div class="row">
20+
<div class="col-md-8 bg-light" id="work_space">
21+
<div id="containment" class="d-none d-md-inline">
322
<img id="resize" src="{{ $img->url . '?timestamp=' . $img->time }}" height="{{ $height }}" width="{{ $width }}">
23+
</div>
24+
<div id="resize_mobile" style="background-image: url({{ $img->url . '?timestamp=' . $img->time }})" class="d-block d-md-none"></div>
425
</div>
5-
<div class="col-md-4">
6-
<table class="table table-compact table-striped">
26+
<div class="col-md-4 pt-3">
27+
<table class="table table-compact table-striped">
728
<thead></thead>
829
<tbody>
9-
@if ($scaled)
10-
<tr>
11-
<td>{{ trans('laravel-filemanager::lfm.resize-ratio') }}</td>
12-
<td>{{ number_format($ratio, 2) }}</td>
13-
</tr>
14-
<tr>
15-
<td>{{ trans('laravel-filemanager::lfm.resize-scaled') }}</td>
16-
<td>
17-
{{ trans('laravel-filemanager::lfm.resize-true') }}
18-
</td>
19-
</tr>
20-
@endif
21-
<tr>
22-
<td>{{ trans('laravel-filemanager::lfm.resize-old-height') }}</td>
23-
<td>{{ $original_height }}px</td>
24-
</tr>
25-
<tr>
26-
<td>{{ trans('laravel-filemanager::lfm.resize-old-width') }}</td>
27-
<td>{{ $original_width }}px</td>
28-
</tr>
29-
<tr>
30-
<td>{{ trans('laravel-filemanager::lfm.resize-new-height') }}</td>
31-
<td><span id="height_display"></span></td>
32-
</tr>
33-
<tr>
34-
<td>{{ trans('laravel-filemanager::lfm.resize-new-width') }}</td>
35-
<td><span id="width_display"></span></td>
36-
</tr>
30+
@if ($scaled)
31+
<tr>
32+
<td class="text-nowrap">{{ trans('laravel-filemanager::lfm.resize-ratio') }}</td>
33+
<td class="text-right">{{ number_format($ratio, 2) }}</td>
34+
</tr>
35+
<tr>
36+
<td class="text-nowrap">{{ trans('laravel-filemanager::lfm.resize-scaled') }}</td>
37+
<td class="text-right">
38+
{{ trans('laravel-filemanager::lfm.resize-true') }}
39+
</td>
40+
</tr>
41+
@endif
42+
<tr>
43+
<td class="text-nowrap">{{ trans('laravel-filemanager::lfm.resize-old-height') }}</td>
44+
<td class="text-right">{{ $original_height }}px</td>
45+
</tr>
46+
<tr>
47+
<td class="text-nowrap">{{ trans('laravel-filemanager::lfm.resize-old-width') }}</td>
48+
<td class="text-right">{{ $original_width }}px</td>
49+
</tr>
50+
<tr>
51+
<td class="text-nowrap" style="vertical-align: middle">{{ trans('laravel-filemanager::lfm.resize-new-height') }}</td>
52+
<td class="text-right"><input type="text" id="height_display" class="form-control w-50 d-inline mr-2" value="{{ $height }}">px</td>
53+
</tr>
54+
<tr>
55+
<td class="text-nowrap" style="vertical-align: middle">{{ trans('laravel-filemanager::lfm.resize-new-width') }}</td>
56+
<td class="text-right"><input type="text" id="width_display" class="form-control w-50 d-inline mr-2" value="{{ $width }}">px</td>
57+
</tr>
3758
</tbody>
38-
</table>
39-
<button class="btn btn-primary" onclick="doResize()">{{ trans('laravel-filemanager::lfm.btn-resize') }}</button>
40-
<button class="btn btn-info" onclick="loadItems()">{{ trans('laravel-filemanager::lfm.btn-cancel') }}</button>
41-
<input type="hidden" id="img" name="img" value="{{ $img->name }}">
42-
<input type="hidden" name="ratio" value="{{ $ratio }}"><br>
43-
<input type="hidden" name="scaled" value="{{ $scaled }}"><br>
44-
<input type="hidden" id="original_height" name="original_height" value="{{ $original_height }}"><br>
45-
<input type="hidden" id="original_width" name="original_width" value="{{ $original_width }}"><br>
46-
<input type="hidden" id="height" name="height" value="{{ $height }}"><br>
47-
<input type="hidden" id="width" name="width" value="{{ $width }}">
48-
</div>
59+
</table>
60+
<div class="d-flex mb-3">
61+
<button class="btn btn-secondary w-50 mr-1" onclick="loadItems()">{{ trans('laravel-filemanager::lfm.btn-cancel') }}</button>
62+
<button class="btn btn-primary w-50" onclick="doResize()">{{ trans('laravel-filemanager::lfm.btn-resize') }}</button>
63+
</div>
64+
65+
<input type="hidden" id="img" name="img" value="{{ $img->name }}">
66+
<input type="hidden" name="ratio" value="{{ $ratio }}">
67+
<input type="hidden" name="scaled" value="{{ $scaled }}">
68+
<input type="hidden" id="original_height" name="original_height" value="{{ $original_height }}">
69+
<input type="hidden" id="original_width" name="original_width" value="{{ $original_width }}">
70+
<input type="hidden" id="height" name="height" value="{{ $height }}">
71+
<input type="hidden" id="width" name="width" value="{{ $width }}">
72+
</div>
73+
</div>
4974
</div>
5075

5176
<script>
5277
$(document).ready(function () {
53-
$("#height_display").html($("#resize").height() + "px");
54-
$("#width_display").html($("#resize").width() + "px");
78+
renderResizedValues($("#width_display").val(), $("#height_display").val());
5579
5680
$("#resize").resizable({
5781
aspectRatio: {{ config('lfm.resize_aspectRatio')?'true':'false' }},
@@ -60,14 +84,37 @@
6084
@endif
6185
handles: "n, e, s, w, se, sw, ne, nw",
6286
resize: function (event, ui) {
63-
$("#width").val($("#resize").width());
64-
$("#height").val($("#resize").height());
65-
$("#height_display").html($("#resize").height() + "px");
66-
$("#width_display").html($("#resize").width() + "px");
87+
renderResizedValues(ui.size.width, ui.size.height);
6788
}
6889
});
6990
});
7091
92+
$('#width_display, #height_display').change(function () {
93+
var newWidth = $("#width_display").val();
94+
var newHeight = $("#height_display").val();
95+
96+
renderResizedValues(newWidth, newHeight);
97+
$("#containment > .ui-wrapper").width(newWidth).height(newHeight);
98+
$("#resize").width(newWidth).height(newHeight);
99+
});
100+
101+
function renderResizedValues(newWidth, newHeight) {
102+
$("#width").val(newWidth);
103+
$("#height").val(newHeight);
104+
$("#width_display").val(newWidth);
105+
$("#height_display").val(newHeight);
106+
107+
$('#resize_mobile').css('background-size', '100% 100%');
108+
109+
if (newWidth < newHeight) {
110+
$('#resize_mobile').css('width', (newWidth / newHeight * 100) + '%').css('padding-bottom', '100%');
111+
} else if (newWidth > newHeight) {
112+
$('#resize_mobile').css('width', '100%').css('padding-bottom', (newHeight / newWidth * 100) + '%');
113+
} else { // newWidth === newHeight
114+
$('#resize_mobile').css('width', '100%').css('padding-bottom', '100%');
115+
}
116+
}
117+
71118
function doResize() {
72119
performLfmRequest('doresize', {
73120
img: $("#img").val(),

0 commit comments

Comments
 (0)