move featured label inline

wanliqun · May 16, 2019 · 4bdc926 · 4bdc926
1 parent cbb9b80
commit 4bdc926
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 22 deletions.
diff --git a/src/app/components/cards/PostSummary.jsx b/src/app/components/cards/PostSummary.jsx
@@ -26,6 +26,8 @@ class PostSummary extends React.Component {
         pending_payout: PropTypes.string.isRequired,
         total_payout: PropTypes.string.isRequired,
         content: PropTypes.object.isRequired,
+        featured: PropTypes.bool,
+        featuredOnClose: PropTypes.func,
         thumbSize: PropTypes.string,
         nsfwPref: PropTypes.string,
     };
@@ -55,7 +57,7 @@ class PostSummary extends React.Component {
 
     render() {
         const { thumbSize, ignore } = this.props;
-        const { post, content } = this.props;
+        const { post, content, featured, featuredOnClose } = this.props;
         const { account } = this.props;
         if (!content) return null;
 
@@ -136,6 +138,16 @@ class PostSummary extends React.Component {
                     {isNsfw && <span className="nsfw-flag">nsfw</span>}
                     {title_text}
                 </Link>
+                {featured && <span className="PinText">Featured</span>}
+                {featured && (
+                    <a
+                        onClick={featuredOnClose}
+                        className="PinDismiss"
+                        title="Dismiss Post"
+                    >
+                        <Icon name="close" />
+                    </a>
+                )}
             </h2>
         );
 

diff --git a/src/app/components/cards/PostsList.jsx b/src/app/components/cards/PostsList.jsx
@@ -205,22 +205,14 @@ class PostsList extends React.Component {
                 };
                 return (
                     <li key={id}>
-                        <div className="PinLabel">
-                            <span className="PinText">Featured</span>
-                            <a
-                                onClick={close}
-                                className="DismissPost"
-                                title="Dismiss Post"
-                            >
-                                <Icon name="close" />
-                            </a>
-                        </div>
                         <PostSummary
                             account={account}
                             post={id}
                             thumbSize={thumbSize}
                             ignore={false}
                             nsfwPref={nsfwPref}
+                            featured
+                            featuredOnClose={close}
                         />
                     </li>
                 );

diff --git a/src/app/components/cards/PostsList.scss b/src/app/components/cards/PostsList.scss
@@ -113,23 +113,29 @@ body.with-post-overlay {
     }
 }
 
-.PostsList__summaries .PinLabel {
-    margin-bottom: 2px;
+.PostsList__summaries {
+    .articles__content {
+        position: relative;
+    }
 
     .PinText {
         @include themify($themes) {
-            position: relative;
-            top: 2px;
-            left: 1px;
-            font-size: 0.875rem;
-            color: themed('textColorSecondary');
+            text-transform: lowercase;
+            color: themed('colorAccent');
+            border: 1px solid themed('colorAccent');
+            font-size: 70%;
+            border-radius: 3px;
+            font-weight: normal;
+            font-family: Arial;
+            margin: 0 0 0 0.5rem;
+            padding: 0px 1px;
+            vertical-align: 15%;
         }
     }
 
-    A.DismissPost {
-        float: right;
-        margin-right: 0.5rem;
-        margin-top: 0.2rem;
+    A.PinDismiss {
+        position: absolute;
+        right: 0;
 
         svg {
             @include themify($themes) {