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

improve offline indicators styling

Browse Source
This commit is contained in:
Tom
2023-05-08 18:45:01 +02:00
parent fdcb090144
commit a00fe30779
4 changed files with 82 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/styled/Board.styled.jsx
+53 -39
View File
@@ -30,12 +30,6 @@ export const NavBar = styled.div`
#board-nav-mobile {
display: none;
}
.offline-nav {
width: 12px;
position: relative;
margin: 2px 2px -2px -2px;
}
}
@media (max-width: 480px) {
@@ -244,13 +238,14 @@ export const Header = styled.div`
margin: 5px auto;
width: 300px;
height: 100px;
img {
border: none;
width: 300px;
height: 100px;
}
}
img {
border: none;
width: 300px;
height: 100px;
}
.board-title {
font-family: Tahoma, sans-serif;
@@ -276,13 +271,14 @@ export const Header = styled.div`
margin: 5px auto;
width: 300px;
height: 100px;
img {
border: none;
width: 300px;
height: 100px;
}
}
img {
border: none;
width: 300px;
height: 100px;
}
.board-title {
font-family: Tahoma, sans-serif;
@@ -307,13 +303,14 @@ export const Header = styled.div`
margin: 5px auto;
width: 300px;
height: 100px;
img {
border: none;
width: 300px;
height: 100px;
}
}
img {
border: none;
width: 300px;
height: 100px;
}
.board-title {
font-size: 24pt;
@@ -336,13 +333,14 @@ export const Header = styled.div`
margin: 5px auto;
width: 300px;
height: 100px;
img {
border: none;
width: 300px;
height: 100px;
}
}
img {
border: none;
width: 300px;
height: 100px;
}
.board-title {
font-size: 24pt;
@@ -366,12 +364,12 @@ export const Header = styled.div`
width: 300px;
height: 100px;
max-width: 100%;
}
img {
border: none;
width: 300px;
height: 100px;
img {
border: none;
width: 300px;
height: 100px;
}
}
.board-title {
@@ -397,13 +395,14 @@ export const Header = styled.div`
margin: 5px auto;
width: 300px;
height: 100px;
img {
border: none;
width: 300px;
height: 100px;
}
}
img {
border: none;
width: 300px;
height: 100px;
}
.board-title {
font-family: Tahoma, sans-serif;
@@ -424,6 +423,12 @@ export const Header = styled.div`
return '';
}
}}
.offline {
width: 16px;
position: relative;
margin: 2px 2px -4px 2px;
}
`;
export const Break = styled.hr`
@@ -1626,7 +1631,14 @@ export const BoardForm = styled.div`
.offline-sub {
width: 13px;
margin-right: -5px;
margin-bottom: -2px;
margin-bottom: -3px;
position: relative;
}
.offline-reply {
width: 13px;
margin-right: 2px;
margin-bottom: -3px;
position: relative;
}
@@ -2981,12 +2993,14 @@ export const BoardForm = styled.div`
margin-bottom: 335px;
.offline-mobile-sub {
width: 18px;
width: 13px;
margin-top: 3px;
margin-right: 5px;
}
.offline-mobile-sub-reply {
width: 15px;
width: 13px;
margin-top: 3px;
}
.thread {
src/components/styled/Home.styled.jsx
+1 -4
View File
@@ -240,14 +240,11 @@ export const BoardsContent = styled.div`
object-fit: cover;
}
.board-avatar-container img.offline {
filter: brightness(50%);
}
.offline-indicator {
position: absolute;
top: 5px;
right: 5px;
width: 16px;
}
.board-text {
src/components/views/Board.jsx
+7 -8
View File
@@ -370,10 +370,6 @@ const Board = () => {
{index === 0 ? null : "\u00a0"}
<Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => handleClickTitle(subplebbit.title, subplebbit.address)}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
<OfflineIndicator
address={subplebbit.address}
className="offline-nav"
tooltipPlace="bottom" />
{index !== defaultSubplebbits.length - 1 ? " /" : null}
</span>
))}
@@ -428,10 +424,13 @@ const Board = () => {
<div className="banner">
<ImageBanner />
</div>
<>
<div className="board-title">{selectedTitle}</div>
<div className="board-address">p/{selectedAddress}</div>
</>
<div className="board-title">{selectedTitle}</div>
<div className="board-address">p/{selectedAddress}
<OfflineIndicator
address={selectedAddress}
className="offline"
tooltipPlace="top" />
</div>
</>
</Header>
<Break selectedStyle={selectedStyle} />
src/components/views/Subscriptions.jsx
+21 -10
View File
@@ -172,10 +172,6 @@ const Subscriptions = () => {
{index === 0 ? null : "\u00a0"}
<Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => handleClickTitle(subplebbit.title, subplebbit.address)}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
<OfflineIndicator
address={subplebbit.address}
className="offline-nav"
tooltipPlace="bottom" />
{index !== defaultSubplebbits.length - 1 ? " /" : null}
</span>
))}
@@ -523,12 +519,27 @@ const Subscriptions = () => {
)}
&nbsp;p/
<Link key={`p-t-${index}`} to={`/p/${thread.subplebbitAddress}`} id="reply-button" title="Visit this board">
{thread.subplebbitAddress.includes(".eth") ? thread.subplebbitAddress : (
<span key={`short-add${index}`}
data-tooltip-id="tooltip"
data-tooltip-content={thread.subplebbitAddress}
data-tooltip-place="top"
>{thread.subplebbitAddress.slice(0, 10) + "(...)"}</span>
{thread.subplebbitAddress.includes(".eth") ?
(
<>
{thread.subplebbitAddress}
<OfflineIndicator key={`offline-reply-${index}`}
address={thread.subplebbitAddress}
tooltipPlace="top"
className="offline-reply" />
</>
) : (
<>
<span key={`short-add${index}`}
data-tooltip-id="tooltip"
data-tooltip-content={thread.subplebbitAddress}
data-tooltip-place="top"
>{thread.subplebbitAddress.slice(0, 10) + "(...)"}</span>
<OfflineIndicator key={`offline-reply-${index}`}
address={thread.subplebbitAddress}
tooltipPlace="top"
className="offline-reply" />
</>
)}
</Link>
</span>&nbsp;