feat(ui): card visual refactoring

ui/src/articles/components/ArticleCard.module.css

@@ -1,40 +1,79 @@
+
+.card {
+  max-width: 60rem;
+  margin: auto;
+  display: flex;
+  flex-wrap: wrap;
+  background-color: #fff;
+  border-radius: inherit;
+  box-shadow: 0 2px 15px 2px #c1c1c17a;
+  color: #828282;
+  overflow: hidden;
+}
 
-.active {
-  border: 2px solid var(--button-primary-color);
+
+.content {
+  flex: 1;
+  padding: 1em 1em 0em 1em;
+}
+.content > header {
+  color: black;
+  font-size: larger;
+  padding-bottom: .5em;
+}
+.content > p {
+  flex: 1 1 100%;
+  margin: 0;
+  font-size: medium;
 }
 
-.summary {
+.card > a, 
+.card > footer a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.card > footer {
+  padding: 0 1em;
+  font-size: small;
   display: flex;
-  flex-direction: row;
-  overflow: initial !important;
+  align-items: center;
+  border-radius: inherit;
+  width: 100%;
+}
+.card > footer time {
+  flex: 1 1 auto;
+}
+.card > footer > a:after {
+  content: "•";
+  padding: 0 .5em;
 }
-.summary > * {
-  max-height: 240px;
+.card > footer > a > i {
+  font-size: inherit;
+  font-variant: initial;
+  padding-left: .2em;
+  vertical-align: bottom;
 }
 
-.illustration {
-  width: 320px;
+.active {
+  border: 2px solid var(--button-primary-color);
 }
 
 .illustration > img {
-  object-fit: cover;
-  max-height: inherit;
-  width: inherit;
+  align-self: center;
+  border-radius: inherit;
+  max-width: 100%;
 }
 
-.summary > p {
-  flex-grow: 1;
-  padding: 1em;
-  margin: 0;
-  overflow: auto;
+.broken {
+  display: none;
 }
 
-@media (max-width: 640px) {
-  .summary {
-    flex-direction: column;
+@media (min-width: 767px) {
+  .illustration >  {
+    display: flex;
   }
-
-  .illustration {
-    width: 100%;
+  .illustration > img {
+    max-width: 320px;
   }
 }

ui/src/articles/components/ArticleCard.tsx

@@ -1,14 +1,14 @@
 import React from 'react'
 import { Link, RouteComponentProps, withRouter } from 'react-router-dom'
 
-import Panel from '../../common/Panel'
 import useKeyboard from '../../hooks/useKeyboard'
-import ArticleHeader from '../components/ArticleHeader'
 import { Article } from '../models'
 import styles from './ArticleCard.module.css'
-import ArticleFooter from './ArticleFooter'
 import ArticleMenu from './ArticleMenu'
-import MarkAsButton from './MarkAsButton'
+import Icon from '../../common/Icon'
+import TimeAgo from '../../common/TimeAgo'
+import { classNames } from '../../common/helpers';
+import MarkAsButton from './MarkAsButton';
 
 interface Props {
   article: Article
@@ -18,32 +18,45 @@ interface Props {
 
 type AllProps = Props & RouteComponentProps
 
+const menuStyle = {
+  top: 'initial',
+  right: 0,
+  bottom: '100%'
+}
+
 export default withRouter((props: AllProps) => {
   const { article, isActive, onRemove, history, match } = props
 
   const readMorePath = match.url + '/' + props.article.id
 
   useKeyboard('enter', () => history.push(readMorePath), isActive)
   const kbs = isActive ? ' [enter]' : ''
+  const activeClass = isActive ? styles.active : ''
 
   return (
-    <Panel className={isActive ? styles.active : ''}>
-      <ArticleHeader article={article} to={readMorePath}>
-        <ArticleMenu article={article} keyboard={isActive} />
-      </ArticleHeader>
-      <article className={styles.summary}>
-        {article.image && (
-          <Link to={readMorePath} className={styles.illustration} title={'Open article details' + kbs}>
-            <img src={article.image} alt="Illustration" />
-          </Link>
-        )}
-        {article.text && <p>{article.text}</p>}
-      </article>
-      {!article.isOffline && (
-        <ArticleFooter>
-          <MarkAsButton article={article} onSuccess={onRemove} keyboard={isActive} />
-        </ArticleFooter>
+    <article className={classNames(styles.card, activeClass)}>
+      { article.image && (
+        <Link to={readMorePath} title="View details" className={styles.illustration}>
+          <img src={article.image} alt="Illustration" onError={(e) => e.currentTarget.classList.add(styles.broken)} />
+        </Link>
       )}
-    </Panel>
+      <Link to={readMorePath} title="View details" className={styles.content}>
+        <header>
+          {article.title}
+        </header>
+        {article.text && <p>{article.text}</p>}
+      </Link>
+      <footer>
+        {article.url != '' && (
+          <a href={article.url} target="_blank" rel="noopener noreferrer" title="Open original article">
+            {new URL(article.url).hostname}
+            <Icon name="open_in_new" />
+          </a>
+        )}
+        <TimeAgo dateTime={article.created_at} />
+        <ArticleMenu article={article} keyboard={isActive} style={menuStyle}/>
+        {!article.isOffline && <MarkAsButton article={article} onSuccess={onRemove} keyboard={isActive} />}
+      </footer>
+    </article>
   )
 })

ui/src/articles/components/ArticleList.module.css

@@ -6,17 +6,18 @@
 }
 
 .item {
-  margin-bottom: 1em;
+  margin: 1em;
   outline: none;
+  border-radius: 10px;
 }
 
 @media (max-width: 767px) {
   .list {
     padding: 0;
   }
   .item {
-    margin-bottom: 0;
-    border-bottom: 1px solid var(--separator-default-color);
+    margin: 1em;
+    box-shadow: 0 2px 15px 2px #c1c1c17a;
   }
   .item header, .item footer {
     border: none;

ui/src/articles/components/ArticleList.tsx

@@ -8,9 +8,9 @@ import { useMedia } from '../../hooks'
 import useInfiniteScroll from '../../hooks/useInfiniteScroll'
 import useKeyboard from '../../hooks/useKeyboard'
 import { Article } from '../models'
-import ArticleCard from './ArticleCard'
 import styles from './ArticleList.module.css'
 import SwipeableArticleCard from './SwipeableArticleCard'
+import ArticleCard from './ArticleCard'
 
 interface Props {
   articles: Article[]

ui/src/articles/components/ArticleMenu.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { CSSProperties } from 'react'
 import { useQuery } from 'react-apollo-hooks'
 
 import DropdownMenu from '../../common/DropdownMenu'
@@ -14,11 +14,13 @@ import ShareLink from './ShareLink'
 interface Props {
   article: Article
   keyboard?: boolean
+  style?: CSSProperties
 }
 
 type AllProps = Props
 
 export default (props: AllProps) => {
+  const { style, ...attrs } = props
   const nvg: any = window.navigator
 
   const { data, error, loading } = useQuery<GetArchiveServicesResponse>(GetArchiveServices)
@@ -33,22 +35,22 @@ export default (props: AllProps) => {
     Data: ({ archivers }) =>
       archivers.map(service => (
         <li key={`as-${service.id}`}>
-          <ArchiveLink service={service} {...props} />
+          <ArchiveLink service={service} {...attrs} />
         </li>
       )),
     Other: () => <li>Unknown error</li>
   })
 
   return (
-    <DropdownMenu>
+    <DropdownMenu style={style}>
       <ul>
         {nvg.share && (
           <li>
-            <ShareLink {...props} />
+            <ShareLink {...attrs} />
           </li>
         )}
         <li>
-          <OfflineLink {...props} />
+          <OfflineLink {...attrs} />
         </li>
         {renderArchiveServices(data, error, loading)}
       </ul>

ui/src/articles/components/NewArticlesAvailable.tsx

@@ -15,7 +15,7 @@ const renderLabel = (nb: number) => {
     case nb === 1:
       return 'View new article'
     case nb < 0:
-      return 'View new articles'
+      return 'Refresh'
     default:
       return ''
   }
@@ -63,10 +63,8 @@ export default ({ current, category, refresh }: Props) => {
   }
 
   useEffect(() => {
-    console.log('NewArticlesAvailable: init', current)
     const timer = setInterval(() => getNbArticlesToRead(current), 60000)
     return () => {
-      console.log('NewArticlesAvailable: cleanup')
       clearInterval(timer)
     }
   }, [current])

ui/src/articles/components/SwipeableArticleCard.tsx

@@ -7,8 +7,8 @@ import SwipeableListItem from '../../common/SwipeableListItem'
 import { MessageContext } from '../../context/MessageContext'
 import { Article, UpdateArticleStatusRequest } from '../models'
 import { UpdateArticleStatus } from '../queries'
-import ArticleCard from './ArticleCard'
 import styles from './SwipeableArticleCard.module.css'
+import ArticleCard from './ArticleCard'
 
 interface Props {
   article: Article

ui/src/common/DropdownMenu.module.css

@@ -22,7 +22,7 @@
   width: auto;
   color: black;
   font-weight: 400;
-  font-size: 14px;
+  font-size: initial;
 }
 
 .nav ul {

ui/src/common/DropdownMenu.tsx

@@ -1,13 +1,14 @@
-import React, { createRef, ReactNode, useEffect, MouseEventHandler } from 'react'
+import React, { createRef, ReactNode, useEffect, MouseEventHandler, CSSProperties } from 'react'
 
 import ButtonIcon from './ButtonIcon'
 import styles from './DropdownMenu.module.css'
 
 interface Props {
   children: ReactNode
+  style?: CSSProperties
 }
 
-export default ({ children }: Props) => {
+export default ({ children, style }: Props) => {
   const ref = createRef<HTMLDetailsElement>()
 
   const handleClickOutside = (e: MouseEvent) => {
@@ -41,7 +42,7 @@ export default ({ children }: Props) => {
       <summary>
         <ButtonIcon icon="more_vert" onClick={handleClickMenu}/>
       </summary>
-      <nav className={styles.nav} tabIndex={-1}>
+      <nav className={styles.nav} style={style} tabIndex={-1}>
         {children}
       </nav>
     </details>

ui/src/common/SwipeableListItem.module.css

@@ -2,19 +2,20 @@
   width: 100%;
   align-items: center;
   box-sizing: border-box;
-  background-color: #fff;
+  background-color: transparent;
   height: 100%;
   display: flex;
+  border-radius: inherit;
 }
 
 .bouncing {
   transition: transform 0.5s ease-out;
   width: 100%;
   align-items: center;
   box-sizing: border-box;
-  background-color: #fff;
   height: 100%;
   display: flex;
+  border-radius: inherit;
 }
 
 .background {
@@ -26,6 +27,7 @@
   flex-direction: row;
   justify-content: flex-end;
   align-items: center;
+  border-radius: inherit;
 
   padding-right: 32px;
   color: rgba(255, 255, 255, 0.3);
@@ -40,4 +42,5 @@
   transform-origin: top;
   overflow: hidden;
   width: 100%;
+  border-radius: inherit;
 }