Labyricorn/liquid
1
0
Fork 0
mirror of https://github.com/Shopify/liquid.git synced 2026-09-15 08:50:45 -07:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1043 from Shopify/firefox-scroll-bug

Browse Source 
Fix scroll bug on firefox
This commit is contained in:
Samuel Doiron
2018-10-15 15:06:21 -04:00
committed by GitHub
parent 45e7d6b652 22cb0018a5
commit d18fc08323
2 changed files with 50 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_includes/sidebar.html
+19 -10
View File
@@ -6,17 +6,26 @@
<a href="{{ "/" | relative_url }}">Liquid</a>
{% endif %}
</header>
<nav class="sidebar__nav"> {% assign sections = "basics, tags, filters" | split: ", " %}
{% for section in sections %}
<h3 class="section__header">{{ section | capitalize }}</h3>
{%- assign sections = "basics, tags, filters" | split: ", " -%}
<ul class="section__links">
{% for item in site.pages %}{% if item.url contains section/ %}{% unless item.path contains "index" %}
<li><a href="{{ item.url | relative_url }}" class="section__link{% if item.url contains page.url and page.url != '/' and page.type != 'index' %} section__link--is-active{% endif %}">{{ item.title }}</a></li>
{% endunless %}{% endif %}{% endfor %}
</ul>
{% endfor %}
<nav class="sidebar__nav">
<div class="sidebar__nav-interior">
{%- for section in sections -%}
<h3 class="section__header">{{ section | capitalize }}</h3>
<ul class="section__links">
{%- for item in site.pages -%}
{%- if item.url contains section/ -%}
{%- unless item.path contains "index" -%}
<li class="section__item">
<a href="{{ item.url | relative_url }}" class="section__link {% if item.url contains page.url and page.url != '/' and page.type != 'index' %} section__link--is-active{% endif %}">{{ item.title }}</a>
</li>
{%- endunless -%}
{%- endif -%}
{%- endfor -%}
</ul>
{%- endfor -%}
</div>
</nav>
</div>
</div>
_sass/modules/_layout.scss
+31 -28
View File
@@ -1,4 +1,3 @@
$sidebar-width: 250px;
$logo-height: 130px;
$wrapper-width: 800px;
@@ -95,34 +94,16 @@ body {
}
.sidebar__nav {
padding: $spacing-unit $spacing-unit ($spacing-unit + $logo-height); // Add a bit more padding at the bottom for consistency.
font-weight: bold;
max-height: 100%;
overflow-y: scroll;
li {
list-style: none;
a {
color: $color-white;
&:hover {
text-decoration: none;
}
}
}
overflow-y: auto;
}
.section {
margin: 0px;
> li {
margin-bottom: $spacing-unit / 2;
&:last-child {
margin-bottom: $spacing-unit;
}
}
.sidebar__nav-interior {
height: 100%;
// Add a bit more padding at the bottom for consistency.
padding: $spacing-unit $spacing-unit ($spacing-unit + $logo-height);
}
.section__header {
@@ -131,13 +112,22 @@ body {
color: $color-white;
margin-top: 0;
margin-bottom: $spacing-unit / 4;
.section__links + & {
margin-top: $spacing-unit;
}
}
.section__links {
margin-left: $spacing-unit / 2;
margin-bottom: $spacing-unit;
font-weight: normal;
font-size: 0.9em;
font-weight: normal;
list-style: none;
margin-left: $spacing-unit / 2;
}
.section__item {
list-style: none;
}
.section__link {
@@ -145,13 +135,26 @@ body {
margin-top: $spacing-unit/4;
opacity: 0.75;
text-decoration: none;
color: $color-white;
&:hover {
opacity: 1;
text-decoration: none;
}
&:empty {
// there is an error in the liquid logic that spits out a
// empty last-child
display: none;
}
&:visited {
color: $color-white;
}
}
.section__link--is-active {
font-weight: bold;
opacity: 1;
color: $color-white;
}