17th-Ranger-Battalion-ORG/17th-Site-Front-End-V2
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request 'tailwind-testing' (#1) from tailwind-testing into master

Browse Source 
Reviewed-on: https://iceberg-gaming.com:5443/Ajdj100/17th-Site-Front-End-V2/pulls/1
This commit was merged in pull request #1.
This commit is contained in:
Ajdj100
2023-05-31 21:02:44 -05:00
parent a0907bba4d 23af21afe8
commit e973ae1397
16 changed files with 625 additions and 364 deletions
Download Patch File Download Diff File Expand all files Collapse all files

581
17th Website/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
17th Website/package.json
View File

@@ -21,9 +21,12 @@
"@vitejs/plugin-vue": "^4.2.1",
"@vue/cli-plugin-router": "~5.0.0",
"@vue/eslint-config-prettier": "^7.1.0",
"autoprefixer": "^10.4.14",
"eslint": "^8.39.0",
"eslint-plugin-vue": "^9.11.0",
"postcss": "^8.4.23",
"prettier": "^2.8.8",
"tailwindcss": "^3.3.2",
"vite": "^4.3.4"
}
}

6
17th Website/postcss.config.js Normal file
View File

@@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

23
17th Website/src/assets/main.css
View File

@@ -1,23 +0,0 @@
@import './base.css';
#app {
/* max-width: 1280px; */
/* margin: 0 auto;
padding: 2rem; */
/* font-weight: normal; */
}
/* @media (min-width: 1024px) {
body {
display: flex;
place-items: center;
}
#app {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 0 2rem;
}
} */

8
17th Website/src/components/ProfilePage/profileHeader.vue
View File

@@ -1,13 +1,17 @@
<script>
// import {subnav} from './profileSubNav.vue'
export default {
name: 'profileHeader',
data() {
return {
count: 0
}
}
},
// components: {
// subnav,
// }
}
</script>
<template>

2
17th Website/src/components/ProfilePage/profileSubNav.vue
View File

@@ -8,7 +8,7 @@ import { RouterLink } from 'vue-router'
link: String,
content: String,
active: Boolean
}
},
}
</script>

89
17th Website/src/components/dropdown/Dropdown.vue
View File

@@ -1,71 +1,32 @@
<script>
import { provide } from 'vue';
import { Icon } from '@iconify/vue'
import clickOutSide from '@mahdikhashan/vue3-click-outside'
export default {
name: 'Dropdown',
provide() {
return {
sharedState: this.sharedState
}
},
data() {
return {
sharedState: {
active: false
}
}
},
methods: {
toggle() {
this.sharedState.active = !this.sharedState.active
},
away() {
this.sharedState.active = false
}
},
components: {
Icon
},
props: {
title: String
},
directives: {
clickOutSide,
}
}
</script>
<template>
<div id="button" @click="toggle" v-click-out-side="away">
<slot name="toggler">
<button>
<p>{{ title }}</p>
<Icon icon="carbon:caret-down" />
</button>
<Listbox v-model="unitFilter" class="w-32 mx-5">
<div class="relative">
<ListboxButton class="w-full h-full bg-gray-dark text-white px-4 rounded-md hover:bg-blue transition-all">
</slot>
<slot />
<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>
</template>
<style scoped>
button {
background-color: var(--background-secondary);
border: none;
border-radius: 5px;
font-size: 15px;
padding: 10px;
padding-left: 15px;
color: var(--white);
display: flex;
flex-direction: row;
align-items: center;
<script>
import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from '@headlessui/vue'
export default {
props: ['currentValue', 'values'],
emits: ['update:currentValue']
}
p {
margin: 0 10px 0 0px;
}
</style>
</script>

29
17th Website/src/components/dropdown/DropdownContent.vue
View File

@@ -1,29 +0,0 @@
<script>
import { inject } from 'vue';
export default {
name: 'DropdownContent',
inject: ['sharedState'],
computed: {
active() {
return this.sharedState.active
}
}
}
</script>
<template>
<div v-if="active">
<slot />
</div>
</template>
<style scoped>
div {
display: block;
width: 10%;
position: absolute;
background-color: var(--background-secondary);
border-radius: 0px 0px 10px 10px;
}
</style>

31
17th Website/src/components/dropdown/DropdownItem.vue
View File

@@ -1,31 +0,0 @@
<script>
export default {
name: 'dropdownItem',
}
</script>
<template>
<div>
<slot></slot>
</div>
</template>
<style scoped>
* {
color: var(--white);
padding: 10px;
}
div {
padding: 15px;
}
div:last-child {
border-radius: 0 0 5px 5px;
}
div:hover {
background-color: var(--accent-primary);
}
</style>

35
17th Website/src/components/dropdown/testDropdown.vue
View File

@@ -1,35 +0,0 @@
<template>
<Listbox v-model="selectedPerson">
<ListboxButton>{{ selectedPerson.name }}</ListboxButton>
<ListboxOptions>
<ListboxOption v-for="person in people" :key="person.id" :value="person" :disabled="person.unavailable">
{{ person.name }}
</ListboxOption>
</ListboxOptions>
</Listbox>
</template>
<script setup>
import { ref } from 'vue'
import {
Listbox,
ListboxButton,
ListboxOptions,
ListboxOption,
} from '@headlessui/vue'
const people = [
{ id: 1, name: 'Durward Reynolds', unavailable: false },
{ id: 2, name: 'Kenton Towne', unavailable: false },
{ id: 3, name: 'Therese Wunsch', unavailable: false },
{ id: 4, name: 'Benedict Kessler', unavailable: true },
{ id: 5, name: 'Katelyn Rohan', unavailable: false },
]
const selectedPerson = ref(people[0])
</script>
<script>
export default {
name: 'testDropdown'
}
</script>

2
17th Website/src/components/navigation/Navbar.vue
View File

@@ -25,7 +25,7 @@ export default {
<!-- TODO: Connect these buttons to the scripts, figure out if I can turn this into a component or summ -->
<navitem icon="carbon:user" link="/profile" @click="setActive('#user')" :active="activeButton === '#user'" />
<hr>
<hr class="text-white">
<navitem icon="carbon:home" link="/" @click="setActive('#home')" :active="activeButton === '#home'" />
<navitem icon="carbon:events" link="/users" @click="setActive('#users')" :active="activeButton === '#users'"/>
<navitem icon="carbon:align-box-bottom-left" link="#" @click="setActive('#docs')" :active="activeButton === '#docs'"/>

14
17th Website/src/components/navigation/navitem.vue
View File

@@ -35,23 +35,25 @@ export default {
</script>
<template>
<RouterLink :to="link" class="button" :class="{active: active}">
<div class="aspect-square flex items-center place-content-center">
<RouterLink :to="link" class="button" :class="{ active: active }">
<Icon :icon="icon" />
</RouterLink>
</div>
</template>
<style scoped>
.button {
color: var(--white);
font-size: 30px;
overflow: hidden;
height: 40px;
font-size: 35px;
/* overflow: hidden; */
/* height: 40px; */
display: flex;
align-items: center;
justify-content: center;
margin: 10px 10px;
padding: 5px;
margin: 10px;
padding: 10px;
transition: color 0.2s ease-in-out;
}

3
17th Website/src/main.js
View File

@@ -1,4 +1,5 @@
import './assets/main.css'
// import './assets/main.css'
import './style.css'
import { createApp } from 'vue'
import App from './App.vue'

5
17th Website/src/assets/base.css → 17th Website/src/style.css
View File

@@ -1,4 +1,9 @@
/* color palette from <https://github.com/vuejs/theme> */
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
--background-primary: #272731;
--background-secondary: #1C1C21;

124
17th Website/src/views/users.vue
View File

@@ -1,7 +1,7 @@
<script>
import { ref } from 'vue'
import { Listbox, ListboxButton, ListboxOptions, ListboxOption } from '@headlessui/vue'
import testDropdown from '../components/dropdown/testDropdown.vue'
import { Icon } from '@iconify/vue'
export default {
data() {
@@ -10,9 +10,6 @@ export default {
items: [{ message: 'Foo' }, { message: 'Bar' }],
dropped: false,
search: '',
filter1: 'All Groups',
filter2: 'All Roles',
unitFilters: [
{ id: 1, name: 'All Groups', disabled: false },
@@ -23,6 +20,16 @@ export default {
],
unitFilter: { id: 1, name: 'All Groups', disabled: false },
roleFilters: [
{ id: 1, name: 'All Roles', disabled: false },
{ id: 2, name: 'NCO', disabled: false },
{ id: 3, name: 'Admin', disabled: false },
{ id: 4, name: 'Recruiter', disabled: false },
{ id: 5, name: 'RRC', disabled: false },
],
roleFilter: { id: 1, name: 'All Roles', disabled: false },
}
},
methods: {
@@ -30,11 +37,9 @@ export default {
this.dropped = !this.dropped
},
resetFilters() {
this.filter1 = 'All Groups'
this.filter2 = 'All Roles'
this.search = ''
this.unitFilter.id = 1
this.unitFilter.name = 'All Groups'
this.unitFilter = this.unitFilters[0];
this.roleFilter = this.roleFilters[0];
}
},
components: {
@@ -42,9 +47,8 @@ export default {
ListboxButton,
ListboxOption,
ListboxOptions,
testDropdown,
Icon,
},
}
// const unitFilter = ref(unitFilters[1])
@@ -58,35 +62,56 @@ export default {
<div id="searchRow">
<input type="text" v-model="search" placeholder="Search..." />
<div id="dropdownWrapper">
<select v-model="filter1">
<option>All Groups</option>
<option>Alpha</option>
<option>Echo</option>
<option>HHC</option>
<option>Recruit</option>
</select>
<select v-model="filter2">
<option>All Roles</option>
<option>NCO</option>
<option>Admin</option>
<option>Recruiter</option>
<option>RRC</option>
</select>
<Listbox v-model="unitFilter">
<ListboxButton class="lbButton">
{{ unitFilter.name }}
<Icon icon="carbon:caret-down" />
<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="lbOptions">
<ListboxOption v-for="unit in unitFilters" :key="unit.id" :value="unit" :disabled="unit.disabled">
<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>
<!-- This button needs to get finished -->
<button @click="resetFilters()">Clear Filters</button>
<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>
<button @click="resetFilters()"
class="bg-gray-dark hover:bg-blue text-white transition-colors duration-0.5s rounded-md px-5">Clear
Filters</button>
</div>
</div>
@@ -112,10 +137,7 @@ export default {
</table>
</template>
<style>
@import '../assets/base.css';
<style scoped>
.lbButton {
background-color: var(--background-secondary);
border: none;
@@ -128,15 +150,6 @@ export default {
position: absolute;
}
button {
transition: all 0.2s ease-out;
cursor: pointer;
}
button:hover {
background-color: var(--accent-primary);
}
.clicked {
filter: brightness(85%)
}
@@ -146,16 +159,6 @@ button:hover {
display: flex;
}
#dropdownWrapper select {
background-color: var(--background-secondary);
border: none;
border-radius: 5px;
color: var(--white);
padding: 10px;
outline: none;
cursor: pointer;
}
input {
background-color: var(--background-secondary);
padding: 10px;
@@ -164,24 +167,13 @@ input {
border-style: none;
border-radius: 5px;
width: 25vw;
/* transition: all 0.2s ease-out; THESE TRANSITIONS ARE BROKEN*/
}
/* textarea:focus, input:focus {
outline-color: var(--accent-primary);
border-color: var(--accent-primary);
} */
#searchRow {
margin: 30px 0;
display: flex;
}
#searchRow select,
button {
margin: 0 15px 0 0;
}
#header h1 {
color: var(--white);
font-weight: 400;

20
17th Website/tailwind.config.js Normal file
View File

@@ -0,0 +1,20 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
darkMode: true,
theme: {
colors: {
'white': '#EDF2F4',
'blue': '#01bde7',
'gray-dark': '#1C1C21',
'gray-light': '#272731'
},
extend: {},
},
plugins: [],
}