wip(ban-tpl): improved web modal mobile responsiveness

tabarra · May 6, 2024 · 0e3d174 · 0e3d174
1 parent 5ed1d40
commit 0e3d174
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 21 deletions.
diff --git a/docs/dev_notes.md b/docs/dev_notes.md
@@ -18,10 +18,12 @@
 - [ ] pre-configured ban/warn reasons with new perm to lock admins to only use them?
     - [ ] apply new ban scheme to the web player modal
     - [ ] apply new ban scheme to the NUI
-    - [x] checklist:
+    - [ ] checklist:
         - [x] light mode
         - [x] multiline
         - [x] mobile
+        - [ ] better random id (no random id? stable-hash?)
+        - [ ] dialog input sanitization
 - [ ] NEW PAGE: Dashboard
     - [ ] new performance chart
     - [ ] number callouts from legacy players page

diff --git a/panel/src/layout/PlayerModal/PlayerBanTab.tsx b/panel/src/layout/PlayerModal/PlayerBanTab.tsx
@@ -112,19 +112,11 @@ export default function PlayerBanTab({ playerRef, banTemplates }: PlayerBanTabPr
 
     return (
         <form onSubmit={handleSubmit} className="grid gap-4 p-1">
-            <div className="grid grid-cols-4 items-center gap-4">
-                <Label htmlFor="banReason" className="col-span-4 xs:col-auto">
+            <div className="flex flex-col gap-3">
+                <Label htmlFor="banReason" className="">
                     Reason
                 </Label>
-                <div className="col-span-full xs:col-span-3 flex gap-1">
-                    <Input
-                        id="banReason"
-                        placeholder="The reason for the ban, rule violated, etc."
-                        className="w-full"
-                        ref={reasonRef}
-                        autoFocus
-                        required
-                    />
+                <div className="flex gap-1">
                     <DropDownSelect onValueChange={handleTemplateSelectChange}>
                         <DropDownSelectTrigger className="tracking-wide">
                             <button
@@ -138,11 +130,11 @@ export default function PlayerBanTab({ playerRef, banTemplates }: PlayerBanTabPr
                             >
                                 <ClipboardPasteIcon className="size-5" />
                                 <DynamicNewItem featName="banTemplates" durationDays={7}>
-                                    <div className="absolute rounded-full size-2 -top-1 -right-1 bg-accent" />
+                                    <div className="absolute rounded-full size-2 -top-1 -left-1 bg-accent" />
                                 </DynamicNewItem>
                             </button>
                         </DropDownSelectTrigger>
-                        <DropDownSelectContent className="tracking-wide max-w-screen-sm" align="center">
+                        <DropDownSelectContent className="tracking-wide w-[calc(100vw-1rem)] sm:max-w-screen-sm">
                             {!banTemplates.length ? (
                                 <div className="text-warning-inline text-center p-4">
                                     You do not have any template configured. <br />
@@ -168,13 +160,21 @@ export default function PlayerBanTab({ playerRef, banTemplates }: PlayerBanTabPr
                             ) : null}
                         </DropDownSelectContent>
                     </DropDownSelect>
+                    <Input
+                        id="banReason"
+                        placeholder="The reason for the ban, rule violated, etc."
+                        className="w-full"
+                        ref={reasonRef}
+                        autoFocus
+                        required
+                    />
                 </div>
             </div>
-            <div className="grid grid-cols-4 items-center gap-4">
-                <Label htmlFor="durationSelect" className="col-span-4 xs:col-auto">
+            <div className="flex flex-col gap-3">
+                <Label htmlFor="durationSelect">
                     Duration
                 </Label>
-                <div className="col-span-full xs:col-span-3 space-y-1">
+                <div className="space-y-1">
                     <Select
                         onValueChange={setCurrentDuration}
                         value={currentDuration}
@@ -223,11 +223,10 @@ export default function PlayerBanTab({ playerRef, banTemplates }: PlayerBanTabPr
                     </div>
                 </div>
             </div>
-            <div className="grid grid-cols-4 items-center gap-4">
+            <div className="flex place-content-end">
                 <Button
                     variant="destructive"
-                    size='xs'
-                    className="col-start-1 col-span-full xs:col-span-3 xs:col-start-2"
+                    size="sm"
                     type="submit"
                     disabled={isSaving}
                 >

diff --git a/panel/src/layout/PlayerModal/PlayerModal.tsx b/panel/src/layout/PlayerModal/PlayerModal.tsx
@@ -18,7 +18,6 @@ import { useBackendApi } from "@/hooks/fetch";
 import { PlayerModalResp, PlayerModalSuccess } from "@shared/playerApiTypes";
 import PlayerModalFooter from "./PlayerModalFooter";
 import ModalCentralMessage from "@/components/ModalCentralMessage";
-import type { BanTemplatesDataType } from "@shared/otherTypes";
 
 
 const modalTabs = [