1
0
mirror of https://github.com/taigrr/shorturl synced 2025-01-18 04:03:16 -08:00

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
This commit is contained in:
srxr
2021-03-30 03:26:16 +00:00
parent 31c239e486
commit 6dfe1f83f0
4 changed files with 67 additions and 19 deletions

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