cha0s/reddichat-flat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: list item in channel

Browse Source
This commit is contained in:
cha0s 2020-07-21 00:49:36 -05:00
parent d30103d375
commit 1afb874028
10 changed files with 98 additions and 193 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/client/channel.jsx
View File

@ -32,6 +32,7 @@ export default function Channel(props) {
</>
);
return (
<li className="channel__item">
<div className="channel">
{React.cloneElement(
href ? <Link to={href} /> : <div />,
@ -61,6 +62,7 @@ export default function Channel(props) {
))}
</div>
</div>
</li>
);
}

23
src/client/channel.scss
View File

@ -1,5 +1,28 @@
@import '~/client/scss/colors.scss';
.channel__item {
position: relative;
width: 100%;
&:nth-of-type(even) {
background-color: rgba(0, 0, 0, 0.1);
&:hover {
background-color: rgba(255, 255, 255, 0.2);
}
}
&:nth-of-type(odd) {
background-color: rgba(0, 0, 0, 0.2);
&:hover {
background-color: rgba(255, 255, 255, 0.1);
}
}
&.active[class] {
background-color: $color-active;
&:hover {
background-color: lighten($color-active, 5%);
}
}
}
.channel {
position: relative;
}

16
src/client/chat--leftFriends.jsx
View File

@ -91,9 +91,6 @@ export default function ChatLeftFriends() {
},
];
return (
<li
className="friends__item"
>
<Channel
key={JSON.stringify(friendship)}
actions={favoritesActions}
@ -101,7 +98,6 @@ export default function ChatLeftFriends() {
name={channel}
prefix="/u/"
/>
</li>
);
})}
</ul>
@ -120,17 +116,13 @@ export default function ChatLeftFriends() {
},
];
return (
<li
key={channel}
className="friends__item"
>
<Channel
key={channel}
actions={favoritesActions}
href={`/chat/u/${channel}`}
name={channel}
prefix="/u/"
/>
</li>
);
})}
</ul>
@ -167,17 +159,13 @@ export default function ChatLeftFriends() {
},
];
return (
<li
key={channel}
className="friends__item"
>
<Channel
key={channel}
actions={friendsActions}
href={`/chat/u/${channel}`}
name={channel}
prefix="/u/"
/>
</li>
);
})
)}

23
src/client/chat--leftFriends.scss
View File

@ -37,26 +37,3 @@
text-transform: uppercase;
white-space: nowrap;
}
.friends__item {
position: relative;
width: 100%;
&:nth-of-type(even) {
background-color: rgba(0, 0, 0, 0.1);
&:hover {
background-color: rgba(255, 255, 255, 0.2);
}
}
&:nth-of-type(odd) {
background-color: rgba(0, 0, 0, 0.2);
&:hover {
background-color: rgba(255, 255, 255, 0.1);
}
}
&.active[class] {
background-color: $color-active;
&:hover {
background-color: lighten($color-active, 5%);
}
}
}

12
src/client/chat--leftRooms.jsx
View File

@ -70,17 +70,13 @@ export default function ChatLeftRooms() {
},
];
return (
<li
className="channels__item"
key={channel}
>
<Channel
key={channel}
actions={favoritesActions}
href={`/chat/r/${channel}`}
name={channel}
prefix="/r/"
/>
</li>
);
})}
</ul>
@ -104,17 +100,13 @@ export default function ChatLeftRooms() {
},
];
return (
<li
className="channels__item"
key={channel}
>
<Channel
key={channel}
actions={recentActions}
href={`/chat/r/${channel}`}
name={channel}
prefix="/r/"
/>
</li>
);
})}
</ul>

23
src/client/chat--leftRooms.scss
View File

@ -36,26 +36,3 @@
padding: 2.5em 1em 0.625em 1.375em;
text-transform: uppercase;
}
.channels__item {
position: relative;
width: 100%;
&:nth-of-type(even) {
background-color: rgba(0, 0, 0, 0.1);
&:hover {
background-color: rgba(255, 255, 255, 0.2);
}
}
&:nth-of-type(odd) {
background-color: rgba(0, 0, 0, 0.2);
&:hover {
background-color: rgba(255, 255, 255, 0.1);
}
}
&.active[class] {
background-color: $color-active;
&:hover {
background-color: lighten($color-active, 5%);
}
}
}

8
src/client/chat--rightBlocked.jsx
View File

@ -28,16 +28,12 @@ export default function ChatRightBlocked(props) {
},
];
return (
<li
key={id}
className="blocked__item"
>
<Channel
key={id}
actions={blockedActions}
name={usernames[id]}
name={usernames[id] || '?'}
prefix="/u/"
/>
</li>
);
})}
</ul>

23
src/client/chat--rightBlocked.scss
View File

@ -8,26 +8,3 @@
padding: 2.5em 1em 0.625em 1.375em;
text-transform: uppercase;
}
.blocked__item {
position: relative;
width: 100%;
&:nth-of-type(even) {
background-color: rgba(0, 0, 0, 0.1);
&:hover {
background-color: rgba(255, 255, 255, 0.2);
}
}
&:nth-of-type(odd) {
background-color: rgba(0, 0, 0, 0.2);
&:hover {
background-color: rgba(255, 255, 255, 0.1);
}
}
&.active[class] {
background-color: $color-active;
&:hover {
background-color: lighten($color-active, 5%);
}
}
}

6
src/client/chat--rightUsers.jsx
View File

@ -114,11 +114,8 @@ export default function ChatRightUsers() {
}
}
return (
<li
className="users__item"
key={id}
>
<Channel
key={id}
actions={userActions}
href={(
(hasFriendship && userId !== id)
@ -128,7 +125,6 @@ export default function ChatRightUsers() {
name={username || '?'}
prefix="/u/"
/>
</li>
);
})}
</ul>

23
src/client/chat--rightUsers.scss
View File

@ -9,26 +9,3 @@
text-transform: uppercase;
white-space: nowrap;
}
.users__item {
position: relative;
width: 100%;
&:nth-of-type(even) {
background-color: rgba(0, 0, 0, 0.1);
&:hover {
background-color: rgba(255, 255, 255, 0.2);
}
}
&:nth-of-type(odd) {
background-color: rgba(0, 0, 0, 0.2);
&:hover {
background-color: rgba(255, 255, 255, 0.1);
}
}
&.active[class] {
background-color: $color-active;
&:hover {
background-color: lighten($color-active, 5%);
}
}
}