Skip to content

Commit 9adf3a8

Browse files
SebKaySebKay
authored
Design improvements (#32)
* Add configurable font weights * Add font weights where necessary * Add more breakpoints * Change spacing helpers to be desktop or mobile specific * Add placeholders for all spacing sizes * Apply Sass placeholders for spacing * Fix missing spacing * Fix duplicate styles issues with spacing * Add header and menu * Add responsive styling to header * Add responsive styling for typography * Add responsive styling for forms * Move colors to map * Add tablet styling for header * Make menu component dynamic by passing in data * Change spacing and typography mobile breakpoint * Menu menu links to MenuLink component * Add mobile menu and toggle button * Clear mobile menu active state when navigating between pages
1 parent b0e0dfd commit 9adf3a8

File tree

23 files changed

+620
-110
lines changed

23 files changed

+620
-110
lines changed

‎resources/js/Components/Button.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -43,10 +43,10 @@
4343
justify-content: center;
4444
cursor: pointer;
4545
border-radius: border-radius(buttons);
46-
background-color: $ui-color-1;
46+
background-color: color(1);
4747
// Type
4848
font-family: font(1);
49-
font-weight: bold;
49+
font-weight: font-weight(bold);
5050
text-align: center;
5151
color: #fff;
5252
}
@@ -63,14 +63,14 @@
6363
//---- Responsive ----//
6464
@media (min-width: (breakpoint(mobile-1) + 1)) {
6565
.btn {
66-
@include rem(16px);
66+
@include rem(18px);
6767
padding: 17px 25px;
6868
}
6969
}
7070
7171
@media (max-width: breakpoint(mobile-1)) {
7272
.btn {
73-
@include rem(14px);
73+
@include rem(16px);
7474
padding: 13px 20px;
7575
}
7676
}

‎resources/js/Components/Hamburger.vue‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<template>
2+
<button
3+
class="hamburger"
4+
:class="{ active }"
5+
>
6+
<span class="hamburger__line"></span>
7+
<span class="hamburger__line"></span>
8+
<span class="hamburger__line"></span>
9+
</button>
10+
</template>
11+
12+
<script>
13+
export default {
14+
props: {
15+
active: {
16+
type: Boolean,
17+
required: true,
18+
default: false,
19+
},
20+
},
21+
};
22+
</script>
23+
24+
<style lang="scss">
25+
.hamburger {
26+
width: 35px;
27+
height: 20px;
28+
position: relative;
29+
}
30+
31+
.hamburger__line {
32+
width: 100%;
33+
height: 2px;
34+
background-color: #000;
35+
position: absolute;
36+
left: 0;
37+
38+
&:nth-child(1) {
39+
top: 0px;
40+
}
41+
42+
&:nth-child(2) {
43+
top: 9px;
44+
}
45+
46+
&:nth-child(3) {
47+
top: 18px;
48+
}
49+
}
50+
51+
.hamburger.active {
52+
.hamburger__line {
53+
&:nth-child(1) {
54+
top: 9px;
55+
transform: rotate(45deg);
56+
}
57+
58+
&:nth-child(2) {
59+
opacity: 0;
60+
}
61+
62+
&:nth-child(3) {
63+
top: 9px;
64+
transform: rotate(-45deg);
65+
}
66+
}
67+
}
68+
</style>

‎resources/js/Components/Header.vue‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<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>
11+
12+
<div class="header__section header__section--menu">
13+
<slot name="menu" />
14+
</div>
15+
16+
<div class="header__section header__section--mobile-menu">
17+
<slot name="mobile-menu" />
18+
</div>
19+
</div>
20+
</header>
21+
</template>
22+
23+
<style lang="scss">
24+
.header {
25+
width: 100%;
26+
background-color: #fff;
27+
}
28+
29+
.header__inner {
30+
@extend %d-pv-30;
31+
@extend %m-pv-15;
32+
width: 94%;
33+
max-width: 1280px;
34+
margin-right: auto;
35+
margin-left: auto;
36+
display: flex;
37+
align-items: center;
38+
justify-content: space-between;
39+
flex-wrap: wrap;
40+
}
41+
42+
.header__section {
43+
width: 50%;
44+
display: flex;
45+
}
46+
47+
.header__logo {
48+
// Type
49+
font-weight: font-weight(bold);
50+
text-transform: uppercase;
51+
text-decoration: none;
52+
color: #000;
53+
}
54+
55+
.header__section--menu {
56+
justify-content: flex-end;
57+
}
58+
59+
//---- Responsive ----//
60+
@media (min-width: (breakpoint(tablet-1) + 1)) {
61+
.header__logo {
62+
@include rem(32px);
63+
}
64+
}
65+
66+
@media (max-width: breakpoint(tablet-1)) and (min-width: (breakpoint(mobile-1) + 1)) {
67+
.header__logo {
68+
@include rem(28px);
69+
}
70+
}
71+
72+
@media (min-width: (breakpoint(mobile-1) + 1)) {
73+
.header__section--menu .hamburger,
74+
.header__section--mobile-menu {
75+
display: none;
76+
}
77+
}
78+
79+
@media (max-width: breakpoint(mobile-1)) {
80+
.header__inner {
81+
row-gap: 15px;
82+
83+
.menu {
84+
display: none;
85+
}
86+
}
87+
88+
.header__logo {
89+
@include rem(26px);
90+
}
91+
92+
.header__section--mobile-menu {
93+
width: 100%;
94+
}
95+
}
96+
</style>

‎resources/js/Components/Menu.vue‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<template>
2+
<nav
3+
v-if="links.length > 0"
4+
class="menu"
5+
>
6+
<MenuLink
7+
v-for="link in links"
8+
:link="link"
9+
:classes="['menu__item', { 'menu__item--active': link.components.includes($page.component) }]"
10+
/>
11+
</nav>
12+
</template>
13+
14+
<script>
15+
import MenuLink from "@js/Components/MenuLink.vue";
16+
17+
export default {
18+
components: {
19+
MenuLink,
20+
},
21+
22+
props: {
23+
links: {
24+
type: Array,
25+
required: true,
26+
},
27+
},
28+
};
29+
</script>
30+
31+
<style lang="scss">
32+
.menu {
33+
display: flex;
34+
}
35+
36+
.menu__item {
37+
// Type
38+
font-family: font(1);
39+
font-weight: font-weight(semi-bold);
40+
text-decoration: none;
41+
color: #000;
42+
}
43+
44+
.menu__item--active {
45+
border-bottom: 1px solid #000;
46+
}
47+
48+
//---- Responsive ----//
49+
@media (min-width: (breakpoint(tablet-1) + 1)) {
50+
.menu {
51+
column-gap: 40px;
52+
}
53+
54+
.menu__item {
55+
@include rem(18px);
56+
}
57+
}
58+
59+
@media (max-width: breakpoint(tablet-1)) {
60+
.menu {
61+
column-gap: 30px;
62+
}
63+
64+
.menu__item {
65+
@include rem(16px);
66+
}
67+
}
68+
</style>

‎resources/js/Components/MenuLink.vue‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<template>
2+
<Link
3+
:href="route(link.route)"
4+
:class="classes"
5+
:method="link?.method"
6+
:as="link?.method == 'post' ? 'button' : 'a'"
7+
>
8+
{{ link.label }}
9+
</Link>
10+
</template>
11+
12+
<script>
13+
export default {
14+
props: {
15+
link: {
16+
type: Object,
17+
required: true,
18+
},
19+
classes: {
20+
type: Array,
21+
},
22+
},
23+
};
24+
</script>

‎resources/js/Components/MobileMenu.vue‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<template>
2+
<nav
3+
v-if="links.length > 0"
4+
class="mobile-menu"
5+
>
6+
<MenuLink
7+
v-for="link in links"
8+
:link="link"
9+
:classes="['mobile-menu__item', { 'mobile-menu__item--active': link.components.includes($page.component) }]"
10+
/>
11+
</nav>
12+
</template>
13+
14+
<script>
15+
import MenuLink from "@js/Components/MenuLink.vue";
16+
17+
export default {
18+
components: {
19+
MenuLink,
20+
},
21+
22+
props: {
23+
links: {
24+
type: Array,
25+
required: true,
26+
},
27+
},
28+
};
29+
</script>
30+
31+
<style lang="scss">
32+
.mobile-menu {
33+
width: 100%;
34+
padding: 20px;
35+
display: flex;
36+
flex-direction: column;
37+
align-items: center;
38+
row-gap: 15px;
39+
background-color: color(bg-1);
40+
}
41+
42+
.mobile-menu__item {
43+
@include rem(16px);
44+
// Type
45+
font-family: font(1);
46+
font-weight: font-weight(semi-bold);
47+
text-decoration: none;
48+
color: #000;
49+
}
50+
51+
.mobile-menu__item--active {
52+
border-bottom: 1px solid #000;
53+
}
54+
</style>

‎resources/js/Components/Notice.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,8 +87,9 @@
8787

8888
<style lang="scss">
8989
.notice {
90+
@extend %d-p-20;
91+
@extend %m-p-20;
9092
max-width: 400px;
91-
padding: 20px;
9293
position: fixed;
9394
right: 20px;
9495
bottom: 20px;

0 commit comments

Comments
 (0)