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..c51d87f11 100644 --- a/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.css +++ b/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.css @@ -5,6 +5,10 @@ composes: buttonReset from "coral-framework/styles/reset.css"; } +.button:hover { + cursor: pointer; +} + .list { background: white; position: absolute; @@ -29,3 +33,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) => {
-
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 diff --git a/plugins/talk-plugin-featured-comments/client/components/Tag.css b/plugins/talk-plugin-featured-comments/client/components/Tag.css index 88a019b5d..7ade3d968 100644 --- a/plugins/talk-plugin-featured-comments/client/components/Tag.css +++ b/plugins/talk-plugin-featured-comments/client/components/Tag.css @@ -24,6 +24,15 @@ cursor: pointer; } +.noSelect { + -ms-user-select:none; + -moz-user-select: none; + -webkit-user-select: none; + -webkit-touch-callout:none; + user-select: none; + -webkit-tap-highlight-color:rgba(0,0,0,0); +} + .tooltip { top: 36px; left: auto; diff --git a/plugins/talk-plugin-featured-comments/client/components/Tag.js b/plugins/talk-plugin-featured-comments/client/components/Tag.js index b7ee8cd6b..ee2d13b19 100644 --- a/plugins/talk-plugin-featured-comments/client/components/Tag.js +++ b/plugins/talk-plugin-featured-comments/client/components/Tag.js @@ -15,13 +15,15 @@ export default class Tag extends React.Component { } - showTooltip = () => { + showTooltip = e => { + e.preventDefault(); this.setState({ tooltip: true }); } - hideTooltip = () => { + hideTooltip = (e) => { + e.preventDefault(); this.setState({ tooltip: false }); @@ -30,10 +32,13 @@ export default class Tag extends React.Component { render() { const {tooltip} = this.state; return( -
+
{ isTagged(this.props.comment.tags, 'FEATURED') ? ( - + {t('talk-plugin-featured-comments.featured')} ) : null