witchcraft.systems
this repo has no description
CSS text overflow and infinite loading fixes (#4)
Reviewed-on: https://git.witchcraft.systems/scientific-witchery/pds-dash/pulls/4
astrra.space
+3
-3
src/App.svelte
+3
-3
src/App.svelte
···
52
52
<p>Error: {error.message}</p>
53
53
{/await}
54
54
55
-
<div id="Feed">
55
+
<div id="Feed" property="infinite-wrapper">
56
56
<div id="spacer"></div>
57
57
{#each posts as postObject}
58
58
<PostComponent post={postObject as Post} />
59
59
{/each}
60
-
<InfiniteLoading on:infinite={onInfinite} distance={3000} />
60
+
<InfiniteLoading on:infinite={onInfinite} distance={3000} forceUseInfiniteWrapper=true />
61
61
<div id="spacer"></div>
62
62
</div>
63
63
</div>
···
129
129
margin-top: 5%;
130
130
}
131
131
#Account {
132
-
width: auto;
132
+
width: 85%;
133
133
padding-left: 5%;
134
134
padding-right: 5%;
135
135
margin-bottom: 20px;
+5
src/app.css
+5
src/app.css
···
66
66
font-size: 24px;
67
67
color: var(--text-color);
68
68
border-color: var(--border-color);
69
+
overflow-wrap: break-word;
70
+
word-wrap: normal;
71
+
word-break: break-word;
72
+
hyphens: none;
69
73
}
70
74
71
75
h1 {
···
75
79
76
80
#app {
77
81
max-width: 1400px;
82
+
width: 100%;
78
83
margin: 0;
79
84
padding: 0;
80
85
margin-left: auto;
+2
-1
src/lib/AccountComponent.svelte
+2
-1
src/lib/AccountComponent.svelte
···
32
32
#accountName {
33
33
margin-left: 10px;
34
34
font-size: 0.9em;
35
+
max-width: 80%;
35
36
36
37
/* replace overflow with ellipsis */
37
38
overflow: hidden;
38
39
text-overflow: ellipsis;
39
40
white-space: nowrap;
40
-
max-width: 80%;
41
41
}
42
42
#avatar {
43
43
width: 50px;
44
44
height: 50px;
45
45
margin: 0px;
46
+
object-fit: cover;
46
47
border-right: var(--border-color) 1px solid;
47
48
}
48
49
</style>
+10
-2
src/lib/PostComponent.svelte
+10
-2
src/lib/PostComponent.svelte
···
222
222
margin-left: 10px;
223
223
font-size: 0.9em;
224
224
text-align: start;
225
-
overflow-wrap: break-word;
225
+
word-break: break-word;
226
+
max-width: 80%;
227
+
max-height: 95%;
226
228
overflow: hidden;
229
+
align-self: flex-start;
230
+
margin-top: auto;
231
+
margin-bottom: auto;
227
232
}
228
233
#avatar {
229
-
height: 100%;
234
+
height: 60px;
235
+
width: 60px;
230
236
margin: 0px;
231
237
margin-left: 0px;
238
+
overflow: hidden;
239
+
object-fit: cover;
232
240
border-right: var(--border-color) 1px solid;
233
241
}
234
242
#carouselContainer {