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

fix: Improved breakpoints for pins on mobile

Browse Source 
fix: Prevent clock icon shrinking
fix: Prevent metadata wrapping
This commit is contained in:
Tom Moor
2022-09-15 23:04:43 +01:00
parent 410c9900c1
commit a74635a37f
3 changed files with 15 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/components/DocumentCard.tsx
View File

@@ -125,7 +125,7 @@ function DocumentCard(props: Props) {
: document.titleWithDefault} : document.titleWithDefault}
</Heading> </Heading>
<DocumentMeta size="xsmall"> <DocumentMeta size="xsmall">
<ClockIcon color="currentColor" size={18} />{" "} <Clock color="currentColor" size={18} />
<Time <Time
dateTime={document.updatedAt} dateTime={document.updatedAt}
tooltipDelay={500} tooltipDelay={500}
@@ -152,6 +152,10 @@ function DocumentCard(props: Props) {
); );
} }
const Clock = styled(ClockIcon)`
flex-shrink: 0;
`;
const AnimatePresence = styled(m.div)` const AnimatePresence = styled(m.div)`
width: 100%; width: 100%;
height: 100%; height: 100%;
@@ -215,6 +219,9 @@ const DocumentMeta = styled(Text)`
gap: 2px; gap: 2px;
color: ${(props) => props.theme.textTertiary}; color: ${(props) => props.theme.textTertiary};
margin: 0 0 0 -2px; margin: 0 0 0 -2px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
`; `;
const DocumentLink = styled(Link)<{ const DocumentLink = styled(Link)<{

8
app/components/PinnedDocuments.tsx
View File

@@ -126,8 +126,8 @@ function PinnedDocuments({ limit, pins, canUpdate, ...rest }: Props) {
const List = styled.div` const List = styled.div`
display: grid; display: grid;
column-gap: 8px; column-gap: 8px;
row-gap: 8px; row-gap: 12px;
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
padding: 0; padding: 0;
list-style: none; list-style: none;
margin: 16px 0 32px; margin: 16px 0 32px;
@@ -136,6 +136,10 @@ const List = styled.div`
display: none; display: none;
} }
${breakpoint("mobileLarge")`
grid-template-columns: repeat(3, minmax(0, 1fr));
`};
${breakpoint("tablet")` ${breakpoint("tablet")`
grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-columns: repeat(4, minmax(0, 1fr));
`}; `};

1
shared/styles/breakpoints.ts
View File

@@ -1,5 +1,6 @@
const breakpoints = { const breakpoints = {
mobile: 0, mobile: 0,
mobileLarge: 460,
// targeting all devices // targeting all devices
tablet: 737, tablet: 737,
// targeting devices that are larger than the iPhone 6 Plus (which is 736px in landscape mode) // targeting devices that are larger than the iPhone 6 Plus (which is 736px in landscape mode)