Skip to content

Commit 6c72404

Browse files
SebKaySebKay
authored
Tailwind (#44)
* Install Tailwind via Bun * Configure Tailwind * Create app-old.scss * Update app.scss * Comment out custom CSS for guest views * Add header to guest views * Add header to app views * Update Guest.vue * Install Tailwind forms plugin * Style login form fields * Style register form fields * Box out login and register forms * Finish styling login and register pages * Add logic to open/close mobile menu * Fix layouts of logged in pages * Remove all custom component styles and unused components * Style notice * Remove old Sass files * Remove sass NPM dependency
1 parent 1638ad0 commit 6c72404

33 files changed

+422
-1285
lines changed

‎bun.lockb‎

18 KB
Binary file not shown.

‎package.json‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,15 @@
44
"dev": "vite",
55
"build": "vite build"
66
},
7-
"dependencies": {
7+
"devDependencies": {
8+
"@heroicons/vue": "^2.0.18",
89
"@inertiajs/vue3": "^1.0.8",
10+
"@tailwindcss/forms": "^0.5.7",
911
"@vitejs/plugin-vue": "^4.2.3",
12+
"autoprefixer": "^10.4.16",
1013
"laravel-vite-plugin": "^0.7.8",
11-
"postcss": "^8.4.24",
12-
"sass": "^1.63.6",
14+
"postcss": "^8.4.31",
15+
"tailwindcss": "^3.3.5",
1316
"vite": "^4.3.9",
1417
"vite-svg-loader": "^4.0.0",
1518
"vue": "^3.3.4"

‎postcss.config.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
}
6+
}

‎resources/js/Components/Button.vue‎

Lines changed: 2 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
<template>
2-
<button :class="classes">
3-
<span
4-
class="btn__text"
5-
v-text="text"
6-
></span>
2+
<button class="rounded-md w-full bg-slate-800 px-6 py-3 text-sm font-semibold text-white shadow-sm hover:bg-slate-500">
3+
<span v-text="text"></span>
74
</button>
85
</template>
96

@@ -36,42 +33,3 @@
3633
},
3734
};
3835
</script>
39-
40-
<style lang="scss">
41-
.btn {
42-
display: inline-flex;
43-
justify-content: center;
44-
cursor: pointer;
45-
border-radius: radius(buttons);
46-
background-color: color(1);
47-
// Type
48-
font-family: font(1);
49-
font-weight: font-weight(bold);
50-
text-align: center;
51-
color: #fff;
52-
}
53-
54-
.btn--full {
55-
width: 100%;
56-
}
57-
58-
.btn[disabled] {
59-
opacity: 0.5;
60-
cursor: not-allowed;
61-
}
62-
63-
//---- Responsive ----//
64-
@media (min-width: (breakpoint(mobile-1) + 1)) {
65-
.btn {
66-
@include rem(18px);
67-
padding: 17px 25px;
68-
}
69-
}
70-
71-
@media (max-width: breakpoint(mobile-1)) {
72-
.btn {
73-
@include rem(16px);
74-
padding: 13px 20px;
75-
}
76-
}
77-
</style>

‎resources/js/Components/Hamburger.vue‎

Lines changed: 0 additions & 68 deletions
This file was deleted.

‎resources/js/Components/Header.vue‎

Lines changed: 86 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,100 +1,95 @@
11
<template>
2-
<header class="header">
3-
<div class="header__inner">
4-
<div class="header__section header__section--logo">
5-
<Link
6-
:href="route('home')"
7-
class="header__logo"
8-
text="Logo"
9-
/>
10-
</div>
2+
<header class="bg-white border-b border-slate-200">
3+
<nav>
4+
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
5+
<div class="flex h-16 items-center justify-between">
6+
<div class="flex items-center">
7+
<div class="flex-shrink-0">
8+
<SparklesIcon class="h-8 w-8" />
9+
</div>
10+
</div>
11+
12+
<div class="hidden md:block">
13+
<div class="hidden md:block">
14+
<div class="ml-10 flex items-baseline space-x-4">
15+
<template
16+
v-for="link in menu"
17+
:key="link.label"
18+
>
19+
<Link
20+
v-if="link.condition"
21+
:href="link.route"
22+
:method="link?.method"
23+
:as="link?.method == 'post' ? 'button' : 'a'"
24+
v-text="link.label"
25+
class="rounded-xl px-3 py-2 text-sm font-medium"
26+
:class="{
27+
'bg-slate-100': link.components.includes($page.component),
28+
'text-slate-500 hover:text-slate-900': !link.components.includes($page.component),
29+
}"
30+
/>
31+
</template>
32+
</div>
33+
</div>
34+
</div>
1135

12-
<div class="header__section header__section--menu">
13-
<slot name="menu" />
36+
<div class="-mr-2 flex md:hidden">
37+
<button
38+
@click="mobileMenuOpen = !mobileMenuOpen"
39+
type="button"
40+
class="relative inline-flex items-center justify-center rounded-md bg-slate-100 p-2 text-slate-900 hover:bg-slate-900 hover:text-white"
41+
>
42+
<span class="sr-only">Open main menu</span>
43+
<XMarkIcon
44+
v-if="mobileMenuOpen"
45+
class="block h-6 w-6"
46+
/>
47+
<Bars3Icon
48+
v-else
49+
class="block h-6 w-6"
50+
/>
51+
</button>
52+
</div>
53+
</div>
1454
</div>
1555

16-
<div class="header__section header__section--mobile-menu">
17-
<slot name="mobile-menu" />
56+
<div
57+
v-show="mobileMenuOpen"
58+
class="md:hidden"
59+
>
60+
<div class="space-y-1 px-2 pb-3 pt-2 sm:px-3">
61+
<template
62+
v-for="link in menu"
63+
:key="link.label"
64+
>
65+
<Link
66+
v-if="link.condition"
67+
:href="link.route"
68+
v-text="link.label"
69+
class="rounded-xl px-3 py-2 text-base font-medium block"
70+
:class="{
71+
'bg-slate-100': link.components.includes($page.component),
72+
'text-slate-500 hover:text-slate-900': !link.components.includes($page.component),
73+
}"
74+
aria-current="page"
75+
/>
76+
</template>
77+
</div>
1878
</div>
19-
</div>
79+
</nav>
2080
</header>
2181
</template>
2282

23-
<style lang="scss">
24-
.header {
25-
width: 100%;
26-
box-shadow: shadow(1);
27-
background-color: #fff;
28-
}
29-
30-
.header__inner {
31-
@extend %d-pv-30;
32-
@extend %m-pv-15;
33-
width: 94%;
34-
max-width: 1280px;
35-
margin-right: auto;
36-
margin-left: auto;
37-
display: flex;
38-
align-items: center;
39-
justify-content: space-between;
40-
flex-wrap: wrap;
41-
}
42-
43-
.header__section {
44-
width: 50%;
45-
display: flex;
46-
}
47-
48-
.header__logo {
49-
// Type
50-
font-weight: font-weight(bold);
51-
text-transform: uppercase;
52-
text-decoration: none;
53-
color: color(2);
54-
}
55-
56-
.header__section--menu {
57-
justify-content: flex-end;
58-
}
59-
60-
//---- Responsive ----//
61-
@media (min-width: (breakpoint(tablet-1) + 1)) {
62-
.header__logo {
63-
@include rem(32px);
64-
}
65-
}
66-
67-
@media (max-width: breakpoint(tablet-1)) and (min-width: (breakpoint(mobile-1) + 1)) {
68-
.header__logo {
69-
@include rem(28px);
70-
}
71-
}
72-
73-
@media (min-width: (breakpoint(mobile-1) + 1)) {
74-
75-
.header__section--menu .hamburger,
76-
.header__section--mobile-menu {
77-
display: none;
78-
}
79-
}
80-
81-
@media (max-width: breakpoint(mobile-1)) {
82-
.header__inner {
83-
.menu {
84-
display: none;
85-
}
86-
87-
.mobile-menu {
88-
margin-top: 15px;
89-
}
90-
}
91-
92-
.header__logo {
93-
@include rem(26px);
94-
}
83+
<script>
84+
export default {
85+
props: {
86+
menu: Array,
87+
},
9588
96-
.header__section--mobile-menu {
97-
width: 100%;
98-
}
99-
}
100-
</style>
89+
data() {
90+
return {
91+
mobileMenuOpen: false,
92+
};
93+
},
94+
};
95+
</script>

0 commit comments

Comments
 (0)