balki/pgweb
1
0
Fork 0
Code Pull Requests Activity

Restructure sidebar

Browse Source
This commit is contained in:
Dan Sosedoff
2019-07-05 15:19:05 -05:00
parent 15c21b6379
commit 819b13fe55
4 changed files with 235 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
static/css/app.css
View File

@@ -74,35 +74,42 @@
background: #f9f9f9;
}
#sidebar .title {
position: absolute;
top: 0;
width: 100%;
line-height: 33px;
height: 33px;
padding: 0px 8px;
color: #555;
font-weight: bold;
font-size: 13px;
}
#sidebar .title.main {
#sidebar .current-database {
position: fixed;
left: 0px;
top: 0px;
width: 250px;
height: 50px;
line-height: 50px;
font-weight: bold;
font-size: 14px;
background: #79589f;
color: #fff;
padding: 0px;
background: #79589f;
z-index: 900;
}
#sidebar .title.main i.fa-database {
#sidebar .current-database .wrap {
position: relative;
}
#sidebar .current-database span.current-database-name {
margin-left: 30px;
display: inline-block;
width: 200px;
height: 50px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
}
#sidebar .current-database i.fa-database {
position: absolute;
left: 8px;
top: 18px;
}
#sidebar span.current-database,
#sidebar input.typeahead {
#sidebar .current-database input.typeahead {
margin-left: 30px;
display: inline-block;
width: 200px;
@@ -112,7 +119,7 @@
text-overflow: ellipsis;
}
#sidebar input.typeahead {
#sidebar .current-database input.typeahead {
display: none;
background: #79589f;
width: 200px;
@@ -123,11 +130,25 @@
border: 0px none;
}
#sidebar input.typeahead::-webkit-input-placeholder {
color: #d6cce2;
#sidebar .current-database span.refresh {
position: absolute;
top: 0px;
right: 6px;
cursor: pointer;
color: #fff;
display: none;
}
#sidebar .current-database:hover span.refresh {
display: inline-block;
}
#sidebar .current-database input.typeahead::-webkit-input-placeholder {
color: #fff;
}
#sidebar ul.typeahead {
position: absolute;
margin-left: 30px;
overflow-y: auto;
max-height: 300px;
@@ -140,11 +161,11 @@
}
#sidebar div.tables-list {
position: absolute;
right: 0;
top: 0px;
position: fixed;
width: 250px;
top: 50px;
left: 0px;
bottom: 145px;
bottom: 130px;
overflow: auto;
}
@@ -153,25 +174,8 @@
overflow: auto;
}
#sidebar div.tables-list .title span.current-database {
cursor: pointer;
}
#sidebar div.tables-list .title:hover span.refresh {
display: inline-block;
}
#sidebar div.tables-list .title span.refresh {
position: absolute;
top: 0px;
right: 6px;
cursor: pointer;
color: #fff;
display: none;
}
#sidebar div.tables-list #tables, #sequences, #objects {
padding: 50px 0 0;
font-size: 12px;
}
@@ -179,11 +183,10 @@
position: fixed;
width: 250px;
left: 0px;
height: 145px;
height: 130px;
bottom: 0px;
/*border-top: 1px solid #d4d4d4;*/
/*border-right: 1px solid #d4d4d4;*/
box-sizing: border-box;
cursor: default;
}
#sidebar div.table-information .wrap {
@@ -192,24 +195,27 @@
}
#sidebar div.table-information .title {
/*background: #f6f6f6;*/
font-size: 12px;
text-transform: uppercase;
color: #aaa;
line-height: 30px;
padding: 0px 8px;
border-top: 1px solid #eee;
}
#sidebar div.table-information ul {
padding: 33px 0 0;
font-size: 12px;
#sidebar div.table-information .lines {
display: none;
}
#sidebar div.table-information ul li {
#sidebar div.table-information .lines .line {
line-height: 24px;
height: 24px;
padding: 0 8px 0 12px;
cursor: default;
padding: 0 8px 0 8px;
font-size: 12px;
color: #7F7E7F !important;
}
#sidebar div.table-information ul li span {
#sidebar div.table-information .lines .line span {
color: #4F4F4F;
min-width: 0;
padding-left: 0px;
@@ -723,10 +729,7 @@
.ace_gutter, .ace_gutter-cell {
background: #fff !important;
color: #bbb;
}
.ace_active-line {
background: #f9f9f9 !important;
font-size: 12px;
}
.ace_active-line {

24
static/index.html
View File

@@ -38,25 +38,27 @@
</div>
</div>
<div id="sidebar">
<div class="current-database">
<div class="wrap">
<i class="fa fa-database"></i> <span class="current-database-name" id="current_database"></span>
<input class="typeahead" id="database_search" type="text" placeholder="Search database" />
<span class="refresh" id="refresh_tables" title="Refresh tables list"><i class="fa fa-refresh"></i></span>
</div>
</div>
<div class="tables-list">
<div class="wrap">
<div class="title main">
<i class="fa fa-database"></i> <span class="current-database" id="current_database"></span>
<input class="typeahead current_database" id="database_search" type="text" placeholder="Search database">
<span class="refresh" id="refresh_tables" title="Refresh tables list"><i class="fa fa-refresh"></i></span>
</div>
<div id="objects"></div>
</div>
</div>
<div class="table-information">
<div class="wrap">
<div class="title">Table Information</div>
<ul>
<li>Size: <span id="table_total_size"></span></li>
<li>Data size: <span id="table_data_size"></span></li>
<li>Index size: <span id="table_index_size"></span></li>
<li>Estimated rows: <span id="table_rows_count"></span></li>
</ul>
<div class="lines">
<div class="line">Size: <span id="table_total_size"></span></div>
<div class="line">Data size: <span id="table_data_size"></span></div>
<div class="line">Index size: <span id="table_index_size"></span></div>
<div class="line">Estimated rows: <span id="table_rows_count"></span></div>
</div>
</div>
</div>
</div>

2
static/js/app.js
View File

@@ -422,7 +422,7 @@ function showTableInfo() {
}
apiCall("get", "/tables/" + name + "/info", {}, function(data) {
$(".table-information ul").show();
$(".table-information .lines").show();
$("#table_total_size").text(data.total_size);
$("#table_data_size").text(data.data_size);
$("#table_index_size").text(data.index_size);