From 48dadd857126becb5e9148767a3b0aafba9c7c0e Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 25 Jul 2017 14:00:30 -0300
Subject: [PATCH] Viewing Options for mobile

---
 .../src/components/Stream.css                 |  4 ++--
 client/coral-ui/components/Tab.css            | 10 ++++++++
 .../client/components/ViewingOptions.css      | 24 +++++++++++++++++++
 .../client/components/ViewingOptions.js       |  7 ++++--
 .../client/index.js                           |  4 +++-
 .../client/translations.yml                   |  4 ++++
 6 files changed, 48 insertions(+), 5 deletions(-)
 create mode 100644 plugins/coral-plugin-viewing-options/client/translations.yml

diff --git a/client/coral-embed-stream/src/components/Stream.css b/client/coral-embed-stream/src/components/Stream.css
index 8c5a4250b..23f620157 100644
--- a/client/coral-embed-stream/src/components/Stream.css
+++ b/client/coral-embed-stream/src/components/Stream.css
@@ -14,7 +14,7 @@
 .filterWrapper {
   position: absolute;
   right: 0;
-  margin-top: 6px;
+  margin-top: 4px;
 }
 
 .highlightedContainer {
@@ -26,4 +26,4 @@
   margin-top: 28px;
   padding-bottom: 50px;
   min-height: 600px;
-}
+}
\ No newline at end of file
diff --git a/client/coral-ui/components/Tab.css b/client/coral-ui/components/Tab.css
index b3c026b3d..fc38d192d 100644
--- a/client/coral-ui/components/Tab.css
+++ b/client/coral-ui/components/Tab.css
@@ -68,3 +68,13 @@
   pointer-events: none;
 }
 
+
+@custom-media --small-viewport (max-width: 320px);
+
+@media (--small-viewport) {
+  .buttonSub, .buttonSubActive, .buttonSubActive:hover, .buttonSubActive:focus {
+    font-size: 0.96em;
+    padding-right: 5px;
+    padding-right: 5px;
+  }
+}
diff --git a/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.css b/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.css
index 81d373b95..607ddc303 100644
--- a/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.css
+++ b/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.css
@@ -29,3 +29,27 @@
   font-size: 14px;
   vertical-align: middle;
 }
+
+
+@custom-media --small-viewport (max-width: 425px);
+
+.filterText {
+  display: inline-block;
+}
+
+.filterIcon {
+  vertical-align: middle;
+  display: none;
+}
+
+@media (--small-viewport) {
+  .filterText {
+    display: none;
+  }
+  .filterIcon {
+    display: inline-block;
+  }
+}
+
+
+
diff --git a/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.js b/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.js
index 87680b370..13b3094a1 100644
--- a/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.js
+++ b/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.js
@@ -1,8 +1,9 @@
 import React from 'react';
 import cn from 'classnames';
 import styles from './ViewingOptions.css';
-import {Slot, ClickOutside} from 'plugin-api/beta/client/components';
+import {t} from 'plugin-api/beta/client/services';
 import {Icon} from 'plugin-api/beta/client/components/ui';
+import {Slot, ClickOutside} from 'plugin-api/beta/client/components';
 
 const ViewingOptions = (props) => {
   const toggleOpen = () => {
@@ -23,7 +24,9 @@ const ViewingOptions = (props) => {
     <ClickOutside onClickOutside={handleClickOutside}>
       <div className={cn([styles.root, 'coral-plugin-viewing-options'])}>
         <div>
-          <button className={styles.button} onClick={toggleOpen}>Viewing Options
+          <button className={styles.button} onClick={toggleOpen}>
+            <Icon className={styles.filterIcon} name="filter_list" />
+            <span className={styles.filterText}>{t('viewing_options')}</span> 
             {props.open ? <Icon name="arrow_drop_up" className={styles.icon}/> : <Icon name="arrow_drop_down" className={styles.icon}/>}
           </button>
         </div>
diff --git a/plugins/coral-plugin-viewing-options/client/index.js b/plugins/coral-plugin-viewing-options/client/index.js
index 4e9001c1b..464a38d7d 100644
--- a/plugins/coral-plugin-viewing-options/client/index.js
+++ b/plugins/coral-plugin-viewing-options/client/index.js
@@ -1,9 +1,11 @@
 import ViewingOptions from './containers/ViewingOptions';
 import reducer from './reducer';
+import translations from './translations.yml';
 
 export default {
   reducer,
   slots: {
     streamFilter: [ViewingOptions]
-  }
+  },
+  translations
 };
diff --git a/plugins/coral-plugin-viewing-options/client/translations.yml b/plugins/coral-plugin-viewing-options/client/translations.yml
new file mode 100644
index 000000000..6ab31fa1b
--- /dev/null
+++ b/plugins/coral-plugin-viewing-options/client/translations.yml
@@ -0,0 +1,4 @@
+en:
+  viewing_options: "Viewing Options"
+es:
+  viewing_options: "Opciones de visualización"
\ No newline at end of file