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

Reworked spacing and layout to improve mobile experience

Browse Source
This commit is contained in:
ajdj100
2026-03-21 23:58:12 -04:00
parent 676e09aef5
commit bae5578afb
3 changed files with 16 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
ui/src/components/loa/loaForm.vue
View File

@@ -169,16 +169,16 @@ const filteredMembers = computed(() => {
</script> </script>
<template> <template>
<div class="flex flex-row-reverse gap-6 mx-auto w-full" :class="!adminMode ? 'max-w-5xl' : 'max-w-5xl'"> <div class="mx-auto flex w-full max-w-5xl flex-col gap-4 lg:flex-row-reverse lg:gap-6">
<div v-if="!adminMode" class="flex-1 flex flex-col space-x-4 rounded-md border p-4"> <div v-if="!adminMode" class="order-2 flex flex-1 flex-col rounded-md border p-4 lg:order-1">
<p class="scroll-m-20 text-2xl font-semibold tracking-tight">LOA Policy</p> <p class="scroll-m-20 text-2xl font-semibold tracking-tight">LOA Policy</p>
<div ref="policyRef" class="bookstack-container"> <div ref="policyRef" class="bookstack-container">
<!-- LOA policy gets loaded here --> <!-- LOA policy gets loaded here -->
</div> </div>
</div> </div>
<div class="flex-1 flex flex-col gap-5"> <div class="order-1 flex flex-1 flex-col gap-5 lg:order-2">
<form v-if="!formSubmitted" @submit="onSubmit" class="flex flex-col gap-2"> <form v-if="!formSubmitted" @submit="onSubmit" class="flex flex-col gap-2">
<div class="flex w-full gap-5"> <div class="grid w-full grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-5">
<VeeField v-slot="{ field, errors }" name="member_id"> <VeeField v-slot="{ field, errors }" name="member_id">
<Field> <Field>
<FieldContent> <FieldContent>
@@ -237,13 +237,13 @@ const filteredMembers = computed(() => {
</Field> </Field>
</VeeField> </VeeField>
</div> </div>
<div class="flex gap-5"> <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-5">
<VeeField v-slot="{ field, errors }" name="start_date"> <VeeField v-slot="{ field, errors }" name="start_date">
<Field> <Field class="w-full">
<FieldContent> <FieldContent>
<FieldLabel>Start Date</FieldLabel> <FieldLabel>Start Date</FieldLabel>
<Popover> <Popover>
<div class="relative inline-flex items-center group"> <div class="group relative flex w-full items-center">
<PopoverTrigger as-child> <PopoverTrigger as-child>
<Button :disabled="!values.type" variant="outline" :class="cn( <Button :disabled="!values.type" variant="outline" :class="cn(
'w-full justify-start text-left font-normal', 'w-full justify-start text-left font-normal',
@@ -259,7 +259,7 @@ const filteredMembers = computed(() => {
text-popover-foreground shadow-md border border-border text-popover-foreground shadow-md border border-border
opacity-0 translate-y-1 opacity-0 translate-y-1
group-hover:opacity-100 group-hover:translate-y-0 group-hover:opacity-100 group-hover:translate-y-0
transition-opacity transition-transform duration-150"> transition-all duration-150">
Select an LOA type first Select an LOA type first
</div> </div>
</div> </div>
@@ -277,11 +277,11 @@ const filteredMembers = computed(() => {
</Field> </Field>
</VeeField> </VeeField>
<VeeField v-slot="{ field, errors }" name="end_date"> <VeeField v-slot="{ field, errors }" name="end_date">
<Field> <Field class="w-full">
<FieldContent> <FieldContent>
<FieldLabel>End Date</FieldLabel> <FieldLabel>End Date</FieldLabel>
<Popover> <Popover>
<div class="relative inline-flex items-center group"> <div class="group relative flex w-full items-center">
<PopoverTrigger as-child> <PopoverTrigger as-child>
<Button :disabled="!values.type" variant="outline" :class="cn( <Button :disabled="!values.type" variant="outline" :class="cn(
'w-full justify-start text-left font-normal', 'w-full justify-start text-left font-normal',
@@ -297,7 +297,7 @@ const filteredMembers = computed(() => {
text-popover-foreground shadow-md border border-border text-popover-foreground shadow-md border border-border
opacity-0 translate-y-1 opacity-0 translate-y-1
group-hover:opacity-100 group-hover:translate-y-0 group-hover:opacity-100 group-hover:translate-y-0
transition-opacity transition-transform duration-150"> transition-all duration-150">
Select an LOA type first Select an LOA type first
</div> </div>
</div> </div>
@@ -330,8 +330,8 @@ const filteredMembers = computed(() => {
</Field> </Field>
</VeeField> </VeeField>
</div> </div>
<div class="flex justify-end"> <div class="flex justify-stretch sm:justify-end">
<Button type="submit" :disabled="submitting" class="w-35"> <Button type="submit" :disabled="submitting" class="w-full sm:w-35">
<span class="flex items-center gap-2" v-if="submitting"> <span class="flex items-center gap-2" v-if="submitting">
<Spinner></Spinner> Submitting… <Spinner></Spinner> Submitting…
</span> </span>
@@ -352,7 +352,7 @@ const filteredMembers = computed(() => {
</p> </p>
<div class="flex gap-3 mt-4"> <div class="mt-4 flex flex-col gap-3 sm:flex-row">
<Button variant="secondary" @click="formSubmitted = false"> <Button variant="secondary" @click="formSubmitted = false">
Submit another request Submit another request
</Button> </Button>

2
ui/src/pages/ManageLOA.vue
View File

@@ -29,7 +29,7 @@ const showLOADialog = ref(false);
<LoaForm :admin-mode="true" class="my-3"></LoaForm> <LoaForm :admin-mode="true" class="my-3"></LoaForm>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
<div class="max-w-5xl mx-auto pt-10"> <div class="mx-auto max-w-5xl px-3 pt-10 sm:px-4 lg:px-0">
<div class="flex justify-between mb-4"> <div class="flex justify-between mb-4">
<h1 class="scroll-m-20 text-2xl font-semibold tracking-tight">LOA Log</h1> <h1 class="scroll-m-20 text-2xl font-semibold tracking-tight">LOA Log</h1>
<div> <div>

2
ui/src/pages/SubmitLOA.vue
View File

@@ -11,7 +11,7 @@ const mode = ref<'submit' | 'view'>('submit')
</script> </script>
<template> <template>
<div class="max-w-5xl mx-auto flex w-full flex-col mt-4 mb-10"> <div class="mx-auto mt-4 mb-10 flex w-full max-w-5xl flex-col px-3 sm:px-4 lg:px-0">
<div class="mb-8"> <div class="mb-8">
<p class="scroll-m-20 text-2xl font-semibold tracking-tight">Leave of Absence</p> <p class="scroll-m-20 text-2xl font-semibold tracking-tight">Leave of Absence</p>
<div class="pt-3"> <div class="pt-3">