Merge pull request #15 from 201flaviosilva/13-responsiveness

13 responsiveness
201flaviosilva · May 15, 2023 · f0f5581 · f0f5581
2 parents 0253130 + 591fb78
commit f0f5581
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 4 deletions.
diff --git a/src/components/Header/styled.ts b/src/components/Header/styled.ts
@@ -6,6 +6,14 @@ export const StyledHeader = styled.header`
   justify-content: space-between;
   padding: 8px;
   background-color: var(--lt-color-gray-900);
+
+  @media only screen and (max-width: 768px) {
+    & {
+      padding: 4px 0;
+      width: 100%;
+      flex-direction: column;
+    }
+  }
 `;
 
 export const SearchWrapper = styled.div`

diff --git a/src/components/Main/styled.ts b/src/components/Main/styled.ts
@@ -1,6 +1,8 @@
 import styled from "styled-components";
 
 export const StyledMain = styled.main`
+  position: relative;
   flex: 1;
   padding: 4px;
+  overflow-y: hidden;
 `;
diff --git a/src/components/Task/styled.ts b/src/components/Task/styled.ts
@@ -29,6 +29,12 @@ export const Wrapper = styled.li`
       color: white;
     }
   }
+
+  @media only screen and (max-width: 425px) {
+    & {
+      padding: 2px 4px;
+    }
+  }
 `;
 
 interface DivProps {

diff --git a/src/pages/Home/styled.ts b/src/pages/Home/styled.ts
@@ -3,7 +3,7 @@ import { BaseColors } from "../../types";
 import { BaseColorsNames } from "../../types/customTypes";
 
 export const Wrapper = styled.div`
-  position: relative;
+  max-height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -19,7 +19,7 @@ interface ActionButtonsSectionProps {
 const TRANSACTION_TIME = "0.5s";
 export const ActionsButtonsStyles = {
   Wrapper: styled.aside<ActionButtonsOpenToggleProps>`
-    position: absolute;
+    position: absolute; // Relative to the StyledMain component
     top: 0;
     left: 0;
 
@@ -36,7 +36,18 @@ export const ActionsButtonsStyles = {
     border: 1px solid;
     border-radius: 4px;
 
+    background-color: #242424;
     transition: gap ${TRANSACTION_TIME} ease-out;
+    z-index: 1;
+
+    @media only screen and (max-width: 1024px) {
+      & {
+        top: auto;
+        bottom: 0;
+        padding: 0;
+        max-width: 64px;
+      }
+    }
   `,
 
   Toggle: styled.button`
@@ -69,6 +80,12 @@ export const ActionsButtonsStyles = {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 4px;
+
+    @media only screen and (max-width: 1024px) {
+      & {
+        grid-template-columns: 1fr;
+      }
+    }
   `,
 
   Button: styled.button`
@@ -83,6 +100,18 @@ export const CreateTask = {
     width: 50%;
     align-items: center;
     gap: 8px;
+
+    @media only screen and (max-width: 768px) {
+      & {
+        width: 75%;
+      }
+    }
+
+    @media only screen and (max-width: 425px) {
+      & {
+        width: 90%;
+      }
+    }
   `,
 
   Input: styled.input`
@@ -137,9 +166,11 @@ export const StyledList = styled.div`
     }
   }
 
-  @media only screen and (max-width: 600px) {
+  @media only screen and (max-width: 425px) {
     & {
-      width: 90%;
+      width: 100%;
+      padding: 4px 8px;
+      margin-bottom: 32px;
     }
   }
 

diff --git a/src/types/enums.ts b/src/types/enums.ts
@@ -16,6 +16,7 @@ export enum DEFAULT_USERS_IDS {
   GUEST = "G",
 }
 
+// Styles // TODO: Update to Theme Styles
 // Some of the color are from https://getbootstrap.com/docs/4.0/utilities/colors/
 export enum BaseColors {
   primary = "",