From 835eec8a4cbf8fa340241fc0bd83e07e8c19ef5d Mon Sep 17 00:00:00 2001
From: David Yip <yipdw@member.fsf.org>
Date: Mon, 8 Jan 2018 10:40:34 -0600
Subject: Prototype out glitchy elephant friend.  #294.

Glitched elephant friends kindly provided by @ncls7615.
---
 app/javascript/flavours/glitch/features/drawer/index.js |   9 ++++++++-
 app/javascript/flavours/glitch/images/mbstobon-ui-1.png | Bin 0 -> 39646 bytes
 app/javascript/flavours/glitch/images/mbstobon-ui-2.png | Bin 0 -> 43609 bytes
 app/javascript/flavours/glitch/images/mbstobon-ui-3.png | Bin 0 -> 40376 bytes
 .../flavours/glitch/styles/components/drawer.scss       |   6 ++++++
 5 files changed, 14 insertions(+), 1 deletion(-)
 create mode 100644 app/javascript/flavours/glitch/images/mbstobon-ui-1.png
 create mode 100644 app/javascript/flavours/glitch/images/mbstobon-ui-2.png
 create mode 100644 app/javascript/flavours/glitch/images/mbstobon-ui-3.png

(limited to 'app/javascript')

diff --git a/app/javascript/flavours/glitch/features/drawer/index.js b/app/javascript/flavours/glitch/features/drawer/index.js
index 9ade1f87a..c8eabb4f3 100644
--- a/app/javascript/flavours/glitch/features/drawer/index.js
+++ b/app/javascript/flavours/glitch/features/drawer/index.js
@@ -2,6 +2,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
+import classNames from 'classnames';
 
 //  Actions.
 import { openModal } from 'flavours/glitch/actions/modal';
@@ -68,6 +69,12 @@ class Drawer extends React.Component {
       submitted,
     } = this.props;
 
+    let choices = ['mbstobon-bg-1', 'mbstobon-bg-2', 'mbstobon-bg-3'];
+    let glitchyFriendDecision = choices[Math.floor(Math.random() * choices.length)];
+    let drawerAttrs = {
+      className: classNames('contents', glitchyFriendDecision)
+    };
+
     //  The result.
     return (
       <div className='drawer'>
@@ -87,7 +94,7 @@ class Drawer extends React.Component {
           submitted={submitted}
           value={searchValue}
         />
-        <div className='contents'>
+        <div {...drawerAttrs}>
           <DrawerAccount account={account} />
           <Composer />
           <DrawerResults
diff --git a/app/javascript/flavours/glitch/images/mbstobon-ui-1.png b/app/javascript/flavours/glitch/images/mbstobon-ui-1.png
new file mode 100644
index 000000000..25e1707c9
Binary files /dev/null and b/app/javascript/flavours/glitch/images/mbstobon-ui-1.png differ
diff --git a/app/javascript/flavours/glitch/images/mbstobon-ui-2.png b/app/javascript/flavours/glitch/images/mbstobon-ui-2.png
new file mode 100644
index 000000000..64cf3cbf3
Binary files /dev/null and b/app/javascript/flavours/glitch/images/mbstobon-ui-2.png differ
diff --git a/app/javascript/flavours/glitch/images/mbstobon-ui-3.png b/app/javascript/flavours/glitch/images/mbstobon-ui-3.png
new file mode 100644
index 000000000..b767a9122
Binary files /dev/null and b/app/javascript/flavours/glitch/images/mbstobon-ui-3.png differ
diff --git a/app/javascript/flavours/glitch/styles/components/drawer.scss b/app/javascript/flavours/glitch/styles/components/drawer.scss
index 865ab4343..423141aec 100644
--- a/app/javascript/flavours/glitch/styles/components/drawer.scss
+++ b/app/javascript/flavours/glitch/styles/components/drawer.scss
@@ -49,6 +49,12 @@
     overflow-y: auto;
     contain: strict;
   }
+
+  @for $i from 1 through 3 {
+    .mbstobon-bg-#{$i} {
+      background: url("~flavours/glitch/images/mbstobon-ui-#{$i}.png") no-repeat left bottom / contain;
+    }
+  }
 }
 
 .drawer--header {
-- 
cgit