this repo has no description
Experiment showing small title when nav/tab bars collapsed
+89
-17
+64
-3
src/app.css
+64
-3
src/app.css
···
147
147
}
148
148
}
149
149
}
150
+
.deck > header {
151
+
.header-side {
152
+
height: auto;
153
+
transition: all 0.3s;
154
+
}
155
+
h1 {
156
+
transition: all 0.3s;
157
+
}
158
+
}
150
159
.deck > header[hidden] {
151
160
display: block;
152
-
transform: translateY(-100%);
153
-
pointer-events: none;
161
+
/* transform: translateY(-100%);
162
+
pointer-events: none; */
154
163
user-select: none;
164
+
165
+
[data-shortcuts-view-mode='tab-menu-bar'] & {
166
+
@media (max-width: 40em) {
167
+
top: 100vh;
168
+
}
169
+
}
170
+
171
+
&.loading:after {
172
+
display: none;
173
+
}
174
+
175
+
.header-grid {
176
+
min-height: 1em;
177
+
background-color: transparent !important;
178
+
backdrop-filter: none;
179
+
border: 0;
180
+
padding-block: 8px;
181
+
182
+
[data-shortcuts-view-mode='tab-menu-bar'] & {
183
+
@media (max-width: 40em) {
184
+
transform: translateY(-100%);
185
+
}
186
+
}
187
+
188
+
> * {
189
+
pointer-events: none;
190
+
}
191
+
}
192
+
193
+
.header-side {
194
+
opacity: 0;
195
+
height: calc(14px + 4px + 4px);
196
+
overflow: clip;
197
+
transform: translateY(-32px);
198
+
}
199
+
200
+
h1 {
201
+
display: inline-block;
202
+
font-size: 14px !important;
203
+
padding: 4px 8px !important;
204
+
background-color: var(--bg-color);
205
+
border: 1px solid var(--outline-color);
206
+
border-radius: 9999px;
207
+
color: var(--text-insignificant-color);
208
+
font-weight: 500;
209
+
box-shadow: 0 4px 32px var(--drop-shadow-color);
210
+
211
+
b {
212
+
font-weight: 500;
213
+
}
214
+
}
155
215
}
156
216
.deck > header .header-grid {
157
217
background-color: var(--bg-color);
···
3059
3119
min-height: 4em;
3060
3120
}
3061
3121
.timeline-deck > header[hidden] {
3062
-
transform: translate3d(0, calc((100% + var(--margin-top)) * -1), 0);
3122
+
/* transform: translate3d(0, calc((100% + var(--margin-top)) * -1), 0); */
3123
+
transform: translate3d(0, calc(var(--margin-top) * -1), 0);
3063
3124
}
3064
3125
.deck > header {
3065
3126
text-shadow: 0 1px var(--bg-color);
+7
-2
src/components/timeline.jsx
+7
-2
src/components/timeline.jsx
···
285
285
const headerRef = useRef();
286
286
// const [hiddenUI, setHiddenUI] = useState(false);
287
287
const [nearReachStart, setNearReachStart] = useState(false);
288
-
useScrollFn(
288
+
const { resetScrollDirection } = useScrollFn(
289
289
{
290
290
scrollableRef,
291
291
distanceFromEnd: 2,
···
436
436
e.target.closest('.timeline-item, .timeline-item-alt')
437
437
) {
438
438
setTimeout(() => {
439
+
resetScrollDirection();
439
440
headerRef.current.hidden = false;
440
441
}, 250);
441
442
}
···
446
447
ref={headerRef}
447
448
// hidden={hiddenUI}
448
449
onClick={(e) => {
449
-
if (!e.target.closest('a, button')) {
450
+
// If hidden set not hidden
451
+
if (headerRef.current.hidden) {
452
+
resetScrollDirection();
453
+
headerRef.current.hidden = false;
454
+
} else if (!e.target.closest('a, button')) {
450
455
scrollableRef.current?.scrollTo({
451
456
top: 0,
452
457
behavior: 'smooth',
+12
-12
src/locales/en.po
+12
-12
src/locales/en.po
···
330
330
#: src/components/columns.jsx:27
331
331
#: src/components/nav-menu.jsx:181
332
332
#: src/components/shortcuts-settings.jsx:139
333
-
#: src/components/timeline.jsx:470
333
+
#: src/components/timeline.jsx:475
334
334
#: src/pages/catchup.jsx:883
335
335
#: src/pages/filters.jsx:90
336
336
#: src/pages/followed-hashtags.jsx:41
···
492
492
493
493
#: src/components/compose.jsx:1256
494
494
#: src/components/status.jsx:2096
495
-
#: src/components/timeline.jsx:1015
495
+
#: src/components/timeline.jsx:1020
496
496
msgid "Content warning"
497
497
msgstr ""
498
498
···
743
743
msgstr ""
744
744
745
745
#: src/components/generic-accounts.jsx:214
746
-
#: src/components/timeline.jsx:552
746
+
#: src/components/timeline.jsx:557
747
747
#: src/pages/list.jsx:321
748
748
#: src/pages/notifications.jsx:923
749
749
#: src/pages/search.jsx:562
···
752
752
msgstr ""
753
753
754
754
#: src/components/generic-accounts.jsx:219
755
-
#: src/components/timeline.jsx:557
755
+
#: src/components/timeline.jsx:562
756
756
#: src/pages/search.jsx:567
757
757
msgid "The end."
758
758
msgstr ""
···
780
780
781
781
#: src/components/gif-picker-modal.jsx:207
782
782
#: src/components/media-modal.jsx:469
783
-
#: src/components/timeline.jsx:928
783
+
#: src/components/timeline.jsx:933
784
784
msgid "Previous"
785
785
msgstr ""
786
786
787
787
#: src/components/gif-picker-modal.jsx:225
788
788
#: src/components/media-modal.jsx:488
789
-
#: src/components/timeline.jsx:945
789
+
#: src/components/timeline.jsx:950
790
790
msgid "Next"
791
791
msgstr ""
792
792
···
1151
1151
#: src/components/status-compact.jsx:70
1152
1152
#: src/components/status.jsx:2873
1153
1153
#: src/components/status.jsx:2951
1154
-
#: src/components/timeline.jsx:1004
1154
+
#: src/components/timeline.jsx:1009
1155
1155
#: src/pages/catchup.jsx:75
1156
1156
#: src/pages/catchup.jsx:1880
1157
1157
msgid "Filtered"
···
2604
2604
msgid "{index}/X"
2605
2605
msgstr "{index}/X"
2606
2606
2607
-
#: src/components/timeline.jsx:486
2607
+
#: src/components/timeline.jsx:491
2608
2608
#: src/pages/settings.jsx:1218
2609
2609
msgid "New posts"
2610
2610
msgstr ""
2611
2611
2612
-
#: src/components/timeline.jsx:587
2612
+
#: src/components/timeline.jsx:592
2613
2613
#: src/pages/home.jsx:228
2614
2614
#: src/pages/notifications.jsx:899
2615
2615
#: src/pages/status.jsx:1099
···
2618
2618
msgstr ""
2619
2619
2620
2620
#. placeholder {0}: fItems.length
2621
-
#: src/components/timeline.jsx:622
2621
+
#: src/components/timeline.jsx:627
2622
2622
msgid "{0, plural, one {# Boost} other {# Boosts}}"
2623
2623
msgstr "{0, plural, one {# Boost} other {# Boosts}}"
2624
2624
2625
-
#: src/components/timeline.jsx:627
2625
+
#: src/components/timeline.jsx:632
2626
2626
msgid "Pinned posts"
2627
2627
msgstr "Pinned posts"
2628
2628
2629
2629
#. placeholder {0}: filterInfo.titlesStr
2630
-
#: src/components/timeline.jsx:999
2630
+
#: src/components/timeline.jsx:1004
2631
2631
msgid "<0>Filtered</0>: <1>{0}</1>"
2632
2632
msgstr ""
2633
2633