Skip to content

repo sync #5414

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Apr 15, 2021
Merged

repo sync #5414

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7217a64
Merge pull request #18822 from github/repo-sync
Octomerger Apr 15, 2021
ddbe1e9
Revert "Update sidebar to use primer backgrounds (#18818)" (#18824)
heiskr Apr 15, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion includes/all-products-link.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{% if currentVersion != 'homepage' %}
<li title="Home">
<a href="/{{currentLanguage}}" class="f6 pl-4 pr-5 ml-n1 pb-1 color-text-primary">
<a href="/{{currentLanguage}}" class="f6 pl-4 pr-5 ml-n1 pb-1">
<svg xmlns="http://www.w3.org/2000/svg" class="octicon" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M7.78033 12.5303C7.48744 12.8232 7.01256 12.8232 6.71967 12.5303L2.46967 8.28033C2.17678 7.98744 2.17678 7.51256 2.46967 7.21967L6.71967 2.96967C7.01256 2.67678 7.48744 2.67678 7.78033 2.96967C8.07322 3.26256 8.07322 3.73744 7.78033 4.03033L4.81066 7L12.25 7C12.6642 7 13 7.33579 13 7.75C13 8.16421 12.6642 8.5 12.25 8.5L4.81066 8.5L7.78033 11.4697C8.07322 11.7626 8.07322 12.2374 7.78033 12.5303Z"></path></svg>
All products
</a>
Expand Down
2 changes: 1 addition & 1 deletion includes/sidebar-homepage.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
title="{{product.name}}{% if product.external %} (External Site){% endif %}"
class="sidebar-product"
>
<a href="{% unless product.external %}/{{currentLanguage}}{% endunless %}{% if product.versions contains currentVersion %}/{{currentVersion}}/{{product.id}}{% else %}{{product.href}}{% endif %}" class="f4 pl-4 pr-5 py-2 color-text-primary">
<a href="{% unless product.external %}/{{currentLanguage}}{% endunless %}{% if product.versions contains currentVersion %}/{{currentVersion}}/{{product.id}}{% else %}{{product.href}}{% endif %}" class="f4 pl-4 pr-5 py-2">
{{ product.name }}
{% if product.external %}
<span class="ml-1"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="octicon" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M14.75 1C14.8163 1 14.8799 1.02634 14.9268 1.07322C14.9737 1.12011 15 1.1837 15 1.25V5.396C15.0001 5.44551 14.9855 5.49393 14.958 5.53513C14.9305 5.57632 14.8915 5.60843 14.8457 5.62739C14.8 5.64635 14.7497 5.6513 14.7011 5.64162C14.6525 5.63194 14.608 5.60805 14.573 5.573L13.03 4.03L8.53 8.53C8.38783 8.66248 8.19978 8.7346 8.00548 8.73118C7.81118 8.72775 7.62579 8.64903 7.48838 8.51162C7.35097 8.37421 7.27225 8.18882 7.26883 7.99452C7.2654 7.80022 7.33752 7.61217 7.47 7.47L11.97 2.97L10.427 1.427C10.3919 1.39204 10.3681 1.34745 10.3584 1.2989C10.3487 1.25034 10.3536 1.20001 10.3726 1.15427C10.3916 1.10853 10.4237 1.06945 10.4649 1.04199C10.5061 1.01453 10.5545 0.999912 10.604 1H14.75ZM2.75 2C2.28587 2 1.84075 2.18437 1.51256 2.51256C1.18437 2.84075 1 3.28587 1 3.75V13.25C1 14.216 1.784 15 2.75 15H12.25C12.7141 15 13.1592 14.8156 13.4874 14.4874C13.8156 14.1592 14 13.7141 14 13.25V9.75C14 9.55109 13.921 9.36032 13.7803 9.21967C13.6397 9.07902 13.4489 9 13.25 9C13.0511 9 12.8603 9.07902 12.7197 9.21967C12.579 9.36032 12.5 9.55109 12.5 9.75V13.25C12.5 13.3163 12.4737 13.3799 12.4268 13.4268C12.3799 13.4737 12.3163 13.5 12.25 13.5H2.75C2.6837 13.5 2.62011 13.4737 2.57322 13.4268C2.52634 13.3799 2.5 13.3163 2.5 13.25V3.75C2.5 3.6837 2.52634 3.62011 2.57322 3.57322C2.62011 3.52634 2.6837 3.5 2.75 3.5H6.25C6.44891 3.5 6.63968 3.42098 6.78033 3.28033C6.92098 3.13968 7 2.94891 7 2.75C7 2.55109 6.92098 2.36032 6.78033 2.21967C6.63968 2.07902 6.44891 2 6.25 2H2.75Z"></path></svg></span>
Expand Down
12 changes: 6 additions & 6 deletions includes/sidebar-specific-product.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
{% include all-products-link %}
<li title="{{product.title}}" class="sidebar-product mb-2">
{% unless page.hidden %}
<a href="{{product.href}}" class="pl-4 pr-5 pb-1 f4 color-text-primary">{{ product.title }}</a>
<a href="{{product.href}}" class="pl-4 pr-5 pb-1 f4">{{ product.title }}</a>
{% endunless %}
</li>
<li>
Expand All @@ -21,12 +21,12 @@
<li class="sidebar-category py-1 {% if breadcrumbs.category.href == category[1].href %}active {% if currentPath == fullPathToCategory %}is-current-page {% endif %}{% endif %}{% if category[1].standalone %}standalone-category{% endif %}">
{% if category[1].shortTitle %}{% assign categoryTitle = category[1].shortTitle %}{% else %}{% assign categoryTitle = category[1].title %}{% endif %}
{% if category[1].standalone %}
<a href="{{fullPathToCategory}}" class="pl-4 pr-2 py-2 f6 text-uppercase d-block flex-auto mr-3 color-text-primary">{{ categoryTitle }}</a>
<a href="{{fullPathToCategory}}" class="pl-4 pr-2 py-2 f6 text-uppercase d-block flex-auto mr-3">{{ categoryTitle }}</a>
{% else %}
<details class="dropdown-withArrow details details-reset" {% if breadcrumbs.category.href == category[1].href or forloop.index < 4 %}open{% endif %}>
<summary>
<div class="d-flex flex-justify-between">
<a href="{{fullPathToCategory}}" class="pl-4 pr-2 py-2 f6 text-uppercase d-block flex-auto mr-3 color-text-primary">{{ categoryTitle }}</a>
<a href="{{fullPathToCategory}}" class="pl-4 pr-2 py-2 f6 text-uppercase d-block flex-auto mr-3">{{ categoryTitle }}</a>
{% if breadcrumbs.category.href == category[1].href or forloop.index < 4 %}
<svg xmlns="http://www.w3.org/2000/svg" class="octicon flex-shrink-0 arrow mr-3" style="margin-top:7px" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M12.7803 6.21967C13.0732 6.51256 13.0732 6.98744 12.7803 7.28033L8.53033 11.5303C8.23744 11.8232 7.76256 11.8232 7.46967 11.5303L3.21967 7.28033C2.92678 6.98744 2.92678 6.51256 3.21967 6.21967C3.51256 5.92678 3.98744 5.92678 4.28033 6.21967L8 9.93934L11.7197 6.21967C12.0126 5.92678 12.4874 5.92678 12.7803 6.21967Z"></path></svg>
{% endif %}
Expand All @@ -43,15 +43,15 @@
{% if maptopic[1].shortTitle %}{% assign maptopicTitle = maptopic[1].shortTitle %}{% else %}{% assign maptopicTitle = maptopic[1].title %}{% endif %}

<li class="sidebar-maptopic {% if breadcrumbs.maptopic.href == maptopic[1].href %}active {% if currentPath == fullPathToMaptopic %}is-current-page{% endif %}{% endif %}">
<a href="{{fullPathToMaptopic}}" class="pl-4 pr-5 py-2 color-text-primary">{{ maptopicTitle }}</a>
<a href="{{fullPathToMaptopic}}" class="pl-4 pr-5 py-2">{{ maptopicTitle }}</a>
<ul class="sidebar-articles my-2">
{% for article in maptopic[1].articles %}
{% unless article[1].hidden %}
{% capture fullPathToArticle %}{{article[1].href}}{% endcapture %}
{% if article[1].shortTitle %}{% assign articleTitle = article[1].shortTitle %}{% else %}{% assign articleTitle = article[1].title %}{% endif %}

<li class="sidebar-article {% if breadcrumbs.article.href == article[1].href %}active {% if currentPath == fullPathToArticle %}is-current-page{% endif %}{% endif %}">
<a href="{{fullPathToArticle}}" class="pl-6 pr-5 py-1{% if forloop.last %} pb-2{% endif %} color-text-primary">{{ articleTitle }}</a>
<a href="{{fullPathToArticle}}" class="pl-6 pr-5 py-1{% if forloop.last %} pb-2{% endif %}">{{ articleTitle }}</a>
</li>
{% endunless %}
{% endfor %}
Expand All @@ -68,7 +68,7 @@
{% capture fullPathToArticle %}{{article[1].href}}{% endcapture %}
{% if article[1].shortTitle %}{% assign articleTitle = article[1].shortTitle %}{% else %}{% assign articleTitle = article[1].title %}{% endif %}
<li class="sidebar-article {% if breadcrumbs.article.href == article[1].href %}active {% if currentPath == fullPathToArticle %}is-current-page{% endif %}{% endif %}">
<a href="{{fullPathToArticle}}" class="pl-4 pr-5 py-1{% if forloop.last %} pb-2{% endif %} color-text-primary">{{ articleTitle }}</a>
<a href="{{fullPathToArticle}}" class="pl-4 pr-5 py-1{% if forloop.last %} pb-2{% endif %}">{{ articleTitle }}</a>
</li>
{% endunless %}
{% endfor %}
Expand Down
8 changes: 4 additions & 4 deletions includes/sidebar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<!-- product > category > maptopic > article -->
<div class="sidebar d-none d-lg-block color-bg-tertiary">
<div class="sidebar d-none d-lg-block">

<div class="d-flex flex-items-center p-4 position-sticky top-0 color-bg-tertiary" style="z-index: 3;" id="github-logo" role="banner">
<a href="/{{ currentLanguage }}" class="color-text-primary" aria-hidden="true" tabindex="-1">
<div class="d-flex flex-items-center p-4 position-sticky top-0 sidebar-background-color" style="z-index: 3;" id="github-logo" role="banner">
<a href="/{{ currentLanguage }}" class="color-text-inverse" aria-hidden="true" tabindex="-1">
{% octicon "mark-github" height="32" %}
</a>
<a href="/{{ currentLanguage }}" class="h4-mktg color-text-primary no-underline no-wrap pl-2 flex-auto">{% data ui.header.github_docs %}</a>
<a href="/{{ currentLanguage }}" class="h4-mktg color-text-inverse no-underline no-wrap pl-2 flex-auto">{% data ui.header.github_docs %}</a>
</div>

<nav>
Expand Down
30 changes: 25 additions & 5 deletions stylesheets/sidebar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
.sidebar {
width: 260px;
background-color: var(--color-auto-blue-9);
position: sticky;
top: 0;
padding-bottom: $spacer-5;
Expand All @@ -12,29 +13,48 @@
}
}

.sidebar-background-color {
background-color: var(--color-auto-blue-9);
}

.sidebar-products > li {
margin: 4px 0;
}

.sidebar-products a,
.sidebar-products .arrow {
text-decoration: none;
color: var(--color-auto-white);
display: block;
line-height: 1.4;

&:hover {
color: var(--color-auto-blue-3);
}
}

.sidebar-category,
.sidebar-product {
> a,
summary a {
color: var(--color-auto-blue-2);
opacity: 0.8;
}
}

.sidebar-product,
.sidebar-category,
.sidebar-maptopic,
.sidebar-article {
&.active > a {
}
&.is-current-page > a {
color: var(--color-auto-blue-3);
}
}

.sidebar-category.active {
background-color: rgba(#959da5, 0.1); // --color-auto-gray-4
// We can't do rgba(var(--color-auto-gray-4, 0.1) quite yet
// as the browsers are still working on supporting that combination
background-color: var(--color-auto-blue-8);
}

.sidebar-maptopic {
Expand All @@ -45,13 +65,13 @@
position: absolute;
left: $spacer-4;
height: 100%;
border-left: 1px solid var(--color-text-primary);
border-left: 1px solid var(--color-auto-blue-7);
width: 1px;
top: 0;
}
&.active {
&::before {
border-left: 3px solid var(--color-text-primary);
border-left: 3px solid var(--color-auto-blue-7);
}
}
}
Expand Down