better usability: mimimum size for breadcrumbs
Massimo Melina committed
Dec 21, 2021 at 14:55 UTC
e75f510c92da47e62cf2b874a6887d9d8878f7d0
2 files changed
+10
-4
frontend/src/Head.ts
+4
-1
@@ -45,7 +45,7 @@ function MenuPanel() {
45
}
46
})
47
),
48
- remoteSearch && h('div', {}, 'Searched for: ',remoteSearch),
48
+ remoteSearch && h('div', { id:'searched' }, 'Searched for: ',remoteSearch),
49
showFilter && h('input',{
50
id: 'filter',
51
placeholder: 'Filter',
@@ -122,6 +122,9 @@ function Breadcrumbs() {
122
}
123
124
function Breadcrumb({ path, label }:{ path?: string, label?: string }) {
125
+ const PAD = '\u00A0' // make small elements easier to tap. Don't use min-width 'cause it requires display-inline that breaks word-wrapping
126
+ if (label && label.length < 3)
127
+ label = PAD+label+PAD
128
return h(Link, { className:'breadcrumb', to:path||'/' },
129
label || hIcon('home') )
130
}
frontend/src/index.scss
+6
-3
@@ -44,8 +44,8 @@ button.toggled {
44
header {
45
position: sticky;
46
top: 0;
47
- padding-bottom: 0.3em;
47
background: #fff;
48
+ padding: .2em;
49
}
50
51
@keyframes spin {
@@ -61,7 +61,7 @@ header {
61
line-height: 1.6em;
62
63
border-top: 1px solid #666;
64
- margin-left: -1px;
64
+ margin-right: -0.1em;
65
}
66
#folder-stats {
67
font-size: 90%;
@@ -113,7 +113,7 @@ ul.dir {
113
}
114
115
#menu-panel {
116
- margin: 0 0.1em 0.2em;
116
+ margin-bottom: 0.2em;
117
118
& button {
119
margin: 0.1em;
@@ -123,6 +123,9 @@ ul.dir {
123
margin-left: 0.8em;
124
}
125
}
126
+#searched {
127
+ margin: .2em;
128
+}
129
130
@media (max-width: 50em) {
131
#menu-bar button:nth-child(1n+2) label { display: none } /* icons only */