Skip to content

Commit 9df0533

Browse files
author
Farzin
committed
#281 Design - Refactoring Accounts
1 parent 1d4f5cd commit 9df0533

8 files changed

Lines changed: 67 additions & 100 deletions

File tree

‎src/Blogifier.Admin/Pages/Account/Login.razor‎

Lines changed: 7 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -15,31 +15,16 @@
1515
{
1616
<EditForm Model="@model" OnValidSubmit="LoginUser">
1717
<DataAnnotationsValidator />
18-
<div class="form-item">
19-
<label class="form-label">@_localizer["email"]</label>
20-
<input class="form-control" type="email" @bind="model.Email" autofocus>
18+
<div class="form-floating form-item">
19+
<input @bind="model.Email" type="email" class="form-control" id="loginEmail" placeholder="@_localizer["email"]" autofocus>
20+
<label for="loginEmail">@_localizer["email"]</label>
2121
<ValidationMessage For="@(() => model.Email)"></ValidationMessage>
2222
</div>
23-
<div class="form-item">
24-
<label class="form-label">@_localizer["password"]</label>
25-
<input class="form-control" type="password" @bind="model.Password">
23+
<div class="form-floating form-item">
24+
<input @bind="model.Password" type="password" class="form-control" id="loginPassword" placeholder="@_localizer["password"]">
25+
<label for="loginPassword">@_localizer["password"]</label>
2626
<ValidationMessage For="@(() => model.Password)"></ValidationMessage>
2727
</div>
28-
<div class="form-item">
29-
<button type="submit" class="btn btn-blogifier btn-block">@_localizer["login"]</button>
30-
</div>
28+
<button type="submit" class="btn btn-blogifier btn-block btn-floating">@_localizer["login"]</button>
3129
</EditForm>
3230
}
33-
34-
<div class="account-footer">
35-
<ul class="account-footer-list">
36-
<li class="item">
37-
<a class="item-link" href="/">
38-
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left" viewBox="0 0 16 16">
39-
<path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z" />
40-
</svg>
41-
<span>@_localizer["back-to-website"]</span>
42-
</a>
43-
</li>
44-
</ul>
45-
</div>

‎src/Blogifier.Admin/Pages/Account/Register.razor‎

Lines changed: 13 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -15,49 +15,26 @@
1515
{
1616
<EditForm Model="@model" OnValidSubmit="RegisterUser">
1717
<DataAnnotationsValidator />
18-
<div class="form-item">
19-
<label class="form-label">@_localizer["email"]</label>
20-
<input class="form-control" type="email" @bind="model.Email" autofocus>
18+
<div class="form-floating form-item">
19+
<input @bind="model.Email" id="registerEmail" class="form-control" type="email" placeholder="@_localizer["email"]" autofocus>
20+
<label for="registerEmail">@_localizer["email"]</label>
2121
<ValidationMessage For="@(() => model.Email)"></ValidationMessage>
2222
</div>
23-
<div class="form-item">
24-
<label class="form-label">@_localizer["name"]</label>
25-
<input class="form-control" type="text" @bind="model.Name">
23+
<div class="form-floating form-item">
24+
<input @bind="model.Name" id="registerName" class="form-control" type="text" placeholder="@_localizer["name"]">
25+
<label for="registerName">@_localizer["name"]</label>
2626
<ValidationMessage For="@(() => model.Name)"></ValidationMessage>
2727
</div>
28-
<div class="form-item">
29-
<label class="form-label">@_localizer["password"]</label>
30-
<input class="form-control" type="password" @bind="model.Password">
28+
<div class="form-floating form-item">
29+
<input @bind="model.Password" id="registerPassword" class="form-control" type="password" placeholder="@_localizer["password"]">
30+
<label for="registerPassword">@_localizer["password"]</label>
3131
<ValidationMessage For="@(() => model.Password)"></ValidationMessage>
3232
</div>
33-
<div class="form-item">
34-
<label class="form-label">@_localizer["confirm-password"]</label>
35-
<input class="form-control" type="password" @bind="model.PasswordConfirm">
33+
<div class="form-floating form-item">
34+
<input @bind="model.PasswordConfirm" id="registerConfirmPassword" class="form-control" type="password" placeholder="@_localizer["confirm-password"]">
35+
<label for="registerConfirmPassword">@_localizer["confirm-password"]</label>
3636
<ValidationMessage For="@(() => model.PasswordConfirm)"></ValidationMessage>
3737
</div>
38-
<div class="form-item">
39-
<button type="submit" class="btn btn-blogifier btn-block">@_localizer["register"]</button>
40-
</div>
38+
<button type="submit" class="btn btn-blogifier btn-block btn-floating">Create admin account</button>
4139
</EditForm>
4240
}
43-
44-
<div class="account-footer">
45-
<ul class="account-footer-list">
46-
<li class="item">
47-
<a class="item-link" href="/admin/login/">
48-
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left" viewBox="0 0 16 16">
49-
<path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z" />
50-
</svg>
51-
<span>@_localizer["login"]</span>
52-
</a>
53-
</li>
54-
<li class="item">
55-
<a class="item-link" href="/">
56-
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left" viewBox="0 0 16 16">
57-
<path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z" />
58-
</svg>
59-
<span>@_localizer["back-to-website"]</span>
60-
</a>
61-
</li>
62-
</ul>
63-
</div>

‎src/Blogifier.Admin/Shared/AccountLayout.razor‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,16 @@
11
@inherits LayoutComponentBase
2+
@inject IStringLocalizer<Resource> _localizer
23

34
<div class="account">
4-
@Body
5-
<a class="blogifier-logo" href="http://blogifier.net/" target="_blank" rel="nofollow external" title="Blogifier">
6-
<svg width="20" height="20" viewBox="0 0 256 256" fill="#7241fd" xmlns="http://www.w3.org/2000/svg">
5+
<a class="account-logo link-blogifier" href="http://blogifier.net/" target="_blank" rel="nofollow external" data-bs-toggle="tooltip" title="Powered by Blogifier">
6+
<svg width="40" height="40" fill="currentColor" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
77
<path d="M179.2 0H102.4L81.92 51.2H166.4C180.538 51.2 192 62.6615 192 76.8C192 90.9385 180.538 102.4 166.4 102.4H61.44L40.96 153.6L166.4 153.6C180.538 153.6 192 165.062 192 179.2C192 193.338 180.538 204.8 166.4 204.8H20.48L0 256H179.2C221.615 256 256 221.615 256 179.2C256 159.53 248.605 141.587 236.444 128C248.605 114.413 256 96.4699 256 76.8C256 34.3845 221.615 0 179.2 0Z" />
88
</svg>
99
</a>
10+
@Body
1011
</div>
12+
<a class="account-back link-secondary" href="/" data-bs-toggle="tooltip" title="@_localizer["back-to-website"]" data-placement="right">
13+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-arrow-left" viewBox="0 0 16 16">
14+
<path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z" />
15+
</svg>
16+
</a>

‎src/Blogifier.Admin/wwwroot/admin/css/app.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/Blogifier.Admin/wwwroot/admin/css/app.css.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/Blogifier.Admin/wwwroot/admin/scss/helpers/_variables.scss‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ $tooltip-opacity: 1;
9797
// dropdown
9898
$dropdown-link-hover-bg: #f8f9fa;
9999

100-
//
100+
// syntax highlighter
101101
$hljs-foreground: #212529;
102102
$hljs-background: #f8f9fa;
103103
$hljs-comments: #90a4ae;
@@ -106,6 +106,15 @@ $hljs-red: #c30;
106106
$hljs-green: #168174;
107107
$hljs-sky: #2f6f9f;
108108

109+
110+
// container
109111
$container-max-widths: (
110112
xl: 1024px,
111113
);
114+
115+
// floating input
116+
$form-floating-height: 3.25rem;
117+
$form-floating-padding-x: .875rem;
118+
$form-floating-padding-y: .875rem;
119+
$form-floating-label-opacity: .65;
120+
$form-floating-label-transform: scale(.8) translateY(-.325rem) translateX(.15rem);

‎src/Blogifier.Admin/wwwroot/admin/scss/include/_buttons.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,4 +28,9 @@
2828
&-block {
2929
width: 100%;
3030
}
31+
32+
&-floating {
33+
height: 3.125rem;
34+
font-size: 0.9375rem;
35+
}
3136
}

‎src/Blogifier.Admin/wwwroot/admin/scss/pages/account/_account.scss‎

Lines changed: 21 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
.account {
2-
width: 20rem;
2+
width: 22rem;
33
max-width: 100%;
4-
padding: 5rem 1.5rem;
4+
padding: 4rem 1.5rem;
55
margin-right: auto;
66
margin-left: auto;
77

8-
&-header {
9-
margin-bottom: 3rem;
8+
@media screen and (min-width: 992px) {
9+
transform: translateY(-8rem);
10+
margin: auto;
1011
}
1112

13+
// message
1214
&-message {
1315
margin-bottom: 2rem;
1416
font-size: 0.875rem;
@@ -30,39 +32,22 @@
3032
}
3133
}
3234

33-
&-footer {
34-
margin-top: 2rem;
35-
36-
&-list {
37-
margin: 0;
38-
padding: 0;
39-
list-style: none;
40-
}
41-
.item {
42-
margin-bottom: 0.5rem;
43-
}
44-
.item-link {
45-
font-size: 0.875rem;
46-
font-weight: 500;
47-
color: $gray-600;
48-
&:hover {
49-
color: $blogifier;
50-
}
51-
}
52-
}
53-
54-
.blogifier-logo {
35+
// logo
36+
&-logo {
5537
display: block;
56-
width: 1rem;
57-
height: 1rem;
58-
margin: 4rem auto 0;
59-
60-
&:hover {
61-
transform: scale(1.1);
62-
}
38+
width: 2.5rem;
39+
height: 2.5rem;
40+
margin: 0 auto 5rem;
41+
}
6342

64-
&-img {
65-
width: 1rem;
66-
}
43+
// back
44+
&-back {
45+
position: absolute;
46+
top: 2rem;
47+
left: 2rem;
48+
width: 3rem;
49+
height: 3rem;
50+
text-align: center;
51+
line-height: 3rem;
6752
}
6853
}

0 commit comments

Comments
 (0)