cmd/golink: display shortname as input group

Change-Id: Ie2d609d495e42b37b9d92d71604646134a512a7b
nikola-n6c · Jun 18, 2022 · 67b1a11 · 67b1a11
1 parent bb72cf0
commit 67b1a11
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 8 deletions.
diff --git a/home.html b/home.html
@@ -15,13 +15,15 @@ <h1 class="text-2xl font-bold pb-1">go/</h1>
  <main class="container mx-auto px-4 flex-1">
  <h2 class="text-xl font-bold pb-2">Create a new link</h2>
 
- <form method="POST" action="/">
- <label class="whitespace-nowrap">http://go/
- <input name=short required type=text size=15 placeholder="shortname" value="{{.Short}}" class="p-2 my-2 rounded-md border-gray-300 placeholder:text-gray-400">
- &rarr;
- </label>
+ <form method="POST" action="/" class="flex flex-wrap">
+ <div class="flex">
+ <label for=short class="flex my-2 px-2 items-center bg-gray-100 border border-r-0 border-gray-300 rounded-l-md text-gray-700">http://go/</label>
+ <input id=short name=short required type=text size=15 placeholder="shortname" value="{{.Short}}"
+ class="p-2 my-2 rounded-r-md border-gray-300 placeholder:text-gray-400">
+ <span class="flex m-2 items-center">&rarr;</span>
+ </div>
  <input name=long required type=text size=40 placeholder="https://destination-url" class="p-2 my-2 max-w-full rounded-md border-gray-300 placeholder:text-gray-400">
- <button type=submit class="py-2 px-4 my-2 rounded-md bg-blue-500 border-blue-500 text-white hover:bg-blue-600 hover:border-blue-600">Create</button>
+ <button type=submit class="py-2 px-4 m-2 rounded-md bg-blue-500 border-blue-500 text-white hover:bg-blue-600 hover:border-blue-600">Create</button>
  </form>
 
  <h2 class="text-xl font-bold pt-6 pb-2">Popular Links</h2>

diff --git a/static/base.css b/static/base.css
@@ -671,6 +671,10 @@ select {
  }
 }
 
+.m-2 {
+ margin: 0.5rem;
+}
+
 .mx-auto {
  margin-left: auto;
  margin-right: auto;
@@ -725,18 +729,40 @@ select {
  flex-direction: column;
 }
 
-.whitespace-nowrap {
- white-space: nowrap;
+.flex-wrap {
+ flex-wrap: wrap;
+}
+
+.items-center {
+ align-items: center;
 }
 
 .rounded-md {
  border-radius: 0.375rem;
 }
 
+.rounded-l-md {
+ border-top-left-radius: 0.375rem;
+ border-bottom-left-radius: 0.375rem;
+}
+
+.rounded-r-md {
+ border-top-right-radius: 0.375rem;
+ border-bottom-right-radius: 0.375rem;
+}
+
+.border {
+ border-width: 1px;
+}
+
 .border-b {
  border-bottom-width: 1px;
 }
 
+.border-r-0 {
+ border-right-width: 0px;
+}
+
 .border-t {
  border-top-width: 1px;
 }
@@ -775,6 +801,11 @@ select {
  padding-right: 1rem;
 }
 
+.px-2 {
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+}
+
 .py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
@@ -843,6 +874,11 @@ select {
  line-height: 1.5rem;
 }
 
+.text-gray-700 {
+ --tw-text-opacity: 1;
+ color: rgb(71 70 69 / var(--tw-text-opacity));
+}
+
 .text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));