taigrr/shorturl
1
0
Fork 0
mirror of https://github.com/taigrr/shorturl synced 2025-01-18 04:03:16 -08:00
Code Issues Projects Releases Wiki Activity

Improve layouts

Browse Source 
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
This commit is contained in:
srxr 2021-03-30 03:26:16 +00:00
parent 31c239e486
commit 6dfe1f83f0
No known key found for this signature in database
GPG Key ID: 5F5DB27AF89FA243
4 changed files with 67 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
server.go
View File

@ -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,
},
)
}

21
templates/edit.html
View File

@ -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}}

34
templates/index.html
View File

@ -3,19 +3,21 @@
<div class="columns">
<div class="column">
{{ range $URL := .URLList }}
<div class="input-group mb-5">
<span class="input-group-addon d-inline-block">
<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>
<a class="btn btn-action btn-primary" href="/u/{{$URL.ID}}">
<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}}">
</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" href="/d/{{$URL.ID}}">
<a class="btn btn-action hide-lg" href="/d/{{$URL.ID}}">
<i class="icon icon-delete">Delete</i>
</a>
</div>
@ -23,11 +25,29 @@
<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}}

13
templates/view.html
View File

@ -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}}