PatOConnor43/joinplu.me
1
0
Fork 0
forked from plume/joinplu.me
Code Issues Pull requests Projects Releases Wiki Activity

Improve language switcher UI (#46)

Browse source 
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: plume/joinplu.me#46
This commit is contained in:
KitaitiMakoto 2020-12-13 10:29:44 +00:00
parent 59645433a1
commit 23eb446e04
3 changed files with 25 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
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
data/languages.yaml
View file

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

19
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;
}