yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix layout issues

Browse Source
This commit is contained in:
Guilherme Diniz
2020-08-25 17:22:13 -03:00
parent 05f48f054b
commit 197cdff6c3
1 changed files with 17 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
app/components/DocumentHistory/DocumentHistory.js
View File

@@ -8,6 +8,7 @@ import { type Match, Redirect, type RouterHistory } from "react-router-dom";
import { Waypoint } from "react-waypoint"; import { Waypoint } from "react-waypoint";
import styled from "styled-components"; import styled from "styled-components";
import breakpoint from "styled-components-breakpoint";
import { DEFAULT_PAGINATION_LIMIT } from "stores/BaseStore"; import { DEFAULT_PAGINATION_LIMIT } from "stores/BaseStore";
import DocumentsStore from "stores/DocumentsStore"; import DocumentsStore from "stores/DocumentsStore";
import RevisionsStore from "stores/RevisionsStore"; import RevisionsStore from "stores/RevisionsStore";
@@ -105,7 +106,7 @@ class DocumentHistory extends React.Component<Props> {
return ( return (
<Sidebar> <Sidebar>
<Wrapper column> <Wrapper column>
<Header justify={"center"}> <Header>
<Title>History</Title> <Title>History</Title>
<CloseButton <CloseButton
icon={<CloseIcon />} icon={<CloseIcon />}
@@ -165,22 +166,27 @@ const Sidebar = styled(Flex)`
z-index: 1; z-index: 1;
`; `;
const Title = styled.h3` const Title = styled.div`
max-width: 90%; font-size: 16px;
overflow: hidden; font-weight: 600;
text-align: center;
align-items: center;
justify-content: flex-start;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 20px;
margin-top: 0;
margin-bottom: 0.25em;
white-space: nowrap; white-space: nowrap;
color: ${(props) => props.theme.text}; overflow: hidden;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, display: none;
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; width: 0;
${breakpoint("tablet")`
display: flex;
flex-grow: 1;
`};
`; `;
const Header = styled(Flex)` const Header = styled(Flex)`
position: relative; position: relative;
padding: 20px; padding: 15.8px;
border-bottom: 1px solid ${(props) => props.theme.divider}; border-bottom: 1px solid ${(props) => props.theme.divider};
`; `;