From 1320628fdd70c0e78e037d122dcf12df248297cf Mon Sep 17 00:00:00 2001
From: ajdj100 <AJCampbell@conestogac.on.ca>
Date: Tue, 15 Aug 2023 12:49:25 -0400
Subject: [PATCH] Added whitespace and centered the page contents

---
 17th Website/src/views/users.vue | 146 ++++++++++++++++---------------
 1 file changed, 74 insertions(+), 72 deletions(-)

diff --git a/17th Website/src/views/users.vue b/17th Website/src/views/users.vue
index a81e564..388bce8 100644
--- a/17th Website/src/views/users.vue	
+++ b/17th Website/src/views/users.vue	
@@ -1,5 +1,4 @@
 <script>
-import { ref } from 'vue'
 import { Listbox, ListboxButton, ListboxOptions, ListboxOption } from '@headlessui/vue'
 import { Icon } from '@iconify/vue'
 import QueryApolloGraphQL from '../api/request'
@@ -80,86 +79,89 @@ export default {
 </script>
 
 <template>
-    <!-- Page header (but not really) -->
-    <div id="header">
+    <div id="wrapper" class="w-full flex flex-wrap content-center flex-col">
+        <!-- Page header (but not really) -->
+        <div id="header">
 
-        <h1>Members</h1>
-        <div id="searchRow">
-            <input type="text" v-model="search" placeholder="Search..." v-on:input="console.log('hello')" class="mx-2" />
-            <div id="dropdownWrapper">
+            <h1>Members</h1>
+            <div id="searchRow">
+                <input type="text" v-model="search" placeholder="Search..." v-on:input="console.log('hello')"
+                    class="mx-2 max-w-md" />
+                <div id="dropdownWrapper">
 
-                <Listbox v-model="unitFilter" class="w-32 mx-2">
-                    <div class="relative">
-                        <ListboxButton
-                            class="w-full h-full bg-gray-dark text-white px-4 rounded-md hover:bg-blue transition-all">
+                    <Listbox v-model="unitFilter" class="w-32 mx-2">
+                        <div class="relative">
+                            <ListboxButton
+                                class="w-full h-full bg-gray-dark text-white px-4 rounded-md hover:bg-blue transition-all">
 
-                            <span class="block w-full text-left">{{ unitFilter.name }}</span>
-                            <span class="absolute inset-y-0 right-0 flex items-center pr-2">
-                                <Icon icon="carbon:chevron-sort" />
-                            </span>
-                        </ListboxButton>
-                        <ListboxOptions
-                            class="w-full bg-gray-dark last:rounded-b-md first:rounded-none absolute text-white">
-                            <ListboxOption v-for="unit in unitFilters" :key="unit.id" :value="unit"
-                                :disabled="unit.disabled" v-slot="{ active, selected }"
-                                class="ui-active:text-white p-3 hover:last:rounded-b-md hover:bg-blue transition-colors">
-                                <li>
-                                    {{ unit.name }}
-                                </li>
-                            </ListboxOption>
-                        </ListboxOptions>
-                    </div>
-                </Listbox>
+                                <span class="block w-full text-left">{{ unitFilter.name }}</span>
+                                <span class="absolute inset-y-0 right-0 flex items-center pr-2">
+                                    <Icon icon="carbon:chevron-sort" />
+                                </span>
+                            </ListboxButton>
+                            <ListboxOptions
+                                class="w-full bg-gray-dark last:rounded-b-md first:rounded-none absolute text-white">
+                                <ListboxOption v-for="unit in unitFilters" :key="unit.id" :value="unit"
+                                    :disabled="unit.disabled" v-slot="{ active, selected }"
+                                    class="ui-active:text-white p-3 hover:last:rounded-b-md hover:bg-blue transition-colors">
+                                    <li>
+                                        {{ unit.name }}
+                                    </li>
+                                </ListboxOption>
+                            </ListboxOptions>
+                        </div>
+                    </Listbox>
 
-                <Listbox v-model="roleFilter" class="w-32 mx-2">
-                    <div class="relative">
-                        <ListboxButton
-                            class="w-full h-full bg-gray-dark text-white px-4 rounded-md hover:bg-blue transition-all">
+                    <Listbox v-model="roleFilter" class="w-32 mx-2">
+                        <div class="relative">
+                            <ListboxButton
+                                class="w-full h-full bg-gray-dark text-white px-4 rounded-md hover:bg-blue transition-all">
 
-                            <span class="block w-full text-left">{{ roleFilter.name }}</span>
-                            <span class="absolute inset-y-0 right-0 flex items-center pr-2">
-                                <Icon icon="carbon:chevron-sort" />
-                            </span>
-                        </ListboxButton>
-                        <ListboxOptions
-                            class="w-full bg-gray-dark last:rounded-b-md first:rounded-none absolute text-white">
-                            <ListboxOption v-for="role in roleFilters" :key="role.id" :value="role"
-                                :disabled="role.disabled" v-slot="{ active, selected }"
-                                class="ui-active:text-white p-3 hover:last:rounded-b-md hover:bg-blue transition-colors">
-                                <li>
-                                    {{ role.name }}
-                                </li>
-                            </ListboxOption>
-                        </ListboxOptions>
-                    </div>
-                </Listbox>
+                                <span class="block w-full text-left">{{ roleFilter.name }}</span>
+                                <span class="absolute inset-y-0 right-0 flex items-center pr-2">
+                                    <Icon icon="carbon:chevron-sort" />
+                                </span>
+                            </ListboxButton>
+                            <ListboxOptions
+                                class="w-full bg-gray-dark last:rounded-b-md first:rounded-none absolute text-white">
+                                <ListboxOption v-for="role in roleFilters" :key="role.id" :value="role"
+                                    :disabled="role.disabled" v-slot="{ active, selected }"
+                                    class="ui-active:text-white p-3 hover:last:rounded-b-md hover:bg-blue transition-colors">
+                                    <li>
+                                        {{ role.name }}
+                                    </li>
+                                </ListboxOption>
+                            </ListboxOptions>
+                        </div>
+                    </Listbox>
 
-                <button @click="resetFilters()"
-                    class="bg-gray-dark hover:bg-blue text-white transition-colors duration-0.5s rounded-md px-5 mx-2">Clear
-                    Filters</button>
+                    <button @click="resetFilters()"
+                        class="bg-gray-dark hover:bg-blue text-white transition-colors duration-0.5s rounded-md px-5 mx-2">Clear
+                        Filters</button>
+                </div>
             </div>
-        </div>
 
+        </div>
+        <table id="userTable" class="max-w-screen-xl">
+            <thead>
+                <tr>
+                    <th>Member</th>
+                    <th>Unit</th>
+                    <th>Rank</th>
+                    <th>Join Date</th>
+                    <th>LOA Until</th>
+                    <th>Last Active</th>
+                </tr>
+            </thead>
+            <tbody id="tableBody">
+                <tr v-for="(item, index) in filteredTable">
+                    <td>{{ item.member_name }}</td>
+                    <td>{{ item.status }}</td>
+                    <td>{{ item.rank }}</td>
+                </tr>
+            </tbody>
+        </table>
     </div>
-    <table id="userTable">
-        <thead>
-            <tr>
-                <th>Member</th>
-                <th>Unit</th>
-                <th>Rank</th>
-                <th>Join Date</th>
-                <th>LOA Until</th>
-                <th>Last Active</th>
-            </tr>
-        </thead>
-        <tbody id="tableBody">
-            <tr v-for="(item, index) in filteredTable">
-                <td>{{ item.member_name }}</td>
-                <td>{{ item.status }}</td>
-                <td>{{ item.rank }}</td>
-            </tr>
-        </tbody>
-    </table>
 </template>
 
 <style scoped>