fix: layout simplification

getAlby · Oct 31, 2023 · b3420b7 · b3420b7
1 parent a0b1929
commit b3420b7
Show file tree

Hide file tree

Showing 7 changed files with 169 additions and 47 deletions.
diff --git a/public/css/application.css b/public/css/application.css
@@ -717,6 +717,10 @@ select {
   pointer-events: none;
 }
 
+.fixed {
+  position: fixed;
+}
+
 .absolute {
   position: absolute;
 }
@@ -725,6 +729,13 @@ select {
   position: relative;
 }
 
+.inset-0 {
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+}
+
 .left-0 {
   left: 0px;
 }
@@ -757,6 +768,11 @@ select {
   margin-bottom: 1.5rem;
 }
 
+.my-8 {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -825,6 +841,18 @@ select {
   margin-top: 1.25rem;
 }
 
+.mb-5 {
+  margin-bottom: 1.25rem;
+}
+
+.ml-0 {
+  margin-left: 0px;
+}
+
+.ml-4 {
+  margin-left: 1rem;
+}
+
 .block {
   display: block;
 }
@@ -933,6 +961,11 @@ select {
   width: 10rem;
 }
 
+.w-fit {
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
 .max-w-lg {
   max-width: 32rem;
 }
@@ -949,6 +982,14 @@ select {
   max-width: 1024px;
 }
 
+.max-w-sm {
+  max-width: 24rem;
+}
+
+.max-w-screen-md {
+  max-width: 768px;
+}
+
 .table-auto {
   table-layout: auto;
 }
@@ -1003,6 +1044,12 @@ select {
   margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.space-y-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+}
+
 .divide-y > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-y-reverse: 0;
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
@@ -1039,6 +1086,10 @@ select {
   border-width: 1px;
 }
 
+.border-4 {
+  border-width: 4px;
+}
+
 .border-b {
   border-bottom-width: 1px;
 }
@@ -1076,6 +1127,16 @@ select {
   border-color: rgb(64 64 64 / var(--tw-border-opacity));
 }
 
+.border-orange-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(254 215 170 / var(--tw-border-opacity));
+}
+
+.border-purple-600 {
+  --tw-border-opacity: 1;
+  border-color: rgb(147 51 234 / var(--tw-border-opacity));
+}
+
 .bg-blue-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(239 246 255 / var(--tw-bg-opacity));
@@ -1116,6 +1177,20 @@ select {
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
 }
 
+.bg-gray-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
+}
+
+.bg-green-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(22 163 74 / var(--tw-bg-opacity));
+}
+
+.bg-origin-border {
+  background-origin: border-box;
+}
+
 .fill-current {
   fill: currentColor;
 }
@@ -1209,6 +1284,11 @@ select {
   padding-right: 0px;
 }
 
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
 .pb-4 {
   padding-bottom: 1rem;
 }
@@ -1474,6 +1554,11 @@ select {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
+.focus-visible\:ring-primary:focus-visible {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(248 196 85 / var(--tw-ring-opacity));
+}
+
 .focus-visible\:ring-offset-2:focus-visible {
   --tw-ring-offset-width: 2px;
 }
@@ -1692,6 +1777,10 @@ select {
     margin-left: 0px;
   }
 
+  .md\:ml-4 {
+    margin-left: 1rem;
+  }
+
   .md\:flex {
     display: flex;
   }
@@ -1733,9 +1822,26 @@ select {
   .md\:pr-2 {
     padding-right: 0.5rem;
   }
+
+  .md\:pl-4 {
+    padding-left: 1rem;
+  }
 }
 
 @media (min-width: 1024px) {
+  .lg\:mx-4 {
+    margin-left: 1rem;
+    margin-right: 1rem;
+  }
+
+  .lg\:mb-6 {
+    margin-bottom: 1.5rem;
+  }
+
+  .lg\:ml-4 {
+    margin-left: 1rem;
+  }
+
   .lg\:w-8\/12 {
     width: 66.666667%;
   }
@@ -1744,6 +1850,10 @@ select {
     padding: 3rem;
   }
 
+  .lg\:p-6 {
+    padding: 1.5rem;
+  }
+
   .lg\:px-12 {
     padding-left: 3rem;
     padding-right: 3rem;
@@ -1758,4 +1868,29 @@ select {
     padding-left: 0px;
     padding-right: 0px;
   }
+
+  .lg\:px-6 {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+
+  .lg\:px-8 {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+
+  .lg\:py-6 {
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+  }
+
+  .lg\:px-4 {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  .lg\:text-xl {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
 }
diff --git a/views/about.html b/views/about.html
@@ -92,7 +92,7 @@ <h4 class="font-bold text-l font-headline mt-6 dark:text-white">Can I run my own
 </div>
 
 <div
-  class="bg-white rounded-md shadow p-4 lg:p-12 mb-10 dark:bg-surface-02dp"
+  class="bg-white rounded-md shadow p-4 lg:p-12 dark:bg-surface-02dp"
 >
   <h3 class="font-bold text-2xl font-headline mb-4 dark:text-white">For developers</h3>
   <p class="mb-1 leading-relaxed dark:text-neutral-400">

diff --git a/views/apps/create.html b/views/apps/create.html
@@ -1,7 +1,7 @@
 {{define "body"}}
 
 <div
-  class="bg-white rounded-md shadow p-4 lg:p-12 mb-10 dark:bg-surface-02dp"
+  class="bg-white rounded-md shadow p-4 lg:p-12 dark:bg-surface-02dp"
 >
   <h2 class="font-bold text-2xl font-headline mb-2 dark:text-white">{{.Name}}</h2>
 

diff --git a/views/apps/index.html b/views/apps/index.html
@@ -1,6 +1,6 @@
 {{define "body"}}
 
-  <div class="mb-6 flex justify-between items-center">
+  <div class="mb-4 flex justify-between items-center">
     <h2 class="font-bold text-2xl font-headline dark:text-white">Connected apps</h2>
 
     <a
@@ -17,35 +17,33 @@ <h2 class="font-bold text-2xl font-headline dark:text-white">Connected apps</h2>
     </a>
   </div>
 
-  <p class="text-sm mb-4"></p>
-
   <div class="rounded-lg border border-gray-200 dark:border-white/10 overflow-hidden">
     <table
-      class="table-fixed w-full text-sm text-left"
+      class="table-fixed w-full text-sm text-left divide-y dark:divide-white/10"
     >
       <thead
         class="text-xs text-gray-900 uppercase bg-gray-50 dark:bg-surface-08dp dark:text-white rounded-t-lg"
       >
         <tr>
           <th scope="col" class="px-6 py-3 w-full">Name</th>
-          <th scope="col" class="px-6 py-3 w-40">Last Accessed</th>
+          <th scope="col" class="px-6 py-3 w-40 hidden md:table-cell">Last Accessed</th>
           <th scope="col" class="px-6 py-3 w-24"></th>
         </tr>
       </thead>
       <tbody>
         {{if not .Apps}}
-          <tr class="bg-white border-t dark:bg-surface-02dp dark:border-white/10">
+          <tr class="bg-white dark:bg-surface-02dp">
             <td colspan="3" class="px-6 py-16 text-center text-gray-500 dark:text-neutral-400">
               No apps connected yet.
             </td>
           </tr>
         {{else}}
         {{range .Apps}}
-        <tr class="bg-white border-t dark:bg-surface-02dp dark:border-white/10 cursor-pointer hover:bg-purple-50 dark:hover:bg-surface-16dp" onclick="window.location='/apps/{{.NostrPubkey}}'">
+        <tr class="bg-white dark:bg-surface-02dp cursor-pointer hover:bg-purple-50 dark:hover:bg-surface-16dp" onclick="window.location='/apps/{{.NostrPubkey}}'">
           <td class="px-6 py-4 text-gray-500 dark:text-white">
             {{.Name}}
           </td>
-          <td class="px-6 py-4 text-gray-500 dark:text-neutral-400">
+          <td class="px-6 py-4 text-gray-500 dark:text-neutral-400 hidden md:table-cell">
             {{if gt (index $.EventsCounts .ID) 0 }}
               {{(index $.LastEvents .ID).CreatedAt.Format "02 Jan 06 15:04 MST" }}
             {{else}}

diff --git a/views/apps/new.html b/views/apps/new.html
@@ -8,7 +8,7 @@ <h2 class="font-bold text-2xl font-headline mb-4 dark:text-white">
   {{end}}
 </h2>
 
-  <form method="POST" action="/apps" accept-charset="UTF-8">
+<form method="POST" action="/apps" accept-charset="UTF-8">
   <div class="p-4 dark:bg-surface-02dp bg-white rounded-md shadow">
       <div id="RequestMethodOptions">
         <div class="mb-6">
@@ -162,22 +162,14 @@ <h2 class="font-bold text-2xl font-headline mb-4 dark:text-white">
 
   </div>
 
-<div class="flex flex-col sm:flex-row sm:justify-center mt-5">
-    {{ if not .Pubkey }}
-    <a
-      href="/apps"
-      class="inline-flex bg-white border cursor-pointer dark:bg-surface-02dp dark:border-white/10 dark:hover:bg-surface-16dp duration-150 focus-visible:ring-2 focus-visible:ring-offset-2 focus:outline-none font-medium hover:bg-gray-50 items-center justify-center px-5 py-3 rounded-md shadow text-gray-700 dark:text-neutral-300 transition w-full sm:w-[250px] sm:mr-8 mt-8 sm:mt-0 order-last sm:order-first"
-    >
-      Cancel
-    </a>
-    {{ end }}
-
+  <div class="flex flex-col sm:flex-row sm:justify-center mt-5">
     <button
       type="submit"
       class="inline-flex w-full sm:w-[250px] bg-purple-700 cursor-pointer dark:text-neutral-200 duration-150 focus-visible:ring-2 focus-visible:ring-offset-2 focus:outline-none font-medium hover:bg-purple-900 items-center justify-center px-5 py-3 rounded-md shadow text-white transition"
     >
-    {{ if .Pubkey }} Connect Wallet {{ else }} Next {{ end }}
+    {{ if .Pubkey }} Connect Wallet {{ else }} Continue {{ end }} &raquo;
     </button>
+  </div>
 </form>
 
 <script type="text/javascript">