zapstore-mirror/net.aliasvault.app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update layout

Browse Source
This commit is contained in:
Leendert de Borst
2024-06-03 10:30:15 +02:00
parent ed1dbd968d
commit 2c22565fc3
17 changed files with 124 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/AliasVault.WebApp/Components/Alias/Alias.razor
+9 -10
View File
@@ -1,19 +1,18 @@
@using AliasDb
@inject NavigationManager NavigationManager
<div class="p-4 space-y-6 bg-white border border-gray-200 rounded-lg shadow-sm dark:border-gray-700 sm:p-6 dark:bg-gray-800">
<div class="px-4 py-2 text-gray-400 border border-gray-200 border-dashed rounded dark:border-gray-600">
<h3>Card header</h3>
</div>
<div class="h-16 px-4 py-2 text-gray-400 border border-gray-200 border-dashed rounded dark:border-gray-600">
<h3>Card body</h3>
</div>
<div class="px-4 py-2 text-gray-400 border border-gray-200 border-dashed rounded dark:border-gray-600">
<h3>Card footer</h3>
<div @onclick="ShowDetails" class="p-4 space-y-2 bg-white border border-gray-200 rounded-lg shadow-sm dark:border-gray-700
dark:bg-gray-800 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200">
<div class="px-4 py-2 text-gray-400 rounded text-center flex flex-col items-center">
<DisplayFavicon faviconBytes="null"></DisplayFavicon>
<div>Servicename</div>
<div>01-01-2000</div>
</div>
</div>
<!--
<div class="col">
<div class="card mb-3" @onclick="ShowDetails">
@@ -35,7 +34,7 @@
private void ShowDetails()
{
// Redirect to view page instead for now.
NavigationManager.NavigateTo($"/alias/{Login.Id}");
NavigationManager.NavigateTo($"/alias/{Guid.NewGuid()}");
//showModal = true;
}
src/AliasVault.WebApp/Components/DisplayFavicon.razor
+24
View File
@@ -0,0 +1,24 @@
@if (faviconBytes != null)
{
<img src="@faviconDataUrl" style="width: 50px;" alt="Favicon" />
}
else
{
<img src="img/service-placeholder.webp" style="width: 50px;" alt="Favicon" />
}
@code {
[Parameter]
public byte[]? faviconBytes { get; set; }
private string? faviconDataUrl;
protected override void OnParametersSet()
{
if (faviconBytes != null)
{
string base64String = Convert.ToBase64String(faviconBytes);
faviconDataUrl = $"data:image/x-icon;base64,{base64String}";
}
}
}
src/AliasVault.WebApp/Components/LayoutPageTitle.razor
+6
View File
@@ -0,0 +1,6 @@
<PageTitle>@ChildContent - AliasVault</PageTitle>
@code {
[Parameter]
public RenderFragment ChildContent { get; set; } = default!;
}
src/AliasVault.WebApp/Components/PageTitleAppend.razor
-12
View File
@@ -1,12 +0,0 @@
<PageTitle>@PageTitlePrefix AliasVault - @PageTitleSuffix</PageTitle>
@code {
[Parameter]
public string PageTitleSuffix { get; set; }
public string PageTitlePrefix { get; set; } = "";
protected override void OnInitialized()
{
}
}
src/AliasVault.WebApp/Layout/TopMenu.razor
+4 -27
View File
@@ -2,9 +2,9 @@
<nav class="fixed z-30 w-full bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700 py-3 px-4">
<div class="flex justify-between items-center max-w-screen-2xl mx-auto">
<div class="flex justify-start items-center">
<a href="http://localhost:1313/" class="flex mr-14">
<img src="http://localhost:1313/images/logo.svg" class="mr-3 h-8" alt="FlowBite Logo">
<span class="self-center hidden sm:flex text-2xl font-semibold whitespace-nowrap dark:text-white">Flowbite</span>
<a href="/" class="flex mr-14">
<img src="/icon-trimmed.png" class="mr-3 h-8" alt="AliasVault Logo">
<span class="self-center hidden sm:flex text-2xl font-semibold whitespace-nowrap dark:text-white">AliasVault</span>
</a>
<div class="hidden justify-between items-center w-full lg:flex lg:w-auto lg:order-1">
@@ -13,30 +13,7 @@
<a href="#" class="block rounded text-primary-700 dark:text-primary-500" aria-current="page">Home</a>
</li>
<li>
<a href="#" class="block text-gray-700 hover:text-primary-700 dark:text-gray-400 dark:hover:text-white">Messages</a>
</li>
<li>
<a href="#" class="block text-gray-700 hover:text-primary-700 dark:text-gray-400 dark:hover:text-white">Profile</a>
</li>
<li>
<a href="#" class="block text-gray-700 hover:text-primary-700 dark:text-gray-400 dark:hover:text-white">Settings</a>
</li>
<li>
<button id="dropdownNavbarLink" data-dropdown-toggle="dropdownNavbar" class="flex justify-between items-center py-2 pr-4 pl-3 w-full font-medium text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-primary-700 md:p-0 md:w-auto dark:text-gray-400 dark:hover:text-white dark:focus:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent">Dropdown <svg class="ml-1 w-4 h-4" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></button>
<div id="dropdownNavbar" class="hidden z-20 w-44 font-normal bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 dark:divide-gray-600" data-popper-placement="bottom" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(594.5px, 52px, 0px);">
<ul class="py-1 text-sm text-gray-700 dark:text-gray-400" aria-labelledby="dropdownLargeButton">
<li>
<a href="#" class="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Item 1</a>
</li>
<li>
<a href="#" class="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Item 2</a>
</li>
<li>
<a href="#" class="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Item 3</a>
</li>
</ul>
</div>
<a href="#" class="block text-gray-700 hover:text-primary-700 dark:text-gray-400 dark:hover:text-white">Aliases</a>
</li>
</ul>
</div>
src/AliasVault.WebApp/Pages/Aliases/View.razor
+16
View File
@@ -0,0 +1,16 @@
@page "/alias/{id:guid}"
@inherits PageBase
<LayoutPageTitle>View alias</LayoutPageTitle>
View alias here.
@code {
[Parameter]
public Guid Id { get; set; }
protected override async Task OnInitializedAsync()
{
await base.OnInitializedAsync();
}
}
src/AliasVault.WebApp/Pages/Home.razor
+2 -2
View File
@@ -2,12 +2,12 @@
@using AliasVault.WebApp.Components.Alias
@inherits PageBase
<PageTitle>Home</PageTitle>
<LayoutPageTitle>Home</LayoutPageTitle>
<div class="grid grid-cols-1 px-4 pt-6 xl:grid-cols-3 xl:px-0 xl:gap-4 dark:bg-gray-900">
<div class="mb-4 col-span-full xl:mb-2">
<Breadcrumb BreadcrumbItems="BreadcrumbItems" />
<h1 class="text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">Aliases</h1>
<h1 class="text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">Aliaseses</h1>
<p>Find all of your aliases below.</p>
</div>
</div>
src/AliasVault.WebApp/tailwind.config.js
+13 -1
View File
@@ -24,7 +24,19 @@ module.exports = {
theme: {
extend: {
colors: {
primary: { "50": "#eff6ff", "100": "#dbeafe", "200": "#bfdbfe", "300": "#93c5fd", "400": "#60a5fa", "500": "#3b82f6", "600": "#2563eb", "700": "#1d4ed8", "800": "#1e40af", "900": "#1e3a8a" }
primary: {
"900": "#7b4a1e",
"800": "#9a5d26",
"700": "#b8702f",
"600": "#d68338",
"500": "#f49541",
"400": "#f6a752",
"300": "#f8b963",
"200": "#fbcb74",
"100": "#fdde85",
"50": "#ffe096"
}
},
fontFamily: {
'sans': ['Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'],
src/AliasVault.WebApp/wwwroot/css/tailwind.css
+45 -64
View File
@@ -602,10 +602,6 @@ video {
z-index: 50;
}
.col-span-2 {
grid-column: span 2 / span 2;
}
.col-span-full {
grid-column: 1 / -1;
}
@@ -645,6 +641,10 @@ video {
margin-bottom: 0.5rem;
}
.mb-3 {
margin-bottom: 0.75rem;
}
.mb-4 {
margin-bottom: 1rem;
}
@@ -705,10 +705,6 @@ video {
margin-top: 2rem;
}
.mb-3 {
margin-bottom: 0.75rem;
}
.block {
display: block;
}
@@ -741,18 +737,10 @@ video {
height: 2.75rem;
}
.h-16 {
height: 4rem;
}
.h-3 {
height: 0.75rem;
}
.h-32 {
height: 8rem;
}
.h-4 {
height: 1rem;
}
@@ -849,6 +837,10 @@ video {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.cursor-pointer {
cursor: pointer;
}
.list-none {
list-style-type: none;
}
@@ -913,6 +905,12 @@ video {
margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
@@ -992,10 +990,6 @@ video {
border-top-width: 1px;
}
.border-dashed {
border-style: dashed;
}
.border-gray-100 {
--tw-border-opacity: 1;
border-color: rgb(243 244 246 / var(--tw-border-opacity));
@@ -1043,7 +1037,7 @@ video {
.bg-primary-700 {
--tw-bg-opacity: 1;
background-color: rgb(29 78 216 / var(--tw-bg-opacity));
background-color: rgb(184 112 47 / var(--tw-bg-opacity));
}
.bg-purple-500 {
@@ -1224,7 +1218,7 @@ video {
.text-primary-700 {
--tw-text-opacity: 1;
color: rgb(29 78 216 / var(--tw-text-opacity));
color: rgb(184 112 47 / var(--tw-text-opacity));
}
.text-white {
@@ -1254,18 +1248,20 @@ video {
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.transition-colors {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-opacity {
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
.duration-200 {
transition-duration: 200ms;
}
.duration-300 {
@@ -1277,6 +1273,11 @@ video {
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}
.hover\:bg-gray-200:hover {
--tw-bg-opacity: 1;
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}
.hover\:bg-gray-50:hover {
--tw-bg-opacity: 1;
background-color: rgb(249 250 251 / var(--tw-bg-opacity));
@@ -1284,7 +1285,7 @@ video {
.hover\:bg-primary-800:hover {
--tw-bg-opacity: 1;
background-color: rgb(30 64 175 / var(--tw-bg-opacity));
background-color: rgb(154 93 38 / var(--tw-bg-opacity));
}
.hover\:text-gray-900:hover {
@@ -1294,12 +1295,12 @@ video {
.hover\:text-primary-600:hover {
--tw-text-opacity: 1;
color: rgb(37 99 235 / var(--tw-text-opacity));
color: rgb(214 131 56 / var(--tw-text-opacity));
}
.hover\:text-primary-700:hover {
--tw-text-opacity: 1;
color: rgb(29 78 216 / var(--tw-text-opacity));
color: rgb(184 112 47 / var(--tw-text-opacity));
}
.hover\:underline:hover {
@@ -1308,7 +1309,7 @@ video {
.focus\:border-primary-500:focus {
--tw-border-opacity: 1;
border-color: rgb(59 130 246 / var(--tw-border-opacity));
border-color: rgb(244 149 65 / var(--tw-border-opacity));
}
.focus\:outline-none:focus {
@@ -1334,12 +1335,12 @@ video {
.focus\:ring-primary-300:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity));
--tw-ring-color: rgb(248 185 99 / var(--tw-ring-opacity));
}
.focus\:ring-primary-500:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
--tw-ring-color: rgb(244 149 65 / var(--tw-ring-opacity));
}
.group:hover .group-hover\:text-gray-500 {
@@ -1379,7 +1380,7 @@ video {
.dark\:bg-primary-600:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(37 99 235 / var(--tw-bg-opacity));
background-color: rgb(214 131 56 / var(--tw-bg-opacity));
}
.dark\:bg-opacity-80:is(.dark *) {
@@ -1398,12 +1399,12 @@ video {
.dark\:text-primary-400:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(96 165 250 / var(--tw-text-opacity));
color: rgb(246 167 82 / var(--tw-text-opacity));
}
.dark\:text-primary-500:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(59 130 246 / var(--tw-text-opacity));
color: rgb(244 149 65 / var(--tw-text-opacity));
}
.dark\:text-white:is(.dark *) {
@@ -1437,12 +1438,12 @@ video {
.dark\:hover\:bg-primary-700:hover:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(29 78 216 / var(--tw-bg-opacity));
background-color: rgb(184 112 47 / var(--tw-bg-opacity));
}
.dark\:hover\:text-primary-500:hover:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(59 130 246 / var(--tw-text-opacity));
color: rgb(244 149 65 / var(--tw-text-opacity));
}
.dark\:hover\:text-white:hover:is(.dark *) {
@@ -1456,7 +1457,7 @@ video {
.dark\:focus\:border-primary-500:focus:is(.dark *) {
--tw-border-opacity: 1;
border-color: rgb(59 130 246 / var(--tw-border-opacity));
border-color: rgb(244 149 65 / var(--tw-border-opacity));
}
.dark\:focus\:text-white:focus:is(.dark *) {
@@ -1476,17 +1477,17 @@ video {
.dark\:focus\:ring-primary-500:focus:is(.dark *) {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
--tw-ring-color: rgb(244 149 65 / var(--tw-ring-opacity));
}
.dark\:focus\:ring-primary-600:focus:is(.dark *) {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(37 99 235 / var(--tw-ring-opacity));
--tw-ring-color: rgb(214 131 56 / var(--tw-ring-opacity));
}
.dark\:focus\:ring-primary-800:focus:is(.dark *) {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(30 64 175 / var(--tw-ring-opacity));
--tw-ring-color: rgb(154 93 38 / var(--tw-ring-opacity));
}
.group:hover .dark\:group-hover\:text-gray-400:is(.dark *) {
@@ -1507,10 +1508,6 @@ video {
width: auto;
}
.sm\:p-6 {
padding: 1.5rem;
}
.sm\:p-8 {
padding: 2rem;
}
@@ -1555,10 +1552,6 @@ video {
width: auto;
}
.md\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.md\:grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
@@ -1596,7 +1589,7 @@ video {
.md\:hover\:text-primary-700:hover {
--tw-text-opacity: 1;
color: rgb(29 78 216 / var(--tw-text-opacity));
color: rgb(184 112 47 / var(--tw-text-opacity));
}
.md\:dark\:hover\:bg-transparent:hover:is(.dark *) {
@@ -1653,10 +1646,6 @@ video {
}
@media (min-width: 1280px) {
.xl\:col-auto {
grid-column: auto;
}
.xl\:mb-2 {
margin-bottom: 0.5rem;
}
@@ -1665,10 +1654,6 @@ video {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.xl\:grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.xl\:grid-cols-6 {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
@@ -1690,10 +1675,6 @@ video {
}
@media (min-width: 1536px) {
.\32xl\:col-span-2 {
grid-column: span 2 / span 2;
}
.\32xl\:px-0 {
padding-left: 0px;
padding-right: 0px;
src/AliasVault.WebApp/wwwroot/icon-192.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 11 KiB

src/AliasVault.WebApp/wwwroot/icon-trimmed.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

src/AliasVault.WebApp/wwwroot/img/service-placeholder.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 115 KiB

src/AliasVault.WebApp/wwwroot/logo.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

src/AliasVault/Areas/User/Pages/Shared/_Logo.cshtml
+1 -1
View File
@@ -1,2 +1,2 @@
<img src="horizontal-logo-cropped.png" alt="AliasVault" class="img-fluid" style="max-width: 330px;"/>
<img src="horizontal-logo-cropped.png" alt="AliasesVault" class="img-fluid" style="max-width: 330px;"/>
<hr />
src/AliasVault/Areas/User/_IdentityLayout.cshtml
+1 -1
View File
@@ -19,7 +19,7 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital@0;1&family=Open+Sans:wght@300..800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,0,0"/>
<title>AliasVault</title>
<title>AliasesVault</title>
</head>
<body>
<!--////////////////// PreLoader Start//////////////////////-->
src/AliasVault/Components/Pages/Aliases/AddEdit.razor
+1 -2
View File
@@ -2,7 +2,6 @@
@page "/alias/{id:guid}/edit"
@inject NavigationManager Navigation
@inject UserService UserService
@inherits AuthorizePageBase
@using AliasDb
@using AliasGenerators.Identity
@@ -149,7 +148,7 @@ else
<p>Saving...</p>
}
<button class="btn btn-success" @onclick="SaveLogin">Save Alias</button>
<button class="btn btn-success" @onclick="SaveLogin">Save Aliases</button>
}
@code {
src/AliasVault/Components/Pages/Home.razor
+2 -2
View File
@@ -4,11 +4,11 @@
@inherits AuthorizePageBase
@page "/"
<PageTitle>Aliases</PageTitle>
<PageTitle>Aliaseses</PageTitle>
<div class="row align-items-center">
<div class="col">
<h1>Aliases</h1>
<h1>Aliaseses</h1>
</div>
<div class="col-auto">
<a href="/add-alias" class="btn btn-success">