Browse Source

Improve language switcher UI (#46)

Prevent scroll chaining from lang list area (excluding Safari)

Limit lang list height

[REFACTORING]Use CSS custom properties

Make lang icon easier to tap on mobile devices

Define deploy task

Add Santali

Co-authored-by: Kitaiti Makoto <KitaitiMakoto@gmail.com>
Reviewed-on: https://git.joinplu.me/plume/joinplu.me/pulls/46
main
KitaitiMakoto 4 months ago
parent
commit
23eb446e04
3 changed files with 25 additions and 6 deletions
  1. +8
    -3
      Rakefile
  2. +1
    -0
      data/languages.yaml
  3. +16
    -3
      source/stylesheets/site.css.scss

+ 8
- 3
Rakefile View File

@@ -24,7 +24,7 @@ end
task :default => [:build_trans, :build_site]

desc "Build site"
multitask :build_site => [:build_base, "crowdin:download"] do
task :build_site => [:build_base, "crowdin:download"] do
Pathname.glob("#{LOCALE_DIR}/**/*.html").select(&:file?).each do |path|
content = path.read
content.sub! /<script type="text\/javascript" src="\/\/cdn.crowdin.com\/jipt\/jipt.js"><\/script>/, ""
@@ -56,9 +56,14 @@ task :build_trans_src do
sh "middleman", "build", "--build-dir", LOCALE_DIR
end

desc "Deploy joinplue.me"
task :deploy => :build_site do
sh "netlify", "deploy", "--site", "12885026-8536-4072-b216-04d71e8f84be", "--dir", BUILD_DIR, "--prod"
end

desc "Deploy translate.joinplu.me"
task :deploy_trans => :build_trans do
sh "netlify", "deploy", "--dir", TRANS_DIR, "--prod"
sh "netlify", "deploy", "--site", "0812f781-8b3a-481d-b4fb-bc5cb5254f19", "--dir", TRANS_DIR, "--prod"
end

namespace :crowdin do
@@ -73,6 +78,6 @@ namespace :crowdin do
end

task :download_pseudo do
sh "crowdin", "download", "--language", PSEUDO_LANG
sh "crowdin", "download", "--pseudo"
end
end

+ 1
- 0
data/languages.yaml View File

@@ -24,6 +24,7 @@ pl: Polski
pt: Português
ro: Română
ru: Русский
sat: ᱥᱟᱱᱛᱟᱲᱤ
si: සිංහල
sr: Српски
sv: Svenska


+ 16
- 3
source/stylesheets/site.css.scss View File

@@ -3,6 +3,11 @@ $plumedark: #6457a6;
$gray: #F4F4F4;
$black: #25213c;

:root {
--lang-switcher-margin: 2vw;
--lang-switcher-width: 2em;
}

@font-face {
font-family: 'Playfair Display';
src:
@@ -43,8 +48,8 @@ header {

.language-switcher {
position: absolute;
top: 2vw;
right: 2vw;
top: var(--lang-switcher-margin);
right: var(--lang-switcher-margin);
margin: 0;
padding: 0;
line-height: 1;
@@ -159,7 +164,7 @@ section {

[aria-haspopup] {
display: block;
width: 2em;
width: var(--lang-switcher-width);
padding: 0;
line-height: 1;
border: none;
@@ -189,6 +194,9 @@ section {
list-style: none;
margin: 0;
padding: 0.5em 0;
max-height: calc(90vh - var(--lang-switcher-margin) - var(--lang-switcher-width));
overflow-y: scroll;
overscroll-behavior: contain;
border-radius: 0.1em;
background: #ffffff;
box-shadow: 0 0 16px -6px rgba(0, 0, 0, 0.6);
@@ -250,6 +258,11 @@ footer {
}

@media screen and (max-width: 1000px) {
:root {
--lang-switcher-margin: 3vw;
--lang-switcher-width: 3em;
}

body > main > * {
padding: 0 5vw;
}


Loading…
Cancel
Save