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

Fixed header ellipsis when title equals site name

Browse Source
This commit is contained in:
squidfunk 2020-03-25 17:13:48 +01:00
parent d88a6a6458
commit 17fae53f31
12 changed files with 61 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
docs/releases/5.md
View File

@ -464,7 +464,7 @@ matches the new structure:
#### `partials/header.html`
``` diff
@@ -2,51 +2,46 @@
@@ -2,51 +2,48 @@
This file was automatically generated - do not edit
-#}
<header class="md-header" data-md-component="header">
@ -485,24 +485,7 @@ matches the new structure:
- <div class="md-flex__cell md-flex__cell--stretch">
- <div class="md-flex__ellipsis md-header-nav__title" data-md-component="title">
- {% if config.site_name == page.title %}
+ <nav class="md-header-nav md-grid" aria-label="{{ lang.t('header.title') }}">
+ <a href="{{ config.site_url | default(nav.homepage.url, true) | url }}" title="{{ config.site_name }}" aria-label="{{ config.site_name }}" class="md-header-nav__button md-logo">
+ {% if config.theme.logo %}
+ <img src="{{ config.theme.logo | url }}" alt="logo">
+ {% else %}
+ {% include ".icons/" ~ config.theme.icon.logo ~ ".svg" %}
+ {% endif %}
+ </a>
+ <label class="md-header-nav__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 md-ellipsis">
+ {% if config.site_name == page.title %}
+ {{ config.site_name }}
+ {% else %}
+ <span class="md-header-nav__topic">
{{ config.site_name }}
- {{ config.site_name }}
- {% else %}
- <span class="md-header-nav__topic">
- {{ config.site_name }}
@ -515,29 +498,49 @@ matches the new structure:
- {% endif %}
- </span>
- {% endif %}
- </div>
+ <nav class="md-header-nav md-grid" aria-label="{{ lang.t('header.title') }}">
+ <a href="{{ config.site_url | default(nav.homepage.url, true) | url }}" title="{{ config.site_name }}" class="md-header-nav__button md-logo" aria-label="{{ config.site_name }}">
+ {% if config.theme.logo %}
+ <img src="{{ config.theme.logo | url }}" alt="logo">
+ {% else %}
+ {% set icon = config.theme.icon.logo or "material/library" %}
+ {% include ".icons/" ~ icon ~ ".svg" %}
+ {% endif %}
+ </a>
+ <label class="md-header-nav__button md-icon" for="__drawer">
+ {% include ".icons/material/menu" ~ ".svg" %}
+ </label>
+ <div class="md-header-nav__title" data-md-component="header-title">
+ {% if config.site_name == page.title %}
+ <div class="md-header-nav__ellipsis md-ellipsis">
+ {{ config.site_name }}
</div>
- </div>
- <div class="md-flex__cell md-flex__cell--shrink">
- {% if "search" in config["plugins"] %}
- <label class="md-icon md-icon--search md-header-nav__button" for="__search"></label>
- {% include "partials/search.html" %}
- {% endif %}
- </div>
- {% if config.repo_url %}
- <div class="md-flex__cell md-flex__cell--shrink">
- <div class="md-header-nav__source">
- {% include "partials/source.html" %}
- </div>
+ {% else %}
+ <div class="md-header-nav__ellipsis">
+ <span class="md-header-nav__topic md-ellipsis">
+ {{ config.site_name }}
+ </span>
+ <span class="md-header-nav__topic">
+ <span class="md-header-nav__topic md-ellipsis">
+ {% if page and page.meta and page.meta.title %}
+ {{ page.meta.title }}
+ {% else %}
+ {{ page.title }}
+ {% endif %}
+ </span>
{% endif %}
</div>
- {% if config.repo_url %}
- <div class="md-flex__cell md-flex__cell--shrink">
- <div class="md-header-nav__source">
- {% include "partials/source.html" %}
- </div>
- </div>
- {% endif %}
{% endif %}
</div>
+ {% if "search" in config["plugins"] %}
+ <label class="md-header-nav__button md-icon" for="__search">

1
material/assets/javascripts/bundle.7ea61618.min.js.map
View File

File diff suppressed because one or more lines are too long

2
material/assets/javascripts/bundle.7ea61618.min.js → material/assets/javascripts/bundle.e7d31590.min.js vendored
View File

File diff suppressed because one or more lines are too long

1
material/assets/javascripts/bundle.e7d31590.min.js.map Normal file
View File

File diff suppressed because one or more lines are too long

6
material/assets/manifest.json
View File

@ -1,10 +1,10 @@
{
"assets/javascripts/bundle.js": "assets/javascripts/bundle.7ea61618.min.js",
"assets/javascripts/bundle.js.map": "assets/javascripts/bundle.7ea61618.min.js.map",
"assets/javascripts/bundle.js": "assets/javascripts/bundle.e7d31590.min.js",
"assets/javascripts/bundle.js.map": "assets/javascripts/bundle.e7d31590.min.js.map",
"assets/javascripts/vendor.js": "assets/javascripts/vendor.0c35f0aa.min.js",
"assets/javascripts/vendor.js.map": "assets/javascripts/vendor.0c35f0aa.min.js.map",
"assets/javascripts/worker/search.js": "assets/javascripts/worker/search.2613054f.min.js",
"assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.2613054f.min.js.map",
"assets/stylesheets/main.css": "assets/stylesheets/main.a59423ce.min.css",
"assets/stylesheets/main.css": "assets/stylesheets/main.9b1b8b92.min.css",
"assets/stylesheets/palette.css": "assets/stylesheets/palette.4444686e.min.css"
}

1
material/assets/stylesheets/main.9b1b8b92.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/main.a59423ce.min.css vendored
View File

File diff suppressed because one or more lines are too long

4
material/base.html
View File

@ -41,7 +41,7 @@
{% endif %}
{% endblock %}
{% block styles %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.a59423ce.min.css' | url }}">
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.9b1b8b92.min.css' | url }}">
{% if palette.primary or palette.accent %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.4444686e.min.css' | url }}">
{% endif %}
@ -178,7 +178,7 @@
{% endblock %}
{% block scripts %}
<script src="{{ 'assets/javascripts/vendor.0c35f0aa.min.js' | url }}"></script>
<script src="{{ 'assets/javascripts/bundle.7ea61618.min.js' | url }}"></script>
<script src="{{ 'assets/javascripts/bundle.e7d31590.min.js' | url }}"></script>
{%- set translations = {} -%}
{%- for key in [
"clipboard.copy",

10
material/partials/header.html
View File

@ -15,22 +15,24 @@
{% include ".icons/material/menu" ~ ".svg" %}
</label>
<div class="md-header-nav__title" data-md-component="header-title">
<div class="md-header-nav__ellipsis md-ellipsis">
{% if config.site_name == page.title %}
<div class="md-header-nav__ellipsis md-ellipsis">
{{ config.site_name }}
</div>
{% else %}
<span class="md-header-nav__topic">
<div class="md-header-nav__ellipsis">
<span class="md-header-nav__topic md-ellipsis">
{{ config.site_name }}
</span>
<span class="md-header-nav__topic">
<span class="md-header-nav__topic md-ellipsis">
{% if page and page.meta and page.meta.title %}
{{ page.meta.title }}
{% else %}
{{ page.title }}
{% endif %}
</span>
{% endif %}
</div>
{% endif %}
</div>
{% if "search" in config["plugins"] %}
<label class="md-header-nav__button md-icon" for="__search">

6
src/assets/stylesheets/layout/_header.scss
View File

@ -146,12 +146,7 @@
// Header topics
&__topic {
position: absolute;
display: block;
width: 100%;
padding: 0 px2rem(20px);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
transition:
transform 400ms cubic-bezier(0.1, 0.7, 0.1, 1),
opacity 150ms;
@ -186,6 +181,7 @@
// Header title - set line height to match icon for correct alignment
&__title {
flex-grow: 1;
padding: 0 px2rem(20px);
font-size: px2rem(18px);
line-height: px2rem(48px);

10
src/partials/header.html
View File

@ -48,22 +48,24 @@
<!-- Header title -->
<div class="md-header-nav__title" data-md-component="header-title">
<div class="md-header-nav__ellipsis md-ellipsis">
{% if config.site_name == page.title %}
<div class="md-header-nav__ellipsis md-ellipsis">
{{ config.site_name }}
</div>
{% else %}
<span class="md-header-nav__topic">
<div class="md-header-nav__ellipsis">
<span class="md-header-nav__topic md-ellipsis">
{{ config.site_name }}
</span>
<span class="md-header-nav__topic">
<span class="md-header-nav__topic md-ellipsis">
{% if page and page.meta and page.meta.title %}
{{ page.meta.title }}
{% else %}
{{ page.title }}
{% endif %}
</span>
{% endif %}
</div>
{% endif %}
</div>
<!-- Button to open search dialogue -->