sarsoo/Selector
1
0
Fork 0
Code Issues 21 Pull Requests Actions Packages Projects Releases Wiki Activity

Fiddling with html, padding, icons etc

Browse Source
This commit is contained in:
andy 2021-12-19 22:50:03 +00:00
parent 67a2a322ca
commit 8174f9f6f6
21 changed files with 158 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
Selector.Web/Areas/Identity/Pages/Account/Login.cshtml
View File

@ -10,20 +10,18 @@
<div class="col-md-4">
<section>
<form id="account" method="post">
<h4>Use a local account to log in.</h4>
<hr />
<div asp-validation-summary="All" class="text-danger"></div>
<div class="form-group">
<div class="form-group form-element">
<label asp-for="Input.Username"></label>
<input asp-for="Input.Username" class="form-control" />
<span asp-validation-for="Input.Username" class="text-danger"></span>
</div>
<div class="form-group">
<div class="form-group form-element">
<label asp-for="Input.Password"></label>
<input asp-for="Input.Password" class="form-control" />
<span asp-validation-for="Input.Password" class="text-danger"></span>
</div>
<div class="form-group">
<div class="form-group form-element">
<div class="checkbox">
<label asp-for="Input.RememberMe">
<input asp-for="Input.RememberMe" />
@ -31,15 +29,15 @@
</label>
</div>
</div>
<div class="form-group">
<div class="form-group form-element">
<button type="submit" class="btn btn-primary">Log in</button>
</div>
<div class="form-group">
<div class="form-group form-element">
<p>
<a id="forgot-password" asp-page="./ForgotPassword">Forgot your password?</a>
<a id="forgot-password" asp-page="./ForgotPassword">Forgot password?</a>
</p>
<p>
<a asp-page="./Register" asp-route-returnUrl="@Model.ReturnUrl">Register as a new user</a>
<a asp-page="./Register" asp-route-returnUrl="@Model.ReturnUrl">Register</a>
</p>
<p>
<a id="resend-confirmation" asp-page="./ResendEmailConfirmation">Resend email confirmation</a>
@ -50,17 +48,10 @@
</div>
<div class="col-md-6 col-md-offset-2">
<section>
<h4>Use another service to log in.</h4>
<hr />
@{
if ((Model.ExternalLogins?.Count ?? 0) == 0)
{
<div>
<p>
There are no external authentication services configured. See <a href="https://go.microsoft.com/fwlink/?LinkID=532715">this article</a>
for details on setting up this ASP.NET application to support logging in via external services.
</p>
</div>
}
else
{

8
Selector.Web/Areas/Identity/Pages/Account/Manage/ChangePassword.cshtml
View File

@ -11,22 +11,22 @@
<div class="col-md-6">
<form id="change-password-form" method="post">
<div asp-validation-summary="All" class="text-danger"></div>
<div class="form-group">
<div class="form-group form-element">
<label asp-for="Input.OldPassword"></label>
<input asp-for="Input.OldPassword" class="form-control" />
<span asp-validation-for="Input.OldPassword" class="text-danger"></span>
</div>
<div class="form-group">
<div class="form-group form-element">
<label asp-for="Input.NewPassword"></label>
<input asp-for="Input.NewPassword" class="form-control" />
<span asp-validation-for="Input.NewPassword" class="text-danger"></span>
</div>
<div class="form-group">
<div class="form-group form-element">
<label asp-for="Input.ConfirmPassword"></label>
<input asp-for="Input.ConfirmPassword" class="form-control" />
<span asp-validation-for="Input.ConfirmPassword" class="text-danger"></span>
</div>
<button type="submit" class="btn btn-primary">Update password</button>
<button type="submit" class="btn btn-primary form-element">Update password</button>
</form>
</div>
</div>

4
Selector.Web/Areas/Identity/Pages/Account/Manage/DeletePersonalData.cshtml
View File

@ -18,13 +18,13 @@
<div asp-validation-summary="All" class="text-danger"></div>
@if (Model.RequirePassword)
{
<div class="form-group">
<div class="form-group form-element">
<label asp-for="Input.Password"></label>
<input asp-for="Input.Password" class="form-control" />
<span asp-validation-for="Input.Password" class="text-danger"></span>
</div>
}
<button class="btn btn-danger" type="submit">Delete data and close my account</button>
<button class="btn btn-danger form-element" type="submit">Delete data and close my account</button>
</form>
</div>

6
Selector.Web/Areas/Identity/Pages/Account/Manage/Email.cshtml
View File

@ -11,7 +11,7 @@
<div class="col-md-6">
<form id="email-form" method="post">
<div asp-validation-summary="All" class="text-danger"></div>
<div class="form-group">
<div class="form-group form-element">
<label asp-for="Email"></label>
@if (Model.IsEmailConfirmed)
{
@ -28,12 +28,12 @@
<button id="email-verification" type="submit" asp-page-handler="SendVerificationEmail" class="btn btn-link">Send verification email</button>
}
</div>
<div class="form-group">
<div class="form-group form-element">
<label asp-for="Input.NewEmail"></label>
<input asp-for="Input.NewEmail" class="form-control" />
<span asp-validation-for="Input.NewEmail" class="text-danger"></span>
</div>
<button id="change-email-button" type="submit" asp-page-handler="ChangeEmail" class="btn btn-primary">Change email</button>
<button id="change-email-button" type="submit" asp-page-handler="ChangeEmail" class="btn btn-primary form-element">Change email</button>
</form>
</div>
</div>

4
Selector.Web/Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml
View File

@ -34,12 +34,12 @@
<div class="row">
<div class="col-md-6">
<form id="send-code" method="post">
<div class="form-group">
<div class="form-group form-element">
<label asp-for="Input.Code" class="control-label">Verification Code</label>
<input asp-for="Input.Code" class="form-control" autocomplete="off" />
<span asp-validation-for="Input.Code" class="text-danger"></span>
</div>
<button type="submit" class="btn btn-primary">Verify</button>
<button type="submit" class="btn btn-primary form-element">Verify</button>
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
</form>
</div>

6
Selector.Web/Areas/Identity/Pages/Account/Manage/Index.cshtml
View File

@ -11,16 +11,16 @@
<div class="col-md-6">
<form id="profile-form" method="post">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<div class="form-group form-element">
<label asp-for="Username"></label>
<input asp-for="Username" class="form-control" disabled />
</div>
<div class="form-group">
<div class="form-group form-element">
<label asp-for="Input.PhoneNumber"></label>
<input asp-for="Input.PhoneNumber" class="form-control" />
<span asp-validation-for="Input.PhoneNumber" class="text-danger"></span>
</div>
<button id="update-profile-button" type="submit" class="btn btn-primary">Save</button>
<button id="update-profile-button" type="submit" class="btn btn-primary form-element">Save</button>
</form>
</div>
</div>

6
Selector.Web/Areas/Identity/Pages/Account/Manage/Lastfm.cshtml
View File

@ -5,18 +5,18 @@
ViewData["ActivePage"] = ManageNavPages.LastFm;
}
<h4>@ViewData["Title"]</h4>
<h4>@ViewData["Title"] <a href="https://last.fm"><img src="/last-fm.png" class="lastfm-logo central" /></a></h4>
<partial name="_StatusMessage" model="Model.StatusMessage" />
<div class="row">
<div class="col-md-6">
<form id="lastfm-form" method="post">
<div asp-validation-summary="All" class="text-danger"></div>
<div class="form-group">
<div class="form-group form-element">
<label asp-for="Input.Username"></label>
<input asp-for="Input.Username" class="form-control" />
<span asp-validation-for="Input.Username" class="text-danger"></span>
</div>
<button id="change-username-button" type="submit" asp-page-handler="ChangeUsername" class="btn btn-primary">Change Username</button>
<button id="change-username-button" type="submit" asp-page-handler="ChangeUsername" class="btn btn-primary form-element">Change Username</button>
</form>
</div>
</div>

2
Selector.Web/Areas/Identity/Pages/Account/Manage/ManageNavPages.cs
View File

@ -50,7 +50,7 @@ namespace Selector.Web.Areas.Identity.Pages.Account.Manage
{
var activePage = viewContext.ViewData["ActivePage"] as string
?? System.IO.Path.GetFileNameWithoutExtension(viewContext.ActionDescriptor.DisplayName);
return string.Equals(activePage, page, StringComparison.OrdinalIgnoreCase) ? "active" : null;
return string.Equals(activePage, page, StringComparison.OrdinalIgnoreCase) ? "active" : "unselected";
}
}
}

4
Selector.Web/Areas/Identity/Pages/Account/Manage/PersonalData.cshtml
View File

@ -13,11 +13,11 @@
<p>
<strong>Deleting this data will permanently remove your account, and this cannot be recovered.</strong>
</p>
<form id="download-data" asp-page="DownloadPersonalData" method="post" class="form-group">
<form id="download-data" asp-page="DownloadPersonalData" method="post" class="form-group form-element">
<button class="btn btn-primary" type="submit">Download</button>
</form>
<p>
<a id="delete" asp-page="DeletePersonalData" class="btn btn-secondary">Delete</a>
<a id="delete" asp-page="DeletePersonalData" class="btn btn-secondary form-element">Delete</a>
</p>
</div>
</div>

6
Selector.Web/Areas/Identity/Pages/Account/Manage/SetPassword.cshtml
View File

@ -15,17 +15,17 @@
<div class="col-md-6">
<form id="set-password-form" method="post">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<div class="form-group form-element">
<label asp-for="Input.NewPassword"></label>
<input asp-for="Input.NewPassword" class="form-control" />
<span asp-validation-for="Input.NewPassword" class="text-danger"></span>
</div>
<div class="form-group">
<div class="form-group form-element">
<label asp-for="Input.ConfirmPassword"></label>
<input asp-for="Input.ConfirmPassword" class="form-control" />
<span asp-validation-for="Input.ConfirmPassword" class="text-danger"></span>
</div>
<button type="submit" class="btn btn-primary">Set password</button>
<button type="submit" class="btn btn-primary form-element">Set password</button>
</form>
</div>
</div>

13
Selector.Web/Areas/Identity/Pages/Account/Manage/Spotify.cshtml
View File

@ -5,22 +5,29 @@
ViewData["ActivePage"] = ManageNavPages.Spotify;
}
<h4>@ViewData["Title"]</h4>
<h4>@ViewData["Title"] <a href="https://spotify.com"><img src="/Spotify_Icon_RGB_White.png" class="spotify-logo central" /></a></h4>
<partial name="_StatusMessage" model="Model.StatusMessage" />
<div class="row">
<div class="col-md-6">
<form id="spotify-form" method="post">
@if (Model.SpotifyIsLinked)
{
<button id="unlink-button" type="submit" asp-page-handler="Unlink" class="btn btn-primary">Unlink</button>
<button id="unlink-button" type="submit" asp-page-handler="Unlink" class="btn btn-primary form-element">Unlink</button>
}
else
{
<button id="link-button" type="submit" asp-page-handler="Link" class="btn btn-primary">Link</button>
<button id="link-button" type="submit" asp-page-handler="Link" class="btn btn-primary form-element">Link</button>
}
</form>
</div>
</div>
@if (Model.SpotifyIsLinked)
{
<div class="row">
<p class="small">Token last refreshed: <span class="data-value">@Model.LastRefresh</span></p>
</div>
}
@section Scripts {
<partial name="_ValidationScriptsPartial" />

4
Selector.Web/Areas/Identity/Pages/Account/Manage/Spotify.cshtml.cs
View File

@ -37,6 +37,9 @@ namespace Selector.Web.Areas.Identity.Pages.Account.Manage
[BindProperty]
public bool SpotifyIsLinked { get; set; }
[BindProperty]
public DateTime LastRefresh { get; set; }
[TempData]
public string StatusMessage { get; set; }
@ -49,6 +52,7 @@ namespace Selector.Web.Areas.Identity.Pages.Account.Manage
}
SpotifyIsLinked = user.SpotifyIsLinked;
LastRefresh = user.SpotifyLastRefresh;
return Page();
}

6
Selector.Web/Areas/Identity/Pages/Account/Manage/_Layout.cshtml
View File

@ -9,16 +9,14 @@
}
}
<h2>Manage your account</h2>
<h2>Manage</h2>
<div>
<h4>Change your account settings</h4>
<hr />
<div class="row">
<div class="col-md-3">
<partial name="_ManageNav" />
</div>
<div class="col-md-9">
<div class="col-md-9" style="margin-top: 20px">
@RenderBody()
</div>
</div>

16
Selector.Web/Areas/Identity/Pages/Account/Manage/_ManageNav.cshtml
View File

@ -4,15 +4,15 @@
var hasExternalLogins = (await SignInManager.GetExternalAuthenticationSchemesAsync()).Any();
}
<ul class="nav nav-pills flex-column">
<li class="nav-item"><a class="nav-link @ManageNavPages.IndexNavClass(ViewContext)" id="profile" asp-page="./Index">Profile</a></li>
<li class="nav-item"><a class="nav-link @ManageNavPages.SpotifyNavClass(ViewContext)" id="spotify" asp-page="./Spotify">Spotify</a></li>
<li class="nav-item"><a class="nav-link @ManageNavPages.LastFmNavClass(ViewContext)" id="lastfm" asp-page="./Lastfm">Last.fm</a></li>
<li class="nav-item"><a class="nav-link @ManageNavPages.EmailNavClass(ViewContext)" id="email" asp-page="./Email">Email</a></li>
<li class="nav-item"><a class="nav-link @ManageNavPages.ChangePasswordNavClass(ViewContext)" id="change-password" asp-page="./ChangePassword">Password</a></li>
<li class="nav-item"><a class="nav-link dash-underline @ManageNavPages.IndexNavClass(ViewContext)" id="profile" asp-page="./Index">Profile</a></li>
<li class="nav-item"><a class="nav-link dash-underline @ManageNavPages.SpotifyNavClass(ViewContext)" id="spotify" asp-page="./Spotify">Spotify <img src="/Spotify_Icon_RGB_White.png" class="spotify-logo menu-icon" /></a></li>
<li class="nav-item"><a class="nav-link dash-underline @ManageNavPages.LastFmNavClass(ViewContext)" id="lastfm" asp-page="./Lastfm">Last.fm <img src="/last-fm.png" class="lastfm-logo menu-icon" /></a></li>
<li class="nav-item"><a class="nav-link dash-underline @ManageNavPages.EmailNavClass(ViewContext)" id="email" asp-page="./Email">Email</a></li>
<li class="nav-item"><a class="nav-link dash-underline @ManageNavPages.ChangePasswordNavClass(ViewContext)" id="change-password" asp-page="./ChangePassword">Password</a></li>
@if (hasExternalLogins)
{
<li id="external-logins" class="nav-item"><a id="external-login" class="nav-link @ManageNavPages.ExternalLoginsNavClass(ViewContext)" asp-page="./ExternalLogins">External logins</a></li>
<li id="external-logins" class="nav-item"><a id="external-login" class="nav-link dash-underline @ManageNavPages.ExternalLoginsNavClass(ViewContext)" asp-page="./ExternalLogins">External logins</a></li>
}
<li class="nav-item"><a class="nav-link @ManageNavPages.TwoFactorAuthenticationNavClass(ViewContext)" id="two-factor" asp-page="./TwoFactorAuthentication">Two-factor authentication</a></li>
<li class="nav-item"><a class="nav-link @ManageNavPages.PersonalDataNavClass(ViewContext)" id="personal-data" asp-page="./PersonalData">Personal data</a></li>
<li class="nav-item"><a class="nav-link dash-underline @ManageNavPages.TwoFactorAuthenticationNavClass(ViewContext)" id="two-factor" asp-page="./TwoFactorAuthentication">Two-factor authentication</a></li>
<li class="nav-item"><a class="nav-link dash-underline @ManageNavPages.PersonalDataNavClass(ViewContext)" id="personal-data" asp-page="./PersonalData">Personal data</a></li>
</ul>

12
Selector.Web/Areas/Identity/Pages/Account/Register.cshtml
View File

@ -9,30 +9,28 @@
<div class="row">
<div class="col-md-4">
<form asp-route-returnUrl="@Model.ReturnUrl" method="post">
<h4>Create a new account.</h4>
<hr />
<div asp-validation-summary="All" class="text-danger"></div>
<div class="form-group">
<div class="form-group form-element">
<label asp-for="Input.Username"></label>
<input asp-for="Input.Username" class="form-control" />
<span asp-validation-for="Input.Username" class="text-danger"></span>
</div>
<div class="form-group">
<div class="form-group form-element">
<label asp-for="Input.Email"></label>
<input asp-for="Input.Email" class="form-control" />
<span asp-validation-for="Input.Email" class="text-danger"></span>
</div>
<div class="form-group">
<div class="form-group form-element">
<label asp-for="Input.Password"></label>
<input asp-for="Input.Password" class="form-control" />
<span asp-validation-for="Input.Password" class="text-danger"></span>
</div>
<div class="form-group">
<div class="form-group form-element">
<label asp-for="Input.ConfirmPassword"></label>
<input asp-for="Input.ConfirmPassword" class="form-control" />
<span asp-validation-for="Input.ConfirmPassword" class="text-danger"></span>
</div>
<button type="submit" class="btn btn-primary">Register</button>
<button type="submit" class="btn btn-primary form-element">Register</button>
</form>
</div>
<div class="col-md-6 col-md-offset-2">

84
Selector.Web/CSS/index.scss
View File

@ -1,5 +1,85 @@
@import "now.scss";
body {
background-color: #c6c6c6;
}
background-color: #121212;
color: #efefef;
}
.navbar-bg {
background-color: #232323;
}
.form-element {
margin-top: 10px;
margin-bottom: 10px;
}
.menu-icon {
vertical-align: middle;
float: right;
}
.unselected img {
filter: brightness(0.4);
}
.black-img {
filter: brightness(0);
}
.central {
vertical-align: middle;
}
.data-value {
color: grey;
}
.separator-border {
border-bottom: 1px solid #191919;
}
.dash-underline {
text-decoration: dotted;
text-decoration-line: underline;
text-decoration-thickness: 2px;
text-underline-offset: 5px;
&:hover {
text-decoration: solid;
text-decoration-line: underline;
text-decoration-thickness: 1.5px;
}
}
.dash-underline-lg {
font-size: 24px;
text-decoration: dotted;
text-decoration-line: underline;
text-decoration-thickness: 4px;
text-underline-offset: 5px;
&:hover {
text-decoration: solid;
text-decoration-line: underline;
text-decoration-thickness: 3.4px;
}
}
.link-dark {
color: #a3a3a3;
&:hover {
color: #a3a3a3;
}
}
input[type=text], input[type=email], input[type=tel], input[type=password] {
background-color: #444444 !important;
border-color: #545454;
color: $text-color;
&:focus {
color: $text-color;
}
}

11
Selector.Web/CSS/now.scss
View File

@ -3,13 +3,14 @@
}
$text-color: white;
$shadow-color: #1e1e1e;
.card {
background-color: grey;
background-color: #333232;
color: $text-color;
margin: 5px;
padding: 15px;
box-shadow: 4px 4px 2px #5e5e5e;
box-shadow: 4px 4px 2px $shadow-color;
transition: box-shadow 0.5s;
&:hover {
@ -21,10 +22,10 @@ $text-color: white;
.now-playing-card {
// max-width: 300px;
text-shadow: 2px 2px 2px #5e5e5e;
text-shadow: 2px 2px 2px $shadow-color;
.cover-art {
box-shadow: 4px 4px 2px #5e5e5e;
box-shadow: 4px 4px 2px $shadow-color;
margin-bottom: 15px;
}
@ -85,7 +86,7 @@ $text-color: white;
.popularity-progress {
margin-top: 10px;
margin-bottom: 20px;
box-shadow: 2px 2px 2px #5e5e5e;
box-shadow: 2px 2px 2px $shadow-color;
}
.subtle-link {

4
Selector.Web/Pages/Index.cshtml
View File

@ -6,4 +6,8 @@
<div class="text-center">
<h1 class="display-4">Welcome</h1>
<p>Selector is a tool for monitoring Spotify usage.</p>
<a href="/now" class="dash-underline-lg link-dark" style="">Now Playing</a>
</div>

10
Selector.Web/Pages/Shared/_Layout.cshtml
View File

@ -9,17 +9,13 @@
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<nav class="navbar navbar-expand-sm navbar-dark navbar-bg separator-border box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-page="/Index">Selector</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Now">Now</a>
<a class="nav-link" asp-area="" asp-page="/Now">Now</a>
</li>
</ul>
</div>
@ -33,7 +29,7 @@
</main>
</div>
<footer class="border-top footer text-muted">
<footer class="footer text-muted">
<div class="container">
&copy; 2021 - Selector.Web - <a asp-area="" asp-page="/Privacy">Privacy</a>
</div>

4
Selector.Web/Pages/Shared/_LoginPartial.cshtml
View File

@ -8,11 +8,11 @@
@if (SignInManager.IsSignedIn(User))
{
<li class="nav-item">
<a id="manage" class="nav-link text-dark" asp-area="Identity" asp-page="/Account/Manage/Index" title="Manage">Hello @UserManager.GetUserName(User)!</a>
<a id="manage" class="nav-link" asp-area="Identity" asp-page="/Account/Manage/Index" title="Manage">@UserManager.GetUserName(User)</a>
</li>
<li class="nav-item">
<form id="logoutForm" class="form-inline" asp-area="Identity" asp-page="/Account/Logout" asp-route-returnUrl="@Url.Page("/Index", new { area = "" })">
<button id="logout" type="submit" class="nav-link btn btn-link text-dark">Logout</button>
<button id="logout" type="submit" class="nav-link btn btn-link">Logout</button>
</form>
</li>
}

2
Selector.Web/scripts/Now/Spotify.ts
View File

@ -103,7 +103,7 @@ export let AudioFeatureChartCard: Vue.Component = {
elements: {
line: {
borderWidth: 4,
borderColor: "#3a3a3a",
borderColor: "#a34c77",
backgroundColor: "#727272",
borderCapStyle: "round",
borderJoinStyle: "round"