From 6b6878bde06b375b1e715a3557f153acc73a8af0 Mon Sep 17 00:00:00 2001 From: eugenijm Date: Mon, 18 Feb 2019 17:49:32 +0300 Subject: Added moderation menu --- src/App.scss | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'src/App.scss') diff --git a/src/App.scss b/src/App.scss index 5fc0dd27..b1c65ade 100644 --- a/src/App.scss +++ b/src/App.scss @@ -101,6 +101,14 @@ button { background-color: $fallback--bg; background-color: var(--bg, $fallback--bg) } + + &.danger { + // TODO: add better color variable + color: $fallback--text; + color: var(--alertErrorPanelText, $fallback--text); + background-color: $fallback--alertError; + background-color: var(--alertError, $fallback--alertError); + } } label.select { -- cgit v1.2.3-70-g09d2 From f364068e103641e761e2ca2c6d337c3536112546 Mon Sep 17 00:00:00 2001 From: taehoon Date: Fri, 22 Mar 2019 14:19:50 -0400 Subject: Improve mobile layout --- src/App.scss | 1 + .../user_reporting_modal/user_reporting_modal.vue | 60 +++++++++++++++------- 2 files changed, 42 insertions(+), 19 deletions(-) (limited to 'src/App.scss') diff --git a/src/App.scss b/src/App.scss index b1c65ade..07b33f47 100644 --- a/src/App.scss +++ b/src/App.scss @@ -379,6 +379,7 @@ main-router { .panel-heading { display: flex; + flex: none; border-radius: $fallback--panelRadius $fallback--panelRadius 0 0; border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0; background-size: cover; diff --git a/src/components/user_reporting_modal/user_reporting_modal.vue b/src/components/user_reporting_modal/user_reporting_modal.vue index fd9dd797..b2cb6911 100644 --- a/src/components/user_reporting_modal/user_reporting_modal.vue +++ b/src/components/user_reporting_modal/user_reporting_modal.vue @@ -26,7 +26,7 @@
-
+
@@ -44,26 +44,24 @@ .user-reporting-panel { width: 90vw; max-width: 700px; + min-height: 20vh; + max-height: 80vh; .panel-body { display: flex; + flex-direction: column-reverse; border-top: 1px solid; border-color: $fallback--border; border-color: var(--border, $fallback--border); } &-left { - width: 50%; - padding: 1.1em; - border-right: 1px solid; - border-color: $fallback--border; - border-color: var(--border, $fallback--border); - max-width: 320px; + padding: 1.1em 0.7em 0.7em; line-height: 1.4em; box-sizing: border-box; > div { - margin-bottom: 2em; + margin-bottom: 1em; &:last-child { margin-bottom: 0; @@ -95,25 +93,49 @@ } &-right { - width: 50%; - flex: 1 1 auto; - min-height: 20vh; - max-height: 80vh; overflow-y: auto; overflow-x: hidden; + } - > div { - display: flex; - justify-content: space-between; - border-bottom-width: 1px; - border-bottom-style: solid; + &-sitem { + display: flex; + justify-content: space-between; + border-bottom-width: 1px; + border-bottom-style: solid; + border-color: $fallback--border; + border-color: var(--border, $fallback--border); + + > .status-el { + flex: 1; + } + + > .checkbox { + margin: 0.75em; + } + } + + @media all and (min-width: 801px) { + .panel-body { + flex-direction: row; + } + + &-left { + width: 50%; + max-width: 320px; + border-right: 1px solid; border-color: $fallback--border; border-color: var(--border, $fallback--border); + padding: 1.1em; - .checkbox { - margin: 0.75em; + > div { + margin-bottom: 2em; } } + + &-right { + width: 50%; + flex: 1 1 auto; + } } } -- cgit v1.2.3-70-g09d2 From 6b1e305a181386be11fde996abe66e3be5a35600 Mon Sep 17 00:00:00 2001 From: taehoon Date: Thu, 28 Mar 2019 14:11:52 -0400 Subject: use custom scrollbar --- package.json | 1 + src/App.scss | 46 +++++++++++++++++++++- .../user_reporting_modal/user_reporting_modal.vue | 11 ++++-- src/main.js | 2 + yarn.lock | 4 ++ 5 files changed, 59 insertions(+), 5 deletions(-) (limited to 'src/App.scss') diff --git a/package.json b/package.json index fcdea2c1..36dfda31 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,7 @@ "vue-router": "^3.0.1", "vue-template-compiler": "^2.3.4", "vue-timeago": "^3.1.2", + "vuebar": "^0.0.20", "vuelidate": "^0.7.4", "vuex": "^3.0.1", "whatwg-fetch": "^2.0.3" diff --git a/src/App.scss b/src/App.scss index 07b33f47..6d16c7c9 100644 --- a/src/App.scss +++ b/src/App.scss @@ -794,4 +794,48 @@ nav { background-color: var(--lightBg, $fallback--fg); } } -} \ No newline at end of file +} + +// Vuebar default style +.vb > .vb-dragger { + z-index: 5; + width: 12px; + right: 0; +} + +.vb > .vb-dragger > .vb-dragger-styler { + backface-visibility: hidden; + transform: rotate3d(0,0,0,0); + transition: + opacity 100ms ease-out, + margin 100ms ease-out, + height 100ms ease-out; + + background-color: $fallback--text; + background-color: var(--text, $fallback--text); + opacity: .1; + margin: 5px 5px 5px 0; + border-radius: 20px; + height: calc(100% - 10px); + display: block; +} + +.vb.vb-scrolling-phantom > .vb-dragger > .vb-dragger-styler { + opacity: .3; +} + +.vb > .vb-dragger:hover > .vb-dragger-styler { + opacity: .5; + margin: 0px; + height: 100%; +} + +.vb.vb-dragging > .vb-dragger > .vb-dragger-styler { + opacity: .5; + margin: 0px; + height: 100%; +} + +.vb.vb-dragging-phantom > .vb-dragger > .vb-dragger-styler { + opacity: .5; +} diff --git a/src/components/user_reporting_modal/user_reporting_modal.vue b/src/components/user_reporting_modal/user_reporting_modal.vue index becf882a..acd184cd 100644 --- a/src/components/user_reporting_modal/user_reporting_modal.vue +++ b/src/components/user_reporting_modal/user_reporting_modal.vue @@ -27,10 +27,12 @@
-
-
- - +
+
+
+ + +
@@ -111,6 +113,7 @@ border-bottom-style: solid; border-color: $fallback--border; border-color: var(--border, $fallback--border); + padding-right: 15px; > .status-el { flex: 1; diff --git a/src/main.js b/src/main.js index 92f843b1..e01c921c 100644 --- a/src/main.js +++ b/src/main.js @@ -16,6 +16,7 @@ import reportsModule from './modules/reports.js' import VueTimeago from 'vue-timeago' import VueI18n from 'vue-i18n' +import Vuebar from 'vuebar' import createPersistedState from './lib/persisted_state.js' import pushNotifications from './lib/push_notifications_plugin.js' @@ -42,6 +43,7 @@ Vue.use(VueTimeago, { Vue.use(VueI18n) Vue.use(VueChatScroll) Vue.use(VueClickOutside) +Vue.use(Vuebar) const i18n = new VueI18n({ // By default, use the browser locale, we will update it if neccessary diff --git a/yarn.lock b/yarn.lock index 69951563..0dd2173e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6491,6 +6491,10 @@ vue@^2.5.13: version "2.5.21" resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.21.tgz#3d33dcd03bb813912ce894a8303ab553699c4a85" +vuebar@^0.0.20: + version "0.0.20" + resolved "https://registry.yarnpkg.com/vuebar/-/vuebar-0.0.20.tgz#fd6313c2d3a2202c49e42419fe1d9ef126134200" + vuelidate@^0.7.4: version "0.7.4" resolved "https://registry.yarnpkg.com/vuelidate/-/vuelidate-0.7.4.tgz#5a0e54be09ac0192f1aa3387d74b92e0945bf8aa" -- cgit v1.2.3-70-g09d2 From 0bb82478229b19adae998b9a32b05bcaa4ed0a4f Mon Sep 17 00:00:00 2001 From: taehoon Date: Thu, 28 Mar 2019 15:50:53 -0400 Subject: fix double scrollbar display bug in mobile --- src/App.js | 9 ++++++++- src/App.scss | 11 +++++++++++ src/App.vue | 2 +- src/components/user_reporting_modal/user_reporting_modal.vue | 4 ++-- 4 files changed, 22 insertions(+), 4 deletions(-) (limited to 'src/App.scss') diff --git a/src/App.js b/src/App.js index e72c73e3..87f00989 100644 --- a/src/App.js +++ b/src/App.js @@ -39,7 +39,14 @@ export default { window.CSS.supports('-moz-mask-size', 'contain') || window.CSS.supports('-ms-mask-size', 'contain') || window.CSS.supports('-o-mask-size', 'contain') - ) + ), + isMobile: navigator.userAgent.match(/Android/i) || + navigator.userAgent.match(/webOS/i) || + navigator.userAgent.match(/iPhone/i) || + navigator.userAgent.match(/iPad/i) || + navigator.userAgent.match(/iPod/i) || + navigator.userAgent.match(/BlackBerry/i) || + navigator.userAgent.match(/Windows Phone/i) }), created () { // Load the locale from the storage diff --git a/src/App.scss b/src/App.scss index 6d16c7c9..c72529ac 100644 --- a/src/App.scss +++ b/src/App.scss @@ -839,3 +839,14 @@ nav { .vb.vb-dragging-phantom > .vb-dragger > .vb-dragger-styler { opacity: .5; } + +// Disable vuebar and use native scrollbar in mobile device +#app.mobile { + .vb-content { + width: 100% !important; + padding-right: 0 !important; + } + .vb-dragger { + display: none; + } +} diff --git a/src/App.vue b/src/App.vue index cb7e8d78..229bf62b 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,5 +1,5 @@