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

4
material/partials/footer.html
View File

@ -6,7 +6,7 @@
{% if page.previous_page %} {% 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"> <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"> <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>
<div class="md-flex__cell md-flex__cell--stretch md-footer-nav__title"> <div class="md-flex__cell md-flex__cell--stretch md-footer-nav__title">
<span class="md-flex__ellipsis"> <span class="md-flex__ellipsis">
@ -29,7 +29,7 @@
</span> </span>
</div> </div>
<div class="md-flex__cell md-flex__cell--shrink"> <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> </div>
</a> </a>
{% endif %} {% endif %}

6
material/partials/header.html
View File

@ -2,14 +2,14 @@
<nav class="md-header-nav md-grid"> <nav class="md-header-nav md-grid">
<div class="md-flex"> <div class="md-flex">
<div class="md-flex__cell md-flex__cell--shrink"> <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 %} {% if config.extra.logo %}
<img src="{{ base_url }}/{{ config.extra.logo }}" width="24" height="24"> <img src="{{ base_url }}/{{ config.extra.logo }}" width="24" height="24">
{% endif %} {% endif %}
</a> </a>
</div> </div>
<div class="md-flex__cell md-flex__cell--shrink"> <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>
<div class="md-flex__cell md-flex__cell--stretch"> <div class="md-flex__cell md-flex__cell--stretch">
<span class="md-flex__ellipsis md-header-nav__title"> <span class="md-flex__ellipsis md-header-nav__title">
@ -27,7 +27,7 @@
</div> </div>
<div class="md-flex__cell md-flex__cell--shrink"> <div class="md-flex__cell md-flex__cell--shrink">
{% block search_box %} {% 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" %} {% include "partials/search.html" %}
{% endblock %} {% endblock %}
</div> </div>

2
material/partials/nav.html
View File

@ -1,6 +1,6 @@
<nav class="md-nav md-nav--primary"> <nav class="md-nav md-nav--primary">
<label class="md-nav__title md-nav__title--site" for="drawer"> <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 %} {% if config.extra.logo %}
<img src="{{ base_url }}/{{ config.extra.logo }}"> <img src="{{ base_url }}/{{ config.extra.logo }}">
{% endif %} {% endif %}

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

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

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

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

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

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

4
src/partials/footer.html
View File

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

14
src/partials/header.html
View File

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

11
src/partials/nav.html
View File

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