Grid template preview
New template preview for content section
This commit is contained in:
Rune Hem Strand
@@ -614,7 +614,108 @@
|
||||
background: @grayLight
|
||||
}
|
||||
|
||||
/* New template preview */
|
||||
.usky-grid {
|
||||
|
||||
.templates-preview {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
small {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
bottom: -25px;
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
.help-text {
|
||||
margin: 35px 35px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-rows {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
width: 125px;
|
||||
margin: 35px 40px 15px 0;
|
||||
border: 2px solid @grayLight; /* @grayLight */
|
||||
transition: border 200ms linear;
|
||||
|
||||
&:hover {
|
||||
border-color: @blue;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.preview-row {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-rows.layout {
|
||||
height: 180px;
|
||||
padding: 2px;
|
||||
|
||||
.preview-row {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.preview-col {
|
||||
height: 100%;
|
||||
border: dashed 1px @grayLight;
|
||||
}
|
||||
|
||||
.preview-cell {
|
||||
background-color: @grayLighter;
|
||||
}
|
||||
.preview-overlay {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-rows.columns {
|
||||
min-height: 18px;
|
||||
line-height: 11px;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.preview-col {
|
||||
display: block;
|
||||
float: left;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
width: 33.3%; /* temp value */
|
||||
height: 10px;
|
||||
margin: 0;
|
||||
border: 1px solid @white; /* @white */
|
||||
|
||||
.preview-cell {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: @grayLight; /* @grayLight */
|
||||
margin: 0 1px 1px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-overlay {
|
||||
display: block;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
box-sizing: border-box;
|
||||
left: 0;
|
||||
border: 3px solid white;
|
||||
}
|
||||
}
|
||||
|
||||
/**************************************************************************************************/
|
||||
/* overlay */
|
||||
|
||||
@@ -3,27 +3,40 @@
|
||||
<div ng-if="contentReady">
|
||||
|
||||
<!-- Template picker -->
|
||||
<div class="uSky-templates tb" ng-show="!model.value || model.value == ''">
|
||||
<div class="tr">
|
||||
<div class="td middle">
|
||||
<div class="uSky-templates-template"
|
||||
ng-repeat="template in model.config.items.templates" style="">
|
||||
<div class="tb" ng-click="addTemplate(template)">
|
||||
<div class="tr">
|
||||
<div class="td uSky-templates-column"
|
||||
|
||||
<div class="templates-preview"
|
||||
ng-show="!model.value || model.value == ''">
|
||||
|
||||
<div class="preview-rows layout"
|
||||
ng-repeat="template in model.config.items.templates"
|
||||
ng-click="addTemplate(template)">
|
||||
|
||||
<div class="preview-row">
|
||||
|
||||
<div class="preview-col"
|
||||
ng-class="{last:$last}"
|
||||
ng-repeat="section in template.sections"
|
||||
ng-style="{width: percentage(section.grid) + '%'}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="preview-cell">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
<div class="help-text">To start, select a layout for your grid</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="preview-overlay">
|
||||
</div>
|
||||
|
||||
<small>{{layout.name}}</small>
|
||||
|
||||
</div> <!-- .templates-preview-rows -->
|
||||
|
||||
<p><span class="help-text">Add rows to your layout</span></p>
|
||||
|
||||
|
||||
</div> <!-- .templates-preview -->
|
||||
|
||||
<!-- template picker end -->
|
||||
|
||||
<!-- Grids -->
|
||||
@@ -188,35 +201,40 @@
|
||||
|
||||
|
||||
<!-- column tools -->
|
||||
<div class="usky-templates-columns tb">
|
||||
|
||||
<div class="tr">
|
||||
<div class="td middle">
|
||||
<ul>
|
||||
<li ng-repeat="layout in section.$allowedLayouts" ng-show="layout.areas.length > 0">
|
||||
<div class="tb mainTbpt" ng-click="addRow(section, layout)">
|
||||
<div class="tr">
|
||||
<div ng-style="{width: percentage(area.grid) + '%'}"
|
||||
class="mainTdpt td"
|
||||
ng-repeat="area in layout.areas">
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<small>{{layout.name}}</small>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<div class="templates-preview">
|
||||
|
||||
<div class="preview-rows columns"
|
||||
ng-repeat="layout in section.$allowedLayouts"
|
||||
ng-show="layout.areas.length > 0"
|
||||
ng-click="addRow(section, layout)">
|
||||
|
||||
<div class="preview-row">
|
||||
|
||||
<div class="preview-col" ng-style="{width: percentage(area.grid) + '%'}" ng-repeat="area in layout.areas">
|
||||
|
||||
<div class="preview-cell">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="tr">
|
||||
<div class="td middle">
|
||||
<br />
|
||||
<span class="help-text">Add rows to your layout</span>
|
||||
|
||||
<div class="preview-overlay">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<small>{{layout.name}}</small>
|
||||
|
||||
</div> <!-- .templates-preview-rows -->
|
||||
|
||||
|
||||
<p>
|
||||
<span class="help-text">Add rows to your layout</span>
|
||||
</p>
|
||||
|
||||
|
||||
</div> <!-- .templates-preview -->
|
||||
|
||||
<!-- column tools end -->
|
||||
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user