forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Merge branch 'alexkuz-web-fix-fonts-and-image-box' into main
+79
-29
+2
-2
bskyweb/templates/base.html
+2
-2
bskyweb/templates/base.html
···
44
44
scrollbar-gutter: stable both-edges;
45
45
}
46
46
html, body {
47
-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
47
+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Liberation Sans", Helvetica, Arial, sans-serif;
48
48
}
49
49
50
50
/* Buttons and inputs have a font set by UA, so we'll have to reset that */
···
141
141
142
142
/* ProseMirror */
143
143
.ProseMirror {
144
-
font: 18px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
144
+
font: 18px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Liberation Sans", Helvetica, Arial, sans-serif;
145
145
min-height: 140px;
146
146
}
147
147
.ProseMirror-dark {
+2
src/lib/hooks/useWebBodyScrollLock.ts
+2
src/lib/hooks/useWebBodyScrollLock.ts
···
6
6
function incrementRefCount() {
7
7
if (refCount === 0) {
8
8
document.body.style.overflow = 'hidden'
9
+
document.documentElement.style.scrollbarGutter = 'auto'
9
10
}
10
11
refCount++
11
12
}
···
14
15
refCount--
15
16
if (refCount === 0) {
16
17
document.body.style.overflow = ''
18
+
document.documentElement.style.scrollbarGutter = ''
17
19
}
18
20
}
19
21
+15
-12
src/view/com/lightbox/ImageViewing/components/ImageDefaultHeader.tsx
+15
-12
src/view/com/lightbox/ImageViewing/components/ImageDefaultHeader.tsx
···
6
6
*
7
7
*/
8
8
import React from 'react'
9
-
import {SafeAreaView, Text, TouchableOpacity, StyleSheet} from 'react-native'
9
+
import {
10
+
SafeAreaView,
11
+
TouchableOpacity,
12
+
StyleSheet,
13
+
ViewStyle,
14
+
} from 'react-native'
15
+
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
10
16
import {msg} from '@lingui/macro'
11
17
import {useLingui} from '@lingui/react'
12
18
···
23
29
return (
24
30
<SafeAreaView style={styles.root}>
25
31
<TouchableOpacity
26
-
style={styles.closeButton}
32
+
style={[styles.closeButton, styles.blurredBackground]}
27
33
onPress={onRequestClose}
28
34
hitSlop={HIT_SLOP}
29
35
accessibilityRole="button"
30
36
accessibilityLabel={_(msg`Close image`)}
31
37
accessibilityHint={_(msg`Closes viewer for header image`)}
32
38
onAccessibilityEscape={onRequestClose}>
33
-
<Text style={styles.closeText}>✕</Text>
39
+
<FontAwesomeIcon icon="close" color={'#fff'} size={22} />
34
40
</TouchableOpacity>
35
41
</SafeAreaView>
36
42
)
···
42
48
pointerEvents: 'box-none',
43
49
},
44
50
closeButton: {
45
-
marginRight: 8,
46
-
marginTop: 8,
51
+
marginRight: 10,
52
+
marginTop: 10,
47
53
width: 44,
48
54
height: 44,
49
55
alignItems: 'center',
···
51
57
borderRadius: 22,
52
58
backgroundColor: '#00000077',
53
59
},
54
-
closeText: {
55
-
lineHeight: 22,
56
-
fontSize: 19,
57
-
textAlign: 'center',
58
-
color: '#FFF',
59
-
includeFontPadding: false,
60
-
},
60
+
blurredBackground: {
61
+
backdropFilter: 'blur(10px)',
62
+
WebkitBackdropFilter: 'blur(10px)',
63
+
} as ViewStyle,
61
64
})
62
65
63
66
export default ImageDefaultHeader
+44
-10
src/view/com/lightbox/Lightbox.web.tsx
+44
-10
src/view/com/lightbox/Lightbox.web.tsx
···
7
7
StyleSheet,
8
8
View,
9
9
Pressable,
10
+
ViewStyle,
10
11
} from 'react-native'
11
12
import {
12
13
FontAwesomeIcon,
···
24
25
ProfileImageLightbox,
25
26
} from '#/state/lightbox'
26
27
import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock'
28
+
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
27
29
28
30
interface Img {
29
31
uri: string
···
111
113
return () => window.removeEventListener('keydown', onKeyDown)
112
114
}, [onKeyDown])
113
115
116
+
const {isTabletOrDesktop} = useWebMediaQueries()
117
+
const btnStyle = React.useMemo(() => {
118
+
return isTabletOrDesktop ? styles.btnTablet : styles.btnMobile
119
+
}, [isTabletOrDesktop])
120
+
const iconSize = React.useMemo(() => {
121
+
return isTabletOrDesktop ? 32 : 24
122
+
}, [isTabletOrDesktop])
123
+
114
124
return (
115
125
<View style={styles.mask}>
116
126
<TouchableWithoutFeedback
···
130
140
{canGoLeft && (
131
141
<TouchableOpacity
132
142
onPress={onPressLeft}
133
-
style={[styles.btn, styles.leftBtn]}
143
+
style={[
144
+
styles.btn,
145
+
btnStyle,
146
+
styles.leftBtn,
147
+
styles.blurredBackground,
148
+
]}
134
149
accessibilityRole="button"
135
150
accessibilityLabel={_(msg`Previous image`)}
136
151
accessibilityHint="">
137
152
<FontAwesomeIcon
138
153
icon="angle-left"
139
154
style={styles.icon as FontAwesomeIconStyle}
140
-
size={40}
155
+
size={iconSize}
141
156
/>
142
157
</TouchableOpacity>
143
158
)}
144
159
{canGoRight && (
145
160
<TouchableOpacity
146
161
onPress={onPressRight}
147
-
style={[styles.btn, styles.rightBtn]}
162
+
style={[
163
+
styles.btn,
164
+
btnStyle,
165
+
styles.rightBtn,
166
+
styles.blurredBackground,
167
+
]}
148
168
accessibilityRole="button"
149
169
accessibilityLabel={_(msg`Next image`)}
150
170
accessibilityHint="">
151
171
<FontAwesomeIcon
152
172
icon="angle-right"
153
173
style={styles.icon as FontAwesomeIconStyle}
154
-
size={40}
174
+
size={iconSize}
155
175
/>
156
176
</TouchableOpacity>
157
177
)}
···
213
233
},
214
234
btn: {
215
235
position: 'absolute',
216
-
backgroundColor: '#000',
236
+
backgroundColor: '#00000077',
237
+
justifyContent: 'center',
238
+
alignItems: 'center',
239
+
},
240
+
btnTablet: {
217
241
width: 50,
218
242
height: 50,
219
-
justifyContent: 'center',
220
-
alignItems: 'center',
221
243
borderRadius: 25,
244
+
left: 30,
245
+
right: 30,
246
+
},
247
+
btnMobile: {
248
+
width: 44,
249
+
height: 44,
250
+
borderRadius: 22,
251
+
left: 20,
252
+
right: 20,
222
253
},
223
254
leftBtn: {
224
-
left: 30,
255
+
right: 'auto',
225
256
top: '50%',
226
257
},
227
258
rightBtn: {
228
-
position: 'absolute',
229
-
right: 30,
259
+
left: 'auto',
230
260
top: '50%',
231
261
},
232
262
footer: {
···
234
264
paddingVertical: 24,
235
265
backgroundColor: colors.black,
236
266
},
267
+
blurredBackground: {
268
+
backdropFilter: 'blur(10px)',
269
+
WebkitBackdropFilter: 'blur(10px)',
270
+
} as ViewStyle,
237
271
})
+1
-1
src/view/com/util/forms/NativeDropdown.web.tsx
+1
-1
src/view/com/util/forms/NativeDropdown.web.tsx
···
237
237
paddingRight: 12,
238
238
borderRadius: 8,
239
239
fontFamily:
240
-
'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
240
+
'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Liberation Sans", Helvetica, Arial, sans-serif',
241
241
outline: 0,
242
242
border: 0,
243
243
},
+13
-2
src/view/com/util/text/Text.tsx
+13
-2
src/view/com/util/text/Text.tsx
···
2
2
import {Text as RNText, TextProps} from 'react-native'
3
3
import {s, lh} from 'lib/styles'
4
4
import {useTheme, TypographyVariant} from 'lib/ThemeContext'
5
-
import {isIOS} from 'platform/detection'
5
+
import {isIOS, isWeb} from 'platform/detection'
6
6
import {UITextView} from 'react-native-ui-text-view'
7
7
8
8
export type CustomTextProps = TextProps & {
···
11
11
title?: string
12
12
dataSet?: Record<string, string | number>
13
13
selectable?: boolean
14
+
}
15
+
16
+
const fontFamilyStyle = {
17
+
fontFamily:
18
+
'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Liberation Sans", Helvetica, Arial, sans-serif',
14
19
}
15
20
16
21
export function Text({
···
39
44
40
45
return (
41
46
<RNText
42
-
style={[s.black, typography, lineHeightStyle, style]}
47
+
style={[
48
+
s.black,
49
+
typography,
50
+
isWeb && fontFamilyStyle,
51
+
lineHeightStyle,
52
+
style,
53
+
]}
43
54
// @ts-ignore web only -esb
44
55
dataSet={Object.assign({tooltip: title}, dataSet || {})}
45
56
selectable={selectable}
+2
-2
web/index.html
+2
-2
web/index.html
···
48
48
scrollbar-gutter: stable both-edges;
49
49
}
50
50
html, body {
51
-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
51
+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Liberation Sans", Helvetica, Arial, sans-serif;
52
52
}
53
53
54
54
/* Buttons and inputs have a font set by UA, so we'll have to reset that */
···
145
145
146
146
/* ProseMirror */
147
147
.ProseMirror {
148
-
font: 18px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
148
+
font: 18px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Liberation Sans", Helvetica, Arial, sans-serif;
149
149
min-height: 140px;
150
150
}
151
151
.ProseMirror-dark {