GUI -- Titles on topo panels overflow to the next line instead of going off of the screen.
Change-Id: I1b45f889388ad77ddbfe1110b26c396a7cb03e7e
Showing
2 changed files
with
19 additions
and
9 deletions
| ... | @@ -95,6 +95,10 @@ | ... | @@ -95,6 +95,10 @@ |
| 95 | 95 | ||
| 96 | /* --- general topo-panel styling --- */ | 96 | /* --- general topo-panel styling --- */ |
| 97 | 97 | ||
| 98 | +.topo-p div.header div.icon { | ||
| 99 | + vertical-align: middle; | ||
| 100 | + display: inline-block; | ||
| 101 | +} | ||
| 98 | .topo-p div.body { | 102 | .topo-p div.body { |
| 99 | overflow-y: scroll; | 103 | overflow-y: scroll; |
| 100 | } | 104 | } |
| ... | @@ -122,12 +126,12 @@ | ... | @@ -122,12 +126,12 @@ |
| 122 | 126 | ||
| 123 | 127 | ||
| 124 | .topo-p h2 { | 128 | .topo-p h2 { |
| 125 | - position: absolute; | ||
| 126 | padding: 0 4px; | 129 | padding: 0 4px; |
| 127 | margin: 0; | 130 | margin: 0; |
| 128 | - word-wrap: break-word; | 131 | + word-break: break-all; |
| 129 | - top: 20px; | 132 | + display: inline-block; |
| 130 | - left: 50px; | 133 | + width: 210px; |
| 134 | + vertical-align: middle; | ||
| 131 | } | 135 | } |
| 132 | .light .topo-p h2 { | 136 | .light .topo-p h2 { |
| 133 | color: black; | 137 | color: black; |
| ... | @@ -139,7 +143,7 @@ | ... | @@ -139,7 +143,7 @@ |
| 139 | .topo-p h3 { | 143 | .topo-p h3 { |
| 140 | padding: 0 4px; | 144 | padding: 0 4px; |
| 141 | margin: 0; | 145 | margin: 0; |
| 142 | - word-wrap: break-word; | 146 | + word-break: break-all; |
| 143 | top: 20px; | 147 | top: 20px; |
| 144 | left: 50px; | 148 | left: 50px; |
| 145 | } | 149 | } |
| ... | @@ -156,7 +160,7 @@ | ... | @@ -156,7 +160,7 @@ |
| 156 | } | 160 | } |
| 157 | 161 | ||
| 158 | .topo-p td { | 162 | .topo-p td { |
| 159 | - word-wrap: break-word; | 163 | + word-break: break-all; |
| 160 | } | 164 | } |
| 161 | .topo-p td.label { | 165 | .topo-p td.label { |
| 162 | font-style: italic; | 166 | font-style: italic; | ... | ... |
| ... | @@ -179,7 +179,9 @@ | ... | @@ -179,7 +179,9 @@ |
| 179 | function populateSummary(data) { | 179 | function populateSummary(data) { |
| 180 | summary.setup(); | 180 | summary.setup(); |
| 181 | 181 | ||
| 182 | - var svg = summary.appendHeader('svg'), | 182 | + var svg = summary.appendHeader('div') |
| 183 | + .classed('icon', true) | ||
| 184 | + .append('svg'), | ||
| 183 | title = summary.appendHeader('h2'), | 185 | title = summary.appendHeader('h2'), |
| 184 | table = summary.appendBody('table'), | 186 | table = summary.appendBody('table'), |
| 185 | tbody = table.append('tbody'); | 187 | tbody = table.append('tbody'); |
| ... | @@ -197,7 +199,9 @@ | ... | @@ -197,7 +199,9 @@ |
| 197 | function displaySingle(data) { | 199 | function displaySingle(data) { |
| 198 | detail.setup(); | 200 | detail.setup(); |
| 199 | 201 | ||
| 200 | - var svg = detail.appendHeader('svg'), | 202 | + var svg = detail.appendHeader('div') |
| 203 | + .classed('icon', true) | ||
| 204 | + .append('svg'), | ||
| 201 | title = detail.appendHeader('h2'), | 205 | title = detail.appendHeader('h2'), |
| 202 | table = detail.appendBody('table'), | 206 | table = detail.appendBody('table'), |
| 203 | tbody = table.append('tbody'); | 207 | tbody = table.append('tbody'); |
| ... | @@ -268,7 +272,9 @@ | ... | @@ -268,7 +272,9 @@ |
| 268 | function displayLink(data) { | 272 | function displayLink(data) { |
| 269 | detail.setup(); | 273 | detail.setup(); |
| 270 | 274 | ||
| 271 | - var svg = detail.appendHeader('svg'), | 275 | + var svg = detail.appendHeader('div') |
| 276 | + .classed('icon', true) | ||
| 277 | + .append('svg'), | ||
| 272 | title = detail.appendHeader('h2'), | 278 | title = detail.appendHeader('h2'), |
| 273 | table = detail.appendBody('table'), | 279 | table = detail.appendBody('table'), |
| 274 | tbody = table.append('tbody'), | 280 | tbody = table.append('tbody'), | ... | ... |
-
Please register or login to post a comment