Fixed Redirects UI.. Added flex-box basis utility, removed date and edit button

This commit is contained in:
Simon Busborg
2016-09-02 14:33:07 +02:00
parent 85d243508c
commit fca865a743
3 changed files with 95 additions and 42 deletions

View File

@@ -243,7 +243,7 @@ input.umb-table__input {
text-overflow: ellipsis;
}
.umb-table-cell:first-of-type {
.umb-table-cell:first-of-type:not(.umb-table-cell.not-fixed) {
flex: 0 0 25px;
margin: 0 0 0 15px;

View File

@@ -1,37 +1,96 @@
/*
Flexbox
*/
.flex { display: flex; }
.flex-inline { display: inline-flex; }
.flex { display: flex }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-column { flex-direction: column }
.flex-wrap { flex-wrap: wrap }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.items-stretch { align-items: stretch; }
.items-start { align-items: flex-start }
.items-end { align-items: flex-end }
.items-center { align-items: center }
.items-baseline { align-items: baseline }
.items-stretch { align-items: stretch }
.self-start { align-self: flex-start; }
.self-end { align-self: flex-end; }
.self-center { align-self: center; }
.self-baseline { align-self: baseline; }
.self-stretch { align-self: stretch; }
.self-start { align-self: flex-start }
.self-end { align-self: flex-end }
.self-center { align-self: center }
.self-baseline { align-self: baseline }
.self-stretch { align-self: stretch }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-start { justify-content: flex-start }
.justify-end { justify-content: flex-end }
.justify-center { justify-content: center }
.justify-between { justify-content: space-between }
.justify-around { justify-content: space-around }
.content-start { align-content: flex-start; }
.content-end { align-content: flex-end; }
.content-center { align-content: center; }
.content-between { align-content: space-between; }
.content-around { align-content: space-around; }
.content-stretch { align-content: stretch; }
.content-start { align-content: flex-start }
.content-end { align-content: flex-end }
.content-center { align-content: center }
.content-between { align-content: space-between }
.content-around { align-content: space-around }
.content-stretch { align-content: stretch }
.flx-i {
flex: 1;
}
.flx-g0 {
flex-grow: 0;
}
.flx-g1 {
flex-grow: 1;
}
.flx-s0 {
flex-shrink: 0;
}
.flx-s1 {
flex-shrink: 1;
}
.flx-b0 {
flex-basis: 0%;
}
.flx-b1 {
flex-basis: 10%;
}
.flx-b2 {
flex-basis: 20%;
}
.flx-b3 {
flex-basis: 30%;
}
.flx-b4 {
flex-basis: 40%;
}
.flx-b5 {
flex-basis: 50%;
}
.flx-b6 {
flex-basis: 60%;
}
.flx-b7 {
flex-basis: 70%;
}
.flx-b8 {
flex-basis: 80%;
}
.flx-b9 {
flex-basis: 90%;
}
.flx-b10 {
flex-basis: 100%;
}
.flx-ba {
flex-basis: auto;
}
/* 1. Fix for Chrome 44 bug. https://code.google.com/p/chromium/issues/detail?id=506893 */
.flex-auto {
@@ -40,4 +99,4 @@
min-height: 0; /* 1 */
}
.flex-none { flex: none }
.flex-none { flex: none; }

View File

@@ -53,11 +53,9 @@
<div class="umb-table-head">
<div class="umb-table-row">
<div class="umb-table-cell"></div>
<div class="umb-table-cell">Original Url</div>
<div class="umb-table-cell">Redirected To</div>
<div class="umb-table-cell">Date Created</div>
<div class="umb-table-cell"></div>
<div class="umb-table-cell not-fixed flx-s1 flx-g1 flx-b4">Original Url</div>
<div class="umb-table-cell flx-s0 flx-g0" style="flex-basis: 20px;"></div>
<div class="umb-table-cell flx-s1 flx-g1 flx-b6">Redirected To</div>
</div>
</div>
@@ -65,24 +63,20 @@
<div class="umb-table-row -solid" ng-repeat="redirectUrl in vm.redirectUrls">
<div class="umb-table-cell">
<i class="umb-table-body__icon umb-table-body__fileicon icon-shuffle"></i>
</div>
<div class="umb-table-cell">
<div class="umb-table-cell not-fixed flx-s1 flx-g1 flx-b4">
<a class="umb-table-body__link" href="{{redirectUrl.originalUrl}}" target="_blank" title="{{redirectUrl.originalUrl}}">{{redirectUrl.originalUrl}}</a>
</div>
<div class="umb-table-cell">
<a class="umb-table-body__link" href="{{redirectUrl.destinationUrl}}" target="_blank" title="{{redirectUrl.destinationUrl}}">{{redirectUrl.destinationUrl}}</a>
<div class="umb-table-cell flx-s0 flx-g0" style="flex-basis: 20px;">
<i class="umb-table-body__icon umb-table-body__fileicon icon-arrow-right" style="font-size: 12px; line-height: 1;"></i>
</div>
<div class="umb-table-cell">
{{redirectUrl.createDateUtc | date:'medium'}}
</div>
<div class="umb-table-cell flx-s1 flx-g1 flx-b6 items-center">
<div class="flx-s1 flx-g1 flx-b0" style="margin-right: 20px;">
<a class="umb-table-body__link" href="{{redirectUrl.destinationUrl}}" target="_blank" title="{{redirectUrl.destinationUrl}}">{{redirectUrl.destinationUrl}}</a>
</div>
<div class="umb-table-cell justify-end">
<a href="/umbraco/#/content/content/edit/{{redirectUrl.contentId}}" class="umb-era-button -gray umb-button--s" style="margin-right: 10px;">Edit</a>
<button type="button" class="umb-era-button -gray umb-button--s" ng-click="vm.removeRedirect(redirectUrl)">Remove</button>
</div>