From 7a5ad6deb6bfd315963a384a85b1aff27b83e280 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=B5=A9=E8=BF=9C?= <yang991178@live.com>
Date: Fri, 24 Jul 2020 15:13:10 +0800
Subject: [PATCH] show creator in magazine view

---
 dist/styles/cards.css                  | 15 +++++++++++----
 src/components/cards/info.tsx          | 12 +++++++++---
 src/components/cards/magazine-card.tsx |  2 +-
 3 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/dist/styles/cards.css b/dist/styles/cards.css
index c848344..9a4d3b6 100644
--- a/dist/styles/cards.css
+++ b/dist/styles/cards.css
@@ -1,4 +1,5 @@
 .info {
+    display: flex;
     position: relative;
     margin: 10px 12px;
     line-height: 16px;
@@ -12,13 +13,20 @@
     font-size: 12px;
     vertical-align: top;
     display: inline-block;
-    max-width: 144px;
+    flex-grow: 1;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
+.info span.creator {
+    color: var(--neutralSecondaryAlt);
+}
+.info span.creator::before {
+    display: inline-block;
+    content: "/";
+    margin: 0 5px;
+}
 .info span.time {
-    float: right;
     font-size: 12px;
 }
 
@@ -26,7 +34,6 @@
     display: block;
     width: 16px;
     height: 16px;
-    float: right;
     text-align: center;
 }
 .read-indicator::after {
@@ -81,7 +88,7 @@
     background: #0003;
 }
 .card span.h {
-    background: #fce100b0;
+    background: #fce10080;
 }
 
 .default-card {
diff --git a/src/components/cards/info.tsx b/src/components/cards/info.tsx
index c69ca27..c71a264 100644
--- a/src/components/cards/info.tsx
+++ b/src/components/cards/info.tsx
@@ -7,15 +7,21 @@ type CardInfoProps = {
     source: RSSSource
     item: RSSItem
     hideTime?: boolean
+    showCreator?: boolean
 }
 
 const CardInfo: React.FunctionComponent<CardInfoProps> = (props) => (
     <p className="info">
         {props.source.iconurl ? <img src={props.source.iconurl} /> : null}
-        <span className="name">{props.source.name}</span>
-        {props.hideTime ? null : <Time date={props.item.date} />}
-        {props.item.hasRead ? null : <span className="read-indicator"></span>}
+        <span className="name">
+            {props.source.name}
+            {props.showCreator && props.item.creator && (
+                <span className="creator">{props.item.creator}</span>
+            )}
+        </span>
         {props.item.starred ? <span className="starred-indicator"></span> : null}
+        {props.item.hasRead ? null : <span className="read-indicator"></span>}
+        {props.hideTime ? null : <Time date={props.item.date} />}
     </p>
 )
 
diff --git a/src/components/cards/magazine-card.tsx b/src/components/cards/magazine-card.tsx
index 1d18324..5bf49fd 100644
--- a/src/components/cards/magazine-card.tsx
+++ b/src/components/cards/magazine-card.tsx
@@ -24,7 +24,7 @@ const MagazineCard: React.FunctionComponent<Card.Props> = (props) => (
                 <h3 className="title"><Highlights text={props.item.title} keyword={props.keyword} title /></h3>
                 <p className="snippet"><Highlights text={props.item.snippet} keyword={props.keyword} /></p>
             </div>
-            <CardInfo source={props.source} item={props.item} />
+            <CardInfo source={props.source} item={props.item} showCreator />
         </div>
     </div>
 )