Skip to content

Commit a8426d2

Browse files
rhamiltorhamilto
committed
Fixing issue where long, unbroken strings in URLs breaks layout
Fixes #1161
1 parent 361d629 commit a8426d2

17 files changed

+230
-102
lines changed

‎app/styles/_mixins.less

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@
5656
min-width: 0; // firefox (1)
5757
}
5858
// DESCRIPTION: Breaks long non-breaking strings under the following circumstances:
59-
// - if within a table not set to table-layout: fixed
59+
// - if within a table not set to table-layout: fixed (but have a very good reason for doing so! otherwise, see .table-layout-fixed)
6060
// - fieldset
6161
// - flex container
6262
// EXAMPLE:

‎app/styles/_tables.less

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,14 @@
1919
}
2020
}
2121
}
22+
// use if you have long, unbroken strings in cells you need to wrap
23+
// you will probably want to use in conjunction with colgroup to size cols since this will make all cols equal size
24+
&.table-layout-fixed {
25+
table-layout: fixed;
26+
td {
27+
.word-break();
28+
}
29+
}
2230
}
2331

2432
.table th .pficon-help {
@@ -169,16 +177,12 @@ td[role="presentation"].arrow:after {
169177

170178
// table for events
171179
.events-table {
172-
table-layout: fixed;
173180
th#time {width:90px;}
174181
th#kind-name {width:190px;}
175182
th#kind {width:160px;}
176183
th#severity {width:10px;padding:0;}
177184
th#reason {width:150px;}
178185
th#message {width:100%;} // ensures it gets remaining width
179-
td {
180-
.word-break();
181-
}
182186
.pficon {
183187
vertical-align: middle;
184188
}
@@ -211,14 +215,4 @@ td[role="presentation"].arrow:after {
211215
}
212216
}
213217

214-
.table-word-break-all td {
215-
// Break long non-breaking strings by default
216-
.word-break-all;
217-
// Override specific cells
218-
&.word-break-normal {
219-
word-break: normal;
220-
overflow-wrap: normal;
221-
}
222-
}
223-
224218
.table-row-variant(disabled; @color-pf-black-150);

‎app/views/browse/config-maps.html

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,10 @@ <h1>
3333
<div class="col-md-12">
3434
<div ng-if="!loaded">Loading...</div>
3535
<div ng-if="loaded">
36-
<table class="table table-bordered table-hover table-mobile">
36+
<table class="table table-bordered table-hover table-mobile table-layout-fixed">
37+
<colgroup>
38+
<col class="col-sm-5">
39+
</colgroup>
3740
<thead>
3841
<tr>
3942
<th>Name</th>

‎app/views/browse/deployment.html

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,13 @@ <h1 class="contains-actions">
8888
<uib-tab active="selectedTab.history">
8989
<uib-tab-heading>History</uib-tab-heading>
9090
<div ng-if="replicaSetsForDeployment | hashSize">
91-
<table class="table table-bordered table-hover table-mobile">
91+
<table class="table table-bordered table-hover table-mobile table-layout-fixed">
92+
<colgroup>
93+
<col class="col-sm-2">
94+
<col class="col-sm-4">
95+
<col class="col-sm-3">
96+
<col class="col-sm-3">
97+
</colgroup>
9298
<thead>
9399
<tr>
94100
<th>Version</th>

‎app/views/browse/routes.html

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,14 @@ <h1>
3131
<alerts alerts="alerts"></alerts>
3232
<div class="row">
3333
<div class="col-md-12">
34-
<table class="table table-bordered table-hover table-mobile">
34+
<table class="table table-bordered table-hover table-mobile table-layout-fixed">
35+
<colgroup>
36+
<col class="col-sm-3">
37+
<col class="col-sm-3">
38+
<col class="col-sm-2">
39+
<col class="col-sm-2">
40+
<col class="col-sm-2">
41+
</colgroup>
3542
<thead>
3643
<tr>
3744
<th>{{customNameHeader || 'Name'}}</th>
@@ -54,10 +61,10 @@ <h1>
5461
</route-warnings>
5562
</td>
5663
<td data-title="Hostname">
57-
<span ng-if="(route | isWebRoute)" class="word-break">
64+
<span ng-if="(route | isWebRoute)">
5865
<a href="{{route | routeWebURL}}" target="_blank">{{route | routeLabel}}</a>
5966
</span>
60-
<span ng-if="!(route | isWebRoute)" class="word-break">
67+
<span ng-if="!(route | isWebRoute)">
6168
{{route | routeLabel}}
6269
</span>
6370
<span ng-if="!route.status.ingress" data-toggle="popover" data-trigger="hover" data-content="The route is not accepting traffic yet because it has not been admitted by a router." style="cursor: help; padding-left: 5px;">

‎app/views/browse/stateful-sets.html

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,10 @@ <h1>
3333
<div ng-if="!loaded">Loading...</div>
3434
<div class="row" ng-if="loaded">
3535
<div class="col-md-12">
36-
<table class="table table-bordered table-hover table-mobile">
36+
<table class="table table-bordered table-hover table-mobile table-layout-fixed">
37+
<colgroup>
38+
<col class="col-sm-5">
39+
</colgroup>
3740
<thead>
3841
<tr>
3942
<th>Name</th>

‎app/views/builds.html

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,16 @@ <h1>
2828
<alerts alerts="alerts"></alerts>
2929
<div class="row">
3030
<div class="col-md-12">
31-
<table class="table table-bordered table-hover table-mobile">
31+
<table class="table table-bordered table-hover table-mobile table-layout-fixed">
32+
<colgroup>
33+
<col class="col-sm-2">
34+
<col class="col-sm-1">
35+
<col class="col-sm-2">
36+
<col class="col-sm-2">
37+
<col class="col-sm-2">
38+
<col class="col-sm-1">
39+
<col class="col-sm-2 hidden-sm">
40+
</colgroup>
3241
<thead>
3342
<tr>
3443
<th>Name</th>
@@ -37,7 +46,7 @@ <h1>
3746
<th>Duration</th>
3847
<th>Created</th>
3948
<th>Type</th>
40-
<th>Source</th>
49+
<th ng-class="{'hidden-sm' : (latestByConfig | hashSize)}">Source</th>
4150
</tr>
4251
</thead>
4352
<tbody ng-if="!(latestByConfig | hashSize)">
@@ -54,9 +63,9 @@ <h1>
5463
<td class="hidden-xs">&nbsp;</td>
5564
<td class="hidden-xs">&nbsp;</td>
5665
<td data-title="Type">{{buildConfigs[buildConfigName].spec.strategy.type | startCase}}</td>
57-
<td ng-if-end data-title="Source">
66+
<td ng-if-end data-title="Source" class="hidden-sm">
5867
<span ng-if="buildConfigs[buildConfigName].spec.source.type == 'None'"><i>none</i></span>
59-
<span class="word-break" ng-if="buildConfigs[buildConfigName].spec.source.type == 'Git'" ><osc-git-link
68+
<span ng-if="buildConfigs[buildConfigName].spec.source.type == 'Git'" ><osc-git-link
6069
uri="buildConfigs[buildConfigName].spec.source.git.uri"
6170
ref="buildConfigs[buildConfigName].spec.source.git.ref"
6271
context-dir="buildConfigs[buildConfigName].spec.source.contextDir">{{buildConfigs[buildConfigName].spec.source.git.uri}}</osc-git-link></span></td>
@@ -95,15 +104,15 @@ <h1>
95104
<span am-time-ago="latestBuild.metadata.creationTimestamp"></span>
96105
</td>
97106
<td data-title="Type">{{latestBuild.spec.strategy.type | startCase}}</td>
98-
<td ng-if-end data-title="Source" class="word-break-all">
107+
<td ng-if-end data-title="Source" class="hidden-sm">
99108
<span ng-if="latestBuild.spec.source">
100109
<span ng-if="latestBuild.spec.source.type == 'None'">
101110
<i>none</i>
102111
</span>
103-
<span class="word-break"><osc-git-link
104-
uri="latestBuild.spec.source.git.uri"
105-
ref="latestBuild.spec.source.git.ref"
106-
context-dir="latestBuild.spec.source.contextDir">{{latestBuild.spec.source.git.uri}}</osc-git-link></span>
112+
<osc-git-link
113+
uri="latestBuild.spec.source.git.uri"
114+
ref="latestBuild.spec.source.git.ref"
115+
context-dir="latestBuild.spec.source.contextDir">{{latestBuild.spec.source.git.uri}}</osc-git-link>
107116
</span>
108117
</td>
109118
</tr>

‎app/views/deployments.html

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,14 @@ <h1>
2929
<div class="row">
3030
<div class="col-md-12">
3131
<h3 ng-if="(deployments | hashSize) || (replicaSets | hashSize)">Deployment Configurations</h3>
32-
<table class="table table-bordered table-hover table-mobile">
32+
<table class="table table-bordered table-hover table-mobile table-layout-fixed">
33+
<colgroup>
34+
<col class="col-sm-3">
35+
<col class="col-sm-2">
36+
<col class="col-sm-3">
37+
<col class="col-sm-2">
38+
<col class="col-sm-2">
39+
</colgroup>
3340
<thead>
3441
<tr>
3542
<th>Name</th>
@@ -108,7 +115,14 @@ <h3 ng-if="(deployments | hashSize) || (replicaSets | hashSize)">Deployment Conf
108115
</table>
109116
<div ng-if="deployments | hashSize">
110117
<h3>Deployments</h3>
111-
<table class="table table-bordered table-hover table-mobile">
118+
<table class="table table-bordered table-hover table-mobile table-layout-fixed">
119+
<colgroup>
120+
<col class="col-sm-4">
121+
<col class="col-sm-2">
122+
<col class="col-sm-2">
123+
<col class="col-sm-2">
124+
<col class="col-sm-2">
125+
</colgroup>
112126
<thead>
113127
<tr>
114128
<th>Name</th>
@@ -146,7 +160,10 @@ <h3>Deployments</h3>
146160
</div>
147161
<div ng-if="replicaSets | hashSize" id="replica-sets">
148162
<h3>Replica Sets</h3>
149-
<table class="table table-bordered table-hover table-mobile">
163+
<table class="table table-bordered table-hover table-mobile table-layout-fixed">
164+
<colgroup>
165+
<col class="col-sm-4">
166+
</colgroup>
150167
<thead>
151168
<tr>
152169
<th>Name</th>
@@ -171,7 +188,10 @@ <h3>Replica Sets</h3>
171188
</div>
172189
<div ng-if="(unfilteredReplicationControllers | hashSize) > 0" id="replica-controllers">
173190
<h3>Other Replication Controllers</h3>
174-
<table class="table table-bordered table-hover table-mobile">
191+
<table class="table table-bordered table-hover table-mobile table-layout-fixed">
192+
<colgroup>
193+
<col class="col-sm-5">
194+
</colgroup>
175195
<thead>
176196
<tr>
177197
<th>Name</th>

‎app/views/directives/events.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
<div pf-sort config="sortConfig" class="sort-controls"></div>
3030
</div>
3131
</div>
32-
<table class="table table-bordered table-condensed table-mobile table-hover events-table" ng-class="{ 'table-empty': (filteredEvents | hashSize) === 0 }">
32+
<table class="table table-bordered table-condensed table-mobile table-hover table-layout-fixed events-table" ng-class="{ 'table-empty': (filteredEvents | hashSize) === 0 }">
3333
<thead>
3434
<tr>
3535
<th id="time">Time</th>

‎app/views/directives/pods-table.html

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1-
<table class="table table-bordered table-hover table-mobile">
1+
<table class="table table-bordered table-hover table-mobile table-layout-fixed">
2+
<colgroup>
3+
<col class="col-sm-4">
4+
</colgroup>
25
<thead>
36
<tr>
47
<th>{{customNameHeader || 'Name'}}</th>
@@ -10,7 +13,7 @@
1013
</tr>
1114
</thead>
1215
<tbody ng-if="(pods | hashSize) == 0">
13-
<tr><td colspan="6"><em>{{emptyMessage || 'No pods to show'}}</em></td></tr>
16+
<tr><td colspan="{{activePods ? 6 : 5}}"><em>{{emptyMessage || 'No pods to show'}}</em></td></tr>
1417
</tbody>
1518
<tbody ng-if="(pods | hashSize) > 0">
1619
<tr ng-repeat="pod in pods | orderObjectsByDate : true">

‎app/views/images.html

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,13 @@ <h1>
2828
<alerts alerts="alerts"></alerts>
2929
<div class="row">
3030
<div class="col-md-12">
31-
<table class="table table-bordered table-hover table-mobile">
31+
<table class="table table-bordered table-hover table-mobile table-layout-fixed">
32+
<colgroup>
33+
<col class="col-sm-3">
34+
<col class="col-sm-5">
35+
<col class="col-sm-2">
36+
<col class="col-sm-2">
37+
</colgroup>
3238
<thead>
3339
<tr>
3440
<th>Name</th>
@@ -45,7 +51,7 @@ <h1>
4551
<td data-title="Name"><a href="{{imageStream | navigateResourceURL}}">{{imageStream.metadata.name}}</a></td>
4652
<td data-title="Docker Repo">
4753
<span ng-if="!imageStream.status.dockerImageRepository && !imageStream.spec.dockerImageRepository"><em>unknown</em></span>
48-
<span ng-if="imageStream.status.dockerImageRepository || imageStream.spec.dockerImageRepository" class="word-break">{{imageStream.status.dockerImageRepository || imageStream.spec.dockerImageRepository}}</span>
54+
<span ng-if="imageStream.status.dockerImageRepository || imageStream.spec.dockerImageRepository">{{imageStream.status.dockerImageRepository || imageStream.spec.dockerImageRepository}}</span>
4955
</td>
5056
<td data-title="Tags">
5157
<span ng-if="!imageStream.status.tags.length"><em>none</em></span>

‎app/views/other-resources.html

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,13 @@ <h1>Other Resources</h1>
2828
<alerts alerts="alerts"></alerts>
2929
<div class="row">
3030
<div class="col-md-12">
31-
<table class="table table-bordered table-mobile" ng-class="{ 'table-empty': (resources | hashSize) === 0 }">
31+
<table class="table table-bordered table-mobile table-layout-fixed" ng-class="{ 'table-empty': (resources | hashSize) === 0 }">
32+
<colgroup>
33+
<col class="col-sm-3">
34+
<col class="col-sm-2">
35+
<col class="col-sm-5">
36+
<col class="col-sm-2">
37+
</colgroup>
3238
<thead>
3339
<tr>
3440
<th>Name</th>

‎app/views/secrets.html

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,11 @@ <h1>
2828
<div ng-if="loaded" class="row">
2929
<div class="col-md-12">
3030
<h2>Source Secrets</h2>
31-
<table class="table table-bordered table-hover table-mobile secrets-table table-word-break-all">
31+
<table class="table table-bordered table-hover table-mobile secrets-table table-layout-fixed">
3232
<colgroup>
33-
<col class="col-sm-5">
34-
<col class="col-sm-5">
35-
</colgroup>
33+
<col class="col-sm-5">
34+
<col class="col-sm-5">
35+
</colgroup>
3636
<thead>
3737
<tr>
3838
<th>Name</th>
@@ -53,19 +53,19 @@ <h2>Source Secrets</h2>
5353
<td data-title="Type">
5454
{{secret.type}}
5555
</td>
56-
<td data-title="Created" class="word-break-normal">
56+
<td data-title="Created">
5757
<span am-time-ago="secret.metadata.creationTimestamp"></span>
5858
</td>
5959
</tr>
6060
</tbody>
6161
</table>
6262
<div ng-if="secretsByType.images.length !== 0">
6363
<h2>Image Secrets</h2>
64-
<table class="table table-bordered table-hover table-mobile secrets-table table-word-break-all">
64+
<table class="table table-bordered table-hover table-mobile secrets-table table-layout-fixed">
6565
<colgroup>
66-
<col class="col-sm-5">
67-
<col class="col-sm-5">
68-
</colgroup>
66+
<col class="col-sm-5">
67+
<col class="col-sm-5">
68+
</colgroup>
6969
<thead>
7070
<tr>
7171
<th>Name</th>
@@ -81,7 +81,7 @@ <h2>Image Secrets</h2>
8181
<td data-title="Type">
8282
{{secret.type}}
8383
</td>
84-
<td data-title="Created" class="word-break-normal">
84+
<td data-title="Created">
8585
<span am-time-ago="secret.metadata.creationTimestamp"></span>
8686
</td>
8787
</tr>
@@ -90,11 +90,11 @@ <h2>Image Secrets</h2>
9090
</div>
9191
<div ng-if="secretsByType.other.length !== 0">
9292
<h2>Other Secrets</h2>
93-
<table class="table table-bordered table-hover table-mobile secrets-table table-word-break-all">
93+
<table class="table table-bordered table-hover table-mobile secrets-table table-layout-fixed">
9494
<colgroup>
95-
<col class="col-sm-5">
96-
<col class="col-sm-5">
97-
</colgroup>
95+
<col class="col-sm-5">
96+
<col class="col-sm-5">
97+
</colgroup>
9898
<thead>
9999
<tr>
100100
<th>Name</th>
@@ -110,7 +110,7 @@ <h2>Other Secrets</h2>
110110
<td data-title="Type">
111111
{{secret.type}}
112112
</td>
113-
<td data-title="Created" class="word-break-normal">
113+
<td data-title="Created">
114114
<span am-time-ago="secret.metadata.creationTimestamp"></span>
115115
</td>
116116
</tr>

‎app/views/services.html

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,10 @@ <h1>
2828
<alerts alerts="alerts"></alerts>
2929
<div class="row">
3030
<div class="col-md-12">
31-
<table class="table table-bordered table-hover table-mobile">
31+
<table class="table table-bordered table-hover table-mobile table-layout-fixed">
32+
<colgroup>
33+
<col class="col-sm-3">
34+
</colgroup>
3235
<thead>
3336
<tr>
3437
<th>Name</th>

0 commit comments

Comments
 (0)