Skip to content

Instantly share code, notes, and snippets.

@Shazwazza

Shazwazza/Page.cshtml Secret

Last active May 17, 2018 13:27
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 Shazwazza/77ce0a947428faadb2b015bcbce933de to your computer and use it in GitHub Desktop.
Save Shazwazza/77ce0a947428faadb2b015bcbce933de to your computer and use it in GitHub Desktop.
Download ZIP
Umbraco v8 variant testing template
Raw
Page.cshtml
@inherits Umbraco.Web.Mvc.UmbracoViewPage
@using Umbraco.Core.PropertyEditors.ValueConverters;
@{
Layout = null;
var currentCulture = System.Threading.Thread.CurrentThread.CurrentCulture;
var root = Model.Root();
}
@functions {
public string GetCountryCode(string culture)
{
var cultureNameParts = culture.Split('-');
return cultureNameParts.Length == 1 ? cultureNameParts[0] : cultureNameParts[1];
}
}
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/responsive-bp@4.1.4/build/responsive.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flag-icon-css@3.0.0/css/flag-icon.min.css" />
<link rel="stylesheet" href="https://cdn.rawgit.com/Shazwazza/77ce0a947428faadb2b015bcbce933de/raw/6e6c0a761dd4ee71dfafba4e6fdeeb2a57dafc26/test4.css" />
</head>
<body>
<div id="main">
<header>
<div class="nav-bar">
<div class="container">
<ul class="menu no-bullets">
<li><a href="@root.Url">@root.Name</a></li>
@foreach (var n in root.Children())
{
<li><a href="@n.Url">@n.Name</a></li>
}
</ul>
<nav data-navigation>
<button title="@currentCulture">
<div class="flag-icon-background flag-icon-@GetCountryCode(currentCulture.Name)"></div>
<span>@currentCulture</span>
</button>
@{
var otherCultures = root.Cultures.Where(x => !x.Key.InvariantEquals(currentCulture.Name)).ToList();
}
@if (otherCultures.Count > 0)
{
<p>Select language</p>
<ul>
@foreach (var v in otherCultures)
{
<li>
<a class="flag-icon-background flag-icon-@GetCountryCode(v.Key)"
title="@v.Key"
href="@Umbraco.Url(Model.Id, v.Key)">
<span>@v.Key</span>
</a>
</li>
}
</ul>
}
</nav>
</div>
</div>
<div class="banner">
</div>
</header>
<main class="container">
<div class="row">
<div class="col-s-4">
<img style="margin:30px;" src="@Url.GetCropUrl(Model.Value<IPublishedContent>("mediaPicker"), width: 300)" />
</div>
<div class="col-s-8">
<h1><a href="@Model.Url()">@Model.Name</a></h1>
@Model.Value("content")
@if(Model.Children.Any())
{
<ul>
@foreach(var c in Model.Children())
{
<li><a href="@c.Url()">@c.Name</a></li>
}
</ul>
}
</div>
</div>
</main>
</div>
@{
//poor mans sass
var color1 = "rgba(67, 129, 193, 1);";
var color2 = "rgba(189, 173, 234, 1)";
var color3 = "rgba(190, 162, 194, 1)";
var color4 = "rgba(163, 120, 113, 1)";
var color5 = "rgba(78, 75, 92, 1)";
}
<style type="text/css" scoped>
body {
color: @color5;
}
#main h1, #main h2, #main h1 a, #main h2 a {
color: @color4;
}
#main a {
color: @color1;
}
#main .navigation {
background-color: @color5;
}
#main .navigation button {
background-color: @color5;
}
#main header {
background-color: @color5;
}
#main header a {
color: @color3;
}
#main header ul.menu li:after {
color: @color2;
}
#main .banner {
background-color:@color3;
background-image: url('@(Url.GetCropUrl(Model.Value<ImageCropperValue>("headerImage"), cropAlias: "banner"))');
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/responsive-bp@4.1.4/build/responsive.min.js"></script>
</body>
</html>
Raw
Test.cshtml
@inherits Umbraco.Web.Mvc.UmbracoViewPage
@{
Layout = null;
var currentCulture = System.Threading.Thread.CurrentThread.CurrentCulture;
var root = Model.Root();
}
@functions {
public string GetCountryCode(string culture)
{
var cultureNameParts = culture.Split('-');
return cultureNameParts.Length == 1 ? cultureNameParts[0] : cultureNameParts[1];
}
}
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/responsive-bp@4.1.4/build/responsive.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flag-icon-css@3.0.0/css/flag-icon.min.css" />
<link rel="stylesheet" href="https://cdn.rawgit.com/Shazwazza/77ce0a947428faadb2b015bcbce933de/raw/b50e5a7ba8dd3f74e67440c6af0a046531d5a471/test.css" />
</head>
<body>
<div id="main">
<header>
<div class="container">
<div class="row">
<div class="col-s-12">
<nav data-navigation>
<button title="@currentCulture">
<div class="flag-icon-background flag-icon-@GetCountryCode(currentCulture.Name)"></div>
<span>@currentCulture</span>
</button>
@{
var otherCultures = root.Cultures.Where(x => !x.Key.InvariantEquals(currentCulture.Name)).ToList();
}
@if (otherCultures.Count > 0)
{
<p>Select language</p>
<ul>
@foreach (var v in otherCultures)
{
<li>
<a class="flag-icon-background flag-icon-@GetCountryCode(v.Key)"
title="@v.Key"
href="@Umbraco.Url(Model.Id, v.Key)">
<span>@v.Key</span>
</a>
</li>
}
</ul>
}
</nav>
<ul class="menu no-bullets">
<li><a href="@root.Url">@root.Name</a></li>
@foreach (var n in root.Children())
{
<li><a href="@n.Url">@n.Name</a></li>
}
</ul>
</div>
</div>
</div>
</header>
<main class="container">
<div class="row">
<div class="col-s-12">
<h1><a href="@Model.Url()">@Model.Name</a><sup><code>@currentCulture</code></sup></h1>
</div>
</div>
<div class="row">
<div class="col-s-12">
<h2>Published Culture Info</h2>
<table class="table-bordered table-striped">
<thead>
<tr>
<th scope="row">Culture</th>
<th>Name</th>
<th>Url</th>
</tr>
</thead>
<tbody>
@foreach (var v in Model.Cultures)
{
<tr>
<th scope="row">@v.Key</th>
<td>@v.Value.Name</td>
<td><a href="@Umbraco.Url(Model.Id, v.Key)">@Umbraco.Url(Model.Id, v.Key)</a></td>
</tr>
}
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-s-12">
<h2>Properties</h2>
<table class="table-bordered table-striped table-scrollable">
<thead>
<tr>
<th scope="col">Alias</th>
<th>Value</th>
</tr>
</thead>
<tbody>
@foreach (var p in Model.Properties)
{
<tr>
<th scope="row">@p.Alias</th>
<td>@Model.Value(p.Alias)</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</main>
</div>
@{
//poor mans sass
var color1 = "rgba(67, 129, 193, 1);";
var color2 = "rgba(189, 173, 234, 1)";
var color3 = "rgba(190, 162, 194, 1)";
var color4 = "rgba(163, 120, 113, 1)";
var color5 = "rgba(78, 75, 92, 1)";
}
<style type="text/css" scoped>
body {
color: @color5;
}
#main h1, #main h2, #main h1 a, #main h2 a {
color: @color4;
}
#main a {
color: @color1;
}
#main .navigation {
background-color: @color5;
}
#main .navigation button {
background-color: @color5;
}
#main header {
background-color: @color5;
}
#main header a {
color: @color3;
}
#main header ul.menu li:after {
color: @color2;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/responsive-bp@4.1.4/build/responsive.min.js"></script>
</body>
</html>
Raw
test4.css
#main a {
text-decoration: none;
}
#main a:hover {
text-decoration: underline;
}
#main .navigation.open {
width: 100px;
}
#main .navigation span {
display: none;
}
#main .navigation p {
display: none;
}
#main .navigation.visible p {
text-align:center;
display: block;
}
#main .navigation ul {
padding: 0;
width:inherit;
}
#main .navigation button {
padding: 5px;
height: 42px;
width: initial;
}
#main .navigation button div {
background-position: center;
height: 32px;
width: 46px;
}
#main .navigation.open button {
left: inherit;
}
#main .navigation li {
padding: 5px;
}
#main .navigation li a {
background-position: center;
padding: 0;
height: 32px;
width: 46px;
margin: auto;
}
#main h1 code {
font-size: 10px;
margin: 10px;
}
#main header ul.menu {
padding-top: 10px;
margin: 0;
}
#main header ul.menu li {
display: inline-block;
}
#main header ul.menu li:after {
content: "•";
display: inline-block;
padding: 0px 20px;
}
#main header ul.menu li:last-child:after {
display: none;
}
#main header .nav-bar {
min-height: 42px;
}
#main .banner {
height:300px;
background-position: center;
background-size: cover;
padding-top: 1px;
padding-bottom: 2rem;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment