From 75f71dcc430165c05b5597fd44d7bb338a1d00da Mon Sep 17 00:00:00 2001 From: Leendert de Borst Date: Fri, 18 Oct 2024 21:41:59 +0200 Subject: [PATCH] Optimize credential AddEdit page for mobile (#308) --- .../Main/Pages/Credentials/AddEdit.razor | 12 +- .../wwwroot/css/tailwind.css | 219 +++++------------- 2 files changed, 62 insertions(+), 169 deletions(-) diff --git a/src/AliasVault.Client/Main/Pages/Credentials/AddEdit.razor b/src/AliasVault.Client/Main/Pages/Credentials/AddEdit.razor index 0e41ceb30..0c93552e7 100644 --- a/src/AliasVault.Client/Main/Pages/Credentials/AddEdit.razor +++ b/src/AliasVault.Client/Main/Pages/Credentials/AddEdit.razor @@ -29,8 +29,8 @@ else { -
-
+
+

Service

@@ -44,7 +44,7 @@ else
-
+

Notes

@@ -55,7 +55,7 @@ else
-
+

Attachments

@@ -68,7 +68,7 @@ else
-
+

Login credentials

@@ -93,7 +93,7 @@ else
-
+

Alias

diff --git a/src/AliasVault.Client/wwwroot/css/tailwind.css b/src/AliasVault.Client/wwwroot/css/tailwind.css index 747b5cf2a..fae2046ec 100644 --- a/src/AliasVault.Client/wwwroot/css/tailwind.css +++ b/src/AliasVault.Client/wwwroot/css/tailwind.css @@ -666,10 +666,6 @@ video { right: 2.5rem; } -.right-4 { - right: 1rem; -} - .top-12 { top: 3rem; } @@ -678,18 +674,6 @@ video { top: 5rem; } -.top-4 { - top: 1rem; -} - -.left-4 { - left: 1rem; -} - -.top-0 { - top: 0px; -} - .z-10 { z-index: 10; } @@ -714,6 +698,10 @@ video { grid-column: 1 / -1; } +.col-span-1 { + grid-column: span 1 / span 1; +} + .\!m-0 { margin: 0px !important; } @@ -737,6 +725,10 @@ video { margin-left: -0.25rem; } +.-mt-1 { + margin-top: -0.25rem; +} + .mb-1 { margin-bottom: 0.25rem; } @@ -813,6 +805,14 @@ video { margin-top: 0.25rem; } +.mt-10 { + margin-top: 2.5rem; +} + +.mt-12 { + margin-top: 3rem; +} + .mt-2 { margin-top: 0.5rem; } @@ -833,34 +833,6 @@ video { margin-top: 2rem; } -.mt-24 { - margin-top: 6rem; -} - -.-mt-2 { - margin-top: -0.5rem; -} - -.-mt-1 { - margin-top: -0.25rem; -} - -.mt-16 { - margin-top: 4rem; -} - -.mb-10 { - margin-bottom: 2.5rem; -} - -.mt-10 { - margin-top: 2.5rem; -} - -.mt-12 { - margin-top: 3rem; -} - .line-clamp-2 { overflow: hidden; display: -webkit-box; @@ -912,6 +884,14 @@ video { height: 4rem; } +.h-2 { + height: 0.5rem; +} + +.h-2\.5 { + height: 0.625rem; +} + .h-20 { height: 5rem; } @@ -940,6 +920,10 @@ video { height: 2rem; } +.h-80 { + height: 20rem; +} + .h-9 { height: 2.25rem; } @@ -948,22 +932,6 @@ video { height: 100%; } -.h-40 { - height: 10rem; -} - -.h-80 { - height: 20rem; -} - -.h-2 { - height: 0.5rem; -} - -.h-2\.5 { - height: 0.625rem; -} - .min-h-screen { min-height: 100vh; } @@ -1108,10 +1076,6 @@ video { grid-template-columns: repeat(2, minmax(0, 1fr)); } -.grid-cols-3 { - grid-template-columns: repeat(3, minmax(0, 1fr)); -} - .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @@ -1124,6 +1088,10 @@ video { grid-template-columns: repeat(7, minmax(0, 1fr)); } +.grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); +} + .flex-col { flex-direction: column; } @@ -1328,11 +1296,6 @@ video { border-top-width: 2px; } -.border-blue-500 { - --tw-border-opacity: 1; - border-color: rgb(59 130 246 / var(--tw-border-opacity)); -} - .border-blue-700 { --tw-border-opacity: 1; border-color: rgb(29 78 216 / var(--tw-border-opacity)); @@ -1373,11 +1336,6 @@ video { border-color: rgb(214 131 56 / var(--tw-border-opacity)); } -.border-yellow-500 { - --tw-border-opacity: 1; - border-color: rgb(234 179 8 / var(--tw-border-opacity)); -} - .bg-blue-100 { --tw-bg-opacity: 1; background-color: rgb(219 234 254 / var(--tw-bg-opacity)); @@ -1523,11 +1481,6 @@ video { background-color: rgb(254 252 232 / var(--tw-bg-opacity)); } -.bg-yellow-100 { - --tw-bg-opacity: 1; - background-color: rgb(254 249 195 / var(--tw-bg-opacity)); -} - .bg-opacity-50 { --tw-bg-opacity: 0.5; } @@ -1651,6 +1604,10 @@ video { padding-bottom: 1rem; } +.pb-0 { + padding-bottom: 0px; +} + .pb-4 { padding-bottom: 1rem; } @@ -1679,10 +1636,6 @@ video { padding-top: 0.5rem; } -.pt-20 { - padding-top: 5rem; -} - .pt-4 { padding-top: 1rem; } @@ -1695,26 +1648,6 @@ video { padding-top: 2rem; } -.pt-24 { - padding-top: 6rem; -} - -.pt-10 { - padding-top: 2.5rem; -} - -.pt-12 { - padding-top: 3rem; -} - -.pt-14 { - padding-top: 3.5rem; -} - -.pb-0 { - padding-bottom: 0px; -} - .text-left { text-align: left; } @@ -1935,19 +1868,10 @@ video { color: rgb(133 77 14 / var(--tw-text-opacity)); } -.text-yellow-700 { - --tw-text-opacity: 1; - color: rgb(161 98 7 / var(--tw-text-opacity)); -} - .opacity-0 { opacity: 0; } -.opacity-10 { - opacity: 0.1; -} - .opacity-100 { opacity: 1; } @@ -2155,9 +2079,9 @@ video { color: rgb(107 114 128 / var(--tw-text-opacity)); } -.hover\:text-gray-700:hover { +.hover\:text-gray-800:hover { --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); + color: rgb(31 41 55 / var(--tw-text-opacity)); } .hover\:text-gray-900:hover { @@ -2185,11 +2109,6 @@ video { color: rgb(255 255 255 / var(--tw-text-opacity)); } -.hover\:text-gray-800:hover { - --tw-text-opacity: 1; - color: rgb(31 41 55 / var(--tw-text-opacity)); -} - .hover\:underline:hover { text-decoration-line: underline; } @@ -2410,11 +2329,6 @@ video { background-color: rgb(133 77 14 / var(--tw-bg-opacity)); } -.dark\:bg-yellow-900:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(113 63 18 / var(--tw-bg-opacity)); -} - .dark\:bg-opacity-80:is(.dark *) { --tw-bg-opacity: 0.8; } @@ -2494,11 +2408,6 @@ video { color: rgb(250 204 21 / var(--tw-text-opacity)); } -.dark\:text-yellow-200:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(254 240 138 / var(--tw-text-opacity)); -} - .dark\:placeholder-gray-400:is(.dark *)::-moz-placeholder { --tw-placeholder-opacity: 1; color: rgb(156 163 175 / var(--tw-placeholder-opacity)); @@ -2733,6 +2642,10 @@ video { } @media (min-width: 768px) { + .md\:col-span-1 { + grid-column: span 1 / span 1; + } + .md\:ml-2 { margin-left: 0.5rem; } @@ -2761,6 +2674,10 @@ video { grid-template-columns: repeat(4, minmax(0, 1fr)); } + .md\:gap-4 { + gap: 1rem; + } + .md\:space-x-2 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(0.5rem * var(--tw-space-x-reverse)); @@ -2773,22 +2690,6 @@ video { position: fixed; } - .lg\:relative { - position: relative; - } - - .lg\:-left-16 { - left: -4rem; - } - - .lg\:left-auto { - left: auto; - } - - .lg\:top-0 { - top: 0px; - } - .lg\:order-1 { order: 1; } @@ -2801,6 +2702,14 @@ video { grid-column: auto; } + .lg\:col-span-1 { + grid-column: span 1 / span 1; + } + + .lg\:col-span-2 { + grid-column: span 2 / span 2; + } + .lg\:mb-0 { margin-bottom: 0px; } @@ -2849,22 +2758,14 @@ video { max-width: 36rem; } - .lg\:flex-shrink-0 { - flex-shrink: 0; - } - - .lg\:flex-grow { - flex-grow: 1; + .lg\:grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); } .lg\:flex-row { flex-direction: row; } - .lg\:justify-between { - justify-content: space-between; - } - .lg\:gap-4 { gap: 1rem; } @@ -2894,14 +2795,6 @@ video { padding-bottom: 4rem; } - .lg\:pt-10 { - padding-top: 2.5rem; - } - - .lg\:pt-8 { - padding-top: 2rem; - } - .lg\:shadow-none { --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000;