From 6dfe1f83f0309a1eb7324c5ede5b695aa1880426 Mon Sep 17 00:00:00 2001
From: srxr <10549030+srxr@users.noreply.github.com>
Date: Tue, 30 Mar 2021 03:26:16 +0000
Subject: [PATCH] Improve layouts

1. Validate input url is empty for index and view page
2. Display origin full url in view page
3. Do not show edit and delete button on small screen
4. Add tooltip for view button
5. Pad domain on view page
---
 server.go            |  2 ++
 templates/edit.html  | 21 +++++++++++++++++--
 templates/index.html | 50 +++++++++++++++++++++++++++++++-------------
 templates/view.html  | 13 ++++++++++--
 4 files changed, 67 insertions(+), 19 deletions(-)

diff --git a/server.go b/server.go
index f920e57..2606c6b 100644
--- a/server.go
+++ b/server.go
@@ -167,9 +167,11 @@ func (s *Server) ViewHandler() httprouter.Handle {
 			struct {
 				ID  string
 				URL string
+				Ori string
 			}{
 				ID:  u.ID,
 				URL: fullURL.String(),
+				Ori: u.URL,
 			},
 		)
 	}
diff --git a/templates/edit.html b/templates/edit.html
index 4ae9379..c3adb33 100644
--- a/templates/edit.html
+++ b/templates/edit.html
@@ -6,8 +6,8 @@
       <form class="mt-10" action="/e/{{.ID}}" method="POST">
         <div class="form-group input-group">
           <input class="form-input column col-1" type="text" name="id" value="{{.ID}}" />
-          <input class="form-input" type="text" name="url" value="{{.URL}}" placeholder="Enter long url here..." />
-          <button class="btn btn-primary" type="submit">Edit</button>
+          <input class="form-input" id="input-url" type="text" name="url" value="{{.URL}}" placeholder="Enter long url here..." />
+          <button class="btn btn-primary" id="submit" type="submit">OK</button>
           <a class="btn btn-action" href="/u/{{.ID}}">
             <i class="icon icon-forward">View</i>
           </a>
@@ -17,3 +17,20 @@
   </div>
 </section>
 {{end}}
+{{define "scripts"}}
+<script src="/js/jquery.min.js"></script>
+<script>
+$(document).ready(function() {
+  $("#input-url").focus(function() {
+    $("#submit").removeAttr("data-tooltip", "Please enter long url").removeClass("tooltip tooltip-left");
+  });
+
+  $("#submit").click(function() {
+    if ($("#input-url").val().trim() === "") {
+      $(this).attr("data-tooltip", "Please enter long url").addClass("tooltip tooltip-left");
+      return false;
+    }
+  });
+});
+</script>
+{{end}}
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index 9446c45..b822c85 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -3,31 +3,51 @@
   <div class="columns">
     <div class="column">
       {{ range $URL := .URLList }}
-        <div class="input-group mb-5">
-          <span class="input-group-addon d-inline-block">
-            {{ $URL.ID }}
-            <i class="icon icon-forward"></i>
-            {{ $URL.URL -}}
-          </span>
-          <a class="btn btn-action btn-primary" href="/u/{{$URL.ID}}">
+      <div class="input-group col-12">
+        <span class="input-group-addon col-8 d-inline-block text-ellipsis">
+          {{ $URL.ID }}
+          <i class="icon icon-forward"></i>
+          {{ $URL.URL -}}
+        </span>
+        <div class="popover popover-right">
+          <a class="btn btn-action btn-primary tooltip tooltip-left" data-tooltip="View Detail" href="/u/{{$URL.ID}}">
             <i class="icon icon-forward">View</i>
           </a>
-          <a class="btn btn-action" href="/e/{{$URL.ID}}">
-            <i class="icon icon-edit">Edit</i>
-          </a>
-          <a class="btn btn-action" href="/d/{{$URL.ID}}">
-            <i class="icon icon-delete">Delete</i>
-          </a>
         </div>
+        <a class="btn btn-action hide-md" href="/e/{{$URL.ID}}">
+          <i class="icon icon-edit">Edit</i>
+        </a>
+        <a class="btn btn-action hide-lg" href="/d/{{$URL.ID}}">
+          <i class="icon icon-delete">Delete</i>
+        </a>
+      </div>
       {{end}}
       <form class="mt-10" action="" method="POST">
         <div class="form-group input-group">
           <label class="form-label" for="input-url"></label>
-          <input class="form-input" id="input-url" type="text" name="url" placeholder="Enter long url here..." autofocus>
-          <button class="btn btn-primary" type="submit">Shorten</button>
+          <input class="form-input" id="input-url" type="text" name="url" placeholder="Enter long url here..."
+            autofocus>
+          <button class="btn btn-primary" id="submit" type="submit">Shorten</button>
         </div>
       </form>
     </div>
   </div>
 </section>
 {{end}}
+{{define "scripts"}}
+<script src="/js/jquery.min.js"></script>
+<script>
+$(document).ready(function() {
+  $("#input-url").focus(function() {
+    $("#submit").removeAttr("data-tooltip", "Please enter long url").removeClass("tooltip tooltip-left");
+  });
+
+  $("#submit").click(function() {
+    if ($("#input-url").val().trim() === "") {
+      $(this).attr("data-tooltip", "Please enter long url").addClass("tooltip tooltip-left");
+      return false;
+    }
+  });
+});
+</script>
+{{end}}
\ No newline at end of file
diff --git a/templates/view.html b/templates/view.html
index 392e3f8..35a17d5 100644
--- a/templates/view.html
+++ b/templates/view.html
@@ -2,9 +2,10 @@
 <section class="container">
   <div class="columns">
     <div class="column">
-       <p>Your short url is: <a href="/r/{{.ID}}">{{.ID}}</a></p>
+       <p class="text-ellipsis text-secondary">Your short url is: <a href="/r/{{.ID}}">{{.ID}}</a></p>
+       <p class="text-ellipsis text-secondary">Your full url is: <a href="{{.Ori}}">{{.Ori}}</a></p>
        <div class="form-group input-group">
-         <input class="form-input" id="input-url" value="{{.URL}}" readonly />
+         <input class="form-input text-ellipsis" id="input-url" value="{{.URL}}" readonly />
          <button class="btn btn-primary hide" id="btn-copy" data-clipboard-target="#input-url">Copy</button>
          <a class="btn btn-action" href="/e/{{.ID}}">
           <i class="icon icon-edit">Edit</i>
@@ -30,6 +31,12 @@ $(document).ready(function() {
     }, timeout || 3000);
   };
 
+  var padShortURL = function() {
+    var domain = window.location.origin;
+    var short = $("#input-url").val().replace(domain, "");
+    $("#input-url").val(domain + short);
+  };
+
   clipboard.on("success", function(e) {
     e.clearSelection();
     displayTooltip("#btn-copy", "Copied!");
@@ -40,6 +47,8 @@ $(document).ready(function() {
   });
 
   $("#btn-copy").removeClass("hide");
+
+  padShortURL();
 });
 </script>
 {{end}}