From c1c7d2a0976fa9157b79adc24ca7afd5a0ba1002 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E6=B5=A9=E8=BF=9C?= Date: Sun, 16 Aug 2020 19:33:47 +0800 Subject: [PATCH] update animation and styles --- dist/article/article.css | 24 ++++++++++++++++++++++++ dist/article/article.html | 4 ++-- dist/article/article.js | 1 + dist/styles/feeds.css | 5 +++++ dist/styles/main.css | 10 ++++++++++ src/components/page.tsx | 2 +- src/components/settings/app.tsx | 8 ++++---- src/scripts/settings.ts | 2 ++ 8 files changed, 49 insertions(+), 7 deletions(-) diff --git a/dist/article/article.css b/dist/article/article.css index fe9d529..ebbf632 100644 --- a/dist/article/article.css +++ b/dist/article/article.css @@ -33,10 +33,29 @@ a:hover, a:active { text-decoration: underline; } +@keyframes fadeIn { + 0% { + opacity: 0; + transform: translateY(10px); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} #main { max-width: 700px; margin: 0 auto; + display: none; } +#main.show { + display: block; + animation-name: fadeIn; + animation-duration: 0.367s; + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-fill-mode: both; +} + #main > p.title { font-size: 1.25rem; line-height: 1.75rem; @@ -73,4 +92,9 @@ article code { font-family: Monaco, Consolas, monospace; font-size: .875rem; line-height: 1; +} +article blockquote { + border-left: 2px solid var(--gray); + margin: 1em 0; + padding: 0 40px; } \ No newline at end of file diff --git a/dist/article/article.html b/dist/article/article.html index cf09834..564c801 100644 --- a/dist/article/article.html +++ b/dist/article/article.html @@ -3,14 +3,14 @@ + content="default-src 'none'; script-src-elem 'sha256-sLDWrq1tUAO8IyyqmUckFqxbXYfZ2/3TEUmtxH8Unf0=' 'sha256-9YXu4Ifpt+hDzuBhE+vFtXKt1ZRbo/CkuUY4VX4dZyE='; img-src http: https: data:; style-src 'self' 'unsafe-inline'; frame-src http: https:; media-src http: https:; connect-src https: http:"> Article
- + \ No newline at end of file diff --git a/dist/article/article.js b/dist/article/article.js index ccfe393..85f71f6 100644 --- a/dist/article/article.js +++ b/dist/article/article.js @@ -30,5 +30,6 @@ getArticle(url).then(article => { } let main = document.getElementById("main") main.innerHTML = dom.body.innerHTML + main.classList.add("show") }) diff --git a/dist/styles/feeds.css b/dist/styles/feeds.css index 6e57a1e..4bad183 100644 --- a/dist/styles/feeds.css +++ b/dist/styles/feeds.css @@ -1,3 +1,7 @@ +@keyframes slideUp20 { + 0% { transform: translateY(20px); } + 100% { transform: translateY(0); } +} .article-wrapper { margin: 32px auto 0; width: 860px; @@ -6,6 +10,7 @@ box-shadow: 0 6.4px 14.4px 0 rgba(0,0,0,.132), 0 1.2px 3.6px 0 rgba(0,0,0,.108); border-radius: 5px; overflow: hidden; + animation-name: slideUp20; } .article-container .btn-group .btn { color: #fff; diff --git a/dist/styles/main.css b/dist/styles/main.css index c48568b..3ae22ce 100644 --- a/dist/styles/main.css +++ b/dist/styles/main.css @@ -5,6 +5,10 @@ background: #fff; } +@keyframes fade { + 0% { opacity: 0; } + 100% { opacity: 1; } +} .menu-container, .article-container { position: fixed; z-index: 5; @@ -14,6 +18,12 @@ height: 100%; background-color: #0008; backdrop-filter: saturate(150%) blur(20px); + animation-name: fade; +} +.menu-container, .article-container, .article-wrapper { + animation-duration: 0.5s; + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-fill-mode: both; } .article-container { z-index: 6; diff --git a/src/components/page.tsx b/src/components/page.tsx index f60cc8f..9b1db59 100644 --- a/src/components/page.tsx +++ b/src/components/page.tsx @@ -42,7 +42,7 @@ class Page extends React.Component { isClickableOutsideFocusTrap={true} className="article-container" onClick={this.props.dismissItem}> -
e.stopPropagation()}> +
e.stopPropagation()}>
{this.props.itemFromFeed && <> diff --git a/src/components/settings/app.tsx b/src/components/settings/app.tsx index 7633a1d..a790ef6 100644 --- a/src/components/settings/app.tsx +++ b/src/components/settings/app.tsx @@ -103,11 +103,11 @@ class AppTab extends React.Component { languageOptions = (): IDropdownOption[] => [ { key: "default", text: intl.get("followSystem") }, + { key: "de", text: "Deutsch" }, { key: "en-US", text: "English" }, - { key: "es", text: "Español"}, - { key: "fr-FR", text: "Français"}, - { key: "zh-CN", text: "中文（简体）"}, - { key: "de", text: "Deutsch"} + { key: "es", text: "Español" }, + { key: "fr-FR", text: "Français" }, + { key: "zh-CN", text: "中文（简体）" }, ] toggleStatus = () => { diff --git a/src/scripts/settings.ts b/src/scripts/settings.ts index d17f1d1..4799f7d 100644 --- a/src/scripts/settings.ts +++ b/src/scripts/settings.ts @@ -52,6 +52,8 @@ window.settings.addThemeUpdateListener((shouldDark) => { export function getCurrentLocale() { let locale = window.settings.getCurrentLocale() + if (locale in locales) return locale + locale = locale.split("-")[0] return (locale in locales) ? locale : "en-US" }