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