feat(subplebbits): add responsive design, vote buttons, preferences button

src/components/header/header.tsx

@@ -199,8 +199,8 @@ const SubplebbitsHeaderTabs = () => {
   return (
     <>
       <li>
-        <Link to={'/communities'} className={styles.selected}>
-          {t('home')}
+        <Link to={'/communities'} className={styles.choice}>
+          approved
         </Link>
       </li>
       <li>
@@ -209,7 +209,7 @@ const SubplebbitsHeaderTabs = () => {
         </Link>
       </li>
       <li>
-        <Link to={'/communities'} className={styles.choice}>
+        <Link to={'/communities'} className={styles.selected}>
           {t('my_communities')}
         </Link>
       </li>

src/views/subplebbits/subplebbits.module.css

@@ -1,11 +1,19 @@
 @media (max-width: 768px) {
   .content {
-    padding: 7px 0px 0px 0px;
+    padding: 7px 0px 20px 0px;
   }
 
   .sidebar {
     display: none;
   }
+
+  .infobar {
+    margin: 0px 5px;
+  }
+
+  .subplebbit {
+    padding-right: 5px;
+  }
 }
 
 @media (min-width: 768px) {
@@ -13,8 +21,8 @@
     padding: 7px 5px 0px 5px;
   }
 
-  .stateString {
-    max-width: calc(100% - 305px);
+  .stateString, .infobar {
+    max-width: calc(100% - 327px);
   }
 }
 
@@ -24,7 +32,7 @@
   border-style: solid;
   border-width: 1px;
   font-size: small;
-  margin: 0 305px 5px 0px;
+  margin-bottom: 10px;
   padding: 6px 10px;
   color: var(--text);
   word-wrap: break-word;
@@ -41,15 +49,51 @@
 
 .subplebbit {
   margin-bottom: 10px;
+  height: auto;
+  overflow: hidden;
 }
 
 .midcol {
-  margin-right: 5px;
-  margin-top: 5px;
-  text-align: right;
-  width: 12em;
+  width: 37px;
+  font-weight: bold;
+  font-size: small;
   float: left;
-  margin-left: 7px;
+  padding-right: 7px;
+  background: transparent;
+  overflow: hidden;
+}
+
+.arrowWrapper {
+  padding-left: 11px;
+  padding-top: 2px;
+}
+
+.arrowCommon {
+  width: 15px;
+  height: 14px;
+  display: block;
+  cursor: pointer;
+}
+
+.arrowUp {
+  background-image: url("/public/assets/buttons/arrow-up.png");
+}
+
+.upvoted {
+  background-image: url("/public/assets/buttons/arrow-upvoted.png") !important;
+}
+
+.arrowDown {
+  background-image: url("/public/assets/buttons/arrow-down.png");
+}
+
+.downvoted {
+  background-image: url("/public/assets/buttons/arrow-downvoted.png") !important;
+}
+
+.score {
+  text-align: center;
+  color: var(--icon);
 }
 
 .entry {
@@ -58,14 +102,18 @@
 }
 
 .title {
-  margin-bottom: 1px;
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
   font-size: medium;
-  margin-right: 5px;
   overflow: hidden;
   unicode-bidi: isolate;
+  margin-bottom: -2px;
 }
 
 .title a {
+  margin-right: 10px;
+  flex-grow: 1;
   color: var(--link);
 }
 
@@ -73,8 +121,11 @@
   color: var(--link-visited);
 } */
 
+.subscribeButton {
+  margin-top: 2px;
+}
+
 .description {
-  font-size: small;
   max-width: 60em;
   unicode-bidi: isolate;
   background-color: var(--background-markdown);
@@ -83,4 +134,21 @@
   padding: 2px 5px;
   border-radius: 7px;
   margin: 5px 0px;
+  word-wrap: break-word;
+  font-size: 14px;
+}
+
+.subplebbitPreferences {
+  padding: 0 1px;
+  line-height: 1.6em;
+}
+
+.subplebbitPreferences a {
+  color: var(--gray-contrast);
+  font-weight: bold;
+}
+
+.subplebbitPreferences a:hover {
+  text-decoration: underline;
+  cursor: pointer;
 }

src/views/subplebbits/subplebbits.tsx

@@ -16,10 +16,26 @@ const Subplebbit = ({ subplebbit }: SubplebbitProps) => {
   const { address, createdAt, description, shortAddress, title } = subplebbit || {};
   const { allActiveUserCount } = useSubplebbitStats({ subplebbitAddress: address });
 
+  // TODO: make arrows functional when token voting is implemented in the API
+  const upvoted = false;
+  const downvoted = false;
+  const upvoteCount = 0;
+  const downvoteCount = 0;
+
+  const postScore = upvoteCount === 0 && downvoteCount === 0 ? '•' : upvoteCount - downvoteCount || '•';
+
   return (
     <div className={styles.subplebbit}>
       <div className={styles.midcol}>
-        <SubscribeButton address={address} />
+        <div className={styles.midcol}>
+          <div className={styles.arrowWrapper}>
+            <div className={`${styles.arrowCommon} ${upvoted ? styles.upvoted : styles.arrowUp}`} />
+          </div>
+          <div className={styles.score}>{postScore}</div>
+          <div className={styles.arrowWrapper}>
+            <div className={`${styles.arrowCommon} ${downvoted ? styles.downvoted : styles.arrowDown}`} />
+          </div>
+        </div>
       </div>
       <div className={styles.entry}>
         <div className={styles.title}>
@@ -27,11 +43,25 @@ const Subplebbit = ({ subplebbit }: SubplebbitProps) => {
             p/{address.includes('.') ? address : shortAddress}
             {title && `: ${title}`}
           </Link>
+          <span className={styles.subscribeButton}>
+            <SubscribeButton address={address} />
+          </span>
         </div>
         {description && <div className={styles.description}>{description}</div>}
         <div className={styles.tagline}>
           <span>
-            {t('readers_count', { count: allActiveUserCount })}, {t('community_for', { date: getFormattedDuration(createdAt) })}
+            {allActiveUserCount ? (
+              <>
+                {t('members_count', { count: allActiveUserCount })}, {t('community_for', { date: getFormattedDuration(createdAt) })}
+                <div className={styles.subplebbitPreferences}>
+                  <Link to={`/p/${address}/settings`} onClick={(e) => e.preventDefault()}>
+                    {t('preferences')}
+                  </Link>
+                </div>
+              </>
+            ) : (
+              'this community is offline'
+            )}
           </span>
         </div>
       </div>