Added whitespace and centered the page contents

This commit is contained in:
ajdj100
2023-08-15 12:49:25 -04:00
parent 97daeff761
commit 1320628fdd

View File

@@ -1,5 +1,4 @@
<script> <script>
import { ref } from 'vue'
import { Listbox, ListboxButton, ListboxOptions, ListboxOption } from '@headlessui/vue' import { Listbox, ListboxButton, ListboxOptions, ListboxOption } from '@headlessui/vue'
import { Icon } from '@iconify/vue' import { Icon } from '@iconify/vue'
import QueryApolloGraphQL from '../api/request' import QueryApolloGraphQL from '../api/request'
@@ -80,12 +79,14 @@ export default {
</script> </script>
<template> <template>
<div id="wrapper" class="w-full flex flex-wrap content-center flex-col">
<!-- Page header (but not really) --> <!-- Page header (but not really) -->
<div id="header"> <div id="header">
<h1>Members</h1> <h1>Members</h1>
<div id="searchRow"> <div id="searchRow">
<input type="text" v-model="search" placeholder="Search..." v-on:input="console.log('hello')" class="mx-2" /> <input type="text" v-model="search" placeholder="Search..." v-on:input="console.log('hello')"
class="mx-2 max-w-md" />
<div id="dropdownWrapper"> <div id="dropdownWrapper">
<Listbox v-model="unitFilter" class="w-32 mx-2"> <Listbox v-model="unitFilter" class="w-32 mx-2">
@@ -141,7 +142,7 @@ export default {
</div> </div>
</div> </div>
<table id="userTable"> <table id="userTable" class="max-w-screen-xl">
<thead> <thead>
<tr> <tr>
<th>Member</th> <th>Member</th>
@@ -160,6 +161,7 @@ export default {
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
</template> </template>
<style scoped> <style scoped>