feat: improve mobile view

czabaj · Sep 8, 2024 · 6ef40be · 6ef40be
1 parent ef32303
commit 6ef40be
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 18 deletions.
diff --git a/src/components/FormattedDataTime/FormattedDateTimeShort.res b/src/components/FormattedDataTime/FormattedDateTimeShort.res
@@ -32,7 +32,7 @@ let make = (~value) => {
     />
   | _ =>
     <ReactIntl.FormattedDate
-      year=#numeric month=#numeric day=#numeric hour=#numeric minute=#numeric value
+      month=#numeric day=#numeric hour=#numeric minute=#numeric value weekday=#short
     />
   }
 }
diff --git a/src/pages/Place/DrinkDialog.stories.tsx b/src/pages/Place/DrinkDialog.stories.tsx
@@ -20,6 +20,10 @@ const meta: Meta<typeof DrinkDialog> = {
       Hlavní: getKegMock(),
     },
     unfinishedConsumptions: [
+      {
+        ...getUserConsumptionMock(),
+        createdAt: new Date(Date.now() - 8 * dayInMilliseconds),
+      },
       {
         ...getUserConsumptionMock(),
         createdAt: new Date(Date.now() - 4 * dayInMilliseconds),

diff --git a/src/pages/PlacePersonsSetting/PersonDetail.module.css b/src/pages/PlacePersonsSetting/PersonDetail.module.css
@@ -8,6 +8,65 @@
   display: flex;
   gap: 1rem;
   justify-content: space-between;
+  margin-block-end: 0.5rem;
+}
+
+.tableTransactions {
+  --cell-inline-padding: var(--padding-inline, 8px);
+}
+
+.tableTransactions :where(tbody, thead) {
+  display: contents;
+}
+
+.tableTransactions tr {
+  display: grid;
+  grid-template-areas: "dateTime amount description";
+  grid-template-columns: 15ch 12ch 1fr;
+}
+.tableTransactions :where(th, td) {
+  padding-inline: var(--cell-inline-padding);
+}
+.tableTransactions :where(th, td):nth-child(1) {
+  grid-area: dateTime;
+  text-align: right;
+}
+.tableTransactions :where(th, td):nth-child(2) {
+  grid-area: amount;
+  text-align: right;
+}
+.tableTransactions :where(th, td):nth-child(3) {
+  grid-area: description;
+}
+
+
+@supports (grid-template-columns: subgrid) {
+  .tableTransactions {
+    display: grid;
+    grid-template-columns: repeat(2, auto) 1fr;
+  }
+  .tableTransactions tr {
+    grid-column: 1 / -1;
+    grid-template-columns: subgrid !important;
+  }
+}
+
+@media screen and (max-width: 30rem) {
+  .tableTransactions {
+    grid-template-columns: auto 1fr auto;
+  }
+  .tableTransactions tr {
+    grid-template-areas:
+      "dateTime    .           amount"
+      "description description description";
+    grid-template-columns: 1fr 7ch auto;
+  }
+  .tableTransactions th:nth-child(1) {
+    text-align: left;
+  }
+  .tableTransactions :where(th, td):nth-child(2) {
+    padding-inline-end: var(--dialog-padding-inline);
+  }
 }
 
 .unclosed {

diff --git a/src/pages/PlacePersonsSetting/PersonDetail.res b/src/pages/PlacePersonsSetting/PersonDetail.res
@@ -1,4 +1,4 @@
-type classesType = {root: string, unclosed: string}
+type classesType = {root: string, tableTransactions: string, unclosed: string}
 @module("./PersonDetail.module.css") external classes: classesType = "default"
 
 type dialogState =
@@ -134,7 +134,7 @@ let make = (
               className={Styles.button.base}
               onClick={_ => setDialog(_ => AddTransaction)}
               type_="button">
-              {React.string("Zaznamenat platbu")}
+              {React.string("Nová platba")}
             </button>,
             personsAll->Array.length < 2
               ? {"disabled": true, "title": "Přidejte další osoby"}
@@ -148,7 +148,9 @@ let make = (
         | (pending, Some({transactions})) =>
           pending->Array.sort(byCreatedDesc)
           transactions->Array.sort(byCreatedDesc)
-          <table ariaLabelledby="financial_transactions" className={Styles.table.inDialog}>
+          <table
+            ariaLabelledby="financial_transactions"
+            className={`${classes.tableTransactions} ${Styles.table.inDialog}`}>
             <thead>
               <tr>
                 <th scope="col"> {React.string("Datum")} </th>

diff --git a/src/pages/PlacePersonsSetting/PlacePersonsSetting.module.css b/src/pages/PlacePersonsSetting/PlacePersonsSetting.module.css
@@ -14,7 +14,7 @@
 
 .table tr {
   display: grid;
-  grid-template-areas: "name role lastSeen balance";
+  grid-template-areas: "name lastSeen role balance";
   grid-template-columns: 1fr 7ch 13ch 13ch;
 }
 .table :where(th, td) {
@@ -24,10 +24,11 @@
   grid-area: name;
 }
 .table :where(th, td):nth-child(2) {
-  grid-area: role;
+  grid-area: lastSeen;
+  text-align: right;
 }
 .table :where(th, td):nth-child(3) {
-  grid-area: lastSeen;
+  grid-area: role;
   text-align: right;
 }
 .table :where(th, td):nth-child(4) {
@@ -51,12 +52,15 @@
 
 @media screen and (max-width: 33rem) {
   .table {
-    grid-template-columns: auto repeat(2, 1fr);
+    grid-template-columns: auto 1fr auto;
   }
   .table tr {
     grid-template-areas:
-      "name name     balance"
-      "role lastSeen lastSeen";
-    grid-template-columns: auto 1fr;
+      "name     name balance"
+      "lastSeen .    role";
+    grid-template-columns: auto 1fr auto;
+  }
+  .table :where(th, td):nth-child(2) {
+    padding-inline-start: 2ch;
   }
 }
diff --git a/src/pages/PlacePersonsSetting/PlacePersonsSetting.res b/src/pages/PlacePersonsSetting/PlacePersonsSetting.res
@@ -104,8 +104,8 @@ let make = (~placeId) => {
               <thead>
                 <tr>
                   <th scope="col"> {React.string("Host")} </th>
-                  <th scope="col"> {React.string("Role")} </th>
                   <th scope="col"> {React.string("Naposledy")} </th>
+                  <th scope="col"> {React.string("Role")} </th>
                   <th scope="col"> {React.string("Konto")} </th>
                 </tr>
               </thead>
@@ -116,6 +116,11 @@ let make = (~placeId) => {
                    positioning in Safari @see https://github.com/w3c/csswg-drafts/issues/1899 */
                   <tr key=personId onClick={_ => setDialog(_ => PersonDetail({personId, person}))}>
                     <th scope="row"> {React.string(person.name)} </th>
+                    <td>
+                      <FormattedRelativeTime
+                        dateTime={person.recentActivityAt->Firebase.Timestamp.toDate}
+                      />
+                    </td>
                     <td>
                       {person.userId
                       ->Null.toOption
@@ -124,11 +129,6 @@ let make = (~placeId) => {
                       ->Option.map(UserRoles.roleI18n)
                       ->Option.mapOr(React.null, React.string)}
                     </td>
-                    <td>
-                      <FormattedRelativeTime
-                        dateTime={person.recentActivityAt->Firebase.Timestamp.toDate}
-                      />
-                    </td>
                     <td>
                       <FormattedCurrency
                         format={FormattedCurrency.formatAccounting} value=person.balance

diff --git a/src/pages/PlaceSetting/PlaceStats.res b/src/pages/PlaceSetting/PlaceStats.res
@@ -19,7 +19,7 @@ let make = (~chargedKegsValue, ~isUserAuthorized, ~personsCount) => {
       <dd>
         <ReactIntl.FormattedNumber value={personsCount->Float.fromInt} />
       </dd>
-      <dt> {React.string("Hodnota sudů na skladě")} </dt>
+      <dt> {React.string("Sudy na skladě")} </dt>
       <dd>
         <FormattedCurrency value={chargedKegsValue} />
       </dd>