From f6f308baa2d3b1bd5b236b15983620d218a5a93f Mon Sep 17 00:00:00 2001 From: Jiiks Date: Mon, 6 Aug 2018 20:52:10 +0300 Subject: [PATCH] Remotecard component for online content --- .../src/styles/partials/bdsettings/index.scss | 1 + .../partials/bdsettings/remotecard.scss | 64 +++++++++++++++++++ client/src/styles/partials/layouts.scss | 12 ++-- client/src/ui/components/bd/RemoteCard.vue | 52 +++++++++++++++ client/src/ui/components/bd/ThemesView.vue | 5 +- 5 files changed, 128 insertions(+), 6 deletions(-) create mode 100644 client/src/styles/partials/bdsettings/remotecard.scss create mode 100644 client/src/ui/components/bd/RemoteCard.vue diff --git a/client/src/styles/partials/bdsettings/index.scss b/client/src/styles/partials/bdsettings/index.scss index 605c4b92..5f005678 100644 --- a/client/src/styles/partials/bdsettings/index.scss +++ b/client/src/styles/partials/bdsettings/index.scss @@ -2,6 +2,7 @@ @import './sidebarview.scss'; @import './contentview.scss'; @import './card.scss'; +@import './remotecard.scss'; @import './tooltips.scss'; @import './settings-schemes.scss'; @import './updater.scss'; diff --git a/client/src/styles/partials/bdsettings/remotecard.scss b/client/src/styles/partials/bdsettings/remotecard.scss new file mode 100644 index 00000000..6c06ed97 --- /dev/null +++ b/client/src/styles/partials/bdsettings/remotecard.scss @@ -0,0 +1,64 @@ +.bd-remoteCard { + display: flex; + flex-direction: column; + background: rgba(0,0,0,.1); + margin-top: 10px; + padding: 10px 10px 5px 10px; + border-radius: 5px; + + &:hover { + background: rgba(0,0,0,.2); + transform: scale(1.005); + box-shadow: 0px 0px 5px rgba(0,0,0,.5); + } + + .bd-remoteCard-title { + color: #FFF; + font-weight: 600; + } + + .bd-remoteCard-likes { + color: red; + font-size: 12px; + font-weight: 600; + } + + .bd-remoteCard-infoContainer { + margin-left: 10px; + + .bd-remoteCard-infoBox { + color: #b3b5b8; + font-size: 12px; + font-weight: 700; + + .bd-remoteCard-info { + line-height: 14px; + } + } + } + + .bd-remoteCard-thumb { + height: 100px; + width: 180px; + background: rgba(0,0,0,.1); + border-radius: 3px; + } + + .bd-remoteCard-tags { + color: #828a97; + font-size: 10px; + line-height: 20px; + } + + .bd-button-group { + align-self: flex-end; + justify-content: flex-end; + flex-grow: 1; + max-height: 20px; + + .bd-button { + font-size: 12px; + padding: 5px 10px; + } + } +} diff --git a/client/src/styles/partials/layouts.scss b/client/src/styles/partials/layouts.scss index f98edb6b..0f79e77c 100644 --- a/client/src/styles/partials/layouts.scss +++ b/client/src/styles/partials/layouts.scss @@ -2,19 +2,23 @@ display: flex; } -.bd-flex-row { +.bd-flex-row, +.bd-flexRow { flex-direction: row; } -.bd-flex-col { +.bd-flex-col, +.bd-flexCol { flex-direction: column; } -.bd-flex-grow { +.bd-flex-grow, +.bd-flexGrow { flex-grow: 1; } -.bd-flex-spacer { +.bd-flex-spacer, +.bd-flexSpacer { flex-grow: 1; } diff --git a/client/src/ui/components/bd/RemoteCard.vue b/client/src/ui/components/bd/RemoteCard.vue new file mode 100644 index 00000000..cb539101 --- /dev/null +++ b/client/src/ui/components/bd/RemoteCard.vue @@ -0,0 +1,52 @@ +/** + * BetterDiscord Remote Card Component + * Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks + * All rights reserved. + * https://betterdiscord.net + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. +*/ + + + + diff --git a/client/src/ui/components/bd/ThemesView.vue b/client/src/ui/components/bd/ThemesView.vue index 219e7295..ed68c563 100644 --- a/client/src/ui/components/bd/ThemesView.vue +++ b/client/src/ui/components/bd/ThemesView.vue @@ -27,7 +27,7 @@

Loading

- +
@@ -41,6 +41,7 @@ import { MiRefresh } from '../common'; import SettingsWrapper from './SettingsWrapper.vue'; import ThemeCard from './ThemeCard.vue'; + import RemoteCard from './RemoteCard.vue'; import RefreshBtn from '../common/RefreshBtn.vue'; export default { @@ -54,7 +55,7 @@ }; }, components: { - SettingsWrapper, ThemeCard, + SettingsWrapper, ThemeCard, RemoteCard, MiRefresh, RefreshBtn },