We use cookies to ensure you get the best experience on our website
Home Explore Help
Sign In
mirror
/
golang-ip2location
mirror of https://github.com/vladimirok5959/golang-ip2location.git
2
0
Fork 0
Files Wiki
Browse Source

Rework UI

Volodymyr Tkach 2 years ago
parent
6df84b69ff
commit
abd30f2f29
6 changed files with 115 additions and 163 deletions
Split View Show Diff Stats
  1. 3 0
      internal/consts/consts.go
  2. 5 3
      internal/server/handler/base/base.go
  3. 5 3
      internal/server/handler/page/page_index/page_index.go
  4. 50 9
      internal/server/web/index.html
  5. 0 0
      internal/server/web/styles.css
  6. 52 148
      internal/server/web/styles.dev.css

+ 3 - 0
internal/consts/consts.go
View File 

@@ -6,6 +6,9 @@ import (
 
 	"strings"
 
 )
 
 
+const AppVersion = "1.0.3"
 
+const AssetsVersion = 2
 
+
 
 const DataDirectory = "data"
 
 const DBFileName = "IP2LOCATION-LITE-DB3.BIN"

+ 5 - 3
internal/server/handler/base/base.go
View File 

@@ -14,9 +14,11 @@ type Handler struct {
 
 }
 
 
 type ServerData struct {
 
-	Additional interface{}
 
-	URL        string
 
-	WebURL     string
 
+	Additional    interface{}
 
+	AppVersion    string
 
+	AssetsVersion int
 
+	URL           string
 
+	WebURL        string
 
 }
 
 
 func (h Handler) FuncMap(w http.ResponseWriter, r *http.Request) template.FuncMap {

+ 5 - 3
internal/server/handler/page/page_index/page_index.go
View File 

@@ -19,8 +19,10 @@ type Handler struct {
 
 
 func (h Handler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
 
 	data := &base.ServerData{
 
-		URL:    r.URL.Path,
 
-		WebURL: consts.Config.WebURL,
 
+		AppVersion:    consts.AppVersion,
 
+		AssetsVersion: consts.AssetsVersion,
 
+		URL:           r.URL.Path,
 
+		WebURL:        consts.Config.WebURL,
 
 	}
 
 
 	var additional struct {
 
@@ -37,7 +39,7 @@ func (h Handler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
 
 
 	if h.Client != nil {
 
 		if res, err := h.Client.IP2Location(r.Context(), additional.ClientIP); err == nil {
 
-			if j, err := json.Marshal(res); err == nil {
 
+			if j, err := json.MarshalIndent(res, "<br>", "&nbsp;&nbsp;"); err == nil {
 
 				additional.GeoIPData = template.HTML(string(j))
 
 			}
 
 		}

+ 50 - 9
internal/server/web/index.html
View File 

@@ -2,19 +2,60 @@
 
 <html lang="en">
 
 	<head>
 
 		<meta charset="utf-8" />
 
+		<meta name="theme-color" content="#007bff" />
 
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
 		<title>ip2location</title>
 
-		<link rel="stylesheet" href="/styles.css?v=1" />
 
+		<link rel="stylesheet" href="/styles.css?v={{$.Data.AssetsVersion}}" />
 
 	</head>
 
 	<body>
 
-		<div class="wrapper">
 
-			<h1><a href="/">ip2location</a></h1>
 
-			<h2>{{$.Data.Additional.ClientIP}}</h2>
 
-			<h2>{{$.Data.Additional.GeoIPData}}</h2>
 
-			<form action="/" method="get">
 
-				<input class="form-control" type="text" name="ip" value="{{$.Data.Additional.ClientIP}}" />
 
-				<button class="btn blue" type="submit">Check</button>
 
-			</form>
 
+		<div class="v-center">
 
+			<div class="v-center-row">
 
+				<header>
 
+					<div class="container-fluid">
 
+						<div class="row">
 
+							<div class="col-12">
 
+								<div class="header">
 
+									<h1><a href="/">ip2location</a></h1>
 
+									<h2>{{$.Data.Additional.ClientIP}}</h2>
 
+								</div>
 
+							</div>
 
+						</div>
 
+					</div>
 
+				</header>
 
+				<main>
 
+					<div class="container-fluid">
 
+						<div class="row">
 
+							<div class="col-12">
 
+								<div class="card">
 
+									<h2>{{$.Data.Additional.GeoIPData}}</h2>
 
+									<hr />
 
+									<form action="/" method="get">
 
+										<div class="row">
 
+											<div class="col-12 col-sm-7 col-md-7 col-lg-7 col-xl-7">
 
+												<input class="form-control" type="text" name="ip" value="{{$.Data.Additional.ClientIP}}" />
 
+											</div>
 
+											<div class="col-12 col-sm-5 col-md-5 col-lg-5 col-xl-5">
 
+												<button class="btn blue" type="submit">Check</button>
 
+											</div>
 
+										</div>
 
+									</form>
 
+								</div>
 
+							</div>
 
+						</div>
 
+					</div>
 
+				</main>
 
+				<footer>
 
+					<div class="container-fluid">
 
+						<div class="row">
 
+							<div class="col-12">
 
+								<div class="footer">
 
+									v{{$.Data.AppVersion}}
 
+								</div>
 
+							</div>
 
+						</div>
 
+					</div>
 
+				</footer>
 
+			</div>
 
 		</div>
 
 	</body>
 
 </html>

File diff suppressed because it is too large
+ 0 - 0
internal/server/web/styles.css


+ 52 - 148
internal/server/web/styles.dev.css
View File 

@@ -1,52 +1,9 @@
 
-*,
 
-::after,
 
-::before {
 
-	box-sizing: border-box;
 
-}
 
-
 
-html {
 
-	height: 100%;
 
-	line-height: 1.5;
 
-}
 
-
 
-body {
 
-	color: #212529;
 
-	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 
-	font-size: 16px;
 
-	font-weight: 400;
 
-	margin: 0;
 
-	padding: 0;
 
-}
 
-
 
-.clear::after {
 
-	clear: both;
 
-	content: '';
 
-	display: block;
 
-	height: 0;
 
-	line-height: 0;
 
-	margin: 0;
 
-	padding: 0;
 
-}
 
-
 
-html {
 
-	min-height: 100%;
 
-	height: 100%;
 
-	position: relative;
 
-}
 
-
 
-body {
 
-	margin: 0;
 
-	padding: 0;
 
-	position: relative;
 
-	width: 100%;
 
-	min-height: 100%;
 
-	height: 100%;
 
-	height: auto;
 
-	display: table;
 
-}
 
+/* import(https://raw.githubusercontent.com/vladimirok5959/assets/main/css/reboot.css) */
 
+/* import(https://raw.githubusercontent.com/vladimirok5959/assets/main/css/grid.css) */
 
+/* import(https://raw.githubusercontent.com/vladimirok5959/assets/main/css/controls/button/button.css) */
 
+/* import(https://raw.githubusercontent.com/vladimirok5959/assets/main/css/controls/input/text.css) */
 
 
 a {
 
-	color: #0d6efd;
 
 	text-decoration: none;
 
 }
 
 
@@ -54,129 +11,76 @@ a:hover {
 
 	text-decoration: underline;
 
 }
 
 
-.wrapper {
 
-	padding: 15px;
 
-	text-align: center;
 
-	display: table-cell;
 
-	vertical-align: middle;
 
+html,
 
+body {
 
+	height: 100%;
 
 }
 
 
-h1, h2 {
 
-	font-weight: 400;
 
-	font-size: 34px;
 
-	line-height: 36px;
 
-	margin: 10px 0;
 
+body {
 
+	background-color: #eee;
 
 }
 
 
-h2 {
 
-	font-weight: 350;
 
-	font-size: 14px;
 
-	line-height: 18px;
 
-	margin-bottom: 0;
 
+.v-center {
 
+	-ms-flex-wrap: wrap;
 
+	display: -ms-flexbox;
 
+	display: flex;
 
+	flex-shrink: 0;
 
+	flex-wrap: wrap;
 
+	height: 100%;
 
+	width: 100%;
 
 }
 
 
-.form-control {
 
-	background-clip: padding-box;
 
-	background-color: #fff;
 
-	border-radius: 4px;
 
-	border: 1px solid #ced4da;
 
-	color: #495057;
 
-	display: inline-block;
 
-	font-family: inherit;
 
-	font-size: 16px;
 
-	height: 38px;
 
-	line-height: 1.5;
 
-	margin: 0;
 
-	overflow: visible;
 
-	padding: 6px 12px;
 
-	transition: box-shadow .15s ease-in-out;
 
-	vertical-align: middle;
 
+.v-center-row {
 
+	-ms-flex-item-align: center !important;
 
+	align-self: center !important;
 
+	flex: 0 0 100%;
 
+	padding: 15px 0px;
 
 }
 
 
-.form-control:focus {
 
+.card {
 
 	background-color: #fff;
 
-	border-color: #80bdff;
 
-	box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
 
-	color: #495057;
 
-	outline: 0;
 
+	border-radius: 5px;
 
+	border: 1px solid #dee2e6;
 
+	padding: 25px;
 
 }
 
 
-.btn {
 
-	border-radius: 4px;
 
-	border: 1px solid transparent;
 
-	color: #fff;
 
-	display: inline-block;
 
-	font-size: 16px;
 
-	font-weight: 400;
 
-	height: 38px;
 
-	line-height: 1.5;
 
-	padding: 6px 12px;
 
-	text-align: center;
 
-	text-decoration: none;
 
-	transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
 
-	user-select: none;
 
-	vertical-align: middle;
 
-	white-space: nowrap;
 
+.header {
 
+	padding-bottom: 15px;
 
 }
 
 
-.btn:focus,
 
-.btn:hover {
 
-	text-decoration: none;
 
-}
 
-
 
-.btn:focus {
 
-	box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
 
-	outline: 0;
 
-}
 
-
 
-.btn:not(:disabled):not(.disabled) {
 
-	cursor: pointer;
 
-}
 
-
 
-.btn.blue {
 
-	background-color: #0d6efd;
 
-	border-color: #0d6efd;
 
+.header h1,
 
+.header h2 {
 
+	margin-bottom: 0;
 
+	text-align: center;
 
 }
 
 
-.btn.blue:hover {
 
-	background-color: #0b5ed7;
 
-	border-color: #0a58ca;
 
+main h2 {
 
+	font-size: 14px;
 
+	margin-bottom: 25px;
 
+	word-break: break-word;
 
 }
 
 
-.btn.blue:focus {
 
-	box-shadow: 0 0 0 0.25rem rgb(49 132 253 / 50%);
 
+main hr {
 
+	margin: 0;
 
 }
 
 
-form {
 
-	margin-top: 15px;
 
+main form .form-control,
 
+main form button {
 
+	margin-top: 25px;
 
+	width: 100%;
 
 }
 
 
-button {
 
-	margin-left: 15px;
 
+.footer {
 
+	font-size: 0.9rem;
 
+	padding-top: 15px;
 
+	text-align: center;
 
 }
 
 
-@media only screen and (max-width:800px) {
 
-	.wrapper {
 
-		padding: 15px 0;
 
-	}
 
-
 
-	h1, h2 {
 
-		padding: 0 15px;
 
-	}
 
-
 
-	form {
 
-		display: block;
 
-		padding: 0px 15px;
 
-	}
 
-
 
-	form .form-control,
 
-	form .btn {
 
-		display: block;
 
-		width: 100%;
 
-	}
 
-
 
-	form button {
 
-		margin-left: 0;
 
-		margin-top: 15px;
 
+@media (min-width: 576px) {
 
+	header,
 
+	main,
 
+	footer {
 
+		margin: 0px auto;
 
+		width: 400px;
 
 	}
 
 }

Some files were not shown because too many files changed in this diff