OpenSourceArk/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-06-14 11:52:32 +03:00
Code Issues Packages Projects Releases Wiki Activity

Focus search after reset

Browse Source
This commit is contained in:
squidfunk 2017-03-21 15:27:45 +01:00 committed by Martin Donath
parent a2ff177885
commit 50efda702a
17 changed files with 97 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
material/assets/javascripts/application-01fc542e64.js Normal file
View File

File diff suppressed because one or more lines are too long

3
material/assets/javascripts/application-0f66d83d23.js
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/application-015c443a94.css Normal file
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/application-d6bceb5018.css
View File

File diff suppressed because one or more lines are too long

4
material/base.html
View File

@ -38,7 +38,7 @@
<script src="{{ base_url }}/assets/javascripts/modernizr-56ade86843.js"></script>
{% endblock %}
{% block styles %}
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-d6bceb5018.css">
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-015c443a94.css">
{% if config.extra.palette %}
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-66fa0d9bba.palette.css">
{% endif %}
@ -151,7 +151,7 @@
{% endblock %}
</div>
{% block scripts %}
<script src="{{ base_url }}/assets/javascripts/application-0f66d83d23.js"></script>
<script src="{{ base_url }}/assets/javascripts/application-01fc542e64.js"></script>
<script>app.initialize({url:{base:"{{ base_url }}"}})</script>
{% for path in extra_javascript %}
<script src="{{ path }}"></script>

2
material/partials/search.html
View File

@ -5,7 +5,7 @@
<form class="md-search__form" name="search">
<input type="text" class="md-search__input" name="query" required placeholder="{{ lang.t('search.placeholder') }}" accesskey="s" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="query">
<label class="md-icon md-search__icon" for="search"></label>
<button type="reset" class="md-icon md-search__icon">close</button>
<button type="reset" class="md-icon md-search__icon" data-md-component="reset">close</button>
</form>
<div class="md-search__output">
<div class="md-search__scrollwrap" data-md-scrollfix>

10
src/assets/javascripts/application.js
View File

@ -172,6 +172,16 @@ function initialize(config) { // eslint-disable-line func-style
}
}))
/* Listener: focus input after form reset */
new Material.Event.Listener("[data-md-component=reset]", "click", () => {
setTimeout(() => {
const query = document.querySelector("[data-md-component=query]")
if (!(query instanceof HTMLInputElement))
throw new ReferenceError
query.focus()
}, 10)
}).listen()
/* Listener: focus input after opening search */
new Material.Event.Listener("[data-md-toggle=search]", "change", ev => {
setTimeout(toggle => {

2
src/assets/javascripts/components/Material/Search/Result.jsx
View File

@ -148,7 +148,7 @@ export default class Result {
}, 250)
/* Execute search on new input event */
} else if (ev.type === "keyup") {
} else if (ev.type === "focus" || ev.type === "keyup") {
const target = ev.target
if (!(target instanceof HTMLInputElement))
throw new ReferenceError

24
src/assets/stylesheets/_config.scss
View File

@ -58,22 +58,22 @@ $break-devices: (
// ----------------------------------------------------------------------------
// Primary and accent colors
$md-color-primary: $clr-indigo-500;
$md-color-accent: $clr-indigo-a200;
$md-color-primary: $clr-indigo-500 !default;
$md-color-accent: $clr-indigo-a200 !default;
// Shades of black
$md-color-black: hsla(0, 0%, 0%, 0.87);
$md-color-black--light: hsla(0, 0%, 0%, 0.54);
$md-color-black--lighter: hsla(0, 0%, 0%, 0.26);
$md-color-black--lightest: hsla(0, 0%, 0%, 0.07);
$md-color-black--transparent: hsla(0, 0%, 0%, 0);
$md-color-black: hsla(0, 0%, 0%, 0.87) !default;
$md-color-black--light: hsla(0, 0%, 0%, 0.54) !default;
$md-color-black--lighter: hsla(0, 0%, 0%, 0.26) !default;
$md-color-black--lightest: hsla(0, 0%, 0%, 0.07) !default;
$md-color-black--transparent: hsla(0, 0%, 0%, 0) !default;
// Shades of white
$md-color-white: hsla(0, 0%, 100%, 1);
$md-color-white--light: hsla(0, 0%, 100%, 0.7);
$md-color-white--lighter: hsla(0, 0%, 100%, 0.3);
$md-color-white--lightest: hsla(0, 0%, 100%, 0.12);
$md-color-white--transparent: hsla(0, 0%, 100%, 0);
$md-color-white: hsla(0, 0%, 100%, 1) !default;
$md-color-white--light: hsla(0, 0%, 100%, 0.7) !default;
$md-color-white--lighter: hsla(0, 0%, 100%, 0.3) !default;
$md-color-white--lightest: hsla(0, 0%, 100%, 0.12) !default;
$md-color-white--transparent: hsla(0, 0%, 100%, 0) !default;
// ----------------------------------------------------------------------------
// Variables: sizing and spacing

4
src/assets/stylesheets/base/_typeset.scss
View File

@ -34,7 +34,7 @@ body {
body,
input {
color: $md-color-black;
font-feature-settings: "kern", "onum", "liga";
font-feature-settings: "kern", "liga";
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 400;
}
@ -44,7 +44,7 @@ pre,
code,
kbd {
color: $md-color-black;
font-feature-settings: "kern", "onum", "liga";
font-feature-settings: "kern", "liga";
font-family: "Courier New", Courier, monospace;
font-weight: 400;
}

10
src/assets/stylesheets/layout/_base.scss
View File

@ -20,6 +20,14 @@
/// DEALINGS
////
// ----------------------------------------------------------------------------
// Variables
// ----------------------------------------------------------------------------
// Active (toggled) drawer
$md-toggle__drawer--checked:
"[data-md-toggle=\"drawer\"]:checked ~";
// ----------------------------------------------------------------------------
// Rules: base grid and containers
// ----------------------------------------------------------------------------
@ -137,7 +145,7 @@ hr {
@include break-to-device(tablet) {
// Expanded drawer
[data-md-toggle="drawer"]:checked ~ & {
#{$md-toggle__drawer--checked} & {
width: 100%;
height: 100%;
transition:

59
src/assets/stylesheets/layout/_search.scss
View File

@ -20,6 +20,14 @@
/// DEALINGS
////
// ----------------------------------------------------------------------------
// Variables
// ----------------------------------------------------------------------------
// Active (toggled) search
$md-toggle__search--checked:
"[data-md-toggle=\"search\"]:checked ~ .md-header";
// ----------------------------------------------------------------------------
// Rules
// ----------------------------------------------------------------------------
@ -62,7 +70,7 @@
z-index: 1;
// Expanded overlay
[data-md-toggle="search"]:checked ~ .md-header & {
#{$md-toggle__search--checked} & {
transition:
transform 0.4s,
opacity 0.1s;
@ -71,7 +79,7 @@
}
// Set scale factors
[data-md-toggle="search"]:checked ~ .md-header & {
#{$md-toggle__search--checked} & {
// [mobile portrait -]: Scale up 45 times
@include break-to-device(mobile portrait) {
@ -109,7 +117,7 @@
z-index: 2;
// Active search modal
[data-md-toggle="search"]:checked ~ .md-header & {
#{$md-toggle__search--checked} & {
left: 0;
transform: translateX(0);
transition:
@ -122,9 +130,7 @@
// [tablet landscape +]: Make relative for inner layout
@include break-from-device(tablet landscape) {
display: table;
position: relative;
clear: both;
}
}
@ -142,7 +148,7 @@
}
// Set maximum width
[data-md-toggle="search"]:checked ~ .md-header & {
#{$md-toggle__search--checked} & {
// [tablet landscape]: Do not overlay title
@include break-at-device(tablet landscape) {
@ -197,7 +203,6 @@
// Placeholder color
+ .md-search__icon,
&::placeholder {
transition: color 0.25s;
color: $md-color-white;
}
@ -207,7 +212,7 @@
}
// Set light background on active search field
[data-md-toggle="search"]:checked ~ .md-header & {
#{$md-toggle__search--checked} & {
border-radius: 0.2rem 0.2rem 0 0;
background-color: $md-color-white;
color: $md-color-black;
@ -225,11 +230,16 @@
// Icons
&__icon {
position: absolute;
transition: color 0.25s;
transition: opacity 0.25s;
font-size: $md-icon-size;
cursor: pointer;
z-index: 1;
// Hovered icon
&:hover {
opacity: 0.7;
}
// Search icon
&[for="search"] {
top: $md-icon-padding;
@ -257,10 +267,10 @@
&[type="reset"] {
top: $md-icon-padding;
right: $md-icon-padding + $md-icon-margin;
transform: scale(0.25);
transform: scale(0.125);
transition:
transform 0.25s,
opacity 0.25s;
transform 0.15s cubic-bezier(0.1, 0.7, 0.1, 1),
opacity 0.15s;
opacity: 0;
// [tablet portrait -]: Full-screen search bar
@ -269,13 +279,14 @@
right: 1.6rem;
}
// Non-empty input field ...
.md-search__input:valid ~ & {
// ...and expanded overlay
[data-md-toggle="search"]:checked ~ .md-header & {
// Show reset button if search is active and input non-empty
#{$md-toggle__search--checked} .md-search__input:valid ~ & {
transform: scale(1);
opacity: 1;
// Hovered icon
&:hover {
opacity: 0.7;
}
}
}
@ -301,7 +312,7 @@
opacity: 0;
// Show search output in active state
[data-md-toggle="search"]:checked ~ .md-header & {
#{$md-toggle__search--checked} & {
@include z-depth(6);
opacity: 1;
@ -352,7 +363,7 @@
max-height: 0;
// Expand in active state
[data-md-toggle="search"]:checked ~ .md-header & {
#{$md-toggle__search--checked} & {
max-height: 75vh;
}
@ -416,6 +427,11 @@
// Hovered link
&:hover {
background-color: transparentize($md-color-accent, 0.9);
// Slightly transparent icon
.md-search-result__article::before {
opacity: 0.7;
}
}
// Add a little spacing on the last link
@ -444,7 +460,8 @@
position: absolute;
left: 0;
color: $md-color-black--lighter;
transition: opacity 0.25s;
color: $md-color-black--light;
content: "find_in_page";
// [tablet portrait -]: Hide page icon
@ -501,7 +518,7 @@
// stylelint-enable value-no-vendor-prefix, property-no-vendor-prefix
// Highlighting
// Search term highlighting
em {
font-style: normal;
font-weight: 700;

10
src/assets/stylesheets/layout/_sidebar.scss
View File

@ -20,6 +20,14 @@
/// DEALINGS
////
// ----------------------------------------------------------------------------
// Variables
// ----------------------------------------------------------------------------
// Active (toggled) drawer
$md-toggle__drawer--checked:
"[data-md-toggle=\"drawer\"]:checked ~ .md-container";
// ----------------------------------------------------------------------------
// Rules
// ----------------------------------------------------------------------------
@ -65,7 +73,7 @@
}
// Expanded drawer
[data-md-toggle="drawer"]:checked ~ .md-container & {
#{$md-toggle__drawer--checked} & {
@include z-depth(8);
transform: translateX(24.2rem);

3
src/partials/search.html
View File

@ -32,7 +32,8 @@
accesskey="s" autocapitalize="off" autocorrect="off"
autocomplete="off" spellcheck="false" data-md-component="query" />
<label class="md-icon md-search__icon" for="search"></label>
<button type="reset" class="md-icon md-search__icon">close</button>
<button type="reset" class="md-icon md-search__icon"
data-md-component="reset">close</button>
</form>
<div class="md-search__output">
<div class="md-search__scrollwrap" data-md-scrollfix>