yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add better styling for scheduling of invariant content

Browse Source
This commit is contained in:
Mads Rasmussen
2018-10-04 15:23:38 +02:00
parent 8f9db82159
commit 1c5547e594
2 changed files with 61 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/Umbraco.Web.UI.Client/src/less/properties.less
View File

@@ -1,23 +1,21 @@
//----- SCHEDULED PUBLISH ------
.place-holder {
height: 60px;
width: 60px;
margin: 15px auto;
background-color: @gray-8;
}
.date-wrapper {
display: flex;
justify-content: space-around;
flex-direction: row;
border-top: 1px solid @gray-10;
border-bottom: 1px solid @gray-10;
}
.date-wrapper__date {
padding: 10px;
}
.date-container {
text-align: center;
}
.date-wrapper__number{
.date-wrapper__number {
font-size: 40px;
line-height: 50px;
color: @gray-2;
@@ -31,21 +29,21 @@
margin-bottom: 5px;
}
.date-container__date {
padding: 0 10px;
}
.date-container__date:hover {
background-color: @gray-10;
cursor: pointer;
}
.date-wrapper__date{
font-size: 13px;
color: @gray-6;
margin: 0;
.date-wrapper__date {
padding: 10px;
flex: 1 1 50%;
}
.data-wrapper__add{
.date-wrapper__date:last-of-type {
border-left: 1px solid @gray-10;
}
.data-wrapper__add {
font-size: 18px;
line-height: 10px;
color: @gray-8;
@@ -53,11 +51,6 @@
margin: 0;
}
.date-separate {
width: 1px;
background-color: @gray-8;
}
//------------------- HISTORY ------------------
.history {

91
src/Umbraco.Web.UI.Client/src/views/content/overlays/schedule.html
View File

@@ -7,62 +7,63 @@
<p><localize key="content_languagesToSchedule"></localize></p>
</div>
<div>
<div class="date-wrapper">
<div class="date-wrapper__date">
<label class="bold">
<localize key="content_releaseDate"></localize>
</label>
<div class="btn-group flex" style="font-size: 15px;">
<umb-date-time-picker
options="vm.datePickerConfig"
on-change="vm.datePickerChange(vm.variants[0], event, 'publish')"
on-show="vm.datePickerShow()"
on-hide="vm.datePickerClose()">
<div class="bold">
<localize key="content_releaseDate"></localize>
</div>
<div class="btn-group flex" style="font-size: 14px; margin-right: 10px;">
<umb-date-time-picker
options="vm.datePickerConfig"
on-change="vm.datePickerChange(vm.variants[0], event, 'publish')"
on-show="vm.datePickerShow()"
on-hide="vm.datePickerClose()">
<div ng-if="vm.variants[0].releaseDate" class="btn umb-button--xs">
{{vm.variants[0].releaseDateFormatted}}
</div>
<div ng-if="vm.variants[0].releaseDate" class="btn umb-button--xxs">
{{vm.variants[0].releaseDateFormatted}}
</div>
<a ng-hide="vm.variants[0].releaseDate" href="" class="bold" style="color: #00aea2; text-decoration: underline;">
<localize key="content_setDate">Set date</localize>
</a>
<a ng-hide="vm.variants[0].releaseDate" href="" class="bold" style="color: #00aea2; text-decoration: underline;">
<localize key="content_setDate">Set date</localize>
</umb-date-time-picker>
<a ng-if="vm.variants[0].releaseDate" ng-click="vm.clearPublishDate(vm.variants[0])" class="btn umb-button--xs dropdown-toggle umb-button-group__toggle" style="margin-left: -2px;">
<span class="icon icon-wrong"></span>
</a>
</umb-date-time-picker>
<a ng-if="vm.variants[0].releaseDate" ng-click="vm.clearPublishDate(vm.variants[0])" class="btn umb-button--xxs dropdown-toggle umb-button-group__toggle" style="margin-left: -2px;">
<span class="icon icon-wrong"></span>
</a>
</div>
</div>
<div class="bold">
<localize key="content_unpublishDate"></localize>
</div>
<div class="date-wrapper__date">
<label class="bold">
<localize key="content_unpublishDate"></localize>
</label>
<div class="btn-group flex" style="font-size: 14px;">
<umb-date-time-picker
options="vm.datePickerConfig"
on-change="vm.datePickerChange(vm.variants[0], event, 'unpublish')"
on-show="vm.datePickerShow()"
on-hide="vm.datePickerClose()">
<div class="btn-group flex" style="font-size: 15px;">
<umb-date-time-picker
options="vm.datePickerConfig"
on-change="vm.datePickerChange(vm.variants[0], event, 'unpublish')"
on-show="vm.datePickerShow()"
on-hide="vm.datePickerClose()">
<div ng-if="vm.variants[0].removeDate" class="btn umb-button--xxs">
{{vm.variants[0].removeDateFormatted}}
</div>
<a ng-hide="vm.variants[0].removeDate" href="" class="bold" style="color: #00aea2; text-decoration: underline;">
<localize key="content_setDate">Set date</localize>
<div ng-if="vm.variants[0].removeDate" class="btn umb-button--xs">
{{vm.variants[0].removeDateFormatted}}
</div>
<a ng-hide="vm.variants[0].removeDate" href="" class="bold" style="color: #00aea2; text-decoration: underline;">
<localize key="content_setDate">Set date</localize>
</a>
</umb-date-time-picker>
<a ng-if="vm.variants[0].removeDate" ng-click="vm.clearUnpublishDate(vm.variants[0])" class="btn umb-button--xs dropdown-toggle umb-button-group__toggle" style="margin-left: -2px;">
<span class="icon icon-wrong"></span>
</a>
</umb-date-time-picker>
<a ng-if="vm.variants[0].removeDate" ng-click="vm.clearUnpublishDate(vm.variants[0])" class="btn umb-button--xxs dropdown-toggle umb-button-group__toggle" style="margin-left: -2px;">
<span class="icon icon-wrong"></span>
</a>
</div>
</div>
</div>
</div>
<!-- nodes with variants -->