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,10 +30,18 @@
 }
 
 .placeholder--feed-mode {
-  aspect-ratio: 1 / 0.8;
   flex-direction: column;
+  min-height: 40rem;
   text-align: center;
 
+  @include media-breakpoint-up(lg) {
+    aspect-ratio: 1 / 0.8;
+  }
+
+  .placeholderCover {
+    flex: 1 100%;
+    position: relative;
+
     &:after {
       bottom: 0;
       content: '';
@@ -40,35 +49,44 @@
       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));
-    }
-  }
-
-  .placeholderCover {
-    flex: 0 100%;
-    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: 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: 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,10 +260,13 @@ export const AuthorView = (props: Props) => {
           </div>
         </Match>
         <Match when={getPage().route === 'authorComments'}>
+          <Show when={session()?.user?.app_data?.profile?.slug === props.authorSlug && !commented().length}>
             <div class="wide-container">
               <Placeholder type={getPage().route} mode="profile" />
             </div>
+          </Show>
 
+          <Show when={commented()}>
             <div class="wide-container">
               <div class="row">
                 <div class="col-md-20 col-lg-18">
@@ -282,6 +285,7 @@ export const AuthorView = (props: Props) => {
                 </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>
           </Match>
         </Switch>
       </ReactionsProvider>