mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-13 18:59:22 -05:00
fix(jumpbar): fixed collision on mobile
This commit is contained in:
parent
68acfe26de
commit
6e89e10461
2 changed files with 22 additions and 4 deletions
|
@ -45,6 +45,10 @@ export const Bar = styled.div<{ position: "top" | "bottom"; accent?: boolean }>`
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
transition: color ease-in-out 0.08s;
|
transition: color ease-in-out 0.08s;
|
||||||
|
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
|
||||||
${(props) =>
|
${(props) =>
|
||||||
props.accent
|
props.accent
|
||||||
? css`
|
? css`
|
||||||
|
@ -86,6 +90,10 @@ export const Bar = styled.div<{ position: "top" | "bottom"; accent?: boolean }>`
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
|
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
@ -103,6 +111,12 @@ export const Bar = styled.div<{ position: "top" | "bottom"; accent?: boolean }>`
|
||||||
padding: 0 12px;
|
padding: 0 12px;
|
||||||
`}
|
`}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 800px) {
|
||||||
|
.right > span {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export default observer(({ channel }: { channel: Channel }) => {
|
export default observer(({ channel }: { channel: Channel }) => {
|
||||||
|
@ -119,8 +133,10 @@ export default observer(({ channel }: { channel: Channel }) => {
|
||||||
<div>
|
<div>
|
||||||
<Text id="app.main.channel.misc.viewing_old" />
|
<Text id="app.main.channel.misc.viewing_old" />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div className="right">
|
||||||
<Text id="app.main.channel.misc.jump_present" />{" "}
|
<span>
|
||||||
|
<Text id="app.main.channel.misc.jump_present" />
|
||||||
|
</span>
|
||||||
<DownArrowAlt size={18} />
|
<DownArrowAlt size={18} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -56,8 +56,10 @@ export default observer(
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div className="right">
|
||||||
<Text id="app.main.channel.misc.jump_beginning" />
|
<span>
|
||||||
|
<Text id="app.main.channel.misc.jump_beginning" />
|
||||||
|
</span>
|
||||||
<UpArrowAlt size={20} />
|
<UpArrowAlt size={20} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue