Skip to content

GitLab

Verified Commit d5d20e6a authored by Aral Balkan's avatar Aral Balkan
Browse files

Update partials demo 

  - Move components to components folder to avoid namespace
    clash with the route itself
  - Use actual header as a partial
  - Update demo page description
parent e7871caf
Hide whitespace changes
Inline Side-by-side
coffee/routes/partials.coffee
View file @ d5d20e6a
......@@ -11,4 +11,4 @@
################################################################################
exports.route = (request, response) ->
response.render 'partials', {}
response.render 'partials', {title: 'Ind.ie Labs: Set: Partials'}
coffee/views/components/common-header.html 0 → 100644
View file @ d5d20e6a
<!doctype html>
<html lang='en'>
<head>
<!-- Labs common -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title data-set-text='title'>Ind.ie Labs: Set</title>
<link rel="alternate" type="application/rss+xml" title="Ind.ie Labs Blog" href="https://ind.ie/labs/blog/rss/index.xml">
<!--[if lte IE 8]>
<script src='https://ind.ie/assets/js/html5shiv.js'></script>
<![endif]-->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="https://ind.ie/assets/images/ios-180.png">
<link rel="apple-touch-icon" sizes="76x76" href="https://ind.ie/assets/images/ios-76.png">
<link rel="apple-touch-icon" sizes="120x120" href="https://ind.ie/assets/images/ios-120.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://ind.ie/assets/images/ios-152.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://ind.ie/assets/images/ios-180.png">
<link rel="stylesheet" href="https://ind.ie/assets/css/lab-styles.css">
<!-- Set -->
<link rel='stylesheet' type='text/css' href='css/base.css'>
<link data-set-dummy rel='stylesheet' type='text/css' href='css/set-highlights.css'>
<link rel='stylesheet' href='https://ind.ie/assets/css/set-styles.css'/>
<link rel='stylesheet' type='text/css' href='css/indie.css'>
<!-- Syntax highlighting for the code -->
<link rel='stylesheet' type='text/css' href='css/prism.css'>
<script data-set-dummy src='js/set-highlights.js'></script>
<link rel='stylesheet' type='text/css' href='css/simple.css'>
<!-- Labs common, inline styles -->
<style>
.main {
padding: 14px;
padding-top: 0;
}
@media only screen and (min-width: 600px) {
.main {
margin: 0 auto;
max-width: 700px;
padding: 21px;
padding-top: 0;
}
}
h1 {
margin-bottom: 14px;
}
h2 {
margin-top: 14px;
}
.projects {
border-bottom: 1px solid #d8d8d8;
margin: 0;
}
.projects li {
border-top: 1px solid #d8d8d8;
clear: both;
list-style-type: none;
overflow: hidden;
margin-bottom: 24px;
text-align: center;
}
@media only screen and (min-width: 745px) {
.projects li {
text-align: left;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-moz-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 0;
}
.projects li p {
-webkit-flex: 1 auto;
flex: 1 auto;
float: left;
margin-bottom: 0;
margin-left: 28px;
max-width: 337px;
}
}
.archived .old, .archived img, .archived h3 {
opacity: .6;
}
.archived .update {
opacity: 1;
}
.projects li h3 a {
display: block;
margin: 0 auto;
max-width: 335px;
}
@media only screen and (min-width: 745px) {
.projects li h3 a {
-webkit-flex: 1 auto;
flex: 1 auto;
margin: 0;
}
}
.projects .hero-image {
margin-top: 0;
}
@media only screen and (min-width: 745px) {
.projects .hero-image {
float: left;
}
}
@media only screen and (min-width: 745px) {
.oskar-the-scientist {
margin: 20px auto 0 auto;
max-width: 450px;
}
}
.sub-navigation--list {
margin: 0;
margin-top: 11px;
overflow: hidden;
padding: 0;
/* flex box to centre children */
display: -webkit-flex;
display: -moz-flex;
display: flex;
-webkit-flex-flow: row wrap;
-moz-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
}
@media only screen and (min-width: 600px) {
.sub-navigation--list {
margin-top: 0;
}
}
.sub-navigation--list {
margin: 0;
/* Make sure that the rule is written out only once in case there is no rem substitution */
margin: 0;
margin-top: 11px;
margin-top: 0.6875rem;
overflow: hidden;
padding: 0;
/* Make sure that the rule is written out only once in case there is no rem substitution */
padding: 0;
/* flex box to centre children */
display: -webkit-flex;
display: -moz-flex;
display: flex;
-webkit-flex-flow: row wrap;
-moz-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
}
@media only screen and (min-width: 600px) {
.sub-navigation--list {
margin-top: 0;
}
}
.sub-navigation--list li {
float: left;
list-style-type: none;
margin-bottom: 0;
padding: 0 13px 1px 1px;
/* Make sure that the rule is written out only once in case there is no rem substitution */
padding: 0 0.8125rem 0.4375rem 0.8125rem;
}
.sub-navigation--list li a {
border-bottom: 1px solid #191919;
border-bottom: 0.0625rem solid #191919;
color: #191919;
display: block;
float: left;
font-size: 16px;
font-size: 1rem;
line-height: 21px;
line-height: 1.3125rem;
padding: 18px 1px 1px 1px;
/* Make sure that the rule is written out only once in case there is no rem substitution */
padding: 1.125rem 0.0625rem 0.0625rem 0.0625rem;
text-decoration: none;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.sub-navigation--list li a:hover,
.sub-navigation--list li a:active,
.sub-navigation--list li a:focus {
border-color: #000;
color: #000;
}
.labs-projects .sub-navigation .projects-link a,
.labs-blog .sub-navigation .blog-link a {
background: #ccc;
border-bottom: none;
-webkit-border-radius: 7px;
border-radius: 7px;
display: inline-block;
margin-top: 11px;
margin-top: 0.6875rem;
padding: 7px 14px 1px 1px;
/* Make sure that the rule is written out only once in case there is no rem substitution */
padding: 0.4375rem 0.875rem;
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
-webkit-transition: all none ease;
-moz-transition: all none ease;
-ms-transition: all none ease;
-o-transition: all none ease;
transition: all none ease;
}
@media only screen and (min-width: 770px) {
.labs-projects .sub-navigation .projects-link a,
.labs-blog .sub-navigation .blog-link a {
background: url("https://ind.ie/assets/images/sprite.svg") no-repeat top center;
border-bottom: 1px solid #191919;
border-bottom: 0.0625rem solid #191919;
-webkit-border-radius: 0;
border-radius: 0;
display: block;
margin-top: 0;
padding: 18px 1px 1px 1px;
padding: 1.125rem 0.0625rem 0.0625rem 0.0625rem;
}
.no-svg .labs-projects .sub-navigation .projects-link a,
.no-svg .labs-blog .sub-navigation .blog-link a {
background-image: url("https://ind.ie/assets/images/sprite.png");
}
}
/* Funding footer */
.fund-us {
border-top: 1px solid #ccc;
border-top: 0.0625rem solid #ccc;
border-bottom: 1px solid #ccc;
border-bottom: 0.0625rem solid #ccc;
margin-top: 56px;
margin-top: 3.5rem;
overflow: hidden;
}
@media only screen and (min-width: 580px) {
.fund-us {
margin-top: 140px;
margin-top: 8.75rem;
}
}
.flexbox .fund-us {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
.fund-us h2 {
font-size: 26px;
font-size: 1.625rem;
line-height: 35px;
line-height: 2.1875rem;
margin-top: 28px;
margin-top: 1.75rem;
margin-bottom: 14px;
margin-bottom: 0.875rem;
}
@media only screen and (min-width: 620px) {
.fund-us p {
float: left;
margin-bottom: 28px;
margin-bottom: 1.75rem;
max-width: 70%;
}
}
.fund-us .button {
background: #4d4d4d;
border: none;
-webkit-border-radius: 5px;
border-radius: 5px;
box-sizing: border-box;
color: #fff;
cursor: pointer;
font-size: 18px;
font-size: 1.125rem;
font-family: "Avenir Next", Avenir, 'Helvetica Neue', Helvetica, sans-serif;
height: 35px;
height: 2.1875rem;
line-height: 24px;
margin-top: 14px;
margin-top: 0.875rem;
margin-left: auto;
margin-bottom: 28px;
margin-bottom: 1.75rem;
margin-right: auto;
padding-right: 28px;
padding-right: 1.75rem;
padding-left: 28px;
padding-left: 1.75rem;
max-width: 130px;
max-width: 8.125rem;
text-decoration: none;
}
@media only screen and (min-width: 620px) {
.fund-us .button {
float: right;
margin-top: 0;
margin-right: 0;
margin-bottom: 28px;
margin-bottom: 1.75rem;
}
}
</style>
</head>
<!-- Labs common -->
<body class="labs labs-projects">
<nav class="site-navigation">
<ul class="site-navigation--list">
<li class="home-link">
<a href="https://ind.ie/">Home</a>
</li>
<li class="about-link">
<a href="https://ind.ie/about">About</a>
</li>
<li class="labs-link">
<a href="https://ind.ie/labs">Labs</a>
</li>
<li class="forum-link">
<a href="https://forum.ind.ie">Forum</a>
</li>
<li class="videos-link">
<a href="https://ind.ie/videos">Videos</a>
</li>
<li class="news-link">
<a href="https://ind.ie/blog">News</a>
</li>
<li class="fund-link">
<a href="https://ind.ie/fund">Fund</a>
</li>
</ul>
</nav>
<nav class="sub-navigation labs-navigation">
<ul class="sub-navigation--list">
<li class="projects-link"><a href="">Projects</a></li>
<li class="blog-link"><a href="blog/">Blog</a></li>
</ul>
</nav>
<!-- Page specific -->
<div class='main' role='main'>
<header class='set-header'>
<h1><a href='./'><img id='set-logo' src='images/set-logo.svg' alt='Set logo'></a></h1>
</header>
\ No newline at end of file
coffee/views/partials/common-header.html → coffee/views/components/simple-header.html
View file @ d5d20e6a
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<h1>Header (partial)</h1>
<hr>
coffee/views/main.html
View file @ d5d20e6a
......@@ -442,6 +442,7 @@
<h2>Other examples</h2>
<ul>
<li><a href='./simple'>A comparison of Set, Handlebars, and Plates with static data.</a></li>
<li><a href='./partials'>Partials demo</a></li>
<li><a href='./posts'>mastodon.ar.al global timeline example</a> (<a href='./posts.html'>template</a>, <a href='./posts-real-data.html'>template with real data</a>)</li>
<li><a href='./posts-client-side-updates'>mastodon.social global timeline with client‐side updates</a> using the same template.</li>
<li><a href='./profile'>mastodon.ar.al global timeline example with profiling</a> <small>Check the console for timings.</small></li>
......
coffee/views/partials.html
View file @ d5d20e6a
<!-- include partials/common-header.html -->
<!-- include components/common-header.html -->
<div class='main' role='main'>
<h2>Main file</h2>
<!-- include components/simple-header.html -->
<p>The header and footer are included as partials.</p>
<h2>Partials Demo</h2>
<!-- include partials/simple-footer.html -->
<p>Partials enable you to construct your template using components. The header and footer in this example are included as partials. Partials are specified using standard HTML comments in the following format:</p>
<pre><code>&lt;!-- include relative/path/from/views/folder/to/the/partial.html --&gt;</code></pre>
<p>(Note: the component does not have to be HTML. It could be JS, CSS, etc.)</p>
<p>Partials take part in the template render. For example, the contents of the <code>title</code> tag on this page are specified using the <code>data-set-text</code> attribute on the tag.</p>
<!-- include components/simple-footer.html -->
</div>
</body>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Like this? Fund us! Your patronage helps keep us independent and going.