Updates grid render cshtml

Better single/multi section layout support
Cleaned up the templates with a helper for cleaner code
This commit is contained in:
per ploug
2014-11-18 23:40:53 +01:00
parent d12162cca5
commit ee6c9a3b05
2 changed files with 108 additions and 102 deletions

View File

@@ -2,6 +2,57 @@
@using Umbraco.Web.Templates
@using Newtonsoft.Json.Linq
@if (Model != null && Model.sections != null)
{
var oneColumn = ((System.Collections.ICollection)Model.sections).Count == 1;
<div class="umb-grid">
@if (oneColumn)
{
foreach (var section in Model.sections) {
<div class="grid-section">
@foreach (var row in section.rows) {
@renderRow(row, true);
}
</div>
}
}else {
<div class="container-fluid">
<div class="row-fluid clearfix">
@foreach (var s in Model.sections) {
<div class="grid-section">
<div class="@("span" + s.grid) column">
@foreach (var row in s.rows) {
@renderRow(row, false);
}
</div>
</div>
}
</div>
</div>
}
</div>
}
@helper renderRow(dynamic row, bool singleColumn){
<div @RenderElementAttributes(row)>
@Umbraco.If(singleColumn, "<div class='container-fluid'>")
<div class="row-fluid clearfix">
@foreach ( var area in row.areas ) {
<div class="@("span" + area.grid) column">
<div @RenderElementAttributes(area)>
@foreach (var control in area.controls) {
if (control !=null && control.editor != null && control.editor.view != null ) {
<text>@Html.Partial("grid/editors/base", (object)control)</text>
}
}
</div>
</div>}
</div>
@Umbraco.If(singleColumn, "</div>")
</div>
}
@functions {
public static MvcHtmlString RenderElementAttributes(dynamic contentItem)
{
@@ -9,9 +60,10 @@
JObject cfg = contentItem.config;
if(cfg != null)
foreach (JProperty property in cfg.Properties())
foreach (JProperty property in cfg.Properties()) {
attrs.Add(property.Name + "='" + property.Value.ToString() + "'");
}
JObject style = contentItem.styles;
if (style != null) {
@@ -25,53 +77,4 @@
return new MvcHtmlString(string.Join(" ", attrs));
}
}
@if (Model != null && !string.IsNullOrEmpty(Model.ToString()))
{
var onlyOneColumn = Model.sections != null ? ((System.Collections.ICollection)Model.sections).Count : 0;
<div class="uSky-grid @(onlyOneColumn > 1 ? "container-fluid" : "")">
<div class="row-fluid clearfix">
@foreach (var s in Model.sections){
<div class="@("span" + s.grid) column"> <!-- section -->
<div class="grid-section">
<div @RenderElementAttributes(s)>
<div class="@(onlyOneColumn == 1 ? "container-fluid" : "")"><!-- remove container class -->
<!-- foreach row in section -->
@foreach (var row in s.rows){
<div class="row-fluid clearfix">
<div class="grid-row grid-row-@row.uniqueId">
<div @RenderElementAttributes(row)>
@foreach (var area in row.areas){
<div class="@("span" + area.grid) column">
<div class="grid-cell">
<div @RenderElementAttributes(area)>
@foreach (var control in area.controls){
if (control != null && control.editor != null && control.editor.view != null){
<text>@Html.Partial("grid/editors/base", (object)control)</text>
}
}
</div>
</div>
</div>
}
</div>
</div>
</div>
}
</div>
</div>
</div>
</div>
}
</div>
</div>
}

View File

@@ -2,6 +2,57 @@
@using Umbraco.Web.Templates
@using Newtonsoft.Json.Linq
@if (Model != null && Model.sections != null)
{
var oneColumn = ((System.Collections.ICollection)Model.sections).Count == 1;
<div class="umb-grid">
@if (oneColumn)
{
foreach (var section in Model.sections) {
<div class="grid-section">
@foreach (var row in section.rows) {
@renderRow(row, true);
}
</div>
}
}else {
<div class="container">
<div class="row clearfix">
@foreach (var s in Model.sections) {
<div class="grid-section">
<div class="col-md-@s.grid column">
@foreach (var row in s.rows) {
@renderRow(row, false);
}
</div>
</div>
}
</div>
</div>
}
</div>
}
@helper renderRow(dynamic row, bool singleColumn){
<div @RenderElementAttributes(row)>
@Umbraco.If(singleColumn, "<div class='container'>")
<div class="row clearfix">
@foreach ( var area in row.areas ) {
<div class="col-md-@area.grid column">
<div @RenderElementAttributes(area)>
@foreach (var control in area.controls) {
if (control !=null && control.editor != null && control.editor.view != null ) {
<text>@Html.Partial("grid/editors/base", (object)control)</text>
}
}
</div>
</div>}
</div>
@Umbraco.If(singleColumn, "</div>")
</div>
}
@functions {
public static MvcHtmlString RenderElementAttributes(dynamic contentItem)
{
@@ -9,9 +60,10 @@
JObject cfg = contentItem.config;
if(cfg != null)
foreach (JProperty property in cfg.Properties())
foreach (JProperty property in cfg.Properties()) {
attrs.Add(property.Name + "='" + property.Value.ToString() + "'");
}
JObject style = contentItem.styles;
if (style != null) {
@@ -25,53 +77,4 @@
return new MvcHtmlString(string.Join(" ", attrs));
}
}
@if (Model != null && !string.IsNullOrEmpty(Model.ToString()))
{
var onlyOneColumn = Model.sections != null ? ((System.Collections.ICollection)Model.sections).Count : 0;
<div class="uSky-grid @(onlyOneColumn > 1 ? "container" : "")">
<div class="row clearfix">
@foreach (var s in Model.sections){
<div class="col-md-@s.grid column"> <!-- section -->
<div class="grid-section">
<div @RenderElementAttributes(s)>
<div class="@(onlyOneColumn == 1 ? "container" : "")"><!-- remove container class -->
<!-- foreach row in section -->
@foreach (var row in s.rows){
<div class="row clearfix">
<div class="grid-row grid-row-@row.uniqueId">
<div @RenderElementAttributes(row)>
@foreach (var area in row.areas){
<div class="col-md-@area.grid column">
<div class="grid-cell">
<div @RenderElementAttributes(area)>
@foreach (var control in area.controls){
if (control != null && control.editor != null && control.editor.view != null){
<text>@Html.Partial("grid/editors/base", (object)control)</text>
}
}
</div>
</div>
</div>
}
</div>
</div>
</div>
}
</div>
</div>
</div>
</div>
}
</div>
</div>
}