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

Merge pull request #106 from squidfunk/fix/logo-not-hidden-on-mobile

Browse Source 
Hide logo on mobile
This commit is contained in:
Martin Donath 2017-01-14 20:19:39 +01:00 committed by GitHub
commit a463798593
12 changed files with 43 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
material/assets/stylesheets/application-9ac46de2fd.css
View File

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

2
material/base.html
View File

@ -45,7 +45,7 @@
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
{% endblock %}
{% block styles %}
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-9ac46de2fd.css">
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-e0a21a99ab.css">
{% if config.extra.palette %}
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-02ce7adcc2.palette.css">
{% endif %}

4
material/partials/footer.html
View File

@ -6,7 +6,7 @@
{% if page.previous_page %}
<a href="{{ page.previous_page.url }}" title="{{ page.previous_page.title }}" class="md-flex md-footer-nav__link md-footer-nav__link--prev" rel="prev">
<div class="md-flex__cell md-flex__cell--shrink">
<i class="md-icon md-icon--arrow-back md-footer-nav__icon"></i>
<i class="md-icon md-icon--arrow-back md-footer-nav__button"></i>
</div>
<div class="md-flex__cell md-flex__cell--stretch md-footer-nav__title">
<span class="md-flex__ellipsis">
@ -29,7 +29,7 @@
</span>
</div>
<div class="md-flex__cell md-flex__cell--shrink">
<i class="md-icon md-icon--arrow-forward md-footer-nav__icon"></i>
<i class="md-icon md-icon--arrow-forward md-footer-nav__button"></i>
</div>
</a>
{% endif %}

6
material/partials/header.html
View File

@ -2,14 +2,14 @@
<nav class="md-header-nav md-grid">
<div class="md-flex">
<div class="md-flex__cell md-flex__cell--shrink">
<a href="{{ nav.homepage.url }}" title="{{ config.site_name }}" class="md-icon {% if not config.extra.logo %} md-icon--home {% endif %} md-header-nav__icon">
<a href="{{ nav.homepage.url }}" title="{{ config.site_name }}" class="{% if config.extra.logo %} md-logo {% else %} md-icon md-icon--home {% endif %} md-header-nav__button">
{% if config.extra.logo %}
<img src="{{ base_url }}/{{ config.extra.logo }}" width="24" height="24">
{% endif %}
</a>
</div>
<div class="md-flex__cell md-flex__cell--shrink">
<label class="md-icon md-icon--menu md-header-nav__icon" for="drawer"></label>
<label class="md-icon md-icon--menu md-header-nav__button" for="drawer"></label>
</div>
<div class="md-flex__cell md-flex__cell--stretch">
<span class="md-flex__ellipsis md-header-nav__title">
@ -27,7 +27,7 @@
</div>
<div class="md-flex__cell md-flex__cell--shrink">
{% block search_box %}
<label class="md-icon md-icon--search md-header-nav__icon" for="search"></label>
<label class="md-icon md-icon--search md-header-nav__button" for="search"></label>
{% include "partials/search.html" %}
{% endblock %}
</div>

2
material/partials/nav.html
View File

@ -1,6 +1,6 @@
<nav class="md-nav md-nav--primary">
<label class="md-nav__title md-nav__title--site" for="drawer">
<i class="md-icon {% if not config.extra.logo %} md-icon--home {% endif %} md-nav__icon">
<i class="{% if config.extra.logo %} md-logo {% else %} md-icon md-icon--home {% endif %} md-nav__button">
{% if config.extra.logo %}
<img src="{{ base_url }}/{{ config.extra.logo }}">
{% endif %}

4
src/assets/stylesheets/layout/_footer.scss
View File

@ -83,8 +83,8 @@
}
}
// Icons
&__icon {
// Icon buttons
&__button {
@extend %md-icon__button;
transition: background 0.25s;

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

@ -48,8 +48,8 @@
.md-header-nav {
padding: 0.4rem;
// Icons
&__icon {
// Icon buttons
&__button {
@extend %md-icon__button;
position: relative;
@ -61,8 +61,13 @@
opacity: 0.7;
}
// Set correct display on image
&.md-logo img {
display: block;
}
// Hide search icon, if JavaScript is not available.
.no-js & .md-icon--search {
.no-js &.md-icon--search {
display: none;
}
@ -75,11 +80,12 @@
}
}
// [tablet -]: Hide the home icon
// [tablet -]: Hide the home icon or logo
@include break-to-device(tablet) {
// Home icon
&.md-icon--home {
// Home icon or logo
&.md-icon--home,
&.md-logo {
display: none;
}
}

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

@ -51,8 +51,8 @@
content: "arrow_back";
}
// Hide icon by default
.md-nav__icon {
// Hide button by default
.md-nav__button {
display: none;
}
}
@ -84,8 +84,8 @@
}
}
// Icon
&__icon {
// Icon buttons
&__button {
@extend %md-icon, %md-icon__button;
// Stretch image
@ -240,7 +240,7 @@
color: $md-color-white;
// Site logo
.md-nav__icon {
.md-nav__button {
display: block;
position: absolute;
top: 0.4rem;

4
src/partials/footer.html
View File

@ -38,7 +38,7 @@
rel="prev">
<div class="md-flex__cell md-flex__cell--shrink">
<i class="md-icon md-icon--arrow-back
md-footer-nav__icon"></i>
md-footer-nav__button"></i>
</div>
<div class="md-flex__cell md-flex__cell--stretch
md-footer-nav__title">
@ -68,7 +68,7 @@
</div>
<div class="md-flex__cell md-flex__cell--shrink">
<i class="md-icon md-icon--arrow-forward
md-footer-nav__icon"></i>
md-footer-nav__button"></i>
</div>
</a>
{% endif %}

14
src/partials/header.html
View File

@ -30,10 +30,12 @@
<!-- Link to home -->
<div class="md-flex__cell md-flex__cell--shrink">
<a href="{{ nav.homepage.url }}" title="{{ config.site_name }}"
class="md-icon
{% if not config.extra.logo %}
md-icon--home
{% endif %} md-header-nav__icon">
class="
{% if config.extra.logo %}
md-logo
{% else %}
md-icon md-icon--home
{% endif %} md-header-nav__button">
{% if config.extra.logo %}
<img src="{{ base_url }}/{{ config.extra.logo }}"
width="24" height="24" />
@ -43,7 +45,7 @@
<!-- Button to toggle drawer -->
<div class="md-flex__cell md-flex__cell--shrink">
<label class="md-icon md-icon--menu md-header-nav__icon"
<label class="md-icon md-icon--menu md-header-nav__button"
for="drawer"></label>
</div>
@ -66,7 +68,7 @@
<!-- Button to open search dialogue -->
<div class="md-flex__cell md-flex__cell--shrink">
{% block search_box %}
<label class="md-icon md-icon--search md-header-nav__icon"
<label class="md-icon md-icon--search md-header-nav__button"
for="search"></label>
<!-- Search interface -->

11
src/partials/nav.html
View File

@ -23,11 +23,12 @@
<!-- Main navigation -->
<nav class="md-nav md-nav--primary">
<label class="md-nav__title md-nav__title--site" for="drawer">
<i class="md-icon
{% if not config.extra.logo %}
md-icon--home
{% endif %}
md-nav__icon">
<i class="
{% if config.extra.logo %}
md-logo
{% else %}
md-icon md-icon--home
{% endif %} md-nav__button">
{% if config.extra.logo %}
<img src="{{ base_url }}/{{ config.extra.logo }}" />
{% endif %}