Overview
Comment:Fix various issues with tables, forms, and inputs on mobile/small screens
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | trunk | stable
Files: files | file ages | folders
SHA3-256: 9c63572cee20f453dd4d179a1d2e33115519ab6f372c69d47a3005a9ff91cbd8
User & Date: bohwaz on 2024-03-29 14:25:00
Other Links: manifest | tags
Context
2024-03-29
14:25
Fix various issues with tables, forms, and inputs on mobile/small screens Leaf check-in: 9c63572cee user: bohwaz tags: trunk, stable
2024-03-28
20:37
Improve UX/design of cheques counter check-in: c86b73c2ca user: bohwaz tags: trunk, stable
Changes

Modified src/include/lib/Paheko/Entities/Files/File.php from [1be452985b] to [3d95d83c54].

19
20
21
22
23
24
25

26
27
28
29
30
31
32
use Paheko\Utils;
use Paheko\Entities\Web\Page;
use Paheko\Web\Render\Render;
use Paheko\Web\Router;
use Paheko\Web\Cache as Web_Cache;
use Paheko\Files\WebDAV\Storage;
use Paheko\Users\DynamicFields;


use Paheko\Files\Files;

use const Paheko\{WWW_URL, BASE_URL, ENABLE_XSENDFILE, SECRET_KEY, WOPI_DISCOVERY_URL, SHARED_CACHE_ROOT, PDFTOTEXT_COMMAND, STATIC_CACHE_ROOT, HOSTING_PROVIDER};

class File extends Entity
{







>







19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
use Paheko\Utils;
use Paheko\Entities\Web\Page;
use Paheko\Web\Render\Render;
use Paheko\Web\Router;
use Paheko\Web\Cache as Web_Cache;
use Paheko\Files\WebDAV\Storage;
use Paheko\Users\DynamicFields;
use Paheko\UserTemplate\CommonFunctions;

use Paheko\Files\Files;

use const Paheko\{WWW_URL, BASE_URL, ENABLE_XSENDFILE, SECRET_KEY, WOPI_DISCOVERY_URL, SHARED_CACHE_ROOT, PDFTOTEXT_COMMAND, STATIC_CACHE_ROOT, HOSTING_PROVIDER};

class File extends Entity
{
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
			}
			else {
				$thumb = 'icon';
			}
		}

		if ($thumb === 'icon') {
			$label = sprintf('<span data-icon="%s"></span>', Utils::iconUnicode($this->iconShape()));
		}
		elseif ($thumb) {
			$label = sprintf('<img src="%s" alt="%s" onerror="this.classList.add(\'broken\');" />', htmlspecialchars($this->thumb_url($thumb)), htmlspecialchars($this->name));
		}
		else {
			$label = preg_replace('/[_.-]/', '&shy;$0', htmlspecialchars($this->name));
		}







|







951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
			}
			else {
				$thumb = 'icon';
			}
		}

		if ($thumb === 'icon') {
			$label = CommonFunctions::icon(['shape' => $this->iconShape()]);
		}
		elseif ($thumb) {
			$label = sprintf('<img src="%s" alt="%s" onerror="this.classList.add(\'broken\');" />', htmlspecialchars($this->thumb_url($thumb)), htmlspecialchars($this->name));
		}
		else {
			$label = preg_replace('/[_.-]/', '&shy;$0', htmlspecialchars($this->name));
		}

Modified src/www/admin/static/handheld.css from [04e6d59298] to [02da8a80cc].

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
body {
	background-position: -180px 0px;
	background-attachment: scroll;
	font-size: 11pt;
}

body main {
	padding-bottom: 7em;
}

input[type=number], input[type=color],
input[type=email], input[type=file], input[type=url], input[type=month],
input[type=password], input[type=range], input[type=search], input[type=tel],
textarea, select, .input-list, .file-selector, input[type=text]:not([data-input]):not([size]) {
	min-width: 0;
	max-width: calc(100% - 2em);
	width: calc(95% - 2em);
}

input[size] {
	width: auto;
}










|
|


|







1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
body {
	background-position: -180px 0px;
	background-attachment: scroll;
	font-size: 11pt;
}

body main {
	padding-bottom: 7em;
}

input[type=number],
input[type=email], input[type=url], input[type=month],
input[type=password], input[type=range], input[type=search], input[type=tel],
textarea, select, .input-list, .file-selector, input[type=text]:not([data-input]):not([size]) {
	min-width: 5em;
	max-width: calc(100% - 2em);
	width: calc(95% - 2em);
}

input[size] {
	width: auto;
}

Modified src/www/admin/static/styles/00-reset.css from [f7194bdd79] to [4dde977c00].

29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
    list-style: none;
}
caption, th {
    text-align: left;
}
article, aside, figure, section, header, footer, main { display: block; }

span { display: inline-block; }
a span { text-decoration: inherit; }

h1  { font-size: 2em; }
h2  { font-size: 1.5em; }
h3  { font-size: 1.2em; }
h4  { font-size: 1em; }
h5  { font-size: 0.9em; }
h6  { font-size: 0.8em; }







|
<







29
30
31
32
33
34
35
36

37
38
39
40
41
42
43
    list-style: none;
}
caption, th {
    text-align: left;
}
article, aside, figure, section, header, footer, main { display: block; }

span {display: inline-block;}


h1  { font-size: 2em; }
h2  { font-size: 1.5em; }
h3  { font-size: 1.2em; }
h4  { font-size: 1em; }
h5  { font-size: 0.9em; }
h6  { font-size: 0.8em; }

Modified src/www/admin/static/styles/02-common.css from [5eb61e90ef] to [82a5382123].

553
554
555
556
557
558
559

560
561
562
563
564
565
566
    border-radius: .5rem;
    background: rgba(var(--gSecondColor), 0.1);
    padding: .5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

table .files-list, table .files-list figure {
    margin: 0;
}

.files-list figure .actions {







>







553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
    border-radius: .5rem;
    background: rgba(var(--gSecondColor), 0.1);
    padding: .5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}

table .files-list, table .files-list figure {
    margin: 0;
}

.files-list figure .actions {

Modified src/www/admin/static/styles/03-forms.css from [19030c776d] to [30a4cc2955].

24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
}

fieldset.header p input {
    font-size: 1.5em;
}

/* Override selector in 06-tables.css */
table tr.clickable:hover, table tr.clickable:nth-child(even):hover {
    cursor: pointer;
    color: #633;
    background: #ffc;
}

table tr.clickable:hover button, table tr.focused button {
    color: rgb(var(--gHoverLinkColor));
}

table tr.focused {
    color: #633;
    background: #ffc !important;
    box-shadow: 0 0 5px .2rem #990;
}

dl dt label {
    font-weight: bold;







|





|



|







24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
}

fieldset.header p input {
    font-size: 1.5em;
}

/* Override selector in 06-tables.css */
tbody tr.clickable:hover, tbody tr.clickable:nth-child(even):hover {
    cursor: pointer;
    color: #633;
    background: #ffc;
}

tbody tr.clickable:hover button, tbody tr.focused button {
    color: rgb(var(--gHoverLinkColor));
}

tbody tr.focused {
    color: #633;
    background: #ffc !important;
    box-shadow: 0 0 5px .2rem #990;
}

dl dt label {
    font-weight: bold;
100
101
102
103
104
105
106











107
108
109
110
111
112
113
    color: rgb(var(--gTextColor));
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

textarea.full-width, input.full-width {
    width: calc(100% - 1.2rem);
}












input:not(:placeholder-shown):focus:invalid, textarea:not(:placeholder-shown):focus:invalid {
    border-color: rgb(var(--gHoverLinkColor));
    box-shadow: 0 0 5px .3rem rgba(var(--gHoverLinkColor), 0.5);
}

input.time {







>
>
>
>
>
>
>
>
>
>
>







100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
    color: rgb(var(--gTextColor));
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

textarea.full-width, input.full-width {
    width: calc(100% - 1.2rem);
}

tbody input[type=text], tbody input[type=number], tbody input[type=color],
tbody input[type=date], tbody input[type=datetime-local], tbody input[type=datetime],
tbody input[type=time], tbody input[type=week], tbody input[type=year],
tbody input[type=email], tbody input[type=file], tbody input[type=url], tbody input[type=month],
tbody input[type=password], tbody input[type=range], tbody input[type=search], tbody input[type=tel],
tbody textarea, tbody select {
    min-width: 5em;
    width: calc(100% - 1.2rem);
}


input:not(:placeholder-shown):focus:invalid, textarea:not(:placeholder-shown):focus:invalid {
    border-color: rgb(var(--gHoverLinkColor));
    box-shadow: 0 0 5px .3rem rgba(var(--gHoverLinkColor), 0.5);
}

input.time {
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186





187
188
189
190
191
192
193
194
195
196
197
198
199
200


201
202
203
204
205
206
207
208

209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235

236
237
238
239
240




241
242
243
244
245
246
247
input[type=submit], input[type=button], button, input[type=file], input[type=color] {
    border-radius: 1em;
    border: none;
    box-shadow: 0px 0px 5px 0 var(--gLightBorderColor);
    cursor: pointer;
    border: 2px solid rgba(var(--gMainColor), 0.5);
    background: rgba(var(--gSecondColor), 0.2);
    display: inline-block;
    font-size: inherit;
    border-radius: .2em;
    padding: .2em .4em;
    margin: .2em .5em;
    text-decoration: none;
    transition: color .3s, background-color .3s;
    color: rgb(var(--gTextColor));





}

input:focus, button:focus, select:focus, textarea:focus, input[type=radio]:focus + label::before, input[type=checkbox]:focus + label::before {
    box-shadow: 0 0 5px .2rem rgba(var(--gMainColor), 0.5);
    outline: 0;
}

a.icn-btn, b.btn {
    cursor: pointer;
    color: rgb(var(--gTextColor));
    border: 1px solid rgba(var(--gMainColor), 0.5);
    background: rgba(var(--gSecondColor), 0.1);
    user-select: none;
    display: inline-block;


    font-size: inherit;
    border-radius: .2em;
    padding: .2em .4em;
    margin: .2em .5em;
    white-space: pre;
    transition: color .3s, background-color .3s;
    text-decoration: underline;
    font-weight: normal;

}

a.icn-btn > span {
    text-decoration: underline;
    text-decoration-color: rgba(var(--gTextColor), 0.25);
}

a.icn-btn:hover span {
    text-decoration-color: rgba(var(--gHoverLinkColor), 1) !important;
}

b.btn {
    cursor: unset;
    text-decoration: none;
    border-bottom: 1px dashed rgba(var(--gMainColor), 0.5);
}

[data-icon]:before, .main[data-icon]:after {
    display: inline-block;
    font-family: "paheko", sans-serif;
    text-shadow: 1px 1px 1px var(--gLightBorderColor);
    padding-right: .5em;
    font-size: 1.2em;
    line-height: .8em;
    vertical-align: middle;
    content: attr(data-icon);
    font-weight: normal;

}

[data-icon]:empty:before {
    padding: 0;
}





/* Custom SVG icon */
.icn-btn > .icon {
    display: inline-block;
    padding-right: .3em;
    height: 1em;
    width: 1em;







<







>
>
>
>
>













|
>
>








>


















|


<





>





>
>
>
>







183
184
185
186
187
188
189

190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247

248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
input[type=submit], input[type=button], button, input[type=file], input[type=color] {
    border-radius: 1em;
    border: none;
    box-shadow: 0px 0px 5px 0 var(--gLightBorderColor);
    cursor: pointer;
    border: 2px solid rgba(var(--gMainColor), 0.5);
    background: rgba(var(--gSecondColor), 0.2);

    font-size: inherit;
    border-radius: .2em;
    padding: .2em .4em;
    margin: .2em .5em;
    text-decoration: none;
    transition: color .3s, background-color .3s;
    color: rgb(var(--gTextColor));
    display: inline-flex;
    flex-wrap: wrap;
    column-gap: .5em;
    align-items: center;
    justify-content: center;
}

input:focus, button:focus, select:focus, textarea:focus, input[type=radio]:focus + label::before, input[type=checkbox]:focus + label::before {
    box-shadow: 0 0 5px .2rem rgba(var(--gMainColor), 0.5);
    outline: 0;
}

a.icn-btn, b.btn {
    cursor: pointer;
    color: rgb(var(--gTextColor));
    border: 1px solid rgba(var(--gMainColor), 0.5);
    background: rgba(var(--gSecondColor), 0.1);
    user-select: none;
    display: inline-flex;
    column-gap: .5em;
    align-items: center;
    font-size: inherit;
    border-radius: .2em;
    padding: .2em .4em;
    margin: .2em .5em;
    white-space: pre;
    transition: color .3s, background-color .3s;
    text-decoration: underline;
    font-weight: normal;
    text-decoration: none;
}

a.icn-btn > span {
    text-decoration: underline;
    text-decoration-color: rgba(var(--gTextColor), 0.25);
}

a.icn-btn:hover span {
    text-decoration-color: rgba(var(--gHoverLinkColor), 1) !important;
}

b.btn {
    cursor: unset;
    text-decoration: none;
    border-bottom: 1px dashed rgba(var(--gMainColor), 0.5);
}

[data-icon]:before, .main[data-icon]:after {
    display: block;
    font-family: "paheko", sans-serif;
    text-shadow: 1px 1px 1px var(--gLightBorderColor);

    font-size: 1.2em;
    line-height: .8em;
    vertical-align: middle;
    content: attr(data-icon);
    font-weight: normal;
    text-decoration: none;
}

[data-icon]:empty:before {
    padding: 0;
}

span[data-icon] {
    text-decoration: none;
}

/* Custom SVG icon */
.icn-btn > .icon {
    display: inline-block;
    padding-right: .3em;
    height: 1em;
    width: 1em;
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278

button.main[data-icon]:before, .icn-btn.main:before {
    display: none;
}

button.main[data-icon]:after, .icn-btn[data-icon]:after {
    padding: 0;
    padding-left: .5em;
    padding-right: 0;
    color: rgba(var(--gSecondColor));
    font-size: 1.5rem;
    line-height: .2em;
}

.submit .minor {
    font-size: .9em;







<
<







285
286
287
288
289
290
291


292
293
294
295
296
297
298

button.main[data-icon]:before, .icn-btn.main:before {
    display: none;
}

button.main[data-icon]:after, .icn-btn[data-icon]:after {
    padding: 0;


    color: rgba(var(--gSecondColor));
    font-size: 1.5rem;
    line-height: .2em;
}

.submit .minor {
    font-size: .9em;
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
form .input-list .label {
    padding: .4rem .6rem;
}

form .input-list button {
    padding: .4rem .6rem;
    align-self: stretch;
    flex-shrink: 0;
    margin: 0;
    border: none;
}

form .input-list .label button {
    padding: .2rem;
    border: none;







<







492
493
494
495
496
497
498

499
500
501
502
503
504
505
form .input-list .label {
    padding: .4rem .6rem;
}

form .input-list button {
    padding: .4rem .6rem;
    align-self: stretch;

    margin: 0;
    border: none;
}

form .input-list .label button {
    padding: .2rem;
    border: none;
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
    font-family: inherit;
    margin: .1rem;
    padding: .1rem;
    border: 1px solid var(--gLightBorderColor);
    text-align: center;
}

.datepicker table {
    border-collapse: collapse;
    width: 100%;
}

.datepicker thead td {
    font-size: 80%;
    color: var(--gBorderColor);







|







619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
    font-family: inherit;
    margin: .1rem;
    padding: .1rem;
    border: 1px solid var(--gLightBorderColor);
    text-align: center;
}

.datepicker tbody {
    border-collapse: collapse;
    width: 100%;
}

.datepicker thead td {
    font-size: 80%;
    color: var(--gBorderColor);
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
    width: calc(100% - 2em);
}

#queryBuilder .column select, #queryBuilderForm .actions select {
    max-width: 15em;
}

#queryBuilder table td {
    vertical-align: top;
    padding: .1em .2em;
}

#queryBuilder table td.buttons {
    white-space: nowrap;
}

#queryBuilder input[type=button], #queryBuilder .values input {
    margin: .1em;
}

#queryBuilderForm .actions label {
    margin: 0 .5em;
}

#queryBuilder table .values label {
    margin: 0 .3em;
}

#queryBuilderForm input[type=number] {
    width: 4em;
}








|




|











|







674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
    width: calc(100% - 2em);
}

#queryBuilder .column select, #queryBuilderForm .actions select {
    max-width: 15em;
}

#queryBuilder tbody td {
    vertical-align: top;
    padding: .1em .2em;
}

#queryBuilder tbody td.buttons {
    white-space: nowrap;
}

#queryBuilder input[type=button], #queryBuilder .values input {
    margin: .1em;
}

#queryBuilderForm .actions label {
    margin: 0 .5em;
}

#queryBuilder tbody .values label {
    margin: 0 .3em;
}

#queryBuilderForm input[type=number] {
    width: 4em;
}

950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971

samp.copy:hover {
    color: rgb(var(--gTextColor));
    box-shadow: 0px 0px 5px var(--gBorderColor);
}

@media screen and (max-width: 1279px) {
    #queryBuilder table tr {
        display: flex;
        flex-wrap: wrap;
        padding: .5em 0;
        margin-left: 6rem;
        border-top: .2rem solid #ccc;
        clear: both;
    }
    #queryBuilder table td {
        display: block;
    }
    #queryBuilder table td.buttons {
        margin-left: -6rem;
    }
}







|







|


|



969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990

samp.copy:hover {
    color: rgb(var(--gTextColor));
    box-shadow: 0px 0px 5px var(--gBorderColor);
}

@media screen and (max-width: 1279px) {
    #queryBuilder tbody tr {
        display: flex;
        flex-wrap: wrap;
        padding: .5em 0;
        margin-left: 6rem;
        border-top: .2rem solid #ccc;
        clear: both;
    }
    #queryBuilder tbody td {
        display: block;
    }
    #queryBuilder tbody td.buttons {
        margin-left: -6rem;
    }
}

Modified src/www/admin/static/styles/04-dialogs.css from [4ecd8281d3] to [0c35eb28b1].

59
60
61
62
63
64
65
66
67
68
69
70
71
72






73
74
75
76
77
78
79
80
81
82
83
84
85
    text-shadow: 0px 0px 5px #000, 0px 0px 10px #000;
    font-size: 1.5em;
    width: 80%;
    padding: .5em;
}

#dialog > header.toolbar button.closeBtn {
    background: unset;
    border: unset;
    box-shadow: unset;
    font-size: 1.3rem;
    display: block;
    padding: .5em 1em;
    margin-left: auto;






}

#dialog > header.toolbar button.closeBtn, #dialog > header.toolbar button.closeBtn::after {
    color: #ccc;
    text-shadow: 0px 0px 5px #000;
    transition: color .2s;
}

#dialog > header.toolbar button.closeBtn:hover, #dialog > header.toolbar button.closeBtn:hover::after {
    color: #fff !important;
}

#dialog > iframe, #dialog > img, #dialog > audio, #dialog > video {







|
|
|

<
|

>
>
>
>
>
>





|







59
60
61
62
63
64
65
66
67
68
69

70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
    text-shadow: 0px 0px 5px #000, 0px 0px 10px #000;
    font-size: 1.5em;
    width: 80%;
    padding: .5em;
}

#dialog > header.toolbar button.closeBtn {
    background: rgba(0, 0, 0, 0.3);
    border: none;
    box-shadow: 0px 0px 5px #000;
    font-size: 1.3rem;

    padding: .3em 1em;
    margin-left: auto;
    border-radius: .5em;
}

#dialog > header.toolbar button.closeBtn:hover {
    box-shadow: 0px 0px 5px 2px orange;
    background: #000;
}

#dialog > header.toolbar button.closeBtn, #dialog > header.toolbar button.closeBtn::after {
    color: #ccc;
    text-shadow: 0px 0px 5px #000;
    transition: color .2s, box-shadow .2s;
}

#dialog > header.toolbar button.closeBtn:hover, #dialog > header.toolbar button.closeBtn:hover::after {
    color: #fff !important;
}

#dialog > iframe, #dialog > img, #dialog > audio, #dialog > video {

Modified src/www/admin/static/styles/07-tables.css from [fef6f6f8f4] to [bef826ae7d].

247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
    display: block;
    margin: 1em 0;
}

table.files.gallery tbody {
    display: grid;
    margin: .5em 0;
    grid-template-columns: repeat(auto-fit, 15em);
    grid-gap: .5em;
    justify-content: start;
}

table.files.gallery tbody tr {
    display: grid;
    grid-gap: .2em;







|







247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
    display: block;
    margin: 1em 0;
}

table.files.gallery tbody {
    display: grid;
    margin: .5em 0;
    grid-template-columns: repeat(auto-fit, minmax(15em, .3fr));
    grid-gap: .5em;
    justify-content: start;
}

table.files.gallery tbody tr {
    display: grid;
    grid-gap: .2em;