Fly talks list tablet

dump-hr · Feb 4, 2025 · 962da57 · 962da57
1 parent 2909042
commit 962da57
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 11 deletions.
diff --git a/apps/app/src/pages/FlyTalksListPage/FlyTalksListPage.module.scss b/apps/app/src/pages/FlyTalksListPage/FlyTalksListPage.module.scss
@@ -24,6 +24,9 @@
     border-radius: 12px 12px 0px 0px;
     padding: 20px;
     z-index: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 
     .listInfoText {
       margin-top: 24px;
@@ -39,7 +42,7 @@
     .groupsList {
       margin-top: 24px;
       display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+      grid-template-columns: repeat(1, minmax(300px, 1fr));
       gap: 24px;
 
       .group {
@@ -203,4 +206,29 @@
       }
     }
   }
+
+  @media screen  and (min-width: 425px) {
+      header{
+        text-align: center;
+        text-transform: uppercase;
+        height: 200px;
+      }
+
+      main{
+        .tabGroup{
+          width: 100%;
+          max-width: 400px;
+        }
+
+        .listInfoText{
+          max-width: 500px;
+          text-align: center;
+        }
+
+        .groupsList{
+          grid-template-columns: repeat(2, minmax(300px, 1fr));
+          max-width: 600px;
+        }
+      }
+  }
 }
diff --git a/apps/app/src/pages/FlyTalksListPage/FlyTalksListPage.tsx b/apps/app/src/pages/FlyTalksListPage/FlyTalksListPage.tsx
@@ -66,10 +66,12 @@ const FlyTalksListPage = () => {
         <p>Fly Talks</p>
       </header>
       <main>
-        <TabGroup setter={handleTabChange}>
-          <Tab id={Tabs.first_day}>23.05</Tab>
-          <Tab id={Tabs.second_day}>24.05</Tab>
-        </TabGroup>
+        <div className={c.tabGroup}>
+          <TabGroup setter={handleTabChange}>
+            <Tab id={Tabs.first_day}>23.05</Tab>
+            <Tab id={Tabs.second_day}>24.05</Tab>
+          </TabGroup>
+        </div>
         <p className={c.listInfoText}>
           Nakon prijave obavezno ostavi link na GitHub ili LinkedIn, te
           predstavi se u kratkim crtama što bolje možeš. Na temelju tog opisa i
@@ -137,7 +139,7 @@ const FlyTalksGroup: React.FC<FlyTalksGroupProps> = ({ key, group }) => {
         </Button>
       </div>
       <div className={c.applianceDisclaimer}>
-        <img src={warning} alt="" />
+        <img src={warning} alt='' />
         <p>
           Nakon prijave sačekaj potvrdu firme. Možeš prijaviti samo jedan fly
           talk.

diff --git a/apps/app/src/pages/FlyTalksPage/FlyTalksPage.module.scss b/apps/app/src/pages/FlyTalksPage/FlyTalksPage.module.scss
@@ -5,6 +5,8 @@
     display: flex;
     flex-direction: column;
     font-family: Inter;
+    overflow: hidden;
+    align-items: center;
 
     .header {
       width: 100%;
@@ -66,19 +68,23 @@
         right: 0;
       }
 
-      @media screen and (min-width: 768px){
+      @media screen and (min-width: 420px){
         .header{
-          height: 500px;
+          height: 200px;
           p{
+            margin-left: 0;
+            text-transform: uppercase;
             text-align: center;
-            font-size: 20px;
+            font-size: 30px;
             margin: 48px 0 0 24px;
           }
         }
         .duckImage{
+          position: relative;
           height: 400px;
-          left: 45%;
-          top: 50px;
+          max-width: 500px;
+          margin-bottom: -100px;
+          margin-right: -150px;
         }
 
         .main{