GUI -- Application View Details Panel -
- simplified DOM structure
- refactored code to reduce boilerplate
- cleaned up CSS
Change-Id: Iff443d7f038f1f770e7b3e9ed383c65b96ba6886
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 4912809..eab45ef 100644
--- a/web/gui/src/main/webapp/app/view/app/app.css
+++ b/web/gui/src/main/webapp/app/view/app/app.css
@@ -15,7 +15,7 @@
*/
/*
- ONOS GUI -- Host View -- CSS file
+ ONOS GUI -- Applications View -- CSS file
*/
#ov-app h2 {
@@ -75,7 +75,7 @@
}
#application-details-panel .container {
- padding: 0 12px;
+ padding: 0 10px;
}
#application-details-panel .close-btn {
@@ -91,60 +91,48 @@
fill: #ccc;
}
-#application-details-panel .dev-icon {
+#application-details-panel .app-icon {
display: inline-block;
padding: 0 6px 0 0;
vertical-align: middle;
}
-.light .dev-icon svg.embeddedIcon .glyph {
- fill: rgb(0, 172, 229);
-}
-.dark .dev-icon svg.embeddedIcon .glyph {
- fill: #486D91;
-}
#application-details-panel h2 {
display: inline-block;
margin: 8px 0;
+ font-size: 12pt;
}
#application-details-panel .top div.left {
float: left;
- padding: 0 18px 0 0;
+ padding: 0 12px 0 0;
}
#application-details-panel .top div.right {
display: inline-block;
+ overflow: hidden;
+ width: 320px;
}
-#application-details-panel td.label {
+#application-details-panel td.label,
+#application-details-panel .app-url i {
font-style: italic;
padding-right: 12px;
/* works for both light and dark themes ... */
color: #777;
}
-#application-details-panel .actionBtns div {
- padding: 12px 6px;
+#application-details-panel td.value-bold {
+ font-weight: bold;
}
-#application-details-panel .top hr {
+#application-details-panel .app-url {
+ padding: 10px 6px 6px;
+}
+
+#application-details-panel hr {
width: 95%;
- margin: 0 auto;
+ margin: 10px auto;
}
-
-.light #application-details-panel hr {
- opacity: .5;
- border-color: #FFF;
-}
-.dark #application-details-panel hr {
- border-color: #666;
-}
-
-#application-details-panel .middle hr {
- width: 95%;
- margin: 0 auto;
-}
-
.light #application-details-panel hr {
opacity: .5;
border-color: #FFF;
@@ -155,25 +143,12 @@
#application-details-panel .bottom table {
border-spacing: 0;
+ width: 100%;
}
-#application-details-panel .bottom th {
- letter-spacing: 0.02em;
-}
-
-.light #application-details-panel .bottom th {
- background-color: #CCC;
- /* default text color */
-}
-.dark #application-details-panel .bottom th {
- background-color: #131313;
- color: #ccc;
-}
-
-#application-details-panel .bottom th,
#application-details-panel .bottom td {
padding: 6px 12px;
- text-align: center;
+ text-align: left;
}
.light #application-details-panel .bottom tr:nth-child(odd) {