Skip to content

Commit ecba7e7

Browse files
SebKaySebKay
authored
Design tweaks (#39)
* Add boxed component styling * Remove default styling of pages and use "boxed" component instead * Reformat form elements * Update _forms.scss * Move form field styling to placeholder
1 parent 736b209 commit ecba7e7

File tree

10 files changed

+305
-251
lines changed

10 files changed

+305
-251
lines changed

‎resources/js/Layouts/App.vue‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -88,14 +88,9 @@
8888
.app-page__inner {
8989
@extend %d-mv-120;
9090
@extend %m-mv-20;
91-
@extend %d-p-60;
92-
@extend %m-p-20;
9391
width: 94%;
9492
max-width: 900px;
9593
margin-right: auto;
9694
margin-left: auto;
97-
box-shadow: shadow(1);
98-
border-radius: radius(2);
99-
background-color: #fff;
10095
}
10196
</style>

‎resources/js/Layouts/Guest.vue‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,14 +34,9 @@
3434
.guest-page__inner {
3535
@extend %d-mv-120;
3636
@extend %m-mv-20;
37-
@extend %d-p-60;
38-
@extend %m-p-20;
3937
width: 94%;
4038
max-width: 600px;
4139
margin-right: auto;
4240
margin-left: auto;
43-
box-shadow: shadow(1);
44-
border-radius: radius(2);
45-
background-color: #fff;
4641
}
4742
</style>

‎resources/js/Pages/Account/Edit.vue‎

Lines changed: 77 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -6,80 +6,90 @@
66
class="d-mb-40 m-mb-30"
77
></h1>
88

9-
<form
10-
class="form"
11-
@submit.prevent="update"
12-
>
13-
<div class="form__section">
14-
<div class="form__row">
15-
<div class="form__item">
16-
<label
17-
class="form__label"
18-
for="first_name"
19-
>First Name</label>
20-
<input
21-
id="first-name"
22-
type="text"
23-
v-model="form.first_name"
24-
required
25-
/>
9+
<div class="boxed">
10+
<form
11+
class="form"
12+
@submit.prevent="submitAccountForm"
13+
>
14+
<div class="form__section">
15+
<div class="form__row">
16+
<div class="form__item">
17+
<label
18+
class="form__label"
19+
for="first-name"
20+
>
21+
First Name
22+
</label>
23+
<input
24+
id="first-name"
25+
type="text"
26+
required
27+
v-model="accountForm.first_name"
28+
/>
29+
</div>
2630
</div>
27-
</div>
2831

29-
<div class="form__row">
30-
<div class="form__item">
31-
<label
32-
class="form__label"
33-
for="last_name"
34-
>Last Name</label>
35-
<input
36-
id="last-name"
37-
type="text"
38-
v-model="form.last_name"
39-
required
40-
/>
32+
<div class="form__row">
33+
<div class="form__item">
34+
<label
35+
class="form__label"
36+
for="last-name"
37+
>
38+
Last Name
39+
</label>
40+
<input
41+
id="last-name"
42+
type="text"
43+
required
44+
v-model="accountForm.last_name"
45+
/>
46+
</div>
4147
</div>
42-
</div>
4348

44-
<div class="form__row">
45-
<div class="form__item">
46-
<label
47-
class="form__label"
48-
for="email"
49-
>Email</label>
50-
<input
51-
id="email"
52-
type="email"
53-
v-model="form.email"
54-
required
55-
/>
49+
<div class="form__row">
50+
<div class="form__item">
51+
<label
52+
class="form__label"
53+
for="email"
54+
>
55+
Email
56+
</label>
57+
<input
58+
id="email"
59+
type="email"
60+
required
61+
v-model="accountForm.email"
62+
/>
63+
</div>
5664
</div>
57-
</div>
5865

59-
<div class="form__row">
60-
<div class="form__item">
61-
<label
62-
class="form__label"
63-
for="password"
64-
>Password</label>
65-
<input
66-
id="password"
67-
type="password"
68-
v-model="form.password"
69-
/>
66+
<div class="form__row">
67+
<div class="form__item">
68+
<label
69+
class="form__label"
70+
for="password"
71+
>
72+
Password
73+
</label>
74+
<input
75+
id="password"
76+
type="password"
77+
v-model="accountForm.password"
78+
/>
79+
</div>
7080
</div>
71-
</div>
7281

73-
<div class="form__row">
74-
<div class="form__action">
75-
<Button
76-
text="Update"
77-
:disabled="form.processing"
78-
/>
82+
<div class="form__row">
83+
<div class="form__action">
84+
<Button
85+
text="Update"
86+
:disabled="accountForm.processing"
87+
/>
88+
</div>
7989
</div>
8090
</div>
81-
</div>
82-
</form>
91+
</form>
92+
</div>
8393
</template>
8494

8595
<script>
@@ -93,7 +103,7 @@
93103
data() {
94104
return {
95105
title: "Update Account",
96-
form: useForm({
106+
accountForm: useForm({
97107
first_name: this.user.first_name,
98108
last_name: this.user.last_name,
99109
email: this.user.email,
@@ -103,8 +113,8 @@
103113
},
104114
105115
methods: {
106-
update() {
107-
this.form.patch(route("account.update"), {
116+
submitAccountForm() {
117+
this.accountForm.patch(route("account.update"), {
108118
preserveScroll: true,
109119
});
110120
},

‎resources/js/Pages/Home/Index.vue‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,10 @@
66
class="d-mb-40 m-mb-30"
77
></h1>
88

9-
<p v-if="userCan($page.props, 'create-posts')">User can create posts.</p>
10-
<p v-else>User can't create posts.</p>
9+
<div class="boxed">
10+
<p v-if="userCan($page.props, 'create-posts')">User can create posts.</p>
11+
<p v-else>User can't create posts.</p>
12+
</div>
1113
</template>
1214

1315
<script>

‎resources/js/Pages/Login/Show.vue‎

Lines changed: 67 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -6,73 +6,79 @@
66
class="d-mb-40 m-mb-30 text-center"
77
></h1>
88

9-
<form
10-
class="form"
11-
@submit.prevent="login"
12-
>
13-
<div class="form__section">
14-
<div class="form__row">
15-
<div class="form__item">
16-
<label
17-
class="form__label"
18-
for="email"
19-
>Email</label>
20-
<input
21-
id="email"
22-
type="email"
23-
v-model="form.email"
24-
required
25-
/>
26-
</div>
27-
</div>
28-
29-
<div class="form__row">
30-
<div class="form__item">
31-
<label
32-
class="form__label"
33-
for="password"
34-
>Password</label>
35-
<input
36-
id="password"
37-
type="password"
38-
v-model="form.password"
39-
required
40-
/>
9+
<div class="boxed">
10+
<form
11+
class="form"
12+
@submit.prevent="submitLoginForm"
13+
>
14+
<div class="form__section">
15+
<div class="form__row">
16+
<div class="form__item">
17+
<label
18+
class="form__label"
19+
for="email"
20+
>
21+
Email
22+
</label>
23+
<input
24+
id="email"
25+
type="email"
26+
required
27+
v-model="loginForm.email"
28+
/>
29+
</div>
4130
</div>
42-
</div>
4331

44-
<div class="form__row">
45-
<div class="form__item">
46-
<label
47-
class="form__label form__label--inline"
48-
for="remember"
49-
>
32+
<div class="form__row">
33+
<div class="form__item">
34+
<label
35+
class="form__label"
36+
for="password"
37+
>
38+
Password
39+
</label>
5040
<input
51-
id="remember"
52-
type="checkbox"
53-
v-model="form.remember"
41+
id="password"
42+
type="password"
43+
required
44+
v-model="loginForm.password"
5445
/>
55-
Remember
56-
</label>
46+
</div>
47+
</div>
48+
49+
<div class="form__row">
50+
<div class="form__item">
51+
<label
52+
class="form__label form__label--inline"
53+
for="remember"
54+
>
55+
<input
56+
id="remember"
57+
type="checkbox"
58+
v-model="loginForm.remember"
59+
/>
60+
Remember
61+
</label>
62+
</div>
5763
</div>
58-
</div>
5964

60-
<div class="form__row">
61-
<div class="form__action">
62-
<Button
63-
text="Log In"
64-
styles="full"
65-
:disabled="form.processing"
66-
/>
65+
<div class="form__row">
66+
<div class="form__action">
67+
<Button
68+
text="Log In"
69+
styles="full"
70+
:disabled="loginForm.processing"
71+
/>
72+
</div>
6773
</div>
6874
</div>
69-
</div>
70-
</form>
75+
</form>
7176

72-
<div class="d-mt-30 m-mt-15 text-center">
73-
<p>
74-
<Link :href="route('register')">Register</Link>
75-
</p>
77+
<div class="d-mt-30 m-mt-15 text-center">
78+
<p>
79+
<Link :href="route('register')">Register</Link>
80+
</p>
81+
</div>
7682
</div>
7783
</template>
7884

@@ -94,7 +100,7 @@
94100
data() {
95101
return {
96102
title: "Log In",
97-
form: useForm({
103+
loginForm: useForm({
98104
email: this.email,
99105
password: this.password,
100106
remember: this.remember,
@@ -104,8 +110,8 @@
104110
},
105111
106112
methods: {
107-
login() {
108-
this.form.post(route("login.store"));
113+
submitLoginForm() {
114+
this.loginForm.post(route("login.store"));
109115
},
110116
},
111117
};

0 commit comments

Comments
 (0)