General fixes to the layout, removal of tabs

AdamKyle · Nov 29, 2024 · e9cd119 · e9cd119
1 parent aae3782
commit e9cd119
Show file tree

Hide file tree

Showing 8 changed files with 64 additions and 36 deletions.
diff --git a/...urces/js/phoniex/components/actions/components/fight-section/attack-buttons-container.tsx b/...urces/js/phoniex/components/actions/components/fight-section/attack-buttons-container.tsx
@@ -5,7 +5,7 @@ const AttackButtonsContainer = (
     props: AttackButtonsContainerProps,
 ): ReactNode => {
     return (
-        <div className="mx-auto mt-4 flex flex-col sm:flex-row items-center justify-center w-full lg:w-1/3 gap-y-4 gap-x-3 text-lg leading-none">
+        <div className="mx-auto mt-4 flex flex-col sm:flex-row items-center justify-center w-full lg:1/4 xl:w-1/3 gap-y-4 gap-x-3 text-lg leading-none">
             {props.children}
         </div>
     );

diff --git a/resources/js/phoniex/components/actions/components/fight-section/health-bar-container.tsx b/resources/js/phoniex/components/actions/components/fight-section/health-bar-container.tsx
@@ -5,11 +5,11 @@ const HealthBarContainer = (props: HealthBarContainerProps): ReactNode => {
     return (
         <div
             className="
-                w-full lg:w-2/3 mx-auto mt-4 flex items-center justify-center
+                w-full lg:w-3/4 xl:w-2/3 mx-auto mt-4 flex items-center justify-center
                 gap-x-3 text-lg leading-none
             "
         >
-            <div className="w-full lg:w-1/3">{props.children}</div>
+            <div className="w-full lg:w-3/4 xl:w-1/3">{props.children}</div>
         </div>
     );
 };

diff --git a/resources/js/phoniex/components/actions/components/fight-section/monster-top-section.tsx b/resources/js/phoniex/components/actions/components/fight-section/monster-top-section.tsx
@@ -11,7 +11,7 @@ const MonsterTopSection = (props: MonsterTopSectionProps): ReactNode => {
                 alt="A cute cat"
                 className="
                     mx-auto mt-4 rounded-md drop-shadow-md
-                    sm:w-64 md:w-72 lg:w-80 xl:w-96
+                    sm:w-64 md:w-72 lg:w-80 lg:w-96
                     transition-all duration-300 ease-in-out transform hover:scale-105
                     dark:drop-shadow-lg dark:border dark:border-gray-700 dark:bg-gray-800
                     focus:outline-none focus:ring-2 focus:ring-danube-500 focus:ring-offset-2 focus:ring-offset-white

diff --git a/resources/js/phoniex/components/actions/components/icon-section/floating-card.tsx b/resources/js/phoniex/components/actions/components/icon-section/floating-card.tsx
@@ -3,7 +3,7 @@ import FloatingCardProps from "./types/floating-card-props";
 
 const FloatingCard = (props: FloatingCardProps): ReactNode => {
     return (
-        <div className="hidden lg:block absolute top-8 left-36 ml-4 shadow-lg rounded-sm border border-gray-500 dark:border-gray-700 w-[28rem] z-10 max-w-none text-black dark:text-gray-300">
+        <div className="absolute top-8 left-36 ml-4 shadow-lg rounded-sm border border-gray-500 dark:border-gray-700 w-[25rem] md:w-[28rem] z-10 max-w-none text-black dark:text-gray-300">
             <div className="bg-gray-400 dark:bg-gray-700 border-b-2 border-b-gray-500 dark:border-b-gray-600 px-4 py-3 flex items-center justify-between">
                 <h3 className="text-lg font-semibold mb-0">{props.title}</h3>
                 <button

diff --git a/resources/js/phoniex/components/actions/components/icon-section/icon-container.tsx b/resources/js/phoniex/components/actions/components/icon-section/icon-container.tsx
@@ -3,7 +3,7 @@ import IconContainerProps from "./types/icon-container-props";
 
 const IconContainer = (props: IconContainerProps): ReactNode => {
     return (
-        <div className="flex lg:flex-col items-center mx-auto w-2/3 lg:w-10 justify-between lg:items-start lg:mr-4 lg:justify-start lg:mt-3 mt-4 space-y-0 lg:space-y-2">
+        <div className="flex lg:flex-col items-center md:mx-auto w-full md:w-2/3 lg:w-10 justify-between lg:items-start lg:mr-4 lg:justify-start lg:mt-3 mt-4 space-y-0 lg:space-y-2">
             <div className="flex lg:flex-col w-full lg:w-auto lg:space-y-2 space-x-2 lg:space-x-0 ">
                 {props.children}
             </div>

diff --git a/resources/js/phoniex/components/actions/partials/icon-section/icon-section.tsx b/resources/js/phoniex/components/actions/partials/icon-section/icon-section.tsx
@@ -70,14 +70,26 @@ const IconSection = (): ReactNode => {
             <AnimatePresence>
                 {showCharacterCard && (
                     <motion.div
-                        initial={{ x: -100, opacity: 0 }}
-                        animate={{ x: 0, opacity: 1 }}
-                        exit={{ x: -100, opacity: 0 }}
+                        initial={{
+                            x: window.innerWidth <= 768 ? 0 : -100,
+                            y: window.innerWidth <= 768 ? -50 : 0,
+                            opacity: 0,
+                        }}
+                        animate={{
+                            x: 0,
+                            y: 0,
+                            opacity: 1,
+                        }}
+                        exit={{
+                            x: window.innerWidth <= 768 ? 0 : -100,
+                            y: window.innerWidth <= 768 ? 0 : 0,
+                            opacity: 0,
+                        }}
                         transition={{ duration: 0.5 }}
                         style={{
                             position: "absolute",
-                            top: "0",
-                            left: "-1rem",
+                            top: window.innerWidth <= 768 ? "5rem" : "0",
+                            left: window.innerWidth <= 768 ? "-195px" : "-1rem",
                             zIndex: 10,
                         }}
                     >
@@ -87,14 +99,26 @@ const IconSection = (): ReactNode => {
 
                 {showCraftingCard && (
                     <motion.div
-                        initial={{ x: -100, opacity: 0 }}
-                        animate={{ x: 0, opacity: 1 }}
-                        exit={{ x: -100, opacity: 0 }}
+                        initial={{
+                            x: window.innerWidth <= 768 ? 0 : -100,
+                            y: window.innerWidth <= 768 ? -50 : 0,
+                            opacity: 0,
+                        }}
+                        animate={{
+                            x: 0,
+                            y: 0,
+                            opacity: 1,
+                        }}
+                        exit={{
+                            x: window.innerWidth <= 768 ? 0 : -100,
+                            y: window.innerWidth <= 768 ? 0 : 0,
+                            opacity: 0,
+                        }}
                         transition={{ duration: 0.5 }}
                         style={{
                             position: "absolute",
-                            top: "0",
-                            left: "-1rem",
+                            top: window.innerWidth <= 768 ? "5rem" : "0",
+                            left: window.innerWidth <= 768 ? "-195px" : "-1rem",
                             zIndex: 10,
                         }}
                     >
@@ -104,14 +128,26 @@ const IconSection = (): ReactNode => {
 
                 {showChatCard && (
                     <motion.div
-                        initial={{ x: -100, opacity: 0 }}
-                        animate={{ x: 0, opacity: 1 }}
-                        exit={{ x: -100, opacity: 0 }}
+                        initial={{
+                            x: window.innerWidth <= 768 ? 0 : -100,
+                            y: window.innerWidth <= 768 ? -50 : 0,
+                            opacity: 0,
+                        }}
+                        animate={{
+                            x: 0,
+                            y: 0,
+                            opacity: 1,
+                        }}
+                        exit={{
+                            x: window.innerWidth <= 768 ? 0 : -100,
+                            y: window.innerWidth <= 768 ? 0 : 0,
+                            opacity: 0,
+                        }}
                         transition={{ duration: 0.5 }}
                         style={{
                             position: "absolute",
-                            top: "0",
-                            left: "-1rem",
+                            top: window.innerWidth <= 768 ? "5rem" : "0",
+                            left: window.innerWidth <= 768 ? "-195px" : "-1rem",
                             zIndex: 10,
                         }}
                     >

diff --git a/resources/js/phoniex/components/game-card.tsx b/resources/js/phoniex/components/game-card.tsx
@@ -1,16 +1,6 @@
 import React, { ReactNode } from "react";
-import Tabs from "../ui/tabs/tabs";
-import CharacterSheet from "./character-sheet/character-sheet";
 import Actions from "./actions/actions";
 
 export const GameCard = (): ReactNode => {
-    return (
-        <Tabs
-            tabs={["Game", "Character Sheet"]}
-            icons={["fas fa-dice-d20", "ra ra-player"]}
-        >
-            <Actions />
-            <CharacterSheet />
-        </Tabs>
-    );
+    return <Actions />;
 };
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -6,7 +6,7 @@ import tailwindcssDir from "tailwindcss-dir";
 export default {
     mode: 'jit',
     content: [
-        './resources/**/*.{js,vue,blade.php,jsx,tsx}',
+        './resources/**/*.{js,vue,blade.php,jsx,tsx,ts}',
         './app/Flare/View/Livewire/**/*.php',
         './vendor/rappasoft/laravel-livewire-tables/resources/views/**/*.blade.php'
     ],
@@ -138,11 +138,13 @@ export default {
                 DEFAULT: "1px 1px 5px 0 rgba(0, 0, 0, 0.16)",
             },
             screens: {
-                'sm': '640px',
+                'sm': '0px',
 
-                'md': '1024px',
+                'md': '667px',
 
-                'lg': '1600px',
+                'lg': '1024px',
+
+                'xl': '1366px'
             },
             colors: {
                 orange: {