Skip to content

Instantly share code, notes, and snippets.

@rbaty-barr

rbaty-barr/emailgrid.cshtml

Created June 30, 2017 16:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rbaty-barr/07a55bc3581afce3b1d8dc4a5d885b61 to your computer and use it in GitHub Desktop.
Save rbaty-barr/07a55bc3581afce3b1d8dc4a5d885b61 to your computer and use it in GitHub Desktop.
Download ZIP
here is my complete custom grid based on salted
Raw
emailgrid.cshtml
@inherits UmbracoViewPage<dynamic>
@using Umbraco.Web.Templates
@using Newtonsoft.Json.Linq
@*
Razor helpers located at the bottom of this file
*@
@if (Model != null && Model.sections != null)
{
foreach (var section in Model.sections)
{
foreach (var row in section.rows)
{
@renderRow(row);
}
}
}
@helper renderRow(dynamic row)
{
if (row.name == "Divider")
{
ViewBag.Row = "divider";
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td bgcolor="#ffffff" align="center" style="padding: 10px 15px 10px 15px;" class="divider-padding">
<table border="0" cellpadding="0" cellspacing="0" width="650" class="responsive-table">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top" style="border-top:1px solid #C8C8C8;"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
}
if (row.name == "Single Cell")
{
ViewBag.Row = "single";
<!-- ONE COLUMN SECTION -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td bgcolor="#ffffff" align="center" style="padding: 10px 15px 10px 15px;" class="section-padding">
<table border="0" cellpadding="0" cellspacing="0" width="650" class="responsive-table">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
@foreach (var area in row.areas)
{
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>
}
}
}
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
}
if (row.name == "33/66 Split")
{
ViewBag.Row = "unbalancedLeft";
<!-- COMPACT ARTICLE SECTION -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td bgcolor="#FFFFFF" align="center" style="padding: 10px 15px 10px 15px;" class="section-padding">
<table border="0" cellpadding="0" cellspacing="0" width="650" style="padding:0 0 20px 0;" class="responsive-table">
<tr>
@foreach (var area in row.areas)
{
if (area == row.areas.First)
{
<td valign="top" style="padding: 10px 0 0 0;" class="mobile-hide">
@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>
}
}
</td>
}
else if (area == row.areas.Last)
{
<td valign="top" style="padding: 10px 0 0 0;" class="no-padding">
<!-- ARTICLE -->
<table border="0" cellspacing="0" cellpadding="0" class="textRight"> <!-- width="100%" -->
@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>
}
}
</table>
</td>
}
}
</tr>
</table>
</td>
</tr>
</table>
}
if (row.name == "66/33 Split")
{
ViewBag.Row = "unbalancedRight";
<!-- COMPACT ARTICLE SECTION -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td bgcolor="#FFFFFF" align="center" style="padding: 10px 15px 10px 15px;" class="section-padding">
<table border="0" cellpadding="0" cellspacing="0" width="650" style="padding:0 0 20px 0;" class="responsive-table">
<tr>
@foreach (var area in row.areas)
{
if (area == row.areas.First)
{
<td valign="top" style="padding: 10px 0 0 0;" class="no-padding">
<!-- ARTICLE -->
<table border="0" cellspacing="0" cellpadding="0" width="100%">
@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>
}
}
</table>
</td>
}
else if (area == row.areas.Last)
{
<td valign="top" style="padding: 10px 0 0 20px;" class="mobile-hide"> <!-- class="mobile-hide" -->
@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>
}
}
</td>
}
}
</tr>
</table>
</td>
</tr>
</table>
}
if (row.name == "Two Cell Even")
{
ViewBag.Row = "even";
<!-- TWO COLUMN SECTION -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td bgcolor="#ffffff" align="center" style="padding: 10px 15px 10px 15px;" class="section-padding">
<table border="0" cellpadding="0" cellspacing="0" width="650" class="responsive-table">
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td valign="top" style="padding: 0;" class="mobile-wrapper">
@foreach (var area in row.areas)
{
if (area == row.areas.First)
{
<!-- LEFT COLUMN -->
<table cellpadding="0" cellspacing="0" border="0" width="47%" align="left" class="responsive-table">
<tr>
<td style="padding: 0px 0 0px 0;">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
@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>
}
}
</table>
</td>
</tr>
</table>
}
else if (area == row.areas.Last)
{
<!-- RIGHT COLUMN -->
<table cellpadding="0" cellspacing="0" border="0" width="47%" align="right" class="responsive-table">
<tr>
<td style="padding: 0px 0 0px 0;">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
@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>
}
}
</table>
</td>
</tr>
</table>
}
}
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
}
if (row.name == "Color Bar Intro")
{
<tr>
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="color:#FFFFFF;" @RenderElementAttributes(row)>
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="650" class="flexibleContainer">
<tr>
<td align="center" valign="top" width="650" class="flexibleContainerCell">
<!-- CONTENT TABLE // -->
<table border="0" cellpadding="20" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" class="textContent">
@foreach (var area in row.areas)
{
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>
}
}
}
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
}
}
@functions {
public static MvcHtmlString RenderElementAttributes(dynamic contentItem)
{
var attrs = new List<string>();
JObject cfg = contentItem.config;
if (cfg != null)
foreach (JProperty property in cfg.Properties())
{
attrs.Add(property.Name + "=\"" + property.Value.ToString() + "\"");
}
JObject style = contentItem.styles;
if (style != null)
{
var cssVals = new List<string>();
foreach (JProperty property in style.Properties())
cssVals.Add(property.Name + ":" + property.Value.ToString() + ";");
if (cssVals.Any())
attrs.Add("style=\"" + string.Join(" ", cssVals) + "\"");
}
return new MvcHtmlString(string.Join(" ", attrs));
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment