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

a few mobile improvements

Browse Source
This commit is contained in:
ajdj100
2026-01-16 19:37:26 -05:00
parent fafacbefc3
commit b60e5ae28b
2 changed files with 57 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
ui/src/components/promotions/promotionList.vue
View File

@@ -83,9 +83,6 @@ function formatDate(date: Date): string {
</script>
<template>
<div class="flex flex-col max-w-7xl w-full">
<p class="scroll-m-20 text-2xl font-semibold tracking-tight mb-3">
Promotion History
</p>
<div class="w-full mx-auto">
<Table>
<TableHeader>
@@ -130,7 +127,7 @@ function formatDate(date: Date): string {
<div v-if="loading" class="w-full flex mx-auto justify-center my-15">
<Spinner class="size-7"></Spinner>
</div>
<div class="mt-5 flex justify-between">
<div class="mt-5 flex justify-between mb-20">
<div></div>
<Pagination v-slot="{ page }" :items-per-page="pageData?.pageSize || 10" :total="pageData?.total || 10"
:default-page="2" :page="pageNum" @update:page="setPage">

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

@@ -1,27 +1,65 @@
<script setup lang="ts">
import PromotionForm from "@/components/promotions/promotionForm.vue";
import PromotionList from "@/components/promotions/promotionList.vue";
import { ref } from "vue";
const listRef = ref<InstanceType<typeof PromotionList>>(null);
</script>
<template>
<div class="mx-auto mt-10 px-8">
<div class="flex max-h-[70vh] gap-8">
<div class="mx-auto mt-6 lg:mt-10 px-4 lg:px-8">
<!-- LEFT COLUMN -->
<div class="flex-1 border-r pr-8 min-w-2xl">
<PromotionList ref="listRef"></PromotionList>
</div>
<div class="flex items-center justify-between mb-6 lg:hidden">
<h1 class="text-2xl font-semibold tracking-tight">Promotion History</h1>
<!-- RIGHT COLUMN -->
<div class="flex-1 flex pl-8">
<div class="w-full max-w-3xl">
<PromotionForm @submitted="listRef?.refresh" />
<Dialog v-model:open="isFormOpen">
<DialogTrigger as-child>
<Button size="sm" class="gap-2">
<Plus class="size-4" />
Promote
</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>
<div class="flex flex-col lg: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
</p>
<div class="overflow-y-auto lg:max-h-full">
<PromotionList ref="listRef"></PromotionList>
</div>
</div>
<div class="hidden lg:flex flex-1 pl-8">
<div class="w-full max-w-3xl">
<p class="text-2xl font-semibold tracking-tight mb-3">New Promotion</p>
<PromotionForm @submitted="listRef?.refresh" />
</div>
</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>