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

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

@@ -11,7 +11,7 @@ const mode = ref<'submit' | 'view'>('submit')
</script>
<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">
<p class="scroll-m-20 text-2xl font-semibold tracking-tight">Leave of Absence</p>
<div class="pt-3">