From 8c9a0d170c8dc67105a976b87adb2ff3c4cc8afa Mon Sep 17 00:00:00 2001
From: Janne Koschinski <janne@kuschku.de>
Date: Sun, 4 Mar 2018 13:52:33 +0100
Subject: [PATCH] Improved animations
---
res/css/_animations.sass | 8 ++++++++
res/css/_content.sass | 4 ++++
res/css/search.css | 16 ++++++++++++++--
res/css/search.sass | 3 ++-
4 files changed, 28 insertions(+), 3 deletions(-)
create mode 100644 res/css/_animations.sass
diff --git a/res/css/_animations.sass b/res/css/_animations.sass
new file mode 100644
index 0000000..03ba8b9
--- /dev/null
+++ b/res/css/_animations.sass
@@ -0,0 +1,8 @@
+@keyframes slidein
+ from
+ margin-top: 1rem
+ opacity: 0
+
+ to
+ margin-top: 0
+ opacity: 1
\ No newline at end of file
diff --git a/res/css/_content.sass b/res/css/_content.sass
index 0a41281..ee95b8f 100644
--- a/res/css/_content.sass
+++ b/res/css/_content.sass
@@ -19,6 +19,8 @@
margin-top: 0
margin-bottom: 20px
position: relative
+ animation-duration: 0.6s
+ animation-name: slidein
&.focus:not(.hasmore)
> .container
@@ -194,6 +196,8 @@
.context
display: block
position: relative
+ animation-duration: 1s
+ animation-name: slidein
&.focus
padding: 0
diff --git a/res/css/search.css b/res/css/search.css
index 349f3ec..e8c2a7a 100644
--- a/res/css/search.css
+++ b/res/css/search.css
@@ -913,7 +913,9 @@ body {
display: block;
margin-top: 0;
margin-bottom: 20px;
- position: relative; }
+ position: relative;
+ animation-duration: 0.6s;
+ animation-name: slidein; }
.results .buffer.focus:not(.hasmore) > .container > .inline-button {
display: none; }
.results .buffer .title {
@@ -1071,7 +1073,9 @@ body {
background-image: url(../icons/chevron-down.svg); }
.results .buffer .container .context {
display: block;
- position: relative; }
+ position: relative;
+ animation-duration: 1s;
+ animation-name: slidein; }
.results .buffer .container .context.focus {
padding: 0;
margin: 0.5rem -0.5rem; }
@@ -1205,3 +1209,11 @@ body {
content: '['; }
.results .buffer .container .context .message.notice .sender:after {
content: ']'; }
+
+@keyframes slidein {
+ from {
+ margin-top: 1rem;
+ opacity: 0; }
+ to {
+ margin-top: 0;
+ opacity: 1; } }
diff --git a/res/css/search.sass b/res/css/search.sass
index 7b3289b..f5db1ff 100644
--- a/res/css/search.sass
+++ b/res/css/search.sass
@@ -26,4 +26,5 @@ body
@import "nav"
@import "searchoptions"
-@import "content"
\ No newline at end of file
+@import "content"
+@import "animations"
\ No newline at end of file
--
GitLab