17th-Ranger-Battalion-ORG/milsim-site-v4
8
1
Fork 0
Code Issues 38 Pull Requests 1 Actions 3 Packages Projects 1 Releases 14 Wiki Activity

Improved promotion page readability on mobile

Browse Source
This commit is contained in:
ajdj100
2026-01-17 00:54:53 -05:00
parent 045de2fe98
commit 0e37a8bc9c
2 changed files with 41 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
ui/src/components/promotions/promotionForm.vue
View File

@@ -129,11 +129,7 @@ function setAllToday() {
<div class="w-xl">
<form v-if="!formSubmitted" id="trainingForm" @submit.prevent="submitForm"
class="w-full min-w-0 flex flex-col gap-4">
<div>
<FieldLegend class="scroll-m-20 text-2xl font-semibold tracking-tight">
Promotion Form
</FieldLegend>
</div>
<VeeFieldArray name="promotions" v-slot="{ fields, push, remove }">
<FieldSet class="w-full min-w-0">
<div class="flex flex-col gap-2">

82
ui/src/pages/RankChange.vue
View File

@@ -1,29 +1,48 @@
<script setup>
import { ref } from 'vue'
import { Plus, PlusIcon, X } from 'lucide-vue-next'
import PromotionForm from '@/components/promotions/promotionForm.vue'
import PromotionList from '@/components/promotions/promotionList.vue'
import DialogContent from '@/components/ui/dialog/DialogContent.vue'
import Dialog from '@/components/ui/dialog/Dialog.vue'
import DialogTrigger from '@/components/ui/dialog/DialogTrigger.vue'
import DialogHeader from '@/components/ui/dialog/DialogHeader.vue'
import DialogTitle from '@/components/ui/dialog/DialogTitle.vue'
import Button from '@/components/ui/button/Button.vue'
const isFormOpen = ref(false)
const listRef = ref(null)
const isMobileFormOpen = ref(false);
</script>
<template>
<div class="mx-auto mt-6 lg:mt-10 px-4 lg:px-8">
<div class="flex items-center justify-between mb-6 lg:hidden">
<h1 class="text-2xl font-semibold tracking-tight">Promotion History</h1>
<Dialog v-model:open="isFormOpen">
<DialogTrigger as-child>
<Button size="sm" class="gap-2">
<Plus class="size-4" />
Promote
<div class="flex flex-col items-center justify-between mb-6 lg:hidden">
<div v-if="isMobileFormOpen">
<div class="mb-4 flex justify-between items-center">
<p class="scroll-m-20 text-2xl font-semibold tracking-tight">
Promotion Form
</p>
<Button variant="ghost" size="icon" @click="isMobileFormOpen = false">
<X v-if="isMobileFormOpen" class="size-6"></X>
</Button>
</DialogTrigger>
<DialogContent class="w-full h-full max-w-none m-0 rounded-none flex flex-col">
<DialogHeader class="flex-row items-center justify-between border-b pb-4">
<DialogTitle>New Promotion</DialogTitle>
</DialogHeader>
<div class="flex-1 overflow-y-auto pt-6">
<PromotionForm @submitted="handleMobileSubmit" />
</div>
</DialogContent>
</Dialog>
</div>
<PromotionForm @submitted="listRef?.refresh" />
</div>
<div v-else>
<div class="flex justify-between w-full">
<h1 class="text-2xl font-semibold tracking-tight">Promotion History</h1>
<Button @click="isMobileFormOpen = true">
<PlusIcon />Submit
</Button>
</div>
<PromotionList></PromotionList>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:max-h-[70vh] gap-8">
<div class="hidden lg:flex flex-row lg:max-h-[70vh] gap-8">
<div class="flex-1 lg:border-r lg:pr-8 w-full lg:min-w-2xl">
<p class="hidden lg:block scroll-m-20 text-2xl font-semibold tracking-tight mb-3">
Promotion History
@@ -41,25 +60,4 @@
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { Plus } from 'lucide-vue-next'
import PromotionForm from '@/components/promotions/promotionForm.vue'
import PromotionList from '@/components/promotions/promotionList.vue'
import DialogContent from '@/components/ui/dialog/DialogContent.vue'
import Dialog from '@/components/ui/dialog/Dialog.vue'
import DialogTrigger from '@/components/ui/dialog/DialogTrigger.vue'
import DialogHeader from '@/components/ui/dialog/DialogHeader.vue'
import DialogTitle from '@/components/ui/dialog/DialogTitle.vue'
import Button from '@/components/ui/button/Button.vue'
const isFormOpen = ref(false)
const listRef = ref(null)
const handleMobileSubmit = () => {
isFormOpen.value = false // Close the "Whole page" modal
listRef.value?.refresh() // Refresh the list behind it
}
</script>
</template>