Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

💄Update boilerplate generator theme #2047

Merged
merged 8 commits into from
May 13, 2019
Merged

💄Update boilerplate generator theme #2047

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
6c9b25a
💬 Change order of items
lluerich May 8, 2019
bbc5473
💄 Update styles and UI
lluerich May 9, 2019
e2041e8
🐛 Fix dropdown bug on touch devices
lluerich May 9, 2019
682f056
💄 Update stylesheet to match other code-snippets
lluerich May 9, 2019
b50a692
♻️ Move changes to boilerplate specific stylesheet
lluerich May 10, 2019
9f6c3be
💄 Change behaviour of dropdown
lluerich May 13, 2019
c4154f9
💄 Increase line-height and font-size
lluerich May 13, 2019
9b07987
💄 Add indicator state to dropdown caret
lluerich May 13, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion boilerplate/build.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ function initConfig() {
formats: require('./data/formats.json'),
templates: templates.find('./templates/files'),
highlightTheme:
io.readFile(path.join(__dirname, '../node_modules/highlight.js/styles/monokai.css')),
io.readFile(path.join(__dirname, './templates/styles/code-snippet.scss')),
};
// assign default template
let defaultTemplate;
Expand Down
8 changes: 4 additions & 4 deletions boilerplate/data/formats.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,12 @@
"id": "stories",
"name": "Stories"
},
{
"id": "email",
"name": "Email"
},
{
"id": "ads",
"name": "Ads"
},
{
"id": "email",
"name": "Email"
}
]
58 changes: 36 additions & 22 deletions boilerplate/templates/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,28 +138,42 @@
<section class="config">
<h3>Select Format</h3>
<p>What do you want to build with AMP?</p>
<ul class="ap-m-format-toggle">
{{#formats}}
<li class="ap-m-format-toggle-format">
<div class="ap-m-format-toggle-link ap-m-format-toggle-link-{{id}} {{^default}}inactive{{/default}} {{#default}}active{{/default}}"
[class]="'ap-m-format-toggle-link ap-m-format-toggle-link-{{id}} ' + (config.format == '{{id}}' ? 'active' : 'inactive')"
on="tap:AMP.setState({
config: {
format: '{{id}}',
changed: true
}
})"
role="button"
tabindex="0">
<div class="ap-a-ico">
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-{{id}}"></use>
</svg>
</div>AMP
<br>{{name}}</div>
</li>
{{/formats}}
</ul>
<div class="ap-m-format-toggle" [class]="'ap-m-format-toggle ' + (config.open ? 'open' : '')">
<button class="ap-m-format-toggle-selected ap-m-format-toggle-link-websites" [class]="'ap-m-format-toggle-selected ap-m-format-toggle-link-' + config.format" on="tap:AMP.setState({config: {open: !config.open}})">
<span class="ap-a-ico">
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-websites" [hidden]="config.format != 'websites'"></use>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-stories" hidden [hidden]="config.format != 'stories'"></use>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-ads" hidden [hidden]="config.format != 'ads'"></use>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-email" hidden [hidden]="config.format != 'email'"></use>
</svg>
</span>
<span [text]="config.format">websites</span>
<span class="ap-a-ico ap-m-format-toggle-angle">
<svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"></use></svg>
</span>
</button>
<div class="ap-m-format-toggle-formats">
{{#formats}}
<a class="ap-m-format-toggle-link ap-m-format-toggle-link-{{id}} {{^default}}inactive{{/default}} {{#default}}active{{/default}}"
[class]="'ap-m-format-toggle-link ap-m-format-toggle-link-{{id}} ' + (config.format == '{{id}}' ? 'active' : 'inactive')"
on="tap:AMP.setState({
config: {
format: '{{id}}',
changed: true,
open: false
}
})"
role="button"
tabindex="0">
<span class="ap-a-ico">
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-{{id}}"></use>
</svg>
</span>{{id}}</a>
{{/formats}}
</div>
</div>

<div [hidden]="config.format == 'email'">
<h3>Select Features</h3>
Expand Down
80 changes: 80 additions & 0 deletions boilerplate/templates/styles/code-snippet.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
/*
Monokai style
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think a better place for this would be /frontend/scss/.

Copy link
Collaborator

@sebastianbenz sebastianbenz May 9, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would indeed be a better place, but I forgot that the boilerplate generator uses it;s own build. So, please ignore and leave things as they are :-).

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So should I revert the changes completely or just leave them in the state I submitted yesterday? :-)

*/

.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: #272822; color: #ddd;
}

.hljs-tag {
color: #f8f8f2;
}

.hljs-number {
color: #ae81ff;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-strong,
.hljs-name {
color: #f15a5a;
}

.hljs-code,
.hljs-attribute {
color: #66d9ef;
}

.hljs-class .hljs-title {
color: #ffffff;
}

.hljs-symbol,
.hljs-regexp,
.hljs-link {
color: #bf79db;
}

.hljs-string {
color: #e6db74;
}

.hljs-attr,
.hljs-bullet,
.hljs-subst,
.hljs-title,
.hljs-section,
.hljs-emphasis,
.hljs-type,
.hljs-built_in,
.hljs-builtin-name,
.hljs-selector-pseudo,
.hljs-addition,
.hljs-variable,
.hljs-template-tag,
.hljs-template-variable {
color: #a6e22e;
}

.hljs-comment,
.hljs-quote,
.hljs-deletion,
.hljs-meta {
color: #75715e;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-doctag,
.hljs-title,
.hljs-section,
.hljs-type,
.hljs-selector-id {
font-weight: normal;
}
42 changes: 42 additions & 0 deletions boilerplate/templates/styles/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,52 @@
pre {
max-height: 100%;
}
code {
@include txt-mono;
}
}

.#{molecule('format-toggle')} {
margin-left: 0;
max-width: 240px;

.#{molecule('format-toggle')}-angle {
transition: all 0.2s ease;
transition-delay: 0.05s;
}

&.open .#{molecule('format-toggle')}-angle {
transform: rotate(-180deg);
}

&-link {
&.active {
display: none;
}
}

&-link,
&-selected {
line-height: 2rem;
font-size: 16px;
}

&-formats {
.#{molecule('format-toggle')}-selected:focus + &,
.#{molecule('format-toggle')}-selected:hover + &,
&:focus-within,
&:hover {
pointer-events: none;
opacity: 0;
transform: translateY(-20px);
}

.#{molecule('format-toggle')}.open & {
pointer-events: auto;
opacity: 1;
transform: translateY(0);
}
}
}

main {
Expand Down
3 changes: 3 additions & 0 deletions frontend/scss/components/molecules/format-toggle.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,9 @@
}

&-selected {
.amp-mode-touch & {
position: relative;
}
border: 0;

&:focus, &:hover {
Expand Down