Merge branch 'dev' into 'main'

markup fixes

See merge request discoursio/discoursio-webapp!84

src/components/Feed/ArticleCard.module.scss

@@ -28,6 +28,7 @@
 
   .feedControlIcon {
     max-width: 2em;
+    vertical-align: text-bottom;
   }
 }
 

src/components/Feed/Sidebar/Sidebar.module.scss

@@ -53,7 +53,7 @@
   .settings {
     display: flex;
     justify-content: space-between;
-    margin-bottom: 2em;
+    margin: 2em 0;
   }
 
   a {
@@ -87,4 +87,34 @@
       width: 100%;
     }
   }
+
+  h4 {
+    color: #9fa1a7;
+    cursor: pointer;
+    @include font-size(1.2rem);
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    position: relative;
+
+    &:after {
+      content: '+';
+      font-size: 1.6em;
+      line-height: 1;
+      position: absolute;
+      right: 2.5rem;
+      top: -0.2em;
+      transition: transform 0.3s;
+    }
+
+    &.opened {
+      &:after {
+        right: 0.9rem;
+        transform: rotate(45deg);
+      }
+    }
+  }
+
+  .hidden {
+    display: none;
+  }
 }

src/components/Feed/Sidebar/Sidebar.tsx

@@ -1,4 +1,4 @@
-import { For } from 'solid-js'
+import { createSignal, For } from 'solid-js'
 import type { Author } from '../../../graphql/types.gen'
 import { useAuthorsStore } from '../../../stores/zine/authors'
 import { Icon } from '../../_shared/Icon'
@@ -28,6 +28,7 @@ export const Sidebar = (props: FeedSidebarProps) => {
   const { authorEntities } = useAuthorsStore({ authors: props.authors })
   const { articlesByTopic } = useArticlesStore()
   const { topicEntities } = useTopicsStore()
+  const [isSubscriptionsVisible, setSubscriptionsVisible] = createSignal(false)
 
   const checkTopicIsSeen = (topicSlug: string) => {
     return articlesByTopic()[topicSlug]?.every((article) => Boolean(seen()[article.slug]))
@@ -68,11 +69,6 @@ export const Sidebar = (props: FeedSidebarProps) => {
     {
       icon: 'feed-notifications',
       title: t('notifications')
-    },
-    {
-      href: '/feed?by=subscribed',
-      title: t('My subscriptions'),
-      isBold: true
     }
   ]
 
@@ -92,29 +88,46 @@ export const Sidebar = (props: FeedSidebarProps) => {
             </li>
           )}
         </For>
-        <For each={session()?.news?.authors}>
-          {(authorSlug: string) => (
-            <li>
-              <a
-                href={`/author/${authorSlug}`}
-                classList={{ [styles.unread]: checkAuthorIsSeen(authorSlug) }}
-              >
-                <small>@{authorSlug}</small>
-                {authorEntities()[authorSlug]?.name}
-              </a>
-            </li>
-          )}
-        </For>
-        <For each={session()?.news?.topics}>
-          {(topicSlug: string) => (
-            <li>
-              <a href={`/author/${topicSlug}`} classList={{ [styles.unread]: checkTopicIsSeen(topicSlug) }}>
-                {topicEntities()[topicSlug]?.title ?? topicSlug}
-              </a>
-            </li>
-          )}
-        </For>
       </ul>
+
+      <Show when={session()?.news?.authors || session()?.news?.topics}>
+        <h4
+          classList={{ [styles.opened]: isSubscriptionsVisible() }}
+          onClick={() => {
+            setSubscriptionsVisible(!isSubscriptionsVisible())
+          }}
+        >
+          {t('My subscriptions')}
+        </h4>
+        <ul classList={{ [styles.hidden]: !isSubscriptionsVisible() }}>
+          <For each={session()?.news?.authors}>
+            {(authorSlug: string) => (
+              <li>
+                <a
+                  href={`/author/${authorSlug}`}
+                  classList={{ [styles.unread]: checkAuthorIsSeen(authorSlug) }}
+                >
+                  <small>@{authorSlug}</small>
+                  {authorEntities()[authorSlug]?.name}
+                </a>
+              </li>
+            )}
+          </For>
+          <For each={session()?.news?.topics}>
+            {(topicSlug: string) => (
+              <li>
+                <a
+                  href={`/topic/${topicSlug}`}
+                  classList={{ [styles.unread]: checkTopicIsSeen(topicSlug) }}
+                >
+                  {topicEntities()[topicSlug]?.title ?? topicSlug}
+                </a>
+              </li>
+            )}
+          </For>
+        </ul>
+      </Show>
+
       <div class={styles.settings}>
         <a href="/feed/settings">
           <Icon name="settings" class={styles.icon} />

src/components/Views/Edit.tsx

@@ -117,20 +117,20 @@ export const EditView = (props: EditViewProps) => {
 
   return (
     <>
-      <button
-        class={clsx(styles.scrollTopButton, {
-          [styles.visible]: isScrolled()
-        })}
-        onClick={scrollTop}
-      >
-        <Icon name="up-button" class={styles.icon} />
-        <span class={styles.scrollTopButtonLabel}>{t('Scroll up')}</span>
-      </button>
-
       <div class={styles.container}>
         <Title>{t('Write an article')}</Title>
         <form>
           <div class="wide-container">
+            <button
+              class={clsx(styles.scrollTopButton, {
+                [styles.visible]: isScrolled()
+              })}
+              onClick={scrollTop}
+            >
+              <Icon name="up-button" class={styles.icon} />
+              <span class={styles.scrollTopButtonLabel}>{t('Scroll up')}</span>
+            </button>
+
             <div class="row">
               <div class="col-md-19 col-lg-18 col-xl-16 offset-md-5">
                 <div

src/components/Views/Feed.module.scss

@@ -4,8 +4,7 @@
   font-weight: 500;
 
   h4 {
-    font-size: inherit;
+    margin-bottom: 0.8em;
-    margin-bottom: 1.6rem;
   }
 
   ul,

src/styles/app.scss

@@ -262,12 +262,23 @@ button {
     background: #000;
     color: #fff;
     opacity: 1;
+
+    .icon {
+      filter: invert(1);
+    }
   }
 
   &[disabled]:hover {
     background: #fff;
     color: #000;
   }
+
+  .icon {
+    display: inline-block;
+    margin-right: 0.3em;
+    vertical-align: text-bottom;
+    width: 1.4em;
+  }
 }
 
 .button--content-index {