#319 Add article view

Author: Polleps

data-browser/package.json

@@ -27,8 +27,8 @@
     "react-is": "^18",
     "react-markdown": "^8.0.3",
     "react-pdf": "^6.2.2",
-    "react-router": "^6.0.0",
-    "react-router-dom": "^6.0.0",
+    "react-router": "^6.9.0",
+    "react-router-dom": "^6.9.0",
     "remark-gfm": "^3.0.1",
     "styled-components": "^5.3.3",
     "yamde": "^1.7.1"

data-browser/src/components/Button.tsx

@@ -68,9 +68,8 @@ export const ButtonBase = styled(ButtonClean)`
   background-color: ${props => props.theme.colors.main};
   color: ${props => props.theme.colors.bg};
   white-space: nowrap;
-  transition: ${() =>
-    transition('background-color', 'box-shadow', 'transform', 'color')};
   margin-bottom: ${p => (p.gutter ? `${p.theme.margin}rem` : '')};
+  ${transition('background-color', 'box-shadow', 'transform', 'color')};
 
   // Prevent sticky hover buttons on touch devices
   @media (hover: hover) and (pointer: fine) {

data-browser/src/components/Card.tsx

@@ -14,7 +14,7 @@ export const Card = styled.div<CardProps>`
   border: solid 1px ${props => props.theme.colors.bg2};
   box-shadow: ${props => props.theme.boxShadow};
   padding: ${props => props.theme.margin}rem;
-  margin-bottom: ${props => props.theme.margin}rem;
+  /* margin-bottom: ${props => props.theme.margin}rem; */
   padding-bottom: 0;
   border-radius: ${props => props.theme.radius};
   max-height: ${props => (props.small ? '10rem' : 'none')};

data-browser/src/components/CommitDetail.tsx

@@ -30,7 +30,7 @@ export function CommitDetail({ commitSubject }: Props): JSX.Element | null {
   return (
     <Detail>
       {signer && <ResourceInline subject={signer} />}
-      {' - '}
+      {'-'}
       <AtomicLink subject={commitSubject}>
         {previousCommit ? 'edited ' : ''}
         {createdAt && <DateTime date={createdAt} />}

data-browser/src/components/Containers.tsx

@@ -10,7 +10,7 @@ export const ContainerNarrow = styled.div`
 `;
 
 export const ContainerWide = styled.div`
-  max-width: ${props => props.theme.containerWidthWide};
+  width: min(100%, ${props => props.theme.containerWidthWide});
   margin: auto;
   padding: ${props => props.theme.margin}rem;
   // Extra space for the navbar below

data-browser/src/components/Detail.tsx

@@ -2,7 +2,9 @@ import styled from 'styled-components';
 
 /** Small component showing some metadata. They appear next to each other. */
 export const Detail = styled.div`
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  gap: 1ch;
   margin-right: 2rem;
 `;
 

data-browser/src/components/Dropdown/index.tsx

@@ -369,5 +369,5 @@ const Menu = styled.div<MenuProps>`
   box-shadow: ${p => p.theme.boxShadowSoft};
   opacity: ${p => (p.visible ? 1 : 0)};
 
-  transition: ${() => transition('opacity')};
+  ${transition('opacity')};
 `;

data-browser/src/components/ErrorLook.tsx

@@ -6,6 +6,7 @@ import { FaExclamationTriangle } from 'react-icons/fa';
 export const ErrorLook = styled.span`
   color: ${props => props.theme.colors.alert};
   font-family: monospace;
+  line-height: 1.2rem;
 `;
 
 export interface ErrorBlockProps {

data-browser/src/components/IconButton/IconButton.tsx

@@ -6,6 +6,7 @@ export enum IconButtonVariant {
   Simple,
   Outline,
   Fill,
+  Colored,
 }
 
 type ColorProp = keyof DefaultTheme['colors'] | 'inherit';
@@ -75,7 +76,7 @@ const IconButtonBase = styled.button<BaseProps>`
   cursor: pointer;
   display: inline-grid;
   place-items: center;
-  transition: ${() => transition('background-color', 'color', 'box-shadow')};
+  ${transition('background-color', 'color', 'box-shadow', 'filter')};
   color: ${p => p.theme.colors.text};
   font-size: ${p => p.size ?? '1em'};
   border: none;
@@ -143,8 +144,22 @@ const FillIconButton = styled(IconButtonBase)<ButtonStyleProps>`
   }
 `;
 
+const ColoredIconButton = styled(IconButtonBase)<ButtonStyleProps>`
+  color: white;
+  background-color: ${p =>
+    p.color === 'inherit' ? 'inherit' : p.theme.colors[p.color]};
+  border-radius: 50%;
+  &:hover,
+  &:focus {
+    color: white;
+    filter: brightness(1.3);
+    box-shadow: ${p => p.theme.boxShadowSoft};
+  }
+`;
+
 const ComponentMap = new Map([
   [IconButtonVariant.Simple, SimpleIconButton],
   [IconButtonVariant.Outline, OutlineIconButton],
   [IconButtonVariant.Fill, FillIconButton],
+  [IconButtonVariant.Colored, ColoredIconButton],
 ]);

data-browser/src/components/NewCard.tsx

@@ -0,0 +1,40 @@
+import { FaPlus } from 'react-icons/fa';
+import styled from 'styled-components';
+import { GridCard } from '../views/FolderPage/GridItem/components';
+import React from 'react';
+
+export interface NewCardProps {
+  onClick: (e: React.MouseEvent) => void;
+}
+
+export function NewCard({ onClick }: NewCardProps) {
+  return (
+    <Thing as='button' onClick={onClick}>
+      <FaPlus />
+    </Thing>
+  );
+}
+
+const Thing = styled(GridCard)`
+  background-color: ${p => p.theme.colors.bg1};
+  border: 1px solid ${p => p.theme.colors.bg2};
+  cursor: pointer;
+  display: grid;
+  place-items: center;
+  height: 100%;
+  width: 100%;
+  font-size: 3rem;
+  color: ${p => p.theme.colors.textLight};
+  transition: color 0.1s ease-in-out, font-size 0.1s ease-out,
+    border-color 0.1s ease-in-out;
+  &:hover,
+  &:focus {
+    color: ${p => p.theme.colors.main};
+    font-size: 3.8rem;
+    border-color: ${p => p.theme.colors.main};
+  }
+
+  :active {
+    font-size: 3rem;
+  }
+`;