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:
rm -f bindata.go
go-bindata static/...
go-bindata -debug static/...
go build
@echo "You can now execute ./pgweb"

2
api.go
View File

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

31
static/css/app.css
View File

@ -1,7 +1,7 @@
#nav {
position: fixed;
top: 0;
left: 250;
left: 250px;
right: 0;
height: 50px;
box-shadow: inset 0 -1px 0 0 #b8b7b5;
@ -12,6 +12,7 @@
margin: 0px;
padding: 0px;
height: 50px;
display: block;
}
#nav ul li {
@ -26,6 +27,9 @@
font-weight: 500;
margin: 0 1px;
cursor: pointer;
display: block;
list-style: none;
list-style-type: none;
}
#nav ul li:first-child {
@ -182,19 +186,38 @@
-webkit-font-smoothing: antialiased;
}
#results tbody tr:hover td {
background: #ffe;
}
#results tr.selected td {
background: #3874d7;
background: #3874d7 !important;
color: #fff !important;
}
#results td {
color: #3a3633;
max-width: 200px;
overflow: hidden;
vertical-align: middle;
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 td:first-child {
padding-left: 15px;

72
static/index.html
View File

@ -1,34 +1,44 @@
<div id="nav">
<ul>
<li id="table_content">Content</li>
<li id="table_structure">Structure</li>
<li id="table_indexes">Indexes</li>
<li id="table_query" class="selected">Run Query</li>
<li id="table_history">History</li>
</ul>
</div>
<div id="sidebar">
<div class="wrapper"><ul id="tables"></ul></div>
</div>
<div id="body">
<div id="input">
<div class="wrapper">
<div id="custom_query"></div>
<div class="actions">
<input type="button" id="run" value="Run Query" class="btn btn-sm btn-primary" />
<!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">
<ul>
<li id="table_content">Content</li>
<li id="table_structure">Structure</li>
<li id="table_indexes">Indexes</li>
<li id="table_query" class="selected">SQL Query</li>
<li id="table_history">History</li>
</ul>
</div>
<div id="sidebar">
<div class="wrapper"><ul id="tables"></ul></div>
</div>
<div id="body">
<div id="input">
<div class="wrapper">
<div id="custom_query"></div>
<div class="actions">
<input type="button" id="run" value="Run Query" class="btn btn-sm btn-primary" />
</div>
</div>
</div>
<div id="output">
<div class="wrapper">
<table id="results" class="table table-striped"></table>
</div>
</div>
</div>
<div id="output">
<div class="wrapper">
<table id="results" class="table table-striped"></table>
</div>
</div>
</div>
<link rel="stylesheet" href="/static/css/bootstrap.css" />
<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>
</body>
</html>

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) {
$("#results").text("").removeClass("empty");
@ -54,7 +62,7 @@ function buildTable(results) {
results.rows.forEach(function(row) {
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>";
});