Prototype: tabs adjustments

g-loot · Dec 13, 2023 · 2871f9a · 2871f9a
1 parent 1b97828
commit 2871f9a
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 11 deletions.
diff --git a/assets/styles/card.css b/assets/styles/card.css
@@ -1849,7 +1849,7 @@
     flex
     flex-row
     md:max-w-[809px]
-    min-h-10
+    md:min-h-[146px]
     ;
     > .card-image {
       @apply 

diff --git a/pages/stryda/clanevents/[game_slug]/[leaderboard_id]/index.js b/pages/stryda/clanevents/[game_slug]/[leaderboard_id]/index.js
@@ -360,8 +360,8 @@ export default function Ladders() {
             </div>
           </section>
 
-          <nav>
-            <ul className="tabs tabs-tertiary">
+          <nav className="sticky z-40 mb-8 flex justify-start overflow-x-auto scrollbar-hidden px-4 md:px-0 bg-ui-900/95 border-b border-ui-700 top-12">
+            <ul className="tabs">
               {TabsItems.map((item, itemIndex) => (
                 <li key={itemIndex}>
                   <Link

diff --git a/pages/stryda/demo/demo-videomanager.js b/pages/stryda/demo/demo-videomanager.js
@@ -0,0 +1,36 @@
+import React, { useContext, useState, useEffect } from "react";
+
+import { usePrototypeData } from "@/contexts/prototype";
+import { UiContext } from "@/contexts/ui.js";
+import Structure from "../components/Structure";
+import ModalLevelUp from "../modal-levelup";
+import CardMission from "@/pages/stryda/components/CardMission";
+import Battlepass from "@/components/BattlePass/BattlePass";
+
+export default function DemoVideoManager() {
+  const prototype = usePrototypeData();
+  const uiContext = useContext(UiContext);
+  const selectedGame = prototype.getGameByID(prototype.defaultGameID);
+
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (loading) {
+      setTimeout(() => {
+        setLoading(false);
+      }, 1000);
+    }
+  }, [loading]);
+
+  return (
+    <>
+      <Structure title="Profile" hiddenUI={true}></Structure>
+
+      <section className="absolute inset-0 p-4 flex items-center justify-center">
+        <div className="w-full max-w-xl">
+
+        </div>
+      </section>
+    </>
+  );
+}
diff --git a/pages/stryda/ladders/[game_slug]/[ladder_id].js b/pages/stryda/ladders/[game_slug]/[ladder_id].js
@@ -101,8 +101,8 @@ export default function Home() {
 
           {selectedLadder.status === "ongoing" && <LadderPlacements />}
 
-          <nav>
-            <ul className="tabs tabs-tertiary">
+          <nav className="sticky z-40 mb-8 flex justify-start overflow-x-auto scrollbar-hidden px-4 md:px-0 bg-ui-900/95 border-b border-ui-700 top-12">
+            <ul className="tabs">
               {selectedLadder.clan ? (
                 <>
                   {TabsItems.map((item, itemIndex) => (

diff --git a/pages/stryda/search/index.js b/pages/stryda/search/index.js
@@ -74,8 +74,8 @@ export default function Search() {
               />
             </div>
           </div>
-          <nav className="">
-            <ul className="tabs tabs-tertiary">
+          <nav className="sticky z-40 mb-8 flex justify-start overflow-x-auto scrollbar-hidden px-4 md:px-0 bg-ui-900/95 border-b border-ui-700 top-12">
+            <ul className="tabs">
               {TabsItems.map((item, itemIndex) => (
                 <li key={item}>
                   <Link

diff --git a/pages/stryda/shop/[voucher_id]/index.js b/pages/stryda/shop/[voucher_id]/index.js
@@ -141,8 +141,8 @@ export default function Home() {
               </div>
             )}
 
-            <nav>
-              <ul className="tabs tabs-tertiary">
+            <nav className="sticky z-40 mb-8 flex justify-start overflow-x-auto scrollbar-hidden px-4 md:px-0 bg-ui-900/95 border-b border-ui-700 top-12">
+              <ul className="tabs">
                 {selectedVoucher.sections?.map((section, sectionIndex) => (
                   <li key={sectionIndex}>
                     <button

diff --git a/pages/stryda/wallet/index.js b/pages/stryda/wallet/index.js
@@ -71,8 +71,8 @@ export default function Home() {
               <img src="https://res.cloudinary.com/gloot/image/upload/v1689683517/Stryda/illustrations/stryda_v2_pagebg_wallet.jpg" />
             </div>
           </section>
-          <nav>
-            <ul className="tabs tabs-tertiary">
+          <nav className="sticky z-40 mb-8 flex justify-start overflow-x-auto scrollbar-hidden px-4 md:px-0 bg-ui-900/95 border-b border-ui-700 top-12">
+            <ul className="tabs">
               {TabsItems.map((item, itemIndex) => (
                 <li key={item}>
                   <Link