Adjusting GUI table & details panes fonts to a slightly smaller size.
Fixed a number of issues with details panes; table embedding, etc.
Change-Id: I7c7ebf913f5755e385c32114e9f6a82f45997842
diff --git a/apps/yang-gui/src/main/resources/app/view/yangModel/yangModel.css b/apps/yang-gui/src/main/resources/app/view/yangModel/yangModel.css
index f65e636..d9d0c14 100644
--- a/apps/yang-gui/src/main/resources/app/view/yangModel/yangModel.css
+++ b/apps/yang-gui/src/main/resources/app/view/yangModel/yangModel.css
@@ -58,6 +58,16 @@
display: inline-block;
margin: 8px 0;
padding-left: 6px;
+ font-size: 16pt;
+ font-weight: lighter;
+}
+
+#yang-model-details-panel h3 {
+ display: inline-block;
+ margin: 8px 0;
+ padding-left: 6px;
+ font-size: 13pt;
+ font-weight: lighter;
}
#yang-model-details-panel .src-frame {
diff --git a/apps/yang-gui/src/main/resources/app/view/yangModel/yangModel.js b/apps/yang-gui/src/main/resources/app/view/yangModel/yangModel.js
index 42fa343..e35b8df 100644
--- a/apps/yang-gui/src/main/resources/app/view/yangModel/yangModel.js
+++ b/apps/yang-gui/src/main/resources/app/view/yangModel/yangModel.js
@@ -89,7 +89,7 @@
top.append('hr');
bottom = container.append('div').classed('bottom', true);
- bottom.append('h2').text('YANG Source');
+ bottom.append('h3').text('YANG Source');
srcFrame = bottom.append('div').classed('src-frame', true);
srcDiv = srcFrame.append('div').classed('module-source', true);
diff --git a/web/gui/src/main/webapp/app/fw/widget/table.css b/web/gui/src/main/webapp/app/fw/widget/table.css
index 2569031..4d4649a 100644
--- a/web/gui/src/main/webapp/app/fw/widget/table.css
+++ b/web/gui/src/main/webapp/app/fw/widget/table.css
@@ -52,10 +52,12 @@
padding: 4px;
text-align: left;
word-wrap: break-word;
- font-size: 12pt;
+ font-size: 10pt;
}
div.summary-list td.table-icon {
+ padding-top: 4px;
+ padding-bottom: 0px;
padding-left: 4px;
text-align: center;
}
@@ -64,10 +66,9 @@
font-weight: bold;
font-variant: small-caps;
text-transform: uppercase;
- font-size: 11pt;
- padding-top: 14px;
- padding-bottom: 14px;
-
+ font-size: 10pt;
+ padding-top: 8px;
+ padding-bottom: 8px;
letter-spacing: 0.02em;
cursor: pointer;
}
diff --git a/web/gui/src/main/webapp/app/onos.css b/web/gui/src/main/webapp/app/onos.css
index 52a0d63f..fa485ac 100644
--- a/web/gui/src/main/webapp/app/onos.css
+++ b/web/gui/src/main/webapp/app/onos.css
@@ -46,6 +46,6 @@
-webkit-margin-after: 0;
margin: 32px 0 4px 16px;
padding: 0;
- font-size: 21pt;
+ font-size: 18pt;
font-weight: lighter;
}
diff --git a/web/gui/src/main/webapp/app/view/app/app.css b/web/gui/src/main/webapp/app/view/app/app.css
index 4d61f81..a1963c0 100644
--- a/web/gui/src/main/webapp/app/view/app/app.css
+++ b/web/gui/src/main/webapp/app/view/app/app.css
@@ -55,7 +55,6 @@
/* -- Details Panel -- */
#application-details-panel.floatpanel {
z-index: 0;
- font-size: 12pt;
}
#application-details-panel.floatpanel a {
@@ -83,7 +82,7 @@
#application-details-panel h2 {
display: inline-block;
margin: 12px 0 6px 0;
- font-size: 13pt;
+ font-size: 11pt;
font-variant: small-caps;
text-transform: uppercase;
}
@@ -91,7 +90,7 @@
#application-details-panel .top .app-title {
width: 90%;
height: 62px;
- font-size: 20pt;
+ font-size: 16pt;
font-weight: lighter;
overflow: hidden;
white-space: nowrap;
@@ -115,8 +114,7 @@
#application-details-panel .app-url i {
font-weight: bold;
text-align: right;
- font-size: 12pt;
-
+ font-size: 10pt;
padding-right: 6px;
}
@@ -127,6 +125,7 @@
#application-details-panel .app-url {
padding: 10px 6px 6px;
overflow: hidden;
+ clear: left;
}
#application-details-panel hr {
@@ -139,7 +138,7 @@
}
#application-details-panel .bottom {
- padding: 12px 0 0 6px;
+ padding: 0px;
}
#application-details-panel .bottom table {
diff --git a/web/gui/src/main/webapp/app/view/app/app.html b/web/gui/src/main/webapp/app/view/app/app.html
index 54a5390..db5d69b 100644
--- a/web/gui/src/main/webapp/app/view/app/app.html
+++ b/web/gui/src/main/webapp/app/view/app/app.html
@@ -76,8 +76,8 @@
<td class="table-icon">
<div icon icon-id="{{app._iconid_state}}"></div>
</td>
- <td><img data-ng-src="./rs/applications/{{app.icon}}/icon"
- height="28px" width="28px" /></td>
+ <td class="table-icon"><img data-ng-src="./rs/applications/{{app.icon}}/icon"
+ height="24px" width="24px" /></td>
<td>{{app.title}}</td>
<td>{{app.id}}</td>
<td>{{app.version}}</td>
diff --git a/web/gui/src/main/webapp/app/view/cluster/cluster.css b/web/gui/src/main/webapp/app/view/cluster/cluster.css
index 50622ad..67a6349 100644
--- a/web/gui/src/main/webapp/app/view/cluster/cluster.css
+++ b/web/gui/src/main/webapp/app/view/cluster/cluster.css
@@ -57,7 +57,7 @@
}
#cluster-details-panel .top-content table {
- font-size: 12pt;
+ font-size: 10pt;
}
#cluster-details-panel td.label {
diff --git a/web/gui/src/main/webapp/app/view/device/device.css b/web/gui/src/main/webapp/app/view/device/device.css
index 2e23b3b..c578112 100644
--- a/web/gui/src/main/webapp/app/view/device/device.css
+++ b/web/gui/src/main/webapp/app/view/device/device.css
@@ -62,7 +62,8 @@
}
#device-details-panel .top-tables {
- font-size: 12pt;
+ font-size: 10pt;
+ white-space: nowrap;
}
#device-details-panel .top div.left {
diff --git a/web/gui/src/main/webapp/app/view/host/host.css b/web/gui/src/main/webapp/app/view/host/host.css
index b1aa914..461373f 100644
--- a/web/gui/src/main/webapp/app/view/host/host.css
+++ b/web/gui/src/main/webapp/app/view/host/host.css
@@ -62,7 +62,7 @@
}
#host-details-panel .top-tables {
- font-size: 12pt;
+ font-size: 10pt;
}
#host-details-panel .top div.left {
diff --git a/web/gui/src/main/webapp/app/view/host/host.js b/web/gui/src/main/webapp/app/view/host/host.js
index 9cb674c..b5bf018 100644
--- a/web/gui/src/main/webapp/app/view/host/host.js
+++ b/web/gui/src/main/webapp/app/view/host/host.js
@@ -144,7 +144,7 @@
}
function populateTop(details) {
- var tab = top.select('.top-tables').append('tbody');
+ var tab = top.select('.top-tables').append('table').append('tbody');
is.loadEmbeddedIcon(iconDiv, details._iconid_type, 40);
top.select('h2').text(details.name);
diff --git a/web/gui/src/main/webapp/app/view/settings/settings.css b/web/gui/src/main/webapp/app/view/settings/settings.css
index 6f05c63..d98948f 100644
--- a/web/gui/src/main/webapp/app/view/settings/settings.css
+++ b/web/gui/src/main/webapp/app/view/settings/settings.css
@@ -45,7 +45,7 @@
#settings-details-panel .top .settings-title-1 {
width: 90%;
- height: 28px;
+ height: 20px;
font-size: 14pt;
font-weight: lighter;
overflow: hidden;
@@ -58,7 +58,7 @@
#settings-details-panel .top .settings-title-2 {
width: 90%;
height: 52px;
- font-size: 20pt;
+ font-size: 18pt;
font-weight: lighter;
overflow: hidden;
white-space: nowrap;
@@ -70,7 +70,7 @@
#settings-details-panel td.label {
font-weight: bold;
text-align: right;
- font-size: 12pt;
+ font-size: 10pt;
padding-right: 6px;
vertical-align: top;
width: 120px;
diff --git a/web/gui/src/main/webapp/app/view/settings/settings.html b/web/gui/src/main/webapp/app/view/settings/settings.html
index 8e23617..2346858 100644
--- a/web/gui/src/main/webapp/app/view/settings/settings.html
+++ b/web/gui/src/main/webapp/app/view/settings/settings.html
@@ -16,8 +16,8 @@
<tr>
<td colId="component" sortable col-width="260px">Component </td>
<td colId="prop" sortable col-width="260px">Property </td>
- <td colId="type" sortable col-width="100px">Type </td>
- <td colId="value" sortable col-width="100px">Value </td>
+ <td colId="type" sortable col-width="80px">Type </td>
+ <td colId="value" sortable col-width="260px">Value </td>
<td colId="desc">Description </td>
</tr>
</table>
diff --git a/web/gui/src/main/webapp/app/view/settings/settings.js b/web/gui/src/main/webapp/app/view/settings/settings.js
index 78ae829..23ed49a 100644
--- a/web/gui/src/main/webapp/app/view/settings/settings.js
+++ b/web/gui/src/main/webapp/app/view/settings/settings.js
@@ -38,7 +38,7 @@
topPdg = 60,
propOrder = ['fqComponent', 'prop', 'type', 'value', 'defValue', 'desc'],
friendlyProps = [
- 'Component', 'Property', 'Type', 'Value', 'Default Value',
+ 'Component', 'Property', 'Type', 'Value', 'Default',
'Description',
];
@@ -110,7 +110,7 @@
}
function populateTop(details) {
- var propsBody = top.select('.settings-props').append('tbody');
+ var propsBody = top.select('.settings-props table').append('tbody');
top.select('.settings-title-1').text(details.component);
top.select('.settings-title-2').text(details.prop);