From ed5fb51168efee6e710a899e53e6928b35fa8a49 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Tue, 28 Jan 2020 02:20:47 +0100
Subject: [Glitch] Change announcements to be collapsed on page load in web UI

Port 0fcc4b1c566e4365e07ce5a1c87743db76c07fe6 to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
---
 .../glitch/features/getting_started/components/announcements.js    | 2 +-
 app/javascript/flavours/glitch/reducers/announcements.js           | 7 ++++---
 2 files changed, 5 insertions(+), 4 deletions(-)

(limited to 'app/javascript/flavours/glitch')

diff --git a/app/javascript/flavours/glitch/features/getting_started/components/announcements.js b/app/javascript/flavours/glitch/features/getting_started/components/announcements.js
index b56d56606..4eeac8560 100644
--- a/app/javascript/flavours/glitch/features/getting_started/components/announcements.js
+++ b/app/javascript/flavours/glitch/features/getting_started/components/announcements.js
@@ -376,7 +376,7 @@ class Announcements extends ImmutablePureComponent {
         <img className='announcements__mastodon' alt='' draggable='false' src={mascot || elephantUIPlane} />
 
         <div className='announcements__container'>
-          <ReactSwipeableViews animateHeight index={index} onChangeIndex={this.handleChangeIndex}>
+          <ReactSwipeableViews animateHeight={!reduceMotion} adjustHeight={reduceMotion} index={index} onChangeIndex={this.handleChangeIndex}>
             {announcements.map(announcement => (
               <Announcement
                 key={announcement.get('id')}
diff --git a/app/javascript/flavours/glitch/reducers/announcements.js b/app/javascript/flavours/glitch/reducers/announcements.js
index 3215c1c2d..1653318ce 100644
--- a/app/javascript/flavours/glitch/reducers/announcements.js
+++ b/app/javascript/flavours/glitch/reducers/announcements.js
@@ -16,7 +16,7 @@ import { Map as ImmutableMap, List as ImmutableList, Set as ImmutableSet, fromJS
 const initialState = ImmutableMap({
   items: ImmutableList(),
   isLoading: false,
-  show: true,
+  show: false,
   unread: ImmutableSet(),
 });
 
@@ -84,10 +84,11 @@ export default function announcementsReducer(state = initialState, action) {
       const items = fromJS(action.announcements);
 
       map.set('unread', ImmutableSet());
-      map.set('items', items);
-      map.set('isLoading', false);
 
       addUnread(map, items);
+
+      map.set('items', items);
+      map.set('isLoading', false);
     });
   case ANNOUNCEMENTS_FETCH_FAIL:
     return state.set('isLoading', false);
-- 
cgit 


From 8bb5d1abaad3bec92ac8d9cefcf5b1871429edcb Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Tue, 28 Jan 2020 02:21:00 +0100
Subject: [Glitch] Fix design of announcements in admin UI

Port 305abc9e05ddb2db6a40a6eda01578e01e58791f to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
---
 app/javascript/flavours/glitch/styles/admin.scss | 43 ++++++++++++++++++++++++
 1 file changed, 43 insertions(+)

(limited to 'app/javascript/flavours/glitch')

diff --git a/app/javascript/flavours/glitch/styles/admin.scss b/app/javascript/flavours/glitch/styles/admin.scss
index a1895d066..26a98c66f 100644
--- a/app/javascript/flavours/glitch/styles/admin.scss
+++ b/app/javascript/flavours/glitch/styles/admin.scss
@@ -903,3 +903,46 @@ a.name-tag,
 .center-text {
   text-align: center;
 }
+
+.announcements-list {
+  border: 1px solid lighten($ui-base-color, 4%);
+  border-radius: 4px;
+
+  &__item {
+    padding: 15px 0;
+    background: $ui-base-color;
+    border-bottom: 1px solid lighten($ui-base-color, 4%);
+
+    &__title {
+      padding: 0 15px;
+      display: block;
+      font-weight: 500;
+      font-size: 18px;
+      line-height: 1.5;
+      color: $secondary-text-color;
+      text-decoration: none;
+      margin-bottom: 10px;
+
+      &:hover,
+      &:focus,
+      &:active {
+        color: $primary-text-color;
+      }
+    }
+
+    &__meta {
+      padding: 0 15px;
+      color: $dark-text-color;
+    }
+
+    &__action-bar {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    &:last-child {
+      border-bottom: 0;
+    }
+  }
+}
-- 
cgit