Skip to content

Fixing issue where long, unbroken strings in resource name cell URLs breaks layout #1166

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jan 25, 2017
Merged

Fixing issue where long, unbroken strings in resource name cell URLs breaks layout #1166

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/styles/_mixins.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@
min-width: 0; // firefox (1)
}
// DESCRIPTION: Breaks long non-breaking strings under the following circumstances:
// - if within a table not set to table-layout: fixed
// - if within a table not set to table-layout: fixed (but have a very good reason for doing so! otherwise, see .table-layout-fixed)
// - fieldset
// - flex container
// EXAMPLE:
Expand Down
22 changes: 8 additions & 14 deletions app/styles/_tables.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,14 @@
}
}
}
// use if you have long, unbroken strings in cells you need to wrap
// you will probably want to use in conjunction with colgroup to size cols since this will make all cols equal size
&.table-layout-fixed {
table-layout: fixed;
td {
.word-break();
}
}
}

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

// table for events
.events-table {
table-layout: fixed;
th#time {width:90px;}
th#kind-name {width:190px;}
th#kind {width:160px;}
th#severity {width:10px;padding:0;}
th#reason {width:150px;}
th#message {width:100%;} // ensures it gets remaining width
td {
.word-break();
}
.pficon {
vertical-align: middle;
}
Expand Down Expand Up @@ -211,14 +215,4 @@ td[role="presentation"].arrow:after {
}
}

.table-word-break-all td {
// Break long non-breaking strings by default
.word-break-all;
// Override specific cells
&.word-break-normal {
word-break: normal;
overflow-wrap: normal;
}
}

.table-row-variant(disabled; @color-pf-black-150);
5 changes: 4 additions & 1 deletion app/views/browse/config-maps.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,10 @@ <h1>
<div class="col-md-12">
<div ng-if="!loaded">Loading...</div>
<div ng-if="loaded">
<table class="table table-bordered table-hover table-mobile">
<table class="table table-bordered table-hover table-mobile table-layout-fixed">
<colgroup>
<col class="col-sm-5">
</colgroup>
<thead>
<tr>
<th>Name</th>
Expand Down
8 changes: 7 additions & 1 deletion app/views/browse/deployment.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,13 @@ <h1 class="contains-actions">
<uib-tab active="selectedTab.history">
<uib-tab-heading>History</uib-tab-heading>
<div ng-if="replicaSetsForDeployment | hashSize">
<table class="table table-bordered table-hover table-mobile">
<table class="table table-bordered table-hover table-mobile table-layout-fixed">
<colgroup>
<col class="col-sm-2">
<col class="col-sm-4">
<col class="col-sm-3">
<col class="col-sm-3">
</colgroup>
<thead>
<tr>
<th>Version</th>
Expand Down
13 changes: 10 additions & 3 deletions app/views/browse/routes.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,14 @@ <h1>
<alerts alerts="alerts"></alerts>
<div class="row">
<div class="col-md-12">
<table class="table table-bordered table-hover table-mobile">
<table class="table table-bordered table-hover table-mobile table-layout-fixed">
<colgroup>
<col class="col-sm-3">
<col class="col-sm-3">
<col class="col-sm-2">
<col class="col-sm-2">
<col class="col-sm-2">
</colgroup>
<thead>
<tr>
<th>{{customNameHeader || 'Name'}}</th>
Expand All @@ -54,10 +61,10 @@ <h1>
</route-warnings>
</td>
<td data-title="Hostname">
<span ng-if="(route | isWebRoute)" class="word-break">
<span ng-if="(route | isWebRoute)">
<a href="{{route | routeWebURL}}" target="_blank">{{route | routeLabel}}</a>
</span>
<span ng-if="!(route | isWebRoute)" class="word-break">
<span ng-if="!(route | isWebRoute)">
{{route | routeLabel}}
</span>
<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;">
Expand Down
5 changes: 4 additions & 1 deletion app/views/browse/stateful-sets.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,10 @@ <h1>
<div ng-if="!loaded">Loading...</div>
<div class="row" ng-if="loaded">
<div class="col-md-12">
<table class="table table-bordered table-hover table-mobile">
<table class="table table-bordered table-hover table-mobile table-layout-fixed">
<colgroup>
<col class="col-sm-5">
</colgroup>
<thead>
<tr>
<th>Name</th>
Expand Down
27 changes: 18 additions & 9 deletions app/views/builds.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,16 @@ <h1>
<alerts alerts="alerts"></alerts>
<div class="row">
<div class="col-md-12">
<table class="table table-bordered table-hover table-mobile">
<table class="table table-bordered table-hover table-mobile table-layout-fixed">
<colgroup>
<col class="col-sm-2">
<col class="col-sm-1">
<col class="col-sm-2">
<col class="col-sm-2">
<col class="col-sm-2">
<col class="col-sm-1">
<col class="col-sm-2 hidden-sm">
</colgroup>
<thead>
<tr>
<th>Name</th>
Expand All @@ -37,7 +46,7 @@ <h1>
<th>Duration</th>
<th>Created</th>
<th>Type</th>
<th>Source</th>
<th ng-class="{'hidden-sm' : (latestByConfig | hashSize)}">Source</th>
</tr>
</thead>
<tbody ng-if="!(latestByConfig | hashSize)">
Expand All @@ -54,9 +63,9 @@ <h1>
<td class="hidden-xs">&nbsp;</td>
<td class="hidden-xs">&nbsp;</td>
<td data-title="Type">{{buildConfigs[buildConfigName].spec.strategy.type | startCase}}</td>
<td ng-if-end data-title="Source">
<td ng-if-end data-title="Source" class="hidden-sm">
<span ng-if="buildConfigs[buildConfigName].spec.source.type == 'None'"><i>none</i></span>
<span class="word-break" ng-if="buildConfigs[buildConfigName].spec.source.type == 'Git'" ><osc-git-link
<span ng-if="buildConfigs[buildConfigName].spec.source.type == 'Git'" ><osc-git-link
uri="buildConfigs[buildConfigName].spec.source.git.uri"
ref="buildConfigs[buildConfigName].spec.source.git.ref"
context-dir="buildConfigs[buildConfigName].spec.source.contextDir">{{buildConfigs[buildConfigName].spec.source.git.uri}}</osc-git-link></span></td>
Expand Down Expand Up @@ -95,15 +104,15 @@ <h1>
<span am-time-ago="latestBuild.metadata.creationTimestamp"></span>
</td>
<td data-title="Type">{{latestBuild.spec.strategy.type | startCase}}</td>
<td ng-if-end data-title="Source" class="word-break-all">
<td ng-if-end data-title="Source" class="hidden-sm">
<span ng-if="latestBuild.spec.source">
<span ng-if="latestBuild.spec.source.type == 'None'">
<i>none</i>
</span>
<span class="word-break"><osc-git-link
uri="latestBuild.spec.source.git.uri"
ref="latestBuild.spec.source.git.ref"
context-dir="latestBuild.spec.source.contextDir">{{latestBuild.spec.source.git.uri}}</osc-git-link></span>
<osc-git-link
uri="latestBuild.spec.source.git.uri"
ref="latestBuild.spec.source.git.ref"
context-dir="latestBuild.spec.source.contextDir">{{latestBuild.spec.source.git.uri}}</osc-git-link>
</span>
</td>
</tr>
Expand Down
28 changes: 24 additions & 4 deletions app/views/deployments.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,14 @@ <h1>
<div class="row">
<div class="col-md-12">
<h3 ng-if="(deployments | hashSize) || (replicaSets | hashSize)">Deployment Configurations</h3>
<table class="table table-bordered table-hover table-mobile">
<table class="table table-bordered table-hover table-mobile table-layout-fixed">
<colgroup>
<col class="col-sm-3">
<col class="col-sm-2">
<col class="col-sm-3">
<col class="col-sm-2">
<col class="col-sm-2">
</colgroup>
<thead>
<tr>
<th>Name</th>
Expand Down Expand Up @@ -108,7 +115,14 @@ <h3 ng-if="(deployments | hashSize) || (replicaSets | hashSize)">Deployment Conf
</table>
<div ng-if="deployments | hashSize">
<h3>Deployments</h3>
<table class="table table-bordered table-hover table-mobile">
<table class="table table-bordered table-hover table-mobile table-layout-fixed">
<colgroup>
<col class="col-sm-4">
<col class="col-sm-2">
<col class="col-sm-2">
<col class="col-sm-2">
<col class="col-sm-2">
</colgroup>
<thead>
<tr>
<th>Name</th>
Expand Down Expand Up @@ -146,7 +160,10 @@ <h3>Deployments</h3>
</div>
<div ng-if="replicaSets | hashSize" id="replica-sets">
<h3>Replica Sets</h3>
<table class="table table-bordered table-hover table-mobile">
<table class="table table-bordered table-hover table-mobile table-layout-fixed">
<colgroup>
<col class="col-sm-4">
</colgroup>
<thead>
<tr>
<th>Name</th>
Expand All @@ -171,7 +188,10 @@ <h3>Replica Sets</h3>
</div>
<div ng-if="(unfilteredReplicationControllers | hashSize) > 0" id="replica-controllers">
<h3>Other Replication Controllers</h3>
<table class="table table-bordered table-hover table-mobile">
<table class="table table-bordered table-hover table-mobile table-layout-fixed">
<colgroup>
<col class="col-sm-5">
</colgroup>
<thead>
<tr>
<th>Name</th>
Expand Down
2 changes: 1 addition & 1 deletion app/views/directives/events.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
<div pf-sort config="sortConfig" class="sort-controls"></div>
</div>
</div>
<table class="table table-bordered table-condensed table-mobile table-hover events-table" ng-class="{ 'table-empty': (filteredEvents | hashSize) === 0 }">
<table class="table table-bordered table-condensed table-mobile table-hover table-layout-fixed events-table" ng-class="{ 'table-empty': (filteredEvents | hashSize) === 0 }">
<thead>
<tr>
<th id="time">Time</th>
Expand Down
7 changes: 5 additions & 2 deletions app/views/directives/pods-table.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
<table class="table table-bordered table-hover table-mobile">
<table class="table table-bordered table-hover table-mobile table-layout-fixed">
<colgroup>
<col class="col-sm-4">
</colgroup>
<thead>
<tr>
<th>{{customNameHeader || 'Name'}}</th>
Expand All @@ -10,7 +13,7 @@
</tr>
</thead>
<tbody ng-if="(pods | hashSize) == 0">
<tr><td colspan="6"><em>{{emptyMessage || 'No pods to show'}}</em></td></tr>
<tr><td colspan="{{activePods ? 6 : 5}}"><em>{{emptyMessage || 'No pods to show'}}</em></td></tr>
</tbody>
<tbody ng-if="(pods | hashSize) > 0">
<tr ng-repeat="pod in pods | orderObjectsByDate : true">
Expand Down
10 changes: 8 additions & 2 deletions app/views/images.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,13 @@ <h1>
<alerts alerts="alerts"></alerts>
<div class="row">
<div class="col-md-12">
<table class="table table-bordered table-hover table-mobile">
<table class="table table-bordered table-hover table-mobile table-layout-fixed">
<colgroup>
<col class="col-sm-3">
<col class="col-sm-5">
<col class="col-sm-2">
<col class="col-sm-2">
</colgroup>
<thead>
<tr>
<th>Name</th>
Expand All @@ -45,7 +51,7 @@ <h1>
<td data-title="Name"><a href="{{imageStream | navigateResourceURL}}">{{imageStream.metadata.name}}</a></td>
<td data-title="Docker Repo">
<span ng-if="!imageStream.status.dockerImageRepository && !imageStream.spec.dockerImageRepository"><em>unknown</em></span>
<span ng-if="imageStream.status.dockerImageRepository || imageStream.spec.dockerImageRepository" class="word-break">{{imageStream.status.dockerImageRepository || imageStream.spec.dockerImageRepository}}</span>
<span ng-if="imageStream.status.dockerImageRepository || imageStream.spec.dockerImageRepository">{{imageStream.status.dockerImageRepository || imageStream.spec.dockerImageRepository}}</span>
</td>
<td data-title="Tags">
<span ng-if="!imageStream.status.tags.length"><em>none</em></span>
Expand Down
8 changes: 7 additions & 1 deletion app/views/other-resources.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,13 @@ <h1>Other Resources</h1>
<alerts alerts="alerts"></alerts>
<div class="row">
<div class="col-md-12">
<table class="table table-bordered table-mobile" ng-class="{ 'table-empty': (resources | hashSize) === 0 }">
<table class="table table-bordered table-mobile table-layout-fixed" ng-class="{ 'table-empty': (resources | hashSize) === 0 }">
<colgroup>
<col class="col-sm-3">
<col class="col-sm-2">
<col class="col-sm-5">
<col class="col-sm-2">
</colgroup>
<thead>
<tr>
<th>Name</th>
Expand Down
30 changes: 15 additions & 15 deletions app/views/secrets.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,11 @@ <h1>
<div ng-if="loaded" class="row">
<div class="col-md-12">
<h2>Source Secrets</h2>
<table class="table table-bordered table-hover table-mobile secrets-table table-word-break-all">
<table class="table table-bordered table-hover table-mobile secrets-table table-layout-fixed">
<colgroup>
<col class="col-sm-5">
<col class="col-sm-5">
</colgroup>
<col class="col-sm-5">
<col class="col-sm-5">
</colgroup>
<thead>
<tr>
<th>Name</th>
Expand All @@ -53,19 +53,19 @@ <h2>Source Secrets</h2>
<td data-title="Type">
{{secret.type}}
</td>
<td data-title="Created" class="word-break-normal">
<td data-title="Created">
<span am-time-ago="secret.metadata.creationTimestamp"></span>
</td>
</tr>
</tbody>
</table>
<div ng-if="secretsByType.images.length !== 0">
<h2>Image Secrets</h2>
<table class="table table-bordered table-hover table-mobile secrets-table table-word-break-all">
<table class="table table-bordered table-hover table-mobile secrets-table table-layout-fixed">
<colgroup>
<col class="col-sm-5">
<col class="col-sm-5">
</colgroup>
<col class="col-sm-5">
<col class="col-sm-5">
</colgroup>
<thead>
<tr>
<th>Name</th>
Expand All @@ -81,7 +81,7 @@ <h2>Image Secrets</h2>
<td data-title="Type">
{{secret.type}}
</td>
<td data-title="Created" class="word-break-normal">
<td data-title="Created">
<span am-time-ago="secret.metadata.creationTimestamp"></span>
</td>
</tr>
Expand All @@ -90,11 +90,11 @@ <h2>Image Secrets</h2>
</div>
<div ng-if="secretsByType.other.length !== 0">
<h2>Other Secrets</h2>
<table class="table table-bordered table-hover table-mobile secrets-table table-word-break-all">
<table class="table table-bordered table-hover table-mobile secrets-table table-layout-fixed">
<colgroup>
<col class="col-sm-5">
<col class="col-sm-5">
</colgroup>
<col class="col-sm-5">
<col class="col-sm-5">
</colgroup>
<thead>
<tr>
<th>Name</th>
Expand All @@ -110,7 +110,7 @@ <h2>Other Secrets</h2>
<td data-title="Type">
{{secret.type}}
</td>
<td data-title="Created" class="word-break-normal">
<td data-title="Created">
<span am-time-ago="secret.metadata.creationTimestamp"></span>
</td>
</tr>
Expand Down
5 changes: 4 additions & 1 deletion app/views/services.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,10 @@ <h1>
<alerts alerts="alerts"></alerts>
<div class="row">
<div class="col-md-12">
<table class="table table-bordered table-hover table-mobile">
<table class="table table-bordered table-hover table-mobile table-layout-fixed">
<colgroup>
<col class="col-sm-3">
</colgroup>
<thead>
<tr>
<th>Name</th>
Expand Down
Loading