feat: enhance mobile responsiveness & remove MainComposer module redu… (

#288) * feat: enhance mobile responsiveness & remove MainComposer module redundancies * chore: add path alias and changeset, delete unnecessary things * docs: add changeset feature * chore: change the changeset summary * chore: add path alias in home module * feat: enhance mobile responsiveness & remove MainComposer module redundancies * chore: add path alias and changeset, delete unnecessary things * chore: replace from pixel and percentage to rem
devhatt · Jan 11, 2024 · 0afd805 · 0afd805
1 parent 1e791ef
commit 0afd805
Show file tree

Hide file tree

Showing 9 changed files with 156 additions and 113 deletions.
diff --git a/.changeset/fresh-apricots-drive.md b/.changeset/fresh-apricots-drive.md
@@ -0,0 +1,5 @@
+---
+'@octopost/core': patch
+---
+
+In this Changeset, in general, were add features regarding a Adjusting Main Content for Mobile Version.
diff --git a/.changeset/tender-boxes-knock.md b/.changeset/tender-boxes-knock.md
@@ -0,0 +1,5 @@
+---
+'@octopost/core': patch
+---
+
+In general, were add features regarding a Adjusting Main Content for Mobile Version.
diff --git a/src/components/AccordionTab/AccordionTab.module.scss b/src/components/AccordionTab/AccordionTab.module.scss
@@ -1,69 +1,74 @@
 @use '../../styles/global.scss' as *;
+@use '~styles/breakpoints.scss';
 
-.container {
-  display: flex;
-  flex-direction: column;
-
-  align-items: stretch;
-
-  font-family: $mainFont;
-
-  font-size: 1.6rem;
-
-  border: 1px solid #cbc4cf;
+.header {
+  display: none;
+}
 
-  background-color: $primaryWhite;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-  border-radius: 17px 17px 0 0;
+.headerTitle {
+  flex-grow: 1;
 }
 
-.header {
-  width: 100%;
+.closeButton {
+  width: min-content;
 
   display: flex;
-  flex-flow: row nowrap;
 
   align-items: center;
-
-  justify-content: space-between;
+  justify-content: center;
 
   color: $primaryWhite;
-  font-size: 1.6rem;
-  line-height: 1;
+  font-size: 4rem;
+  font-weight: 900;
+
+  margin-right: 2rem;
 
-  padding: 1.2rem;
+  cursor: pointer;
+}
 
-  position: relative;
+@include breakpoints.from600 {
+  .container {
+    display: flex;
+    flex-direction: column;
 
-  background-color: $secondaryPurple;
-  border-radius: 17px 17px 0 0;
+    align-items: stretch;
 
-  &::before {
-    font-size: 1.8rem;
+    font-family: $mainFont;
+    font-size: 1.6rem;
 
-    margin-right: 1rem;
+    border: 1px solid #cbc4cf;
 
-    content: '⬤';
+    background-color: $primaryWhite;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+    border-radius: 17px 17px 0 0;
   }
-}
 
-.headerTitle {
-  flex-grow: 1;
-}
+  .header {
+    width: 100%;
 
-.closeButton {
-  width: min-content;
+    display: flex;
+    flex-flow: row nowrap;
 
-  display: flex;
+    align-items: center;
+    justify-content: space-between;
 
-  align-items: center;
-  justify-content: center;
+    color: $primaryWhite;
+    font-size: 1.6rem;
+    line-height: 1;
 
-  color: $primaryWhite;
-  font-size: 4rem;
-  font-weight: 900;
+    padding: 1.2rem;
 
-  margin-right: 2rem;
+    position: relative;
 
-  cursor: pointer;
+    background-color: $secondaryPurple;
+    border-radius: 17px 17px 0 0;
+
+    &::before {
+      font-size: 1.8rem;
+
+      margin-right: 1rem;
+
+      content: '⬤';
+    }
+  }
 }
diff --git a/src/components/MainComposer/MainComposer.module.scss b/src/components/MainComposer/MainComposer.module.scss
@@ -1,61 +1,15 @@
 @use '~styles/global.scss';
-
-.header {
-  font-size: 2rem;
-
-  padding: 1rem 2rem;
-
-  background-color: global.$secondaryPurple;
-  border-radius: 2rem 2rem 0 0;
-
-  .mainContent {
-    .mainText {
-      color: global.$primaryWhite;
-      font-size: 2.2rem;
-      font-weight: 400;
-      font-style: normal;
-      line-height: 2.8rem;
-
-      &::before {
-        width: 1.5rem;
-        height: 1.5rem;
-
-        display: inline-block;
-
-        float: left;
-
-        margin-top: 0.7rem;
-        margin-right: 1rem;
-
-        background-color: global.$primaryWhite;
-        border-radius: 50%;
-
-        content: '';
-      }
-
-      &::after {
-        width: 2rem;
-        height: 0.5rem;
-
-        display: inline-block;
-
-        float: right;
-
-        margin-top: 1.4rem;
-        margin-left: 1rem;
-
-        background-color: global.$primaryWhite;
-
-        content: '';
-      }
-    }
-  }
-}
+@use '~styles/breakpoints.scss';
 
 .content {
   padding: 2.4rem 1.6rem;
 }
 
+.textInput {
+  display: grid;
+  grid-template-columns: 5fr 1fr;
+}
+
 .textInput textarea {
   width: 100%;
   height: 15rem;
@@ -70,15 +24,41 @@
 }
 
 .contentBotTop {
+  display: flex;
+
+  justify-content: space-between;
+
   font-size: 1.6rem;
 
+  padding: 1rem 0;
+
   border-bottom: 0.1rem solid global.$primaryGray;
+
+  .socialMedias {
+    display: flex;
+
+    align-items: center;
+  }
 }
 
 .contentBotBot {
   font-size: 1.6rem;
 
   margin-bottom: 2.4rem;
+
+  .iconPulsSave {
+    display: flex;
+
+    align-items: center;
+    justify-content: space-between;
+
+    margin-top: 3rem;
+
+    .icons {
+      display: flex;
+      gap: 1.5rem;
+    }
+  }
 }
 
 .mainComposerInputMedia {

diff --git a/src/components/MainComposer/MainComposer.tsx b/src/components/MainComposer/MainComposer.tsx
@@ -19,14 +19,13 @@ function MainComposer() {
           <ComposerEditor />
         </div>
         <div className={scss.contentBot}>
-          <div className={scss.contentBotTop}>
-            <h2>content-bot-top</h2>
-          </div>
+          <div className={scss.contentBotTop}></div>
           <div className={scss.contentBotBot}>
             <div className={scss.mainComposerInputMedia}>
               <MediaInputs />
             </div>
-            <h2>content-bot-bot</h2>
+            <div className={scss.iconPulsSave}></div>
+
             <p>{t('We have a lot of work')}</p>
           </div>
         </div>

diff --git a/src/pages/home/components/Header/Header.module.scss b/src/pages/home/components/Header/Header.module.scss
@@ -1,6 +1,10 @@
+@use '~styles/breakpoints.scss';
+
 .header {
   width: 100%;
 
+  display: block;
+
   margin-bottom: 6.8rem;
 
   padding: 1.6rem 3.2rem;

diff --git a/src/pages/home/home.module.scss b/src/pages/home/home.module.scss
@@ -1,4 +1,5 @@
 @use '~styles/global.scss';
+@use '~styles/breakpoints.scss';
 
 .home {
   display: grid;
@@ -29,8 +30,7 @@
 }
 
 .mainContainer {
-  width: 90%;
-
+  width: 100%;
   max-width: 120rem;
 
   align-items: center;
@@ -40,15 +40,28 @@
 }
 
 .gridContainer {
-  width: 100%;
-
-  display: grid;
   grid-template-areas:
-    'switches input'
-    'switches tabs';
-  grid-template-rows: 1fr 2fr;
-  grid-template-columns: 28.4rem 1fr;
-  gap: 10px;
+    'switches'
+    'input'
+    'tabs';
+  grid-template-rows: auto;
+  grid-template-columns: 1fr;
+
+  text-align: center;
+
+  margin: 0 auto;
+
+  .gridSwitches {
+    display: none;
+
+    &.gridSwitchesVisible {
+      display: block;
+    }
+  }
+
+  .gridInput > :not(:first-child) {
+    display: none;
+  }
 }
 
 .gridSwitches {
@@ -60,3 +73,35 @@
   flex-direction: column;
   grid-area: input;
 }
+
+.gridSavBar {
+  display: none;
+}
+
+@include breakpoints.from600 {
+  .gridContainer {
+    width: 100%;
+
+    display: grid;
+    grid-template-areas:
+      'switches input'
+      'switches tabs';
+    grid-template-rows: 1fr 2fr;
+    grid-template-columns: 28.4rem 1fr;
+    gap: 1rem;
+
+    padding: 0 2rem;
+
+    .gridSwitches {
+      display: block;
+    }
+
+    .gridInput > :not(:first-child) {
+      display: block;
+    }
+  }
+
+  .gridSavBar {
+    display: block;
+  }
+}
diff --git a/src/pages/home/home.tsx b/src/pages/home/home.tsx
@@ -1,7 +1,6 @@
 import FeedbackError from '~components/FeedbackError/FeedbackError';
 import FirstComment from '~components/FirstComment/FirstComment';
 import MainComposer from '~components/MainComposer/MainComposer';
-import MediaInputs from '~components/MediaInputs/MediaInput';
 import SavBar from '~components/SavBar/SavBar';
 
 import Header from './components/Header/Header';
@@ -20,12 +19,13 @@ const Home = () => {
           </div>
           <div className={scss.gridInput}>
             <MainComposer />
-            <MediaInputs />
             <FirstComment />
             <FeedbackError />
           </div>
         </div>
-        <SavBar />
+        <div className={scss.gridSavBar}>
+          <SavBar />
+        </div>
       </div>
     </>
   );

diff --git a/vite.config.ts b/vite.config.ts
@@ -15,7 +15,7 @@ export default defineConfig({
   ],
   resolve: {
     alias: {
-      '~styles/global.scss': path.join(__dirname, 'src/styles/global.scss'),
+      '~styles': path.join(__dirname, 'src/styles'),
     },
   },
   build: {