balki/pgweb
1
0
Fork 0
Code Pull Requests Activity

Frontend tweaks

Browse Source
This commit is contained in:
Dan Sosedoff 2014-10-13 19:49:43 -05:00
parent e78499551e
commit 5dd26cd8d0
5 changed files with 79 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Makefile
View File

@ -5,7 +5,7 @@ build:
dev: dev:
rm -f bindata.go rm -f bindata.go
go-bindata static/... go-bindata -debug static/...
go build go build
@echo "You can now execute ./pgweb" @echo "You can now execute ./pgweb"

2
api.go
View File

@ -31,7 +31,7 @@ func API_Home(c *gin.Context) {
return return
} }
c.Data(200, "text/html", data) c.Data(200, "text/html; charset=utf-8", data)
} }
func API_RunQuery(c *gin.Context) { func API_RunQuery(c *gin.Context) {

31
static/css/app.css
View File

@ -1,7 +1,7 @@
#nav { #nav {
position: fixed; position: fixed;
top: 0; top: 0;
left: 250; left: 250px;
right: 0; right: 0;
height: 50px; height: 50px;
box-shadow: inset 0 -1px 0 0 #b8b7b5; box-shadow: inset 0 -1px 0 0 #b8b7b5;
@ -12,6 +12,7 @@
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
height: 50px; height: 50px;
display: block;
} }
#nav ul li { #nav ul li {
@ -26,6 +27,9 @@
font-weight: 500; font-weight: 500;
margin: 0 1px; margin: 0 1px;
cursor: pointer; cursor: pointer;
display: block;
list-style: none;
list-style-type: none;
} }
#nav ul li:first-child { #nav ul li:first-child {
@ -182,19 +186,38 @@
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
#results tbody tr:hover td {
background: #ffe;
}
#results tr.selected td { #results tr.selected td {
background: #3874d7; background: #3874d7 !important;
color: #fff !important; color: #fff !important;
} }
#results td { #results td {
color: #3a3633; color: #3a3633;
max-width: 200px;
overflow: hidden;
vertical-align: middle; vertical-align: middle;
border: 0px none; border: 0px none;
} }
#results td div {
max-width: 200px;
max-height: 51px;
overflow: hidden;
text-overflow: ellipsis;
/*
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
*/
}
#results td div span.null {
color: #bbb;
}
#results th:first-child, #results th:first-child,
#results td:first-child { #results td:first-child {
padding-left: 15px; padding-left: 15px;

26
static/index.html
View File

@ -1,9 +1,24 @@
<!DOCTYPE html>
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>pgweb</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Language" content="en">
<link rel="stylesheet" href="/static/css/bootstrap.css"></link>
<link rel="stylesheet" href="/static/css/app.css"></link>
<script type="text/javascript" src="/static/js/jquery.js"></script>
<script type="text/javascript" src="/static/js/ace.js"></script>
<script type="text/javascript" src="/static/js/ace-pgsql.js"></script>
<script type="text/javascript" src="/static/js/app.js"></script>
</head>
<body>
<div id="nav"> <div id="nav">
<ul> <ul>
<li id="table_content">Content</li> <li id="table_content">Content</li>
<li id="table_structure">Structure</li> <li id="table_structure">Structure</li>
<li id="table_indexes">Indexes</li> <li id="table_indexes">Indexes</li>
<li id="table_query" class="selected">Run Query</li> <li id="table_query" class="selected">SQL Query</li>
<li id="table_history">History</li> <li id="table_history">History</li>
</ul> </ul>
</div> </div>
@ -25,10 +40,5 @@
</div> </div>
</div> </div>
</div> </div>
</body>
<link rel="stylesheet" href="/static/css/bootstrap.css" /> </html>
<link rel="stylesheet" href="/static/css/app.css" />
<script type="text/javascript" src="/static/js/jquery.js"></script>
<script type="text/javascript" src="/static/js/ace.js"></script>
<script type="text/javascript" src="/static/js/ace-pgsql.js"></script>
<script type="text/javascript" src="/static/js/app.js"></script>

10
static/js/app.js
View File

@ -30,6 +30,14 @@ function loadTables() {
}); });
} }
function escapeHtml(str) {
if (str != null || str != undefined) {
return jQuery("<div/>").text(str).html();
}
return "<span class='null'>null</span>";
}
function buildTable(results) { function buildTable(results) {
$("#results").text("").removeClass("empty"); $("#results").text("").removeClass("empty");
@ -54,7 +62,7 @@ function buildTable(results) {
results.rows.forEach(function(row) { results.rows.forEach(function(row) {
var r = ""; var r = "";
for (i in row) { r += "<td>" + row[i] + "</td>"; } for (i in row) { r += "<td><div>" + escapeHtml(row[i]) + "</div></td>"; }
rows += "<tr>" + r + "</tr>"; rows += "<tr>" + r + "</tr>";
}); });