Made timeline more responsive + restructured the date in the footer

This commit is contained in:
Zsolt
2017-09-05 11:57:22 +02:00
parent 8509285aae
commit 48d3a3defd
2 changed files with 62 additions and 20 deletions

View File

@@ -58,7 +58,23 @@
background-color: @gray-8;
}
//--------- HISTORY ----------
//--------- PUBLISH DATE IN THE FOOTER ---------
.umb-editor-footer__date-container {
display: flex;
flex-direction: column;
float: left;
font-size: 13px;
line-height: 13px;
color: @gray-2;
}
.umb-editor-footer__date-container div {
margin-right: 20px;
}
//------------------- HISTORY ------------------
.history-line {
@@ -85,6 +101,7 @@
.name-date-container {
margin: 0 30px 0 7px;
height: 30px;
min-width: 170px;
}
.last-history-item .history-line {
@@ -120,6 +137,7 @@
.history-item__break {
display: flex;
align-items: center;
min-width: 230px;
}
@media (max-width: 979px) {
@@ -132,6 +150,28 @@
padding: 7px 0;
}
.history-line {
display: none;
}
}
@media (max-width: 1535px) {
.history-line {
visibility: hidden;
}
}
@media (min-width: 1101px) and (max-width: 1365px) {
.history-row {
display: block;
padding: 10px 0;
}
.history-item__break {
padding: 7px 0;
}
.history-line {
display: none;
}

View File

@@ -54,30 +54,32 @@
</umb-breadcrumbs>
</umb-editor-footer-content-left>
<umb-editor-footer-content-right>
<span ng-if="content.removeDate != null && content.releaseDate != null">Publish and unpublish date: <i class="icon-calendar"></i>{{ content.releaseDate }} and {{ content.removeDate }}</span>
<span ng-if="content.removeDate == null && content.releaseDate != null">Publish date only: <i class="icon-calendar"></i> {{ content.releaseDate }}</span>
<span ng-if="content.removeDate != null && content.releaseDate == null">Remove date only: <i class="icon-calendar"></i> {{ content.removeDate }}</span>
<span class="umb-editor-footer__date-container">
<div ng-if="content.releaseDate != null"><i class="icon-calendar"></i> Publish date: {{ content.releaseDate }}</div>
<div ng-if="content.removeDate != null"><i class="icon-calendar"></i> Unpublish date: {{ content.removeDate }}</div>
</span>
<umb-button
ng-if="page.listViewPath"
type="link"
href="#{{page.listViewPath}}"
label="Return to list"
label-key="buttons_returnToList">
</umb-button>
<umb-button
ng-if="page.listViewPath"
type="link"
href="#{{page.listViewPath}}"
label="Return to list"
label-key="buttons_returnToList">
</umb-button>
<umb-button
ng-if="!page.isNew && content.allowPreview"
type="button"
button-style="info"
action="preview(content)"
label="Preview page"
label-key="buttons_showPage">
</umb-button>
<umb-button
ng-if="!page.isNew && content.allowPreview"
type="button"
button-style="info"
action="preview(content)"
label="Preview page"
label-key="buttons_showPage">
</umb-button>
<umb-button-group
ng-if="defaultButton"