Fix up timeout, improve contrast on "show more", add responsive style

for extremely wide monitors

3 files changed, 30 insertions, 4 deletions

diff --git a/app/assets/javascripts/components/actions/notifications.jsx b/app/assets/javascripts/components/actions/notifications.jsx
index 1731c1857..4caf9c75b 100644
--- a/app/assets/javascripts/components/actions/notifications.jsx
+++ b/app/assets/javascripts/components/actions/notifications.jsx
@@ -40,7 +40,7 @@ export function updateNotifications(notification, intlMessages, intlLocale) {
     // Desktop notifications
     if (typeof window.Notification !== 'undefined' && showAlert) {
       const title = new IntlMessageFormat(intlMessages[`notification.${notification.type}`], intlLocale).format({ name: notification.account.display_name.length > 0 ? notification.account.display_name : notification.account.username });
-      const body  = $('<p>').html(notification.status ? notification.status.content : '').text();
+      const body  = (notification.status && notification.status.spoiler_text.length > 0) ? notification.status.spoiler_text : $('<p>').html(notification.status ? notification.status.content : '').text();
 
       new Notification(title, { body, icon: notification.account.avatar, tag: notification.id });
     }
diff --git a/app/assets/javascripts/components/features/ui/components/columns_area.jsx b/app/assets/javascripts/components/features/ui/components/columns_area.jsx
index 8d316e26b..dd771900d 100644
--- a/app/assets/javascripts/components/features/ui/components/columns_area.jsx
+++ b/app/assets/javascripts/components/features/ui/components/columns_area.jsx
@@ -3,12 +3,15 @@ import PureRenderMixin from 'react-addons-pure-render-mixin';
 const style = {
   display: 'flex',
   flex: '1 1 auto',
-  justifyContent: 'flex-start',
   overflowX: 'auto'
 };
 
 const ColumnsArea = React.createClass({
 
+  propTypes: {
+    children: React.PropTypes.node
+  },
+
   mixins: [PureRenderMixin],
 
   render () {
diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss
index 663969c32..f8f1b9d6c 100644
--- a/app/assets/stylesheets/components.scss
+++ b/app/assets/stylesheets/components.scss
@@ -139,10 +139,10 @@
   }
 
   .status__content__spoiler-link {
-    background: lighten($color1, 26%);
+    background: lighten($color1, 30%);
 
     &:hover {
-      background: lighten($color1, 29%);
+      background: lighten($color1, 33%);
       text-decoration: none;
     }
   }
@@ -261,6 +261,15 @@
   .status__avatar {
     opacity: 0.5;
   }
+
+  .status__content__spoiler-link {
+    background: lighten($color1, 26%);
+
+    &:hover {
+      background: lighten($color1, 29%);
+      text-decoration: none;
+    }
+  }
 }
 
 .notification__display-name {
@@ -354,6 +363,7 @@
 
 .columns-area {
   flex-direction: row;
+  justify-content: flex-start;
 }
 
 @media screen and (min-width: 360px) {
@@ -371,6 +381,19 @@
   width: 280px;
 }
 
+@media screen and (min-width: 2560px) {
+  .columns-area {
+    justify-content: center;
+  }
+
+  .column, .drawer {
+    width: 350px;
+    border-radius: 4px;
+    height: 90vh;
+    margin-top: 5vh;
+  }
+}
+
 .drawer__inner {
   background: linear-gradient(rgba(lighten($color1, 13%), 1), rgba(lighten($color1, 13%), 0.65));
 }