Skip to content
This repository has been archived by the owner on Mar 13, 2018. It is now read-only.

Commit

Permalink
Support @mixin + link to resource
Browse files Browse the repository at this point in the history
  • Loading branch information
@ebidel
ebidel committed Dec 13, 2014
1 parent 09cbecb commit 57121f4
Show file tree
Hide file tree
Showing 3 changed files with 63 additions and 8 deletions.
27 changes: 26 additions & 1 deletion elements/core-doc-page.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@

:host {
display: block;
font-family: Roboto;
}

#info > * {
Expand All @@ -34,7 +35,11 @@ h1 {
color: #E91E63;
font-size: 52px;
line-height: 60px;
font-weight: inherit;
font-weight: 300;
}

h3 {
font-weight: 500;
}

.box {
Expand Down Expand Up @@ -68,6 +73,26 @@ h1 {
font-weight: 500;
}

.inheritance {
border-bottom: 1px solid #eee;
border-top: 1px solid #eee;
padding: 16px 0;
}

.inheritance h3 {
margin: 0 10px 0 0;
}

.inheritance .top > * {
margin-right: 7px;
}

.top b,
.top strong {
text-transform: uppercase;
font-size: 14px;
}

.top pre {
background-color: rgb(250, 250, 250);
padding: 16px;
Expand Down
38 changes: 34 additions & 4 deletions elements/core-doc-page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@
<link rel="import" href="../../prettify-element/prettify-import.html">
<link rel="import" href="../../context-free-parser/context-free-parser.html">

<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500,700|Source+Code+Pro' rel='stylesheet' type='text/css'>

This comment has been minimized.

Sign in to view

Copy link
@addyosmani

addyosmani Dec 15, 2014

Contributor

For de-duping, should this be an import similar to the way we handle Roboto or would that be overkill?

This comment has been minimized.

Sign in to view

Copy link
@ebidel

ebidel Dec 15, 2014

Author Contributor

It's unlikely someone will include core-doc-page in their own stuff. It's meant to be used alone.
I hear your point though. Should we just stick this stuff in index.html?

This comment has been minimized.

Sign in to view

Copy link
@ckortekaas

ckortekaas Jan 22, 2015

Should this be //fonts.googleapis.com without the http:// prefix? Otherwise if it is loaded in https pages it will have a browser error.

<!--
Displays formatted source documentation scraped from input urls.
Expand Down Expand Up @@ -43,10 +45,38 @@ <h1>{{data.name}}</h1>
<span layout horizontal center hidden?="{{!data.version}}"><core-icon icon="info-outline"></core-icon>Version: {{data.version}}</span>
</p>

<template if="{{data.extends}}">
<section class="top">
<h3 id="{{data.name}}.extends">Extends: <a href="#{{data.extends}}">{{data.extends}}</a></h3>
</section>
<template bind="{{data as data}}" if="{{data.extends || data.mixins}}">
<div class="inheritance">
<template if="{{data.extends}}">
<section class="top extends" layout horizontal center>
<h3 id="{{data.name}}.extends">Extends:</h3>

This comment has been minimized.

Sign in to view

Copy link
@addyosmani

addyosmani Dec 15, 2014

Contributor

Your template condition above checks for data.extends and falls back to data.mixins. Here you're reading in {{data.name}}.extends. Is there a need to template if {{data.name}} at all, or is there always guaranteed to be a name on any data supplied?.

This comment has been minimized.

Sign in to view

Copy link
@ebidel

ebidel Dec 15, 2014

Author Contributor

The outer template is to bypass the entire block if you dont have mixins/extends, but <template bind="{{data as data}}"> is for scoping. Then, the two blocks have their own conditional (<template if="{{data.extends}}">, <template if="{{data.mixins}}"> ) to deal with them separately.

There will always be a name if users constructed the docs correctly.
<template repeat="{{e, i in data.extends}}">
<div>
<template if="{{e.url}}">
<a href="{{e.url}}">{{e.name}}</a>
</template>
<template if="{{!e.url}}"><a href="#{{e.name}}">{{e.name}}</a></template>
<span hidden?="{{i == data.extends.length - 1}}">,</span>
</div>
</template>
</section>
</template>

<template if="{{data.mixins}}">

This comment has been minimized.

Sign in to view

Copy link
@addyosmani

addyosmani Dec 15, 2014

Contributor

I had similar questions about how you're handling marking up the mixin. Could you elaborate on Arthur's Q below?

This comment has been minimized.

Sign in to view

Copy link
@ebidel

ebidel Dec 15, 2014

Author Contributor

What is the Q? An example is in the PR's comment.
<section class="top mixins" layout horizontal center>
<h3 id="{{data.name}}.mixins">Mixins:</h3>
<template repeat="{{e, i in data.mixins}}">
<div>
<template if="{{e.url}}">
<a href="{{e.url ? e.url : e.name}}">{{e.name}}</a>
</template>
<template if="{{!e.url}}"><span>{{e.name}}</span></template>
<span hidden?="{{i == data.mixins.length - 1}}">,</span>
</div>
</template>
</section>
</template>
</div>
</template>

<template if="{{data.description}}">
Expand Down
6 changes: 3 additions & 3 deletions elements/core-doc-toc.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,9 @@ core-header-panel {
top: 0;
left: 0;
height: 100%;
width: 100%;
width: 100%;
}

core-toolbar {
background-color: #eeeeee;
core-toolbar {
background-color: #eeeeee;
}

0 comments on commit 57121f4

Please sign in to comment.