Skip to content
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

Improve 'extras' menu by renaming, making theme choice more explicit #4574

Merged
merged 6 commits into from
Dec 6, 2023
Merged

Improve 'extras' menu by renaming, making theme choice more explicit #4574

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
964d25d
Decompose the preferences page into two
hexylena Dec 6, 2023
cd4a7b5
Only show contributors on home page for masthead real-estate
hexylena Dec 6, 2023
1d04a5e
Prioritise theme, privacy
hexylena Dec 6, 2023
12f2214
fix css for navbar dropdowns
hexylena Dec 6, 2023
b14e1db
some more clarifications
hexylena Dec 6, 2023
c91c761
unnecessary border
hexylena Dec 6, 2023
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: 2 additions & 0 deletions _includes/default-header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,11 @@
{% icon topic aria=false %} {{ topic.title }}
</a>
{% else %}
{% if page.path == 'index.md' %}
<a class="nav-link" href="{{ site.baseurl }}/hall-of-fame" title="Hall of Fame">
{% icon hall-of-fame %} Contributors
</a>
{% endif %}

{% endif %}
</li>
Expand Down
44 changes: 28 additions & 16 deletions _includes/extras.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,54 +1,66 @@
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false" title="Extras">
{% icon galaxy-star %} Extras
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false" title="Settings">
{% icon galaxy-gear %} Settings
</a>
<div class="dropdown-menu dropdown-menu-right">

<a class="dropdown-item" href="{{ site.github_repository }}/edit/{{ site.github_repository_branch }}/{{ page.path }}" title="Edit on GitHub">
{% icon github %} Edit on GitHub
<h6 class="dropdown-header">Preferences</h6>

<a href="{% link user/theme.md %}" class="dropdown-item">
{% icon gtn-theme %} Theme
</a>

<a href="{% link user/privacy.md %}" class="dropdown-item">
{% icon pref-dataprivate %} Data Privacy
</a>

<div class="dropdown-divider"></div>

<h6 class="dropdown-header">For Everyone</h6>

<a class="dropdown-item" href="{{ site.github_repository }}/edit/{{ site.github_repository_branch }}/{{ page.path }}">
{% icon github %} Propose a change or correction
</a>

<a class="dropdown-item" href="{% link stats.md %}" title="Show view statistics about this repository">
<h6 class="dropdown-header">Instructor Utilities</h6>

<a class="dropdown-item" href="{% link stats.md %}">
{% icon galaxy-barchart %} GTN statistics
</a>

<a class="dropdown-item" href="https://plausible.galaxyproject.eu/training.galaxyproject.org?period=12mo&page={{site.baseurl}}{{ page.url }}" title="Show view statistics of this page">
{% icon galaxy-barchart %} Page Metrics
<a class="dropdown-item" href="https://plausible.galaxyproject.eu/training.galaxyproject.org?period=12mo&page={{site.baseurl}}{{ page.url }}">
{% icon galaxy-barchart %} Page View Metrics
</a>

<!-- link to feedback -->
{% if page.layout == 'topic' %}
{% assign fdbk_by_topic = site.data['feedback'] | how_many_topic_feedbacks:site.data[page.topic_name].title %}
{% if fdbk_by_topic > 0 %}
<a class="dropdown-item" href="{{ site.baseurl }}/feedback.html#topic-{{ page.topic_name }}" title="Show feedback statistics about this topic">
<a class="dropdown-item" href="{{ site.baseurl }}/feedback.html#topic-{{ page.topic_name }}">
{% icon galaxy-barchart %} Topic feedback
</a>
{% else %}
<a class="dropdown-item" href="{% link feedback.md %}" title="Show feedback statistics about this repository">
<a class="dropdown-item" href="{% link feedback.md %}">
{% icon galaxy-barchart %} GTN feedback
</a>
{% endif %}
{% elsif page.layout == 'tutorial_hands_on' %}
{% assign fdbk_by_tutorial = site.data['feedback'] | how_many_tutorial_feedbacks:page.title %}
{% if fdbk_by_tutorial > 0}
<a class="dropdown-item" href="{{ site.baseurl }}/feedback.html#tutorial-{{ page.tutorial_name }}" title="Show feedback statistics about this tutorial">
<a class="dropdown-item" href="{{ site.baseurl }}/feedback.html#tutorial-{{ page.tutorial_name }}">
{% icon galaxy-barchart %} Tutorial feedback
</a>
{% else %}
<a class="dropdown-item" href="{% link feedback.md %}" title="Show feedback statistics about this repository">
<a class="dropdown-item" href="{% link feedback.md %}">
{% icon galaxy-barchart %} GTN feedback
</a>
{% endif %}
{% else %}
<a class="dropdown-item" href="{% link feedback.md %}" title="Show feedback statistics about this repository">
<a class="dropdown-item" href="{% link feedback.md %}">
{% icon galaxy-barchart %} GTN feedback
</a>
{% endif %}

<a href="{% link preferences.md %}" class="dropdown-item">
{% icon gtn-theme %} User Preferences <span class="badge badge-secondary">New</span>
</a>

<div class="dropdown-item">
<div>
{% icon galaxy-rulebuilder-history %} Previous Versions
Expand Down
35 changes: 23 additions & 12 deletions assets/css/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -915,24 +915,30 @@ blockquote {

// This applies a "dark" style to the dropdown menus on small devices since
// Bootstrap v4 does not do that by default.

.dropdown-menu {
background-color: var(--color-background);
border-color: var(--border);
}
.dropdown-item {
color: var(--text-color);

&:hover, &:focus, &:active {
background-color: var(--brand-color);
color: var(--text-color);
}
}

.dropdown-divider {
border-top-color: var(--border);
}

@media (max-width: 768px) {
.navbar {
.dropdown-menu {
background-color: var(--color-background);
border-color: transparent;
}

.dropdown-item {
color: var(--text-color);

&:hover,
&:focus,
&:active {
background-color: var(--brand-color);
color: var(--text-color);
}
}

.nav-item,
.dropdown-item {
overflow: hidden;
Expand Down Expand Up @@ -1593,6 +1599,10 @@ ul.text-list, ol.text-list {
.dropdown-item:focus-visible {
}

.dropdown-header {
color: var(--text-color-muted);
}

ol.breadcrumb {
background: var(--secondary-color);

Expand Down Expand Up @@ -1682,6 +1692,7 @@ figure > a[target="_blank"]::after {
figure {
max-width: 20em;
margin: 0rem 0.5rem;
border: 0px transparent;

img {
max-height: 5em;
Expand Down
120 changes: 14 additions & 106 deletions preferences.md → user/privacy.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,118 +1,26 @@
---
layout: page
title: Your Preferences
title: Data Privacy
---

## Colour Scheme
The GTN is invested in preserving your privacy. We attempt to balance your
rights and needs to private access of the GTN resources, with our needs to
continue receiving funding and provide a good experience for you, the user.

We have attempted to decompose our themes into several axes depending on your accessibility needs:
## Alternative Access

This control responds to [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)
If you do not like the privacy options available to you, the GTN can be
[downloaded and hosted yourself, offline]({% link topics/contributing/tutorials/running-jekyll/tutorial.md %}),
for users needing completely anonymous access to the site and it's tutorials
and slides.

<select class="form-control theme-control" id="brightness" onchange="savePrefs()">
<option value="auto">Auto</option>
<option value="light">Light</option>
<option value="dark">Dark</option>
</select>


### Preferred Light Theme

<select class="form-control theme-control" id="light_theme" onchange="savePrefs()">
<option value="white">White</option>
<option value="yellow">Paper</option>
</select>

### Preferred Dark Theme

<select class="form-control theme-control" id="dark_theme" onchange="savePrefs()">
<option value="night">Night</option>
<option value="midnight">Midnight</option>
</select>

### UI Contrast
## Data Collection Systems

This control responds to [prefers-contrast](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast)

<select class="form-control theme-control" id="contrast" onchange="savePrefs()">
<option value="auto">Auto</option>
<option value="low">Low</option>
<option value="high">High</option>
</select>


### UI Theme

<select class="form-control theme-control" id="theme" onchange="savePrefs()">
<option value="default">Default</option>
<option value="rainbow">🌈</option>
<option value="blm">✊🏿</option>
<option value="halloween">🎃</option>
<option value="progress">🏳️‍🌈</option>
<option value="trans">🏳️‍⚧️ </option>
<option value="straya">🇦🇺</option>
</select>


<script>
function savePrefs() {
// Convert this into a hash
var prefs = {};
[...document.querySelectorAll(".theme-control")]
.map(x => { return [x.id, x.value]})
.forEach(x => { prefs[x[0]] = x[1] })
gtnLocalSet('theme2', JSON.stringify(prefs))
processTheme2();


if(prefs.theme === "straya"){
document.body.classList.add('downunder');
setTimeout(function(){
document.body.classList.remove('downunder');
}, 8000);
}
}

function restorePrefs(){
var prefs = JSON.parse(gtnLocalGet("theme2")) || {};
Object.keys(prefs).forEach(k => {
document.getElementById(k).value = prefs[k]
})
processTheme2();
}
restorePrefs();
</script>

## Fonts

While some of our fonts are available on Google Fonts, we **do not** use Google Fonts to serve them.

<select class="form-control font-control" id="font" onchange="saveFont()">
<option value="default">Default (Atkinson Hyperlegible)</option>
<option value="open-dyslexic">Open Dyslexic</option>
<option value="comic-sans">Comic Sans</option>
</select>

Font for code blocks:

<select class="form-control font-control-code" id="font-code" onchange="saveFont()">
<option value="default">Default</option>
<option value="comic-sans">Comic Sans Mono</option>
</select>

<script>
function saveFont(){
gtnLocalSet("fontMain", document.getElementById("font").value);
gtnLocalSet("fontCode", document.getElementById("font-code").value);

document.body.dataset["font_main"] = document.getElementById("font").value
document.body.dataset["font_code"] = document.getElementById("font-code").value
}
document.getElementById("font").value = gtnLocalGet("fontMain");
document.getElementById("font-code").value = gtnLocalGet("fontCode");
</script>
We use two data collection systems, for different purposes. Both, to the best
of our knowledge, render you effectively anonymous as they are currently
configured. Each system collects different data, and can be opted out of individually.

## Data Privacy
### Plausible

We collect the following information on visitors:

Expand Down
Loading
Loading