Skip to content

Commit 539e8d3

Browse files
rakillenrakillen
committed
Use gridlayout for image inspect dialog
1 parent 24eda5f commit 539e8d3

File tree

2 files changed

+63
-75
lines changed

2 files changed

+63
-75
lines changed

‎webui/src/css/app.css

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -406,8 +406,38 @@ h6:first-child {
406406
max-width: 850px;
407407
}
408408

409+
.wkt-inspect-grid-container {
410+
display: grid;
411+
grid-column-gap: 1em;
412+
grid-auto-columns: min-content auto;
413+
}
414+
415+
.wkt-inspect-grid-message {
416+
grid-column-start: 1;
417+
grid-column-end: 3;
418+
}
419+
420+
.wkt-inspect-grid-title {
421+
font-weight: bold;
422+
margin-top: 0.75em;
423+
grid-column-start: 1;
424+
grid-column-end: 3;
425+
}
426+
427+
.wkt-inspect-grid-name {
428+
margin-left: 1em;
429+
grid-column-start: 1;
430+
grid-column-end: 1;
431+
white-space: nowrap;
432+
}
433+
434+
.wkt-inspect-grid-value {
435+
grid-column-start: 2;
436+
grid-column-end: 3;
437+
}
438+
409439
.wkt-inspect-dialog-content {
410-
max-height: 20vh;
440+
max-height: 50vh;
411441
overflow: auto;
412442
}
413443

‎webui/src/js/views/inspect-dialog.html

Lines changed: 32 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -9,96 +9,54 @@
99

1010
<div slot="body">
1111
<div class="oj-panel wkt-notop wkt-inspect-dialog-content">
12-
<p><oj-bind-text value="[[getMessage()]]"></oj-bind-text></p>
13-
<oj-bind-if test="[[hasOsInfo() === true]]">
14-
<table>
15-
<tr>
16-
<td colspan="3"><oj-bind-text value="[[labelMapper('os-section-title')]]"></oj-bind-text></td>
17-
</tr>
18-
<tr>
19-
<td>&nbsp;</td>
20-
<td><oj-bind-text value="[[labelMapper('os-name-label')]]"></td>
21-
<td><oj-bind-text value="[[getOsName()]]"></oj-bind-text></td>
22-
</tr>
23-
<tr>
24-
<td>&nbsp;</td>
25-
<td><oj-bind-text value="[[labelMapper('os-version-label')]]"></td>
26-
<td><oj-bind-text value="[[getOsVersion()]]"></oj-bind-text></td>
27-
</tr>
28-
</table>
29-
</oj-bind-if>
12+
<div class="wkt-inspect-grid-container">
13+
<div class="wkt-inspect-grid-message"><oj-bind-text value="[[getMessage()]]"></oj-bind-text></div>
14+
<oj-bind-if test="[[hasOsInfo() === true]]">
15+
<div class="wkt-inspect-grid-title"><oj-bind-text value="[[labelMapper('os-section-title')]]"></oj-bind-text></div>
16+
<div class="wkt-inspect-grid-name"><oj-bind-text value="[[labelMapper('os-name-label')]]"></oj-bind-text></div>
17+
<div class="wkt-inspect-grid-value"><oj-bind-text value="[[getOsName()]]"></oj-bind-text></div>
18+
<div class="wkt-inspect-grid-name"><oj-bind-text value="[[labelMapper('os-version-label')]]"></oj-bind-text></div>
19+
<div class="wkt-inspect-grid-value"><oj-bind-text value="[[getOsVersion()]]"></oj-bind-text></div>
20+
</oj-bind-if>
3021

31-
<oj-bind-if test="[[hasJavaHome() === true]]">
32-
<table>
33-
<tr>
34-
<td colspan="3"><oj-bind-text value="[[labelMapper('java-home-section-title')]]"></oj-bind-text></td>
35-
</tr>
36-
<tr>
37-
<td>&nbsp;</td>
38-
<td><oj-bind-text value="[[labelMapper('java-home-path-label')]]"></td>
39-
<td><oj-bind-text value="[[getJavaHome()]]"></oj-bind-text></td>
40-
</tr>
41-
<tr>
42-
<td>&nbsp;</td>
43-
<td><oj-bind-text value="[[labelMapper('java-home-version-label')]]"></td>
44-
<td><oj-bind-text value="[[getJavaVersion()]]"></oj-bind-text></td>
45-
</tr>
46-
</table>
47-
</oj-bind-if>
22+
<oj-bind-if test="[[hasJavaHome() === true]]">
23+
<div class="wkt-inspect-grid-title"><oj-bind-text value="[[labelMapper('java-home-section-title')]]"></oj-bind-text></div>
24+
<div class="wkt-inspect-grid-name"><oj-bind-text value="[[labelMapper('java-home-path-label')]]"></oj-bind-text></div>
25+
<div class="wkt-inspect-grid-value"><oj-bind-text value="[[getJavaHome()]]"></oj-bind-text></div>
26+
<div class="wkt-inspect-grid-name"><oj-bind-text value="[[labelMapper('java-home-version-label')]]"></oj-bind-text></div>
27+
<div class="wkt-inspect-grid-value"><oj-bind-text value="[[getJavaVersion()]]"></oj-bind-text></div>
28+
</oj-bind-if>
29+
30+
<oj-bind-if test="[[hasOracleHome() === true]]">
31+
<div class="wkt-inspect-grid-title"><oj-bind-text value="[[labelMapper('oracle-home-section-title')]]"></oj-bind-text></div>
32+
<div class="wkt-inspect-grid-name"><oj-bind-text value="[[labelMapper('oracle-home-path-label')]]"></oj-bind-text></div>
33+
<div class="wkt-inspect-grid-value"><oj-bind-text value="[[getOracleHome()]]"></oj-bind-text></div>
34+
<div class="wkt-inspect-grid-name"><oj-bind-text value="[[labelMapper('oracle-home-version-label')]]"></oj-bind-text></div>
35+
<div class="wkt-inspect-grid-value"><oj-bind-text value="[[getWlsVersion()]]"></oj-bind-text></div>
36+
<div class="wkt-inspect-grid-name"><oj-bind-text value="[[labelMapper('opatch-version-label')]]"></oj-bind-text></div>
37+
<div class="wkt-inspect-grid-value"><oj-bind-text value="[[getOpatchVersion()]]"></oj-bind-text></div>
4838

49-
<oj-bind-if test="[[hasOracleHome() === true]]">
50-
<table>
51-
<tr>
52-
<td colspan="3"><oj-bind-text value="[[labelMapper('oracle-home-section-title')]]"></oj-bind-text></td>
53-
</tr>
54-
<tr>
55-
<td>&nbsp;</td>
56-
<td><oj-bind-text value="[[labelMapper('oracle-home-path-label')]]"></td>
57-
<td><oj-bind-text value="[[getOracleHome()]]"></oj-bind-text></td>
58-
</tr>
59-
<tr>
60-
<td>&nbsp;</td>
61-
<td><oj-bind-text value="[[labelMapper('oracle-home-version-label')]]"></td>
62-
<td><oj-bind-text value="[[getWlsVersion()]]"></oj-bind-text></td>
63-
</tr>
64-
<tr>
65-
<td>&nbsp;</td>
66-
<td><oj-bind-text value="[[labelMapper('opatch-version-label')]]"></td>
67-
<td><oj-bind-text value="[[getOpatchVersion()]]"></oj-bind-text></td>
68-
</tr>
6939
<oj-bind-if test="[[hasOraclePatches() === true]]">
70-
<tr>
71-
<td colspan="3"><oj-bind-text value="[[labelMapper('oracle-patches-section-title')]]"></oj-bind-text></td>
72-
</tr>
40+
<div class="wkt-inspect-grid-title"><oj-bind-text value="[[labelMapper('oracle-patches-section-title')]]"></oj-bind-text></div>
7341
<oj-bind-if test="[[hasNamedPatches() === true]]">
7442
<oj-bind-for-each data="[[getNamedPatches()]]">
7543
<template data-oj-as="namedPatch">
76-
<tr>
77-
<td>&nbsp;</td>
78-
<td><oj-bind-text value="[[namedPatch.data.name]]"></td>
79-
<td><oj-bind-text value="[[namedPatch.data.version]]"></oj-bind-text></td>
80-
</tr>
44+
<div class="wkt-inspect-grid-name"><oj-bind-text value="[[namedPatch.data.number]]"></oj-bind-text></div>
45+
<div class="wkt-inspect-grid-value"><oj-bind-text value="[[namedPatch.data.name]]"></oj-bind-text></div>
8146
</template>
8247
</oj-bind-for-each>
8348
</oj-bind-if>
8449
<oj-bind-if test="[[hasOneOffPatches() === true]]">
85-
<tr>
86-
<td>&nbsp;</td>
87-
<td colspan="2"><oj-bind-text value="[[labelMapper('oracle-one-off-patches-label')]]"></oj-bind-text></td>
88-
</tr>
50+
<div class="wkt-inspect-grid-title"><oj-bind-text value="[[labelMapper('oracle-one-off-patches-label')]]"></oj-bind-text></div>
8951
<oj-bind-for-each data="[[getOneOffPatches()]]">
9052
<template data-oj-as="oneOffPatch">
91-
<tr>
92-
<td>&nbsp;</td>
93-
<td>&nbsp;</td>
94-
<td><oj-bind-text value="[[oneOffPatch.data.version]]"></oj-bind-text></td>
95-
</tr>
53+
<div class="wkt-inspect-grid-name"><oj-bind-text value="[[oneOffPatch.data.number]]"></oj-bind-text></div>
9654
</template>
9755
</oj-bind-for-each>
9856
</oj-bind-if>
9957
</oj-bind-if>
100-
</table>
101-
</oj-bind-if>
58+
</oj-bind-if>
59+
</div>
10260
</div>
10361
</div>
10462

0 commit comments

Comments
 (0)