External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

add ellipsis animation for loading state strings

Browse Source
This commit is contained in:
Tom
2023-05-16 12:40:29 +02:00
parent a122e6d15d
commit 2e2e0c1eb8
6 changed files with 57 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/styled/Board.styled.jsx
+25
View File
@@ -1402,6 +1402,31 @@ export const TopBar = styled.div`
}
}}
.ellipsis {
margin-right: 14px;
}
.ellipsis:after {
content: "\\2026";
position: absolute;
-webkit-animation: ellipsis steps(4,end) 1200ms infinite;
animation: ellipsis steps(4,end) 1500ms infinite;
width: 0px;
overflow: hidden;
}
@keyframes ellipsis {
to {
width: 1.25em;
}
}
@-webkit-keyframes ellipsis {
to {
width: 1.25em;
}
}
@media (min-width: 480px) {
#catalog-button-mobile {
display: none;
src/components/styled/Thread.styled.jsx
+25
View File
@@ -227,6 +227,31 @@ export const TopBar = styled.div`
}
}
.ellipsis {
margin-right: 18px !important;
}
.ellipsis:after {
content: "\\2026";
position: absolute;
-webkit-animation: ellipsis steps(4,end) 1200ms infinite;
animation: ellipsis steps(4,end) 1500ms infinite;
width: 0px;
overflow: hidden;
}
@keyframes ellipsis {
to {
width: 1.25em;
}
}
@-webkit-keyframes ellipsis {
to {
width: 1.25em;
}
}
.return-button {
display: inline-block;
}
src/components/views/Board.jsx
+1 -1
View File
@@ -530,7 +530,7 @@ const Board = () => {
</>
) : (
<div id="stats" style={{float: "right", marginTop: "5px"}}>
<span>{stateString}</span>
<span className={stateString ? "ellipsis" : ""}>{stateString}</span>
</div>
)}
<div id="catalog-button-mobile">
src/components/views/Catalog.jsx
+1 -1
View File
@@ -445,7 +445,7 @@ const Catalog = () => {
</>
) : (
<div id="stats" style={{float: "right", marginTop: "5px"}}>
<span>{stateString}</span>
<span className={stateString ? "ellipsis" : ""}>{stateString}</span>
</div>
)}
<div id="return-button-mobile">
src/components/views/Pending.jsx
+1 -1
View File
@@ -195,7 +195,7 @@ const Pending = () => {
<Link to={`/p/${selectedAddress}/catalog`} onClick={()=> {window.scrollTo(0, 0)}}>Catalog</Link>
]
</span>
<span className="reply-stat">{stateString}</span>
<span className={stateString ? "reply-stat ellipsis" : ""}>{stateString}</span>
<hr />
</TopBar>
<Tooltip id="tooltip" className="tooltip" />
src/components/views/Thread.jsx
+4 -4
View File
@@ -507,10 +507,10 @@ const Thread = () => {
<span className="reply-stat">No replies yet</span>
)
) : (
<span className="reply-stat">{stateString}</span>
<span className={stateString ? "reply-stat ellipsis" : ""}>{stateString}</span>
)
) : (
<span className="reply-stat">{stateString}</span>
<span className={stateString ? "reply-stat ellipsis" : ""}>{stateString}</span>
)}
<hr />
</TopBar>
@@ -1080,10 +1080,10 @@ const Thread = () => {
<span className="reply-stat">No replies yet</span>
)
) : (
<span className="reply-stat">{stateString}</span>
<span className={stateString ? "reply-stat ellipsis" : ""}>{stateString}</span>
)
) : (
<span className="reply-stat">{stateString}</span>
<span className={stateString ? "reply-stat ellipsis" : ""}>{stateString}</span>
)}
<hr />
</div>