From f59aaf2689ba2f4a590325aaaaf2491d008c3611 Mon Sep 17 00:00:00 2001 From: "Rico Sta. Cruz" Date: Thu, 31 Aug 2017 17:22:58 +0800 Subject: [PATCH] Add search footer --- _includes/2017/search-footer.html | 11 +++ _includes/2017/search-form.html | 18 +++++ _layouts/2017/home.html | 8 +- _layouts/2017/not_found.html | 8 +- _layouts/2017/sheet.html | 3 + _sass/2017/components/home-button.scss | 35 ++++++++ _sass/2017/components/pre-footer.scss | 19 +++++ _sass/2017/components/related-posts.scss | 14 ++-- _sass/2017/components/search-box.scss | 29 +++++++ _sass/2017/components/search-footer.scss | 30 +++++++ _sass/2017/markdown/code.scss | 2 +- _sass/2017/markdown/table.scss | 7 +- _sass/2017/style.scss | 4 + _sass/2017/utils/section-with-container.scss | 8 ++ _sass/2017/variables.scss | 2 +- capybara.md | 49 +++++++----- pug.md | 84 +++++++++++++++++--- 17 files changed, 274 insertions(+), 57 deletions(-) create mode 100644 _includes/2017/search-footer.html create mode 100644 _includes/2017/search-form.html create mode 100644 _sass/2017/components/home-button.scss create mode 100644 _sass/2017/components/pre-footer.scss create mode 100644 _sass/2017/components/search-footer.scss create mode 100644 _sass/2017/utils/section-with-container.scss diff --git a/_includes/2017/search-footer.html b/_includes/2017/search-footer.html new file mode 100644 index 000000000..24d165cd6 --- /dev/null +++ b/_includes/2017/search-footer.html @@ -0,0 +1,11 @@ + diff --git a/_includes/2017/search-form.html b/_includes/2017/search-form.html new file mode 100644 index 000000000..e2ebf70db --- /dev/null +++ b/_includes/2017/search-form.html @@ -0,0 +1,18 @@ +
+ +
diff --git a/_layouts/2017/home.html b/_layouts/2017/home.html index 5b5c728ed..8778eb377 100644 --- a/_layouts/2017/home.html +++ b/_layouts/2017/home.html @@ -24,13 +24,7 @@ type: website Hey! I'm @rstacruz and this is a modest collection of cheatsheets I've written.

-
- -
+ {% include 2017/search-form.html live=true %}
diff --git a/_layouts/2017/not_found.html b/_layouts/2017/not_found.html index 9b1c0b6ae..5495f6b60 100644 --- a/_layouts/2017/not_found.html +++ b/_layouts/2017/not_found.html @@ -14,13 +14,7 @@ permalink: /404.html Sorry, we don't have a cheatsheet for this yet. Try searching!

-
- -
+ {% include 2017/search-form.html %}

Back to home diff --git a/_layouts/2017/sheet.html b/_layouts/2017/sheet.html index a224db75e..7028370cb 100644 --- a/_layouts/2017/sheet.html +++ b/_layouts/2017/sheet.html @@ -26,5 +26,8 @@ type: article

+
+ +{% include 2017/search-footer.html %} {% include 2017/related-posts.html page=page %} {% include 2017/foot.html %} diff --git a/_sass/2017/components/home-button.scss b/_sass/2017/components/home-button.scss new file mode 100644 index 000000000..4fe5aa966 --- /dev/null +++ b/_sass/2017/components/home-button.scss @@ -0,0 +1,35 @@ +/* + * Home button inside `search-footer` + */ + +.home-button { + & { + display: inline-block; + box-shadow: inset 0 0 0 1px $dark-line-color; + border-radius: 50%; + } + + &, + &:visited { + color: $base-mute; + } + + &:hover, + &:focus { + background: $base-a; + color: white; + } + + & > i::before { + @include ion-icon('ios-home-outline'); + font-size: 24px; + height: 48px; + line-height: 48px; + width: 48px; + text-align: center; + } + + &:hover > i::before { + @extend %ion-icon-ios-home; + } +} diff --git a/_sass/2017/components/pre-footer.scss b/_sass/2017/components/pre-footer.scss new file mode 100644 index 000000000..02bc8d22e --- /dev/null +++ b/_sass/2017/components/pre-footer.scss @@ -0,0 +1,19 @@ +/* + * Spacer before footer + */ + +.pre-footer { + & { + padding: 32px; + padding-top: 24px; + padding-bottom: 48px; + text-align: center; + } + + & > .icon::before { + @include ion-icon('ios-flash'); + color: $base-mute; + font-size: 32px; + opacity: 0.25; + } +} diff --git a/_sass/2017/components/related-posts.scss b/_sass/2017/components/related-posts.scss index 4d9d2dc74..b828fabd2 100644 --- a/_sass/2017/components/related-posts.scss +++ b/_sass/2017/components/related-posts.scss @@ -1,6 +1,10 @@ +/* + * Related posts + */ + .related-posts { & { - @include gutter(margin-top, $multiplier: 4); + @include section-with-container; padding-top: 16px; padding-bottom: 16px; background: $gray-bg; @@ -10,13 +14,6 @@ padding-top: 64px; padding-bottom: 64px; } - - & > .container { - @include gutter(padding-left); - @include gutter(padding-right); - max-width: $area-width; - margin: 0 auto; - } } .related-post-list { @@ -45,5 +42,4 @@ flex: 1 1 40%; } } - } diff --git a/_sass/2017/components/search-box.scss b/_sass/2017/components/search-box.scss index 6973f003c..24797f878 100644 --- a/_sass/2017/components/search-box.scss +++ b/_sass/2017/components/search-box.scss @@ -52,3 +52,32 @@ text-align: center; } } + +/* + * Small + */ + +.search-box.-small { + & { + height: 48px; + } + + & > input { + padding: 8px; + height: 48px; + padding-left: 0; + } + + & > .prefix, + & > .sep, + & > input { + @include font-size(1); + } + + &::before { + flex: 0 0 48px; + width: 48px; + line-height: 48px; + font-size: 24px; + } +} diff --git a/_sass/2017/components/search-footer.scss b/_sass/2017/components/search-footer.scss new file mode 100644 index 000000000..74a22c31c --- /dev/null +++ b/_sass/2017/components/search-footer.scss @@ -0,0 +1,30 @@ +/* + * Search bar around the footer + */ + +.search-footer { + & { + @include section-with-container; + padding-top: 16px; + padding-bottom: 16px; + background: $gray-bg; + border-top: solid 1px $dark-line-color; + border-bottom: solid 1px $dark-line-color; + } +} + +.search-footer-section { + & { + display: flex; + } + + & > .search { + flex: 0 1 640px; + } + + & > .links { + @include gutter(padding-left); + flex: 0 1 auto; + margin-left: auto; + } +} diff --git a/_sass/2017/markdown/code.scss b/_sass/2017/markdown/code.scss index 3e4862338..b8e69c553 100644 --- a/_sass/2017/markdown/code.scss +++ b/_sass/2017/markdown/code.scss @@ -1,6 +1,6 @@ .MarkdownBody code { color: $gray-text; - font-size: 0.86em; + font-size: $code-size; } .MarkdownBody pre, diff --git a/_sass/2017/markdown/table.scss b/_sass/2017/markdown/table.scss index a69c967d0..0e715c0e8 100644 --- a/_sass/2017/markdown/table.scss +++ b/_sass/2017/markdown/table.scss @@ -40,8 +40,11 @@ white-space: nowrap; } + & td > code { + font-size: $code-size; + } + & td:first-child > code { - font-size: 0.86em; color: #35a; } @@ -52,8 +55,8 @@ } & td:first-child > code ~ em { + @include font-size(-1); font-style: normal; - font-size: 0.86em; color: $gray-text; } diff --git a/_sass/2017/style.scss b/_sass/2017/style.scss index 1dee5536c..b98af4486 100644 --- a/_sass/2017/style.scss +++ b/_sass/2017/style.scss @@ -6,6 +6,7 @@ @import './utils/font-size'; @import './utils/gutter'; @import './utils/heading-style'; +@import './utils/section-with-container'; @include ion-font; @import './base/base'; @import './markdown/code'; @@ -18,11 +19,13 @@ @import './components/h3-section'; @import './components/h3-section-list'; @import './components/headline-ad'; +@import './components/home-button'; @import './components/main-heading'; @import './components/missing-message'; @import './components/notice-box'; @import './components/page-actions'; @import './components/pages-list'; +@import './components/pre-footer'; @import './components/push-button'; @import './components/related-posts'; @import './components/related-posts-callout'; @@ -30,6 +33,7 @@ @import './components/related-posts-section'; @import './components/related-post-item'; @import './components/search-box'; +@import './components/search-footer'; @import './components/side-ad'; @import './components/site-header'; @import './components/top-nav'; diff --git a/_sass/2017/utils/section-with-container.scss b/_sass/2017/utils/section-with-container.scss new file mode 100644 index 000000000..6ad707d95 --- /dev/null +++ b/_sass/2017/utils/section-with-container.scss @@ -0,0 +1,8 @@ +@mixin section-with-container { + & > .container { + @include gutter(padding-left); + @include gutter(padding-right); + max-width: $area-width; + margin: 0 auto; + } +} diff --git a/_sass/2017/variables.scss b/_sass/2017/variables.scss index bb2067efd..0998831c6 100644 --- a/_sass/2017/variables.scss +++ b/_sass/2017/variables.scss @@ -5,7 +5,7 @@ $gut-small: 16px; // max 480px width $gut: 16px; $column: 400px; - +$code-size: 0.92em; $area-width: $column * 3 + 32px; /* diff --git a/capybara.md b/capybara.md index 9f2bf298d..722c575a4 100644 --- a/capybara.md +++ b/capybara.md @@ -55,26 +55,33 @@ end ### Predicates -| Positive | Negative | -| --- | --- | -| `page.has_content?` | `page.has_no_content?` | | -| --- | --- | -| `page.has_css?` _(selector)_ | `page.has_no_css?`_(selector)_ | | -| --- | --- | -| `page.has_xpath?`_(path)_ | `page.has_no_xpath?`_(path)_ | | -| --- | --- | -| `page.has_link?`_(selector)_ | `page.has_no_link?`_(selector)_ | | -| --- | --- | -| `page.has_button?`_(selector)_ | `page.has_no_button?`_(selector)_ | | -| --- | --- | -| `page.has_field?`_(selector)_ | `page.has_no_field?`_(selector)_ | | -| --- | --- | -| `page.has_checked_field?`_(selector)_ | `page.has_unchecked_field?`_(selector)_ | | -| --- | --- | -| `page.has_table?`_(selector)_ | `page.has_no_table?`_(selector)_ | | -| --- | --- | -| `page.has_select?`_(selector)_ | `page.has_no_select?`_(selector)_ | | -{: .-headers} +```ruby +page.has_css?('.button') +expect(page).to have_css('.button') +page.should have_css('.button') +``` +{: .-setup} + +| Positive | Negative | +| --- | --- | +| `has_content?` | `has_no_content?` | +| --- | --- | +| `has_css?` _(selector)_ | `has_no_css?` | +| --- | --- | +| `has_xpath?` _(path)_ | `has_no_xpath?` | +| --- | --- | +| `has_link?` _(selector)_ | `has_no_link?` | +| --- | --- | +| `has_button?` _(selector)_ | `has_no_button?` | +| --- | --- | +| `has_field?` _(selector)_ | `has_no_field?` | +| --- | --- | +| `has_checked_field?` _(selector)_ | `has_unchecked_field?` | +| --- | --- | +| `has_table?` _(selector)_ | `has_no_table?` | +| --- | --- | +| `has_select?` _(selector)_ | `has_no_select?` | +{: .-headers.-left-align} In Rspec, these also map to matchers like `page.should have_content`. @@ -94,7 +101,7 @@ expect(page).to have_button('//[@id="submit"]') The `selector` arguments can be text, CSS selector, or XPath expression. -### RSpec Assertions +### RSpec assertions ```ruby page.has_button?('Save') diff --git a/pug.md b/pug.md index c5247f652..7f65be6eb 100644 --- a/pug.md +++ b/pug.md @@ -3,7 +3,7 @@ title: Pug category: JavaScript libraries layout: 2017/sheet prism_languages: [jade] -updated: 2017-08-30 +updated: 2017-08-31 weight: -3 --- @@ -11,6 +11,7 @@ weight: -3 {: .-three-column} ### Basic document +{: .-prime} ```jade doctype html @@ -19,12 +20,48 @@ html(lang='en') | This is some text, hello there, = name - if showControls - button.red Edit this page - - javascript() ``` +### Elements + +```jade +div + | Just a div +``` + +```jade +.search + | A div, with class 'search' +``` + +```jade +h1 A heading with text +``` + +```jade +h1= page.title +``` + +```jade +div.class +div.class1.class2 +h1.header +``` + +### Attributes + +```jade +input(type='text' name='q' autofocus) +``` + +```jade +- var authenticated = true +body(class=authenticated ? 'authed' : 'anon') +``` + +See: [Attributes](https://pugjs.org/language/attributes.html) + ### Comments ```jade @@ -32,9 +69,17 @@ html(lang='en') ``` ```jade --// This is a silent comment +//- This is a silent comment ``` +```jade +//- + Nesting inside a comment creates + a comment block +``` + +See: [Comments](https://pugjs.org/language/attributes.html) + ### Iteration ```jade @@ -46,7 +91,7 @@ ul ### Layouts ```jade --// page.pug +//- page.pug extends layout.pug block title @@ -57,7 +102,7 @@ block content ``` ```jade --// layout.pug +//- layout.pug title block title body @@ -74,6 +119,8 @@ include ./includes/head.pug include:markdown article.md ``` +See: [Includes](https://pugjs.org/language/includes.html) + ### Multiline text ```jade @@ -91,6 +138,18 @@ script. ``` {: data-line="1"} +### Conditionals + +```jade +if authenticated + a(href='/logout') Sign out +else + a(href='/login') Sign in +``` +{: data-line="1,3"} + +See: [Conditionals](https://pugjs.org/language/conditionals.html) + ## Mixins {: .-three-column} @@ -107,7 +166,10 @@ mixin list +list ``` -### Mixin with arguments +Mixins allow you to create reusable code blocks. +See: [Mixins](https://pugjs.org/language/mixins.html) + +### Mixin attributes ```jade mixin pet(name) @@ -119,7 +181,9 @@ mixin pet(name) +pet('cat') ``` -### Mixin with content +See: [Mixin attributes](https://pugjs.org/language/mixins.html#mixin-attributes) + +### Mixin blocks ```jade mixin article(title) @@ -133,3 +197,5 @@ mixin article(title) +article('hello there') p Content goes here ``` + +See: [Mixin blocks](https://pugjs.org/language/mixins.html#mixin-blocks)