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