Skip to content

Commit

Permalink
Merge pull request #4574 from galaxyproject/better-menu
Browse files Browse the repository at this point in the history 
Improve 'extras' menu by renaming, making theme choice more explicit
  • Loading branch information
@shiltemann
shiltemann authored Dec 6, 2023
2 parents 9a8f350 + c91c761 commit e5e8cf5
Show file tree
Hide file tree
Showing 5 changed files with 184 additions and 134 deletions.
2 changes: 2 additions & 0 deletions _includes/default-header.html
View file
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
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
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
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

0 comments on commit e5e8cf5

Please sign in to comment.