033c8e6240
- Now linking to minified prism js - Don't use prism's ugly line feed markers - Make buttons use Material icons instead of the '+' character - Prefix all styles for the button demo with demo-button, to avoid collisions - Make preview boxes width 100%, to avoid jumping to different sizes depending on code content
45 lines
1.6 KiB
HTML
45 lines
1.6 KiB
HTML
{% extends 'layout.html' %}
|
|
|
|
{% block content %}
|
|
<link href="{{page.include_prefix}}/assets/components.css" rel="stylesheet">
|
|
<script src="{{page.include_prefix}}/assets/components.js"></script>
|
|
<link rel="stylesheet" href="/components/demos.css">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.css" rel="stylesheet">
|
|
|
|
<aside class="mdl-components">
|
|
<div class="scroll">
|
|
{% for component in page.components %}
|
|
<a href="#{{ component.name }}" class="mdl-components__link mdl-component {{ component.name }} {% if loop.first %}active{%- endif %}">
|
|
<img src="/assets/comp_{{ component.name }}.png">
|
|
<span class="center">{{ component.title }}</span>
|
|
</a>
|
|
{%- endfor %}
|
|
</div>
|
|
</aside>
|
|
|
|
{% for component in page.components -%}
|
|
{% set demo_css = "../../src/" + component.name + "/demo.css" %}
|
|
<style>
|
|
{% include demo_css ignore missing %}
|
|
</style>
|
|
{% set demo_js = "../../src/" + component.name + "/demo.js" %}
|
|
<script>
|
|
{% include demo_js ignore missing %}
|
|
</script>
|
|
<section class="mdl-component {{ component.name }} mdl-grid mdl-cell mdl-cell--12-col {% if loop.first %}active{%- endif %}">
|
|
<div class="mdl-cell mdl-cell--12-col">
|
|
<h1>{{ component.title }}</h1>
|
|
<p>{{ component.description }}</p>
|
|
<br><br>
|
|
{% set demo = "../../src/" + component.name + "/demo.html" %}
|
|
{% include demo ignore missing %}
|
|
{% set doc = "../../dist/components/" + component.name + "/index.html" %}
|
|
{% include doc ignore missing %}
|
|
</div>
|
|
</section>
|
|
{%- endfor %}
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.js"></script>
|
|
|
|
{% endblock %}
|