FreshRSS/FluentReader
1
0
Fork 0
mirror of https://github.com/yang991178/fluent-reader.git synced 2025-01-01 11:17:37 +01:00
Code Issues Packages Projects Releases Wiki Activity

update animation and styles

Browse Source
This commit is contained in:
刘浩远 2020-08-16 19:33:47 +08:00
parent a4841feb7c
commit c1c7d2a097
8 changed files with 49 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
dist/article/article.css vendored
View File

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

4
dist/article/article.html vendored
View File

@ -3,14 +3,14 @@
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy"
content="default-src 'none'; script-src-elem 'sha256-sLDWrq1tUAO8IyyqmUckFqxbXYfZ2/3TEUmtxH8Unf0=' 'sha256-q3VKKMMe+ucICfT8N3WHLJdQovcvvHc0HbJ5N9uA3+w='; img-src http: https: data:; style-src 'self' 'unsafe-inline'; frame-src http: https:; media-src http: https:; connect-src https: http:">
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:">
<title>Article</title>
<link rel="stylesheet" href="article.css" />
<script integrity="sha256-sLDWrq1tUAO8IyyqmUckFqxbXYfZ2/3TEUmtxH8Unf0=" src="mercury.web.js"></script>
</head>
<body>
<div id="main"></div>
<script integrity="sha256-q3VKKMMe+ucICfT8N3WHLJdQovcvvHc0HbJ5N9uA3+w=" src="article.js"></script>
<script integrity="sha256-9YXu4Ifpt+hDzuBhE+vFtXKt1ZRbo/CkuUY4VX4dZyE=" src="article.js"></script>
<!-- Run "cat article.js | openssl dgst -sha256 -binary | openssl enc -base64 -A" for hash -->
</body>
</html>

1
dist/article/article.js vendored
View File

@ -30,5 +30,6 @@ getArticle(url).then(article => {
}
let main = document.getElementById("main")
main.innerHTML = dom.body.innerHTML
main.classList.add("show")
})

5
dist/styles/feeds.css vendored
View File

@ -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;

10
dist/styles/main.css vendored
View File

@ -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;

2
src/components/page.tsx
View File

@ -42,7 +42,7 @@ class Page extends React.Component<PageProps> {
isClickableOutsideFocusTrap={true}
className="article-container"
onClick={this.props.dismissItem}>
<div className={"article-wrapper " + AnimationClassNames.slideUpIn20} onClick={e => e.stopPropagation()}>
<div className="article-wrapper" onClick={e => e.stopPropagation()}>
<ArticleContainer itemId={this.props.itemId} />
</div>
{this.props.itemFromFeed && <>

8
src/components/settings/app.tsx
View File

@ -103,11 +103,11 @@ class AppTab extends React.Component<AppTabProps, AppTabState> {
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 = () => {

2
src/scripts/settings.ts
View File

@ -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"
}