wip: refactoring layout (question)

kalkulacka-one · Jan 23, 2025 · 49b9e57 · 49b9e57
1 parent b284fc8
commit 49b9e57
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 13 deletions.
diff --git a/apps/web/app/abc/header.tsx b/apps/web/app/abc/header.tsx
@@ -12,7 +12,7 @@ export default function Header() {
 
   return (
     <header className="sticky bottom-0 max-w-[100vw] bg-white">
-      <div className="flex w-full items-center gap-2 p-2 min-[576px]:gap-4 min-[576px]:p-4 sm:p-8">
+      <div className="flex w-full items-center gap-2 p-2 xs:p-4 min-[576px]:gap-4 sm:p-8">
         {/* logo wrapper */}
         <div className="flex gap-2">
           <Logo className="h-5 w-[5.953rem]" />

diff --git a/apps/web/app/abc/otazka/[questionNumber]/page.tsx b/apps/web/app/abc/otazka/[questionNumber]/page.tsx
@@ -34,13 +34,14 @@ export default function Page() {
   return (
     <main className="relative flex flex-1 flex-col">
       {/* mobile navigation wrapper wrapper */}
-      <div className="k1-sticky k1-top-0 k1-flex k1-w-dvw k1-justify-between sm:k1-hidden">
+      <div className="k1-sticky k1-top-0 k1-flex k1-w-dvw k1-justify-between sm:k1-hidden p-2 xs:p-4">
         <Button
           hasIcon
           icon={ArrowIconLeft}
           iconPosition="left"
           kind="link"
           fitContent
+          size="auto"
           onClick={prevQuestion}
         >
           {currentQuestion === 1 ? (
@@ -54,6 +55,7 @@ export default function Page() {
           icon={ArrowIconRight}
           iconPosition="right"
           kind="link"
+          size="auto"
           fitContent
           onClick={skipQuestion}
         >

diff --git a/packages/design-system/src/ui/layout/bottomBar.tsx b/packages/design-system/src/ui/layout/bottomBar.tsx
@@ -35,7 +35,7 @@ export function BottomBar({
 }: Props) {
   return (
     // main wrapper
-    <div className="k1-sticky k1-bottom-0 k1-h-fit k1-w-full">
+    <div className="k1-sticky k1-bottom-0 k1-h-fit k1-w-full k1-bg-white">
       {/* count status wrapper */}
       <div>
         <StepProgressFancy
@@ -45,7 +45,7 @@ export function BottomBar({
         />
       </div>
       {/* button wrapper */}
-      <div className="p-4 k1-flex k1-justify-center">
+      <div className="k1-flex k1-justify-center p-4">
         <div className="k1-grid k1-w-auto k1-grid-cols-[auto_1fr_1fr] k1-items-center k1-justify-center k1-gap-4">
           <StarIconButton
             starPressed={starPressed ? true : false}

diff --git a/packages/design-system/src/ui/layout/questionWrapper.tsx b/packages/design-system/src/ui/layout/questionWrapper.tsx
@@ -44,12 +44,12 @@ export function QuestionWrapper({
             >
               {currentQuestion === 1 ? (
                 <Link href="/abc/navod/1">
-                  <span className="k1-hidden lg:k1-inline">Návod</span>
+                  <span className="k1-hidden md:k1-inline">Návod</span>
                 </Link>
               ) : (
-                <span className="k1-hidden md:k1-block">
-                  Předchozí{" "}
-                  <span className="k1-hidden lg:k1-inline">otázka</span>
+                <span className="k1-hidden md:k1-inline">
+                  Předchozí
+                  <span className="k1-hidden lg:k1-inline"> otázka</span>
                 </span>
               )}
             </Button>
@@ -75,12 +75,12 @@ export function QuestionWrapper({
             >
               {currentQuestion >= questionCount ? (
                 <Link href="/abc/rekapitulace">
-                  <span className="k1-hidden lg:k1-inline">Rekapitulace</span>
+                  <span className="k1-hidden md:k1-inline">Rekapitulace</span>
                 </Link>
               ) : (
-                <span className="k1-hidden md:k1-block">
-                  Přeskočit{" "}
-                  <span className="k1-hidden lg:k1-inline">otázku</span>
+                <span className="k1-hidden md:k1-inline">
+                  Přeskočit
+                  <span className="k1-hidden lg:k1-inline"> otázku</span>
                 </span>
               )}
             </Button>

diff --git a/packages/design-system/src/ui/questionCard/questionCard.tsx b/packages/design-system/src/ui/questionCard/questionCard.tsx
@@ -20,7 +20,7 @@ const QuestionCard = ({ question, currentQuestion, questionCount }: Props) => {
       id={id}
       color="white"
       corner="topLeft"
-      className="k1-flex k1-w-auto k1-flex-col max-[575px]:k1-gap-2 k1-gap-4 max-[575px]:k1-p-customMobile k1-p-customDesktop"
+      className="k1-flex k1-w-auto k1-flex-col max-[575px]:k1-gap-2 k1-gap-4 sm:k1-gap-8 max-[575px]:k1-p-customMobile k1-p-customDesktop"
     >
       <div className="k1-flex k1-flex-wrap k1-items-center k1-gap-4">
         {/* font weight 400 300 issue solve */}