From e0ae47bd5e83773d58985351f1ec460e8326d759 Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Mon, 16 Oct 2023 23:11:08 +0300
Subject: [PATCH] Mobile style fixes

---
 public/icons/key.svg                          |  4 ++
 .../Feed/Sidebar/Sidebar.module.scss          |  2 +
 src/components/Nav/Header/Header.module.scss  | 53 +++++++++++++------
 src/components/Nav/Header/Header.tsx          | 13 +++--
 src/components/Nav/HeaderAuth.tsx             |  4 +-
 src/components/Nav/Topics/Topics.module.scss  | 43 +++++++++++++--
 src/components/Views/Feed.module.scss         |  3 +-
 src/styles/app.scss                           | 12 +++--
 8 files changed, 101 insertions(+), 33 deletions(-)
 create mode 100644 public/icons/key.svg

diff --git a/public/icons/key.svg b/public/icons/key.svg
new file mode 100644
index 00000000..11d788ca
--- /dev/null
+++ b/public/icons/key.svg
@@ -0,0 +1,4 @@
+<svg width="12" height="20" viewBox="0 0 12 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path
+  d="M6 0.25C2.87109 0.25 0.375 2.76758 0.375 5.875C0.375 8.0332 1.5918 9.9043 3.375 10.8477V17.3809C3.375 17.791 3.5625 18.1777 3.88477 18.4336L5.24219 19.5059C5.44727 19.6699 5.69531 19.75 5.94141 19.75C6.2168 19.75 6.49219 19.6484 6.70898 19.4492L9.15625 17.1797C9.33789 17.0117 9.39062 16.7461 9.28906 16.5215L8.625 15.0586V15.0234L9.52734 13.9043C9.79688 13.5684 9.8125 13.0918 9.56055 12.7402L8.625 11.4316V10.8477C10.4082 9.9043 11.625 8.0332 11.625 5.875C11.625 2.76758 9.12891 0.25 6 0.25ZM6 1.75C8.27344 1.75 10.125 3.60156 10.125 5.875C10.125 7.40625 9.28125 8.80469 7.92383 9.52148L7.125 9.94336V11.9121L8.10352 13.2812L7.125 14.4941V15.3828L7.64648 16.5332L5.92383 18.1328L4.97852 17.3848C4.91211 17.334 4.875 17.2559 4.875 17.1719V9.94336L4.07617 9.52148C2.71875 8.80469 1.875 7.40625 1.875 5.875C1.875 3.60156 3.72656 1.75 6 1.75ZM6 3.25C5.17188 3.25 4.5 3.92188 4.5 4.75C4.5 5.57812 5.17188 6.25 6 6.25C6.82812 6.25 7.5 5.57812 7.5 4.75C7.5 3.92188 6.82812 3.25 6 3.25Z" fill="currentColor"/>
+</svg>
diff --git a/src/components/Feed/Sidebar/Sidebar.module.scss b/src/components/Feed/Sidebar/Sidebar.module.scss
index c09de070..5735b053 100644
--- a/src/components/Feed/Sidebar/Sidebar.module.scss
+++ b/src/components/Feed/Sidebar/Sidebar.module.scss
@@ -1,9 +1,11 @@
 .sidebar {
+  margin-top: -0.7rem;
   max-height: calc(100vh - 120px);
   overflow: auto;
   top: 120px;
 
   @include media-breakpoint-up(md) {
+    margin-top: 0;
     position: sticky;
 
     ul > li {
diff --git a/src/components/Nav/Header/Header.module.scss b/src/components/Nav/Header/Header.module.scss
index 9d6fc432..5dffec89 100644
--- a/src/components/Nav/Header/Header.module.scss
+++ b/src/components/Nav/Header/Header.module.scss
@@ -104,9 +104,9 @@
   position: relative;
 
   @include media-breakpoint-down(lg) {
-    flex: 1 !important;
     max-width: 100% !important;
-    padding: 0 !important;
+    position: absolute;
+    right: 0;
   }
 }
 
@@ -139,7 +139,7 @@
     overflow: auto;
     padding: $container-padding-x !important;
     position: fixed;
-    top: 64px;
+    top: 58px;
     width: 100%;
     z-index: 1;
 
@@ -191,8 +191,9 @@
     }
   }
 
-  ul {
+  :global(.view-switcher) {
     margin-top: 0;
+    overflow: hidden;
   }
 
   li {
@@ -217,6 +218,10 @@
   .fixed & {
     display: block;
   }
+
+  a {
+    padding-top: 0.1em;
+  }
 }
 
 .mainNavigationSocial a {
@@ -246,6 +251,30 @@
     background: #f7f7f8;
     border: none;
     border-radius: 1.6rem;
+    padding-right: 5.6rem;
+
+    &:not(:placeholder-shown) {
+      & ~ .mobileSubscriptionSubmit {
+        display: block;
+      }
+    }
+  }
+}
+
+.mobileSubscriptionSubmit {
+  aspect-ratio: 1/1;
+  display: none;
+  height: 100%;
+  position: absolute;
+  right: 0;
+  top: 0;
+
+  img {
+    aspect-ratio: 1/1;
+    left: 50%;
+    position: relative;
+    transform: translateX(-50%);
+    width: 16px !important;
   }
 }
 
@@ -387,19 +416,11 @@
   display: flex;
   justify-content: flex-end;
   position: absolute;
-  right: 5rem;
+  right: 0;
   top: 50%;
   transform: translateY(-50%);
   width: 100%;
 
-  @include media-breakpoint-up(lg) {
-    right: 0;
-  }
-
-  @include media-breakpoint-up(xl) {
-    right: 2rem;
-  }
-
   .control {
     cursor: pointer;
     border: 0;
@@ -446,10 +467,6 @@
     z-index: -1;
   }
 
-  @include media-breakpoint-down(md) {
-    padding: divide($container-padding-x, 2);
-  }
-
   .userpic {
     align-items: center;
     margin-right: 0;
@@ -534,6 +551,8 @@
   }
 
   &:global(.loginbtn) {
+    background: #e9e9ee;
+
     .icon {
       height: 2.4rem;
       width: 2.4rem;
diff --git a/src/components/Nav/Header/Header.tsx b/src/components/Nav/Header/Header.tsx
index 855086ac..23cc3435 100644
--- a/src/components/Nav/Header/Header.tsx
+++ b/src/components/Nav/Header/Header.tsx
@@ -173,6 +173,11 @@ export const Header = (props: Props) => {
 
       <div class={clsx(styles.mainHeaderInner, 'wide-container')}>
         <nav class={clsx('row', styles.headerInner, { ['fixed']: fixed() })}>
+          <div class={clsx(styles.burgerContainer, 'col-auto')}>
+            <div class={styles.burger} classList={{ fixed: fixed() }} onClick={toggleFixed}>
+              <div />
+            </div>
+          </div>
           <div class={clsx('col-md-5 col-xl-4 col-auto', styles.mainLogo)}>
             <a href={getPagePath(router, 'home')}>
               <img src="/logo.svg" alt={t('Discours')} />
@@ -278,6 +283,9 @@ export const Header = (props: Props) => {
                   <div class="pretty-form__item">
                     <input type="email" placeholder="Ваш email" id="subscription-email" />
                     <label for="subscription-email">{t('Your email')}</label>
+                    <button class={styles.mobileSubscriptionSubmit}>
+                      <Icon name="arrow-right" />
+                    </button>
                   </div>
                 </form>
 
@@ -327,11 +335,6 @@ export const Header = (props: Props) => {
               </a>
             </div>
           </Show>
-          <div class={clsx(styles.burgerContainer, 'col-auto')}>
-            <div class={styles.burger} classList={{ fixed: fixed() }} onClick={toggleFixed}>
-              <div />
-            </div>
-          </div>
 
           <div
             class={clsx(styles.subnavigation, 'col')}
diff --git a/src/components/Nav/HeaderAuth.tsx b/src/components/Nav/HeaderAuth.tsx
index 5fe286b7..52ec142f 100644
--- a/src/components/Nav/HeaderAuth.tsx
+++ b/src/components/Nav/HeaderAuth.tsx
@@ -108,7 +108,7 @@ export const HeaderAuth = (props: Props) => {
   return (
     <ShowOnlyOnClient>
       <Show when={isSessionLoaded()} keyed={true}>
-        <div class={clsx('col-sm-6 col-lg-7', styles.usernav)}>
+        <div class={clsx('col-auto col-lg-7', styles.usernav)}>
           <div class={styles.userControl}>
             <Show when={isCreatePostButtonVisible()}>
               <div class={clsx(styles.userControlItem, styles.userControlItemVerbose)}>
@@ -175,7 +175,7 @@ export const HeaderAuth = (props: Props) => {
                 <div class={clsx(styles.userControlItem, styles.userControlItemVerbose, 'loginbtn')}>
                   <a href="?modal=auth&mode=login">
                     <span class={styles.textLabel}>{t('Enter')}</span>
-                    <Icon name="user-default" class={styles.icon} />
+                    <Icon name="key" class={styles.icon} />
                     {/*<Icon name="user-default" class={clsx(styles.icon, styles.iconHover)} />*/}
                   </a>
                 </div>
diff --git a/src/components/Nav/Topics/Topics.module.scss b/src/components/Nav/Topics/Topics.module.scss
index b83c0570..128dc46f 100644
--- a/src/components/Nav/Topics/Topics.module.scss
+++ b/src/components/Nav/Topics/Topics.module.scss
@@ -1,6 +1,5 @@
 .Topics {
-  @include font-size(1.4rem);
-
+  font-size: 1.6rem;
   height: 6rem;
   line-height: 6rem;
   margin-bottom: 3rem;
@@ -12,32 +11,68 @@
     padding: 0 divide($container-padding-x, 2);
   }
 
+  @include media-breakpoint-up(md) {
+    @include font-size(1.4rem);
+  }
+
   .list {
     display: flex;
-    flex-wrap: wrap;
     font-weight: 500;
     list-style: none;
     margin-top: 0;
-    padding: 0 7em 0 0;
+    overflow: auto;
+    padding: 0;
     position: relative;
+
+    @include media-breakpoint-up(lg) {
+      flex-wrap: wrap;
+      overflow: hidden;
+      padding-right: 7em;
+    }
   }
 
   .item {
     margin-right: 2.4rem;
 
     &.right {
+      display: none;
       margin-right: 0;
       position: absolute;
       right: 0;
       top: 0;
+      white-space: nowrap;
+
+      @include media-breakpoint-up(lg) {
+        display: block;
+      }
+
+      :global(.icon) {
+        display: inline-block;
+        margin-left: 0.3em;
+        top: 0.15em;
+      }
     }
 
     a {
       border-bottom: unset;
+
       &.selected {
         font-weight: 500;
         border-bottom: 2px solid var(--default-color);
       }
+
+      &:hover {
+        .icon {
+          filter: invert(1);
+        }
+      }
+    }
+
+    .icon {
+      display: inline-block;
+      margin-left: 0.3em;
+      position: relative;
+      top: 0.15em;
     }
   }
 }
diff --git a/src/components/Views/Feed.module.scss b/src/components/Views/Feed.module.scss
index 8ed68fdf..c9ceeb30 100644
--- a/src/components/Views/Feed.module.scss
+++ b/src/components/Views/Feed.module.scss
@@ -1,5 +1,6 @@
 .feedFilter {
-  margin: 0.2em 0 4.8rem;
+  margin-bottom: 4.8rem;
+  margin-top: 0.2em;
 
   @include media-breakpoint-down(md) {
     margin-right: 4rem !important;
diff --git a/src/styles/app.scss b/src/styles/app.scss
index d2731f41..00c2dd42 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -589,18 +589,22 @@ figure {
 
 .view-switcher {
   @include font-size(1.4rem);
-
   display: flex;
-  flex-wrap: wrap;
   font-weight: 500;
   list-style: none;
-  margin: 3.6rem 0 0;
-  padding: 0;
+  margin: 3.6rem -1rem 0;
+  overflow: auto;
+  padding: 0 1rem;
+
+  @include media-breakpoint-up(md) {
+    flex-wrap: wrap;
+  }
 
   li {
     display: inline-block;
     margin-right: 2rem;
     margin-bottom: 0.6em;
+    white-space: nowrap;
 
     &:last-child {
       margin-right: 0;