Skip to content

Darkmode toggle take 2 #323

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.

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
Jul 18, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
6 changes: 3 additions & 3 deletions app/javascript/controllers/code_example_controller.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ export default class extends Controller {

connect() {
const codeBar = document.createElement("div")
codeBar.classList.add("w-full", "px-3", "py-2", "bg-code-header", "dark:bg-gray-700", "items-center", "flex", "justify-between", "font-mono", "rounded-t")
codeBar.classList.add("w-full", "px-3", "py-2", "bg-code-header", "items-center", "flex", "justify-between", "font-mono", "rounded-t")
codeBar.innerHTML = "<h4 class=\"text-gray-300 text-sm\">Example</h4><div><button class=\"px-2\" data-action=\"click->code-example#run\"><span class=\"text-gray-300 fill-current hover:text-gray-500\" data-target=\"code-example.run\"><i class=\"fas fa-play\"></i></span></button><button tilte=\"Copy to clipboard\" class=\"pl-2\" data-action=\"click->code-example#copy\" aria-label=\"Copy to clipboard\"><span data-target=\"code-example.copy\" class=\"text-gray-300 fill-current hover:text-gray-500\"><i class=\"far fa-copy\"></i></span></button></div>"

this.blockTarget.append(codeBar)
Expand Down Expand Up @@ -36,8 +36,8 @@ export default class extends Controller {
.then((response) => response.json())
.then((data) => {
const resultDiv = document.createElement("pre")
const output = `<span class="absolute top-0 right-0 m-2 px-2 py-1 bg-gray-400 dark:bg-gray-800 dark:text-gray-200 rounded text-sm"><i class="fas fa-info-circle"></i> Experimental Feature</span>`
resultDiv.classList.add("w-full", "my-2", "p-3", "rounded", "bg-gray-300", "text-gray-700", "dark:bg-gray-900", "dark:text-gray-200", "font-mono", "relative")
const output = `<span class="absolute top-0 right-0 m-2 px-2 py-1 text-experiment-notice bg-experiment-notice-background rounded text-sm"><i class="fas fa-info-circle"></i> Experimental Feature</span>`
resultDiv.classList.add("w-full", "my-2", "p-3", "rounded", "text-executed-result", "bg-executed-result-background", "font-mono", "relative")

resultDiv.innerHTML = output.concat(data.output)
snippet.insertAdjacentElement('afterend', resultDiv)
Expand Down
40 changes: 40 additions & 0 deletions app/javascript/controllers/theme-switch_controller.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import { Controller } from "stimulus"

function setLightMode(target) {
target.classList.replace("dark-switch", "light-switch")
document.body.dataset.theme = 'light'
}

function setDarkMode(target) {
target.classList.replace("light-switch", "dark-switch")
document.body.dataset.theme = 'dark'
}

export default class extends Controller {
static targets = ["switch"]

connect() {
const osDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
const supportsLocalStorage = 'localStorage' in window

if (supportsLocalStorage) {
const darkMode = localStorage.getItem('rubyapi-darkMode')

if (darkMode !== null && darkMode === '1') {
setDarkMode(this.switchTarget)
} else if (osDarkMode && darkMode === null) {
setDarkMode(this.switchTarget)
}
}
}

toggle() {
if (this.switchTarget.classList.contains('light-switch')) {
setDarkMode(this.switchTarget)
localStorage.setItem('rubyapi-darkMode', '1')
} else {
setLightMode(this.switchTarget)
localStorage.setItem('rubyapi-darkMode', '0')
}
}
}
35 changes: 24 additions & 11 deletions app/javascript/packs/app/application.scss
Original file line number Diff line number Diff line change
Expand Up @@ -36,10 +36,6 @@ code {
@apply bg-gray-300 rounded leading-relaxed text-sm text-gray-700;
}

@screen dark {
code { @apply bg-gray-700 text-gray-400; }
}

pre:not(.ruby) {
@apply overflow-auto font-mono;
}
Expand All @@ -49,19 +45,23 @@ pre:not(.ruby) {

.current {
& { @apply text-white bg-red-500; }

@screen dark {
& { @apply bg-gray-700 text-gray-200; }
}
}

.page a, .next a, .prev a, .last a, .first a, .current {
& { @apply px-2 inline-block text-center py-0 rounded; }
&:hover { @apply text-white bg-red-600; }
}
}

[data-theme="dark"] {
code { @apply bg-gray-700 text-gray-400; }

@screen dark {
&:hover { @apply bg-gray-900 text-gray-200; }
}
.pagination .current {
@apply bg-gray-700 text-gray-200;
}

.page a, .next a, .prev a, .last a, .first a, .current {
&:hover { @apply bg-gray-900 text-gray-200; }
}
}

Expand All @@ -71,4 +71,17 @@ pre:not(.ruby) {
}
}

.light-switch:before {
content: '☾';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've been using https://fontawesome.com for the UI icons, which you can find here. Would we be able to use the icons here as well?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let‘s do this in later Pull Request? I did not find ones on fontawesome that are better than current unicode ones. Ideally we could have CSS icons like the ones in https://justjavascript.com/.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did not find ones on fontawesome that are better than current unicode ones.

Moon: https://fontawesome.com/icons/moon?style=solid

Sun: https://fontawesome.com/icons/sun?style=solid (a bit another, but seems OK)

Bulb icons (like in Twitter) are paid in Font Awesome.

Also sometimes I think we can have too many icons/buttons in the header, and there will be some drop-down menu, and then it'd be better to do just toggle with text, without icon.

}

.dark-switch:before {
content: '☼';
}

.dev-search-query {
@apply bg-gray-900 border-gray-800;
color: #5FB3B3;
}

/* purgecss end ignore */
61 changes: 32 additions & 29 deletions app/views/home/index.html.slim
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
}
}

div class="bg-red-600 dark:bg-gray-700 text-white md:pt-3 md:pb-6"
div class="bg-home-container-background text-white md:pt-3 md:pb-6"
header id="header" class="text-white flex items-center h-16"
nav class="w-full max-w-screen-xl mx-auto" role="navigation" aria-label="main navigation"
div class="flex items-center justify-between px-6"
Expand All @@ -23,31 +23,34 @@ div class="bg-red-600 dark:bg-gray-700 text-white md:pt-3 md:pb-6"
= inline_svg_pack_tag "media/packs/app/logo.svg", class: "hidden md:block w-48"
div class="md:w-2/12 w-6/12"
div class="flex flex-row-reverse"
div class="block relative ml-4" data-controller="theme-switch"
button id="darkmode-toggle" class="relative z-20 text-xl" data-action="theme-switch#toggle" aria-label="Toggle theme" title="Toggle theme"
div.light-switch data-target="theme-switch.switch"
div class="block relative ml-4" data-controller="github-links"
button class="relative z-20 text-xl hover:text-red-100 dark:hover:text-gray-400" data-action="click->github-links#toggle"
button class="relative z-20 text-xl hover:text-github-links-hover" data-action="click->github-links#toggle"
i class="fab fa-github hover:fill-current"
button class="dropdown-overlay fixed inset-0 w-full h-full bg-black opacity-25 cursor-default invisible z-50" data-target="github-links.linksOverlay" tabindex="-1" data-action="click->github-links#out"
div class="dropdown absolute z-50 w-64 text-gray-700 bg-white dark:bg-gray-900 dark:text-gray-400 shadow-xl rounded py-2 right-0 invisible p-2 z-50" data-target="github-links.linksList"
a class="block p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-800" href="https://github.com/ruby/ruby" target="_blank" rel="noopener"
div class="text-gray-800 dark:text-gray-200 fill-current"
div class="dropdown absolute z-50 w-64 text-github-links bg-github-links-background shadow-xl rounded py-2 right-0 invisible p-2 z-50" data-target="github-links.linksList"
a class="block p-2 rounded hover:bg-github-link-hover-background" href="https://github.com/ruby/ruby" target="_blank" rel="noopener"
div class="text-github-link fill-current"
i class="fab fa-github inline-block mr-2"
h1 class="inline text-lg font-semibold" ruby/ruby
p class="text-xs py-1" Ruby is an interpreted object-oriented programming language often used for web development. It also offers many scripting features to process plain text and serialized files, or manage system tasks. It is simple, straightforward, and extensible.
hr class="my-2"
a class="block p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-800" href="https://github.com/rubyapi/rubyapi" target="_blank" rel="noopener"
div class="text-gray-800 dark:text-gray-200 fill-current"
a class="block p-2 rounded hover:bg-github-link-hover-background" href="https://github.com/rubyapi/rubyapi" target="_blank" rel="noopener"
div class="text-github-link fill-current"
i class="fab fa-github inline-block mr-2"
h1 class="inline text-lg font-semibold" rubyapi/rubyapi
p class="text-xs py-1" Ruby API is a Ruby on Rails app that makes browsing and searching Ruby's documentation easy and fast for users.

div class="relative" data-controller="ruby-version"
button class="relative z-20 text-xl pl-2 hover:text-red-100 dark:hover:text-gray-400 hover:fill-current" data-action="click->ruby-version#toggle"
button class="relative z-20 text-xl pl-2 hover:text-ruby-version-hover hover:fill-current" data-action="click->ruby-version#toggle"
| #{ruby_version}
i class="ml-2 fas fa-caret-down"
button class="dropdown-overlay fixed inset-0 w-full h-full bg-black opacity-25 cursor-default invisible z-50" data-target="ruby-version.versionOverlay" tabindex="-1" data-action="click->ruby-version#out"
div class="dropdown absolute w-32 bg-white text-gray-700 dark:bg-gray-900 dark:text-gray-400 shadow-xl rounded py-2 right-0 invisible z-50" data-target="ruby-version.versionList"
div class="dropdown text-ruby-version-list bg-ruby-version-list-background absolute w-32 shadow-xl rounded py-2 right-0 invisible z-50" data-target="ruby-version.versionList"
- available_ruby_versions.each do |version|
a class="block px-4 py-1 text-l hover:bg-gray-200 dark:hover:bg-gray-800" href="#{route_for_version version}"
a class="block px-4 py-1 text-l hover:bg-ruby-version-list-item-hover-background" href="#{route_for_version version}"
| #{version}
div class="flex flex-col justify-center items-center p-6 md:pt-6 pt-0 text-center"
h2 class="md:text-3xl text-2xl font-light my-3" Search and Explore Ruby Documentation
Expand All @@ -61,33 +64,33 @@ div class="bg-red-600 dark:bg-gray-700 text-white md:pt-3 md:pb-6"
div class="p-6 max-w-screen-xl mx-auto"
div class="flex flex-wrap"
div class="block w-full md:w-6/12 md:p-3 py-3"
div class="p-3 h-full border border-gray-300 dark:border-gray-700 rounded"
h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200" String
p class="py-1 dark:text-gray-500" A String object holds and manipulates an arbitrary sequence of bytes, typically representing characters.
div class="p-3 h-full border border-core-class-border rounded"
h2 class="text-xl font-semibold text-core-class-title" String
p class="py-1 text-core-class" A String object holds and manipulates an arbitrary sequence of bytes, typically representing characters.
= link_to "Read more", object_path(object: "string", version: ruby_version), class: "text-blue-400 hover:underline"
div class="block w-full md:w-6/12 md:p-3 py-3"
div class="p-3 h-full border border-gray-300 dark:border-gray-700 rounded"
h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200" Integer
p class="py-1 dark:text-gray-500" Represent whole numbers in Ruby
div class="p-3 h-full border border-core-class-border rounded"
h2 class="text-xl font-semibold text-core-class-title" Integer
p class="py-1 text-core-class" Represent whole numbers in Ruby
br
= link_to "Read more", object_path(object: "integer", version: ruby_version), class: "text-blue-400 hover:underline"
div class="block w-full md:w-6/12 md:p-3 py-3"
div class="p-3 h-full border border-gray-300 dark:border-gray-700 rounded"
h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200" Array
p class="py-1 dark:text-gray-500" Arrays are ordered, integer-indexed collections of any object.
div class="p-3 h-full border border-core-class-border rounded"
h2 class="text-xl font-semibold text-core-class-title" Array
p class="py-1 text-core-class" Arrays are ordered, integer-indexed collections of any object.
= link_to "Read more", object_path(object: "array", version: ruby_version), class: "text-blue-400 hover:underline"
div class="block w-full md:w-6/12 md:p-3 py-3"
div class="p-3 h-full border border-gray-300 dark:border-gray-700 rounded"
h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200" Hash
p class="py-1 dark:text-gray-500" A Hash is a dictionary-like collection of unique keys and their values.
div class="p-3 h-full border border-core-class-border rounded"
h2 class="text-xl font-semibold text-core-class-title" Hash
p class="py-1 text-core-class" A Hash is a dictionary-like collection of unique keys and their values.
= link_to "Read more", object_path(object: "hash", version: ruby_version), class: "text-blue-400 hover:underline"
div class="block w-full md:w-6/12 md:p-3 py-3"
div class="p-3 h-full border border-gray-300 dark:border-gray-700 rounded"
h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200" Symbol
p class="py-1 dark:text-gray-500" Symbol objects represent names and some strings inside the Ruby interpreter.
div class="p-3 h-full border border-core-class-border rounded"
h2 class="text-xl font-semibold text-core-class-title" Symbol
p class="py-1 text-core-class" Symbol objects represent names and some strings inside the Ruby interpreter.
= link_to "Read more", object_path(object: "symbol", version: ruby_version), class: "text-blue-400 hover:underline"
div class="block w-full md:w-6/12 md:p-3 py-3"
div class="p-3 h-full border border-gray-300 dark:border-gray-700 rounded"
h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200" Kernel
p class="py-1 dark:text-gray-500" The Kernel module is included by class Object, so its methods are available in every Ruby object.
= link_to "Read more", object_path(object: "kernel", version: ruby_version), class: "text-blue-400 hover:underline"
div class="p-3 h-full border border-core-class-border rounded"
h2 class="text-xl font-semibold text-core-class-title" Kernel
p class="py-1 text-core-class" The Kernel module is included by class Object, so its methods are available in every Ruby object.
= link_to "Read more", object_path(object: "kernel", version: ruby_version), class: "text-blue-400 hover:underline"
Loading