Skip to content

Commit

Permalink
Added support for language selector
Browse files Browse the repository at this point in the history
  • Loading branch information
squidfunk committed Feb 22, 2021
1 parent 9591265 commit 99cc2e2
Show file tree
Hide file tree
Showing 15 changed files with 238 additions and 46 deletions.
5 changes: 2 additions & 3 deletions docs/setup/changing-the-language.md
Expand Up @@ -87,8 +87,7 @@ as [documented here][2]._
### Site language selector

[:octicons-file-code-24: Source][3] ·
:octicons-beaker-24: Experimental ·
[:octicons-heart-fill-24:{: .tx-heart } Insiders only][3]{: .tx-insiders }
:octicons-beaker-24: Experimental

If your documentation is available in multiple languages, a _language selector_
can be added to the header next to the search bar. Languages can be defined via
Expand Down Expand Up @@ -118,7 +117,7 @@ This will render a language selector in the header next to the search bar:

[![Language selection][4]][4]

[3]: ../insiders.md
[3]: https://github.com/squidfunk/mkdocs-material/blob/master/src/partials/header.html
[4]: ../assets/screenshots/language-selection.png

### Site search language
Expand Down

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Large diffs are not rendered by default.

2 changes: 0 additions & 2 deletions material/assets/stylesheets/main.006edf1e.min.css

This file was deleted.

1 change: 0 additions & 1 deletion material/assets/stylesheets/main.006edf1e.min.css.map

This file was deleted.

2 changes: 2 additions & 0 deletions material/assets/stylesheets/main.793c28ab.min.css

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions material/assets/stylesheets/main.793c28ab.min.css.map

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions material/base.html
Expand Up @@ -39,7 +39,7 @@
{% endif %}
{% endblock %}
{% block styles %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.006edf1e.min.css' | url }}">
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.793c28ab.min.css' | url }}">
{% if config.theme.palette %}
{% set palette = config.theme.palette %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.7fa14f5b.min.css' | url }}">
Expand Down Expand Up @@ -216,7 +216,7 @@ <h1>{{ page.title | d(config.site_name, true)}}</h1>
</script>
{% endblock %}
{% block scripts %}
<script src="{{ 'assets/javascripts/bundle.be39d00c.min.js' | url }}"></script>
<script src="{{ 'assets/javascripts/bundle.f3bc8daa.min.js' | url }}"></script>
{% for path in config["extra_javascript"] %}
<script src="{{ path | url }}"></script>
{% endfor %}
Expand Down
39 changes: 30 additions & 9 deletions material/partials/header.html
Expand Up @@ -6,21 +6,21 @@
{% set site_url = site_url ~ "/index.html" %}
{% endif %}
<header class="md-header" data-md-component="header">
<nav class="md-header-nav md-grid" aria-label="{{ lang.t('header.title') }}">
<a href="{{ site_url }}" title="{{ config.site_name | e }}" class="md-header-nav__button md-logo" aria-label="{{ config.site_name }}">
<nav class="md-header__inner md-grid" aria-label="{{ lang.t('header.title') }}">
<a href="{{ site_url }}" title="{{ config.site_name | e }}" class="md-header__button md-logo" aria-label="{{ config.site_name }}">
{% include "partials/logo.html" %}
</a>
<label class="md-header-nav__button md-icon" for="__drawer">
<label class="md-header__button md-icon" for="__drawer">
{% include ".icons/material/menu" ~ ".svg" %}
</label>
<div class="md-header-nav__title" data-md-component="header-title">
<div class="md-header-nav__ellipsis">
<div class="md-header-nav__topic">
<div class="md-header__title" data-md-component="header-title">
<div class="md-header__ellipsis">
<div class="md-header__topic">
<span class="md-ellipsis">
{{ config.site_name }}
</span>
</div>
<div class="md-header-nav__topic">
<div class="md-header__topic" data-md-component="header-topic">
<span class="md-ellipsis">
{% if page and page.meta and page.meta.title %}
{{ page.meta.title }}
Expand All @@ -31,14 +31,35 @@
</div>
</div>
</div>
<div class="md-header__options">
{% if config.extra.alternate %}
<div class="md-select">
{% set icon = config.theme.icon.translate or "material/translate" %}
<span class="md-header__button md-icon">
{% include ".icons/" ~ icon ~ ".svg" %}
</span>
<div class="md-select__inner">
<ul class="md-select__list">
{% for alt in config.extra.alternate %}
<li class="md-select__item">
<a href="{{ alt.link | url }}" class="md-select__link">
{{ alt.name }}
</a>
</li>
{% endfor %}
</ul>
</div>
</div>
{% endif %}
</div>
{% if "search" in config["plugins"] %}
<label class="md-header-nav__button md-icon" for="__search">
<label class="md-header__button md-icon" for="__search">
{% include ".icons/material/magnify.svg" %}
</label>
{% include "partials/search.html" %}
{% endif %}
{% if config.repo_url %}
<div class="md-header-nav__source">
<div class="md-header__source">
{% include "partials/source.html" %}
</div>
{% endif %}
Expand Down
1 change: 1 addition & 0 deletions src/assets/javascripts/components/_/index.ts
Expand Up @@ -36,6 +36,7 @@ export type ComponentType =
| "dialog" /* Dialog */
| "header" /* Header */
| "header-title" /* Header title */
| "header-topic" /* Header topic */
| "main" /* Main area */
| "search" /* Search */
| "search-query" /* Search input */
Expand Down
1 change: 1 addition & 0 deletions src/assets/stylesheets/main.scss
Expand Up @@ -51,6 +51,7 @@
@import "main/layout/footer";
@import "main/layout/nav";
@import "main/layout/search";
@import "main/layout/select";
@import "main/layout/sidebar";
@import "main/layout/source";
@import "main/layout/tabs";
Expand Down
2 changes: 1 addition & 1 deletion src/assets/stylesheets/main/_typeset.scss
@@ -1,5 +1,5 @@
////
/// Copyright (c) 2016-2020 Martin Donath <martin.donath@squidfunk.com>
/// Copyright (c) 2016-2021 Martin Donath <martin.donath@squidfunk.com>
///
/// Permission is hereby granted, free of charge, to any person obtaining a
/// copy of this software and associated documentation files (the "Software"),
Expand Down
52 changes: 38 additions & 14 deletions src/assets/stylesheets/main/layout/_header.scss
Expand Up @@ -69,16 +69,15 @@
background-color 250ms,
box-shadow 250ms;
}
}

// Header navigation - if the header exceeds the default height of `48px`, i.e.
// by adding a bigger logo, the items are aligned at the center
.md-header-nav {
display: flex;
align-items: center;
padding: 0 px2rem(4px);
// Header wrapper
&__inner {
display: flex;
align-items: center;
padding: 0 px2rem(4px);
}

// Header navigation button
// Header button
&__button {
position: relative;
z-index: 1;
Expand Down Expand Up @@ -131,7 +130,7 @@

// [no-js]: Hide button
.no-js & {
display: none;
display: none
}

// Adjust for right-to-left languages
Expand All @@ -154,7 +153,7 @@
}
}

// Header navigation topic
// Header topic
&__topic {
position: absolute;
display: flex;
Expand All @@ -180,7 +179,7 @@
}
}

// Header navigation title
// Header title
&__title {
flex-grow: 1;
height: px2rem(48px);
Expand All @@ -190,7 +189,7 @@
line-height: px2rem(48px);

// Header title in active state, i.e. page title is visible
&[data-md-state="active"] .md-header-nav__topic {
&[data-md-state="active"] .md-header__topic {
z-index: -1;
transform: translateX(px2rem(-25px));
opacity: 0;
Expand All @@ -205,7 +204,7 @@
}

// Second header topic - title of the current page
+ .md-header-nav__topic {
& + .md-header__topic {
z-index: 0;
transform: translateX(0);
opacity: 1;
Expand All @@ -217,13 +216,38 @@
}

// Add ellipsis in case of overflowing text
> .md-header-nav__ellipsis {
> .md-header__ellipsis {
position: relative;
width: 100%;
height: 100%;
}
}

// Header options
&__options {
display: flex;
flex-shrink: 0;
max-width: 100%;
white-space: nowrap;
transition:
max-width 0ms 250ms,
opacity 250ms 250ms;

// Hide inactive buttons
> [data-md-state="hidden"] {
display: none;
}

// Hide toggle when search is active
[data-md-toggle="search"]:checked ~ .md-header & {
max-width: 0;
opacity: 0;
transition:
max-width 0ms,
opacity 0ms;
}
}

// Repository information container
&__source {
display: none;
Expand Down
120 changes: 120 additions & 0 deletions src/assets/stylesheets/main/layout/_select.scss
@@ -0,0 +1,120 @@
////
/// Copyright (c) 2016-2021 Martin Donath <martin.donath@squidfunk.com>
///
/// Permission is hereby granted, free of charge, to any person obtaining a
/// copy of this software and associated documentation files (the "Software"),
/// to deal in the Software without restriction, including without limitation
/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
/// and/or sell copies of the Software, and to permit persons to whom the
/// Software is furnished to do so, subject to the following conditions:
///
/// The above copyright notice and this permission notice shall be included in
/// all copies or substantial portions of the Software.
///
/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
/// DEALINGS
////

// ----------------------------------------------------------------------------
// Rules
// ----------------------------------------------------------------------------

// Selection
.md-select {
position: relative;
z-index: 1;

// Selection bubble
&__inner {
position: absolute;
top: calc(100% - #{px2rem(4px)});
left: 50%;
max-height: 0;
margin-top: px2rem(4px);
color: var(--md-default-fg-color);
background-color: var(--md-default-bg-color);
border-radius: px2rem(2px);
box-shadow:
0 px2rem(4px) px2rem(10px) hsla(0, 0%, 0%, 0.1),
0 0 px2rem(1px) hsla(0, 0%, 0%, 0.25);
transform: translate3d(-50%, px2rem(6px), 0);
opacity: 0;
transition:
transform 250ms 375ms,
opacity 250ms 250ms,
max-height 0ms 500ms;

// Selection bubble on parent focus/hover
.md-select:focus-within &,
.md-select:hover & {
max-height: px2rem(200px);
transform: translate3d(-50%, 0, 0);
opacity: 1;
transition:
transform 250ms cubic-bezier(0.1, 0.7, 0.1, 1),
opacity 250ms,
max-height 250ms;
}

// Selection bubble handle
&::after {
position: absolute;
top: 0;
left: 50%;
width: 0;
height: 0;
margin-top: px2rem(-4px);
margin-left: px2rem(-4px);
border: px2rem(4px) solid transparent;
border-top: 0;
border-bottom-color: var(--md-default-bg-color);
content: "";
}
}

// Selection list
&__list {
max-height: inherit;
margin: 0;
padding: 0;
overflow: auto;
font-size: px2rem(16px);
list-style-type: none;
border-radius: px2rem(2px);
}

// Selection item
&__item {
line-height: px2rem(36px);
}

// Selection link
&__link {
display: block;
width: 100%;
padding-right: px2rem(24px);
padding-left: px2rem(12px);
cursor: pointer;
transition:
background-color 250ms,
color 250ms;
scroll-snap-align: start;

// Adjust for right-to-left languages
[dir="rtl"] & {
padding-right: px2rem(12px);
padding-left: px2rem(24px);
}

// Link on focus/hover
&:focus,
&:hover {
background-color: var(--md-default-fg-color--lightest);
}
}
}

0 comments on commit 99cc2e2

Please sign in to comment.