ThirdMirrors
/
cheatsheets
mirror of https://gitee.com/Hawkin99/cheatsheets.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add search footer

This commit is contained in:
Rico Sta. Cruz 2017-08-31 17:22:58 +08:00
parent 32c3deedcb
commit f59aaf2689
No known key found for this signature in database
GPG Key ID: CAAD38AE2962619A
17 changed files with 274 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
_includes/2017/search-footer.html Normal file
View File

@ -0,0 +1,11 @@
<footer class='search-footer'>
<div class='container'>
<div class='search-footer-section'>
<div class='search'>
{% include 2017/search-form.html class="-small" %}
</div>
<div class='links'>
<a class='home-button' href='{{ base }}'><i></i></a>
</div>
</div>
</footer>

18
_includes/2017/search-form.html Normal file
View File

@ -0,0 +1,18 @@
<form
{% if include.live %}data-js-search-form{% endif %}
class='search'action='{{ base }}' method='get'>
<label class='search-box {{ include.class }}'>
{% comment %}
<span class='prefix'>devhints.io</span>
<span class='sep'>/</span>
{% endcomment %}
<input name='q'
type='text'
{% if include.live %}
autofocus data-js-search-input
placeholder='Search...'
{% else %}
placeholder='Search {{ site.pages | size }}+ cheatsheets'
{% endif %}>
</label>
</form>

8
_layouts/2017/home.html
View File

@ -24,13 +24,7 @@ type: website
Hey! I'm <a href='https://ricostacruz.com'>@rstacruz</a> and this is a Hey! I'm <a href='https://ricostacruz.com'>@rstacruz</a> and this is a
modest collection of cheatsheets I've written. modest collection of cheatsheets I've written.
</p> </p>
<form data-js-search-form class='search' action='.' method='get'> {% include 2017/search-form.html live=true %}
<label class='search-box'>
<!-- <span class='prefix'>devhints.io</span> -->
<!-- <span class='sep'>/</span> -->
<input name='q' type='text' placeholder='Search...' autofocus data-js-search-input>
</label>
</form>
</div> </div>
<div class='pages-list'> <div class='pages-list'>

8
_layouts/2017/not_found.html
View File

@ -14,13 +14,7 @@ permalink: /404.html
Sorry, we don't have a cheatsheet for this yet. Try searching! Sorry, we don't have a cheatsheet for this yet. Try searching!
</p> </p>
<form class='search' action='.' method='get'> {% include 2017/search-form.html %}
<label class='search-box'>
<!-- <span class='prefix'>devhints.io</span> -->
<!-- <span class='sep'>/</span> -->
<input name='q' type='text' placeholder='Search...' autofocus data-js-search-input>
</label>
</form>
<p class='action'> <p class='action'>
<a class='push-button' href='./'>Back to home</a> <a class='push-button' href='./'>Back to home</a>

3
_layouts/2017/sheet.html
View File

@ -26,5 +26,8 @@ type: article
</main> </main>
</div> </div>
<div class='pre-footer'><i class='icon'></i></div>
{% include 2017/search-footer.html %}
{% include 2017/related-posts.html page=page %} {% include 2017/related-posts.html page=page %}
{% include 2017/foot.html %} {% include 2017/foot.html %}

35
_sass/2017/components/home-button.scss Normal file
View File

@ -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;
}
}

19
_sass/2017/components/pre-footer.scss Normal file
View File

@ -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;
}
}

14
_sass/2017/components/related-posts.scss
View File

@ -1,6 +1,10 @@
/*
* Related posts
*/
.related-posts { .related-posts {
& { & {
@include gutter(margin-top, $multiplier: 4); @include section-with-container;
padding-top: 16px; padding-top: 16px;
padding-bottom: 16px; padding-bottom: 16px;
background: $gray-bg; background: $gray-bg;
@ -10,13 +14,6 @@
padding-top: 64px; padding-top: 64px;
padding-bottom: 64px; padding-bottom: 64px;
} }
& > .container {
@include gutter(padding-left);
@include gutter(padding-right);
max-width: $area-width;
margin: 0 auto;
}
} }
.related-post-list { .related-post-list {
@ -45,5 +42,4 @@
flex: 1 1 40%; flex: 1 1 40%;
} }
} }
} }

29
_sass/2017/components/search-box.scss
View File

@ -52,3 +52,32 @@
text-align: center; 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;
}
}

30
_sass/2017/components/search-footer.scss Normal file
View File

@ -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;
}
}

2
_sass/2017/markdown/code.scss
View File

@ -1,6 +1,6 @@
.MarkdownBody code { .MarkdownBody code {
color: $gray-text; color: $gray-text;
font-size: 0.86em; font-size: $code-size;
} }
.MarkdownBody pre, .MarkdownBody pre,

7
_sass/2017/markdown/table.scss
View File

@ -40,8 +40,11 @@
white-space: nowrap; white-space: nowrap;
} }
& td > code {
font-size: $code-size;
}
& td:first-child > code { & td:first-child > code {
font-size: 0.86em;
color: #35a; color: #35a;
} }
@ -52,8 +55,8 @@
} }
& td:first-child > code ~ em { & td:first-child > code ~ em {
@include font-size(-1);
font-style: normal; font-style: normal;
font-size: 0.86em;
color: $gray-text; color: $gray-text;
} }

4
_sass/2017/style.scss
View File

@ -6,6 +6,7 @@
@import './utils/font-size'; @import './utils/font-size';
@import './utils/gutter'; @import './utils/gutter';
@import './utils/heading-style'; @import './utils/heading-style';
@import './utils/section-with-container';
@include ion-font; @include ion-font;
@import './base/base'; @import './base/base';
@import './markdown/code'; @import './markdown/code';
@ -18,11 +19,13 @@
@import './components/h3-section'; @import './components/h3-section';
@import './components/h3-section-list'; @import './components/h3-section-list';
@import './components/headline-ad'; @import './components/headline-ad';
@import './components/home-button';
@import './components/main-heading'; @import './components/main-heading';
@import './components/missing-message'; @import './components/missing-message';
@import './components/notice-box'; @import './components/notice-box';
@import './components/page-actions'; @import './components/page-actions';
@import './components/pages-list'; @import './components/pages-list';
@import './components/pre-footer';
@import './components/push-button'; @import './components/push-button';
@import './components/related-posts'; @import './components/related-posts';
@import './components/related-posts-callout'; @import './components/related-posts-callout';
@ -30,6 +33,7 @@
@import './components/related-posts-section'; @import './components/related-posts-section';
@import './components/related-post-item'; @import './components/related-post-item';
@import './components/search-box'; @import './components/search-box';
@import './components/search-footer';
@import './components/side-ad'; @import './components/side-ad';
@import './components/site-header'; @import './components/site-header';
@import './components/top-nav'; @import './components/top-nav';

8
_sass/2017/utils/section-with-container.scss Normal file
View File

@ -0,0 +1,8 @@
@mixin section-with-container {
& > .container {
@include gutter(padding-left);
@include gutter(padding-right);
max-width: $area-width;
margin: 0 auto;
}
}

2
_sass/2017/variables.scss
View File

@ -5,7 +5,7 @@
$gut-small: 16px; // max 480px width $gut-small: 16px; // max 480px width
$gut: 16px; $gut: 16px;
$column: 400px; $column: 400px;
$code-size: 0.92em;
$area-width: $column * 3 + 32px; $area-width: $column * 3 + 32px;
/* /*

49
capybara.md
View File

@ -55,26 +55,33 @@ end
### Predicates ### Predicates
| Positive | Negative | ```ruby
| --- | --- | page.has_css?('.button')
| `page.has_content?` | `page.has_no_content?` | | expect(page).to have_css('.button')
| --- | --- | page.should have_css('.button')
| `page.has_css?` _(selector)_ | `page.has_no_css?`_(selector)_ | | ```
| --- | --- | {: .-setup}
| `page.has_xpath?`_(path)_ | `page.has_no_xpath?`_(path)_ | |
| --- | --- | | Positive | Negative |
| `page.has_link?`_(selector)_ | `page.has_no_link?`_(selector)_ | | | --- | --- |
| --- | --- | | `has_content?` | `has_no_content?` |
| `page.has_button?`_(selector)_ | `page.has_no_button?`_(selector)_ | | | --- | --- |
| --- | --- | | `has_css?` _(selector)_ | `has_no_css?` |
| `page.has_field?`_(selector)_ | `page.has_no_field?`_(selector)_ | | | --- | --- |
| --- | --- | | `has_xpath?` _(path)_ | `has_no_xpath?` |
| `page.has_checked_field?`_(selector)_ | `page.has_unchecked_field?`_(selector)_ | | | --- | --- |
| --- | --- | | `has_link?` _(selector)_ | `has_no_link?` |
| `page.has_table?`_(selector)_ | `page.has_no_table?`_(selector)_ | | | --- | --- |
| --- | --- | | `has_button?` _(selector)_ | `has_no_button?` |
| `page.has_select?`_(selector)_ | `page.has_no_select?`_(selector)_ | | | --- | --- |
{: .-headers} | `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`. 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. The `selector` arguments can be text, CSS selector, or XPath expression.
### RSpec Assertions ### RSpec assertions
```ruby ```ruby
page.has_button?('Save') page.has_button?('Save')

84
pug.md
View File

@ -3,7 +3,7 @@ title: Pug
category: JavaScript libraries category: JavaScript libraries
layout: 2017/sheet layout: 2017/sheet
prism_languages: [jade] prism_languages: [jade]
updated: 2017-08-30 updated: 2017-08-31
weight: -3 weight: -3
--- ---
@ -11,6 +11,7 @@ weight: -3
{: .-three-column} {: .-three-column}
### Basic document ### Basic document
{: .-prime}
```jade ```jade
doctype html doctype html
@ -19,12 +20,48 @@ html(lang='en')
| This is some text, hello there, | This is some text, hello there,
= name = name
if showControls
button.red Edit this page
- javascript() - 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 ### Comments
```jade ```jade
@ -32,9 +69,17 @@ html(lang='en')
``` ```
```jade ```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 ### Iteration
```jade ```jade
@ -46,7 +91,7 @@ ul
### Layouts ### Layouts
```jade ```jade
-// page.pug //- page.pug
extends layout.pug extends layout.pug
block title block title
@ -57,7 +102,7 @@ block content
``` ```
```jade ```jade
-// layout.pug //- layout.pug
title title
block title block title
body body
@ -74,6 +119,8 @@ include ./includes/head.pug
include:markdown article.md include:markdown article.md
``` ```
See: [Includes](https://pugjs.org/language/includes.html)
### Multiline text ### Multiline text
```jade ```jade
@ -91,6 +138,18 @@ script.
``` ```
{: data-line="1"} {: 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 ## Mixins
{: .-three-column} {: .-three-column}
@ -107,7 +166,10 @@ mixin list
+list +list
``` ```
### Mixin with arguments Mixins allow you to create reusable code blocks.
See: [Mixins](https://pugjs.org/language/mixins.html)
### Mixin attributes
```jade ```jade
mixin pet(name) mixin pet(name)
@ -119,7 +181,9 @@ mixin pet(name)
+pet('cat') +pet('cat')
``` ```
### Mixin with content See: [Mixin attributes](https://pugjs.org/language/mixins.html#mixin-attributes)
### Mixin blocks
```jade ```jade
mixin article(title) mixin article(title)
@ -133,3 +197,5 @@ mixin article(title)
+article('hello there') +article('hello there')
p Content goes here p Content goes here
``` ```
See: [Mixin blocks](https://pugjs.org/language/mixins.html#mixin-blocks)