Placeholders fixes

src/components/Feed/Placeholder/Placeholder.module.scss

@@ -17,6 +17,7 @@
     display: flex;
     @include font-size(1.5rem);
     gap: 0.6rem;
+    justify-content: center;
     margin-top: 3rem;
     padding: 1rem 2rem;
     width: 100%;
@@ -29,46 +30,63 @@
 }
 
 .placeholder--feed-mode {
-  aspect-ratio: 1 / 0.8;
   flex-direction: column;
+  min-height: 40rem;
   text-align: center;
 
-  &:after {
-    bottom: 0;
-    content: '';
-    height: 20%;
-    left: 0;
-    position: absolute;
-    width: 100%;
-
-    .placeholder--feed & {
-      background: linear-gradient(to top, #171032, rgba(23, 16, 50, 0));
-    }
-
-    .placeholder--feedCollaborations & {
-      background: linear-gradient(to top, #070709, rgba(7, 7, 9, 0));
-    }
+  @include media-breakpoint-up(lg) {
+    aspect-ratio: 1 / 0.8;
   }
 
   .placeholderCover {
-    flex: 0 100%;
-    width: 100%;
+    flex: 1 100%;
+    position: relative;
+
+    &:after {
+      bottom: 0;
+      content: '';
+      height: 20%;
+      left: 0;
+      position: absolute;
+      width: 100%;
+    }
 
     img {
       position: absolute;
     }
   }
+
+  &.placeholder--feedMy .placeholderCover:after {
+    background: linear-gradient(to top, #171032, rgba(23, 16, 50, 0));
+  }
+
+  &.placeholder--feedCollaborations .placeholderCover:after {
+    background: linear-gradient(to top, #070709, rgba(7, 7, 9, 0));
+  }
 }
 
 .placeholder--profile-mode {
-  min-height: 28rem;
+  min-height: 40rem;
+
+  @include media-breakpoint-down(md) {
+    display: block;
+  }
+
+  @include media-breakpoint-up(md) {
+    min-height: 28rem;
+  }
 
   .placeholderCover {
-    flex: 0 45rem;
-    min-width: 45rem;
-    order: 2;
     padding: 1.6rem;
 
+    @include media-breakpoint-up(md) {
+      flex: 0 45rem;
+      min-width: 50%;
+      order: 2;
+      position: static;
+      width: 45rem;
+    }
+
     img {
       height: auto;
       width: 100%;
@@ -92,9 +110,15 @@
     background: var(--background-color-invert);
     color: var(--default-color-invert);
     bottom: 2rem;
-    position: absolute;
+    left: 2rem;
     right: 2rem;
-    width: auto;
+    width: 100%;
+
+    @include media-breakpoint-up(md) {
+      left: auto;
+      position: absolute;
+      width: auto;
+    }
 
     .icon {
       filter: invert(1);
@@ -117,7 +141,7 @@
   padding: 1.6rem;
 }
 
-.placeholder--feed,
+.placeholder--feedMy,
 .placeholder--feedCollaborations {
   color: var(--default-color-invert);
 
@@ -128,7 +152,7 @@
   }
 }
 
-.placeholder--feed {
+.placeholder--feedMy {
   background: #171032;
 
   .placeholderCover {
@@ -190,6 +214,11 @@
   @include font-size(1.6rem);
   gap: 4rem;
 
+  @include media-breakpoint-down(sm) {
+    flex-direction: column;
+    gap: 1.4rem;
+  }
+
   a {
     border: none !important;
     padding-left: 2.6rem;

src/components/Feed/Placeholder/Placeholder.tsx

@@ -16,7 +16,7 @@ export const Placeholder = (props: PlaceholderProps) => {
   const { author } = useSession()
 
   const data = {
-    feed: {
+    feedMy: {
       image: 'placeholder-feed.webp',
       header: t('Feed settings'),
       text: t('Placeholder feed'),

src/components/Views/Author/Author.tsx

@@ -260,28 +260,32 @@ export const AuthorView = (props: Props) => {
           </div>
         </Match>
         <Match when={getPage().route === 'authorComments'}>
-          <div class="wide-container">
-            <Placeholder type={getPage().route} mode="profile" />
-          </div>
+          <Show when={session()?.user?.app_data?.profile?.slug === props.authorSlug && !commented().length}>
+            <div class="wide-container">
+              <Placeholder type={getPage().route} mode="profile" />
+            </div>
+          </Show>
 
-          <div class="wide-container">
-            <div class="row">
-              <div class="col-md-20 col-lg-18">
-                <ul class={stylesArticle.comments}>
-                  <For each={commented()?.sort(byCreated).reverse()}>
-                    {(comment) => (
-                      <Comment
-                        comment={comment}
-                        class={styles.comment}
-                        showArticleLink={true}
-                        onDelete={(id) => handleDeleteComment(id)}
-                      />
-                    )}
-                  </For>
-                </ul>
+          <Show when={commented()}>
+            <div class="wide-container">
+              <div class="row">
+                <div class="col-md-20 col-lg-18">
+                  <ul class={stylesArticle.comments}>
+                    <For each={commented()?.sort(byCreated).reverse()}>
+                      {(comment) => (
+                        <Comment
+                          comment={comment}
+                          class={styles.comment}
+                          showArticleLink={true}
+                          onDelete={(id) => handleDeleteComment(id)}
+                        />
+                      )}
+                    </For>
+                  </ul>
+                </div>
               </div>
             </div>
-          </div>
+          </Show>
         </Match>
         <Match when={getPage().route === 'author'}>
           <Show

src/components/Views/Feed/Feed.tsx

@@ -235,10 +235,11 @@ export const FeedView = (props: Props) => {
         </div>
 
         <div class="col-md-12 offset-xl-1">
-          <Show
-            when={author() || !sortedArticles().length}
-            fallback={<Placeholder type={page().route} mode="feed" />}
-          >
+          <Show when={!author() && page().route !== 'feed'}>
+            <Placeholder type={page().route} mode="feed" />
+          </Show>
+
+          <Show when={(author() || page().route === 'feed') && sortedArticles().length}>
             <div class={styles.filtersContainer}>
               <ul class={clsx('view-switcher', styles.feedFilter)}>
                 <li

src/pages/feed.page.tsx

@@ -1,6 +1,5 @@
 import { Match, Switch, createEffect, on, onCleanup } from 'solid-js'
 
-import { AuthGuard } from '../components/AuthGuard'
 import { Feed } from '../components/Views/Feed'
 import { PageLayout } from '../components/_shared/PageLayout'
 import { useLocalize } from '../context/localize'
@@ -48,9 +47,7 @@ export const FeedPage = () => {
             <Feed loadShouts={handleFeedLoadShouts} />
           </Match>
           <Match when={page().route === 'feedMy'}>
-            <AuthGuard>
-              <Feed loadShouts={handleMyFeedLoadShouts} />
-            </AuthGuard>
+            <Feed loadShouts={handleMyFeedLoadShouts} />
           </Match>
         </Switch>
       </ReactionsProvider>