mirror of
https://github.com/aliasvault/aliasvault.git
synced 2026-03-30 12:34:50 -04:00
Update browser extension and mobile app download UI (#914)
This commit is contained in:
committed by
Leendert de Borst
parent
eb64d86c78
commit
061f846b66
@@ -22,14 +22,13 @@
|
||||
</div>
|
||||
|
||||
<div class="mb-8">
|
||||
<h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Browsers</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
@foreach (var extension in Shared.Core.BrowserExtensions.Constants.Extensions
|
||||
.Where(x => x.Key != BrowserType.Unknown)
|
||||
.Select(x => x.Value))
|
||||
{
|
||||
<div class="p-4 border rounded-lg dark:border-gray-700">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="p-4 border rounded-lg dark:border-gray-700 flex justify-between items-center">
|
||||
<div class="flex items-center">
|
||||
<img src="@extension.IconPath" alt="@extension.Name" class="w-8 h-8 mr-3">
|
||||
<h4 class="text-lg font-medium text-gray-900 dark:text-white">@extension.Name</h4>
|
||||
</div>
|
||||
@@ -38,7 +37,7 @@
|
||||
<a href="@extension.DownloadUrl"
|
||||
target="_blank"
|
||||
class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-primary-600 rounded-lg hover:bg-primary-700 focus:ring-4 focus:ring-primary-200 dark:focus:ring-primary-900">
|
||||
Install for @extension.Name
|
||||
Install
|
||||
</a>
|
||||
}
|
||||
else
|
||||
@@ -54,16 +53,16 @@
|
||||
|
||||
<div class="mb-6">
|
||||
<h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">Mobile Apps</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
<p class="text-gray-600 dark:text-gray-400 mb-4">
|
||||
The AliasVault mobile app allows you to access your aliases and identities on the go, view and manage received emails, and generate new aliases anytime. Your data is fully protected with on-device biometric authentication.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
@foreach (var app in Shared.Core.MobileApps.Constants.MobileApps)
|
||||
{
|
||||
<div class="p-4 border rounded-lg dark:border-gray-700">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="p-4 border rounded-lg dark:border-gray-700 flex justify-between items-center">
|
||||
<div class="flex items-center">
|
||||
<img src="@app.IconPath" alt="@app.Name" class="w-8 h-8 mr-3">
|
||||
<h4 class="text-lg font-medium text-gray-900 dark:text-white">@app.Name</h4>
|
||||
</div>
|
||||
@@ -72,7 +71,7 @@
|
||||
<a href="@app.DownloadUrl"
|
||||
target="_blank"
|
||||
class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-primary-600 rounded-lg hover:bg-primary-700 focus:ring-4 focus:ring-primary-200 dark:focus:ring-primary-900">
|
||||
Download for @app.Name
|
||||
Download
|
||||
</a>
|
||||
}
|
||||
else
|
||||
@@ -87,17 +86,9 @@
|
||||
</div>
|
||||
|
||||
@code {
|
||||
/// <summary>
|
||||
/// The current browser of the user.
|
||||
/// </summary>
|
||||
private BrowserType CurrentBrowser { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// Information for extension for the current browser of the user.
|
||||
/// </summary>
|
||||
private BrowserExtensionInfo? CurrentBrowserExtension { get; set; } = null;
|
||||
|
||||
/// <inheritdoc />
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
await base.OnInitializedAsync();
|
||||
@@ -114,15 +105,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// Determine current browser.
|
||||
/// </summary>
|
||||
/// <returns>Browser type enum value.</returns>
|
||||
private async Task<BrowserType> DetermineBrowser()
|
||||
{
|
||||
try
|
||||
{
|
||||
// First check if it's Brave.
|
||||
var isBrave = await JsRuntime.InvokeAsync<bool>("eval", "navigator.brave?.isBrave() || false");
|
||||
if (isBrave)
|
||||
{
|
||||
|
||||
@@ -70,7 +70,7 @@
|
||||
class="flex flex-col items-center p-3 rounded-lg bg-gray-200 dark:bg-gray-600 hover:bg-gray-300 dark:hover:bg-gray-500 transition-colors">
|
||||
<img src="@extension.IconPath" alt="@extension.Name" class="w-8 h-8 mb-2">
|
||||
<span class="text-xs text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300">
|
||||
Install
|
||||
@extension.Name
|
||||
</span>
|
||||
</a>
|
||||
}
|
||||
|
||||
@@ -945,14 +945,6 @@ video {
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.h-32 {
|
||||
height: 8rem;
|
||||
}
|
||||
|
||||
.h-screen {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.max-h-\[90vh\] {
|
||||
max-height: 90vh;
|
||||
}
|
||||
@@ -1049,10 +1041,6 @@ video {
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.w-32 {
|
||||
width: 8rem;
|
||||
}
|
||||
|
||||
.min-w-0 {
|
||||
min-width: 0px;
|
||||
}
|
||||
@@ -3223,6 +3211,10 @@ video {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.lg\:grid-cols-2 {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.lg\:flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user