Remotecard component for online content

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';

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;
+        }
+    }
+}

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;
 }
 

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.
+*/
+
+<template>
+    <div class="bd-remoteCard">
+        <div class="bd-flexRow bd-flex">
+            <div class="bd-remoteCard-title bd-flexGrow">{{item.name}} v{{item.version}} by {{item.author}}</div>
+            <div class="bd-remoteCard-likes">{{item.rating}}</div>
+        </div>
+        <div class="bd-flexRow bd-flex" :style="{marginTop: '10px'}">
+            <div class="bd-remoteCard-thumb" :style="{backgroundImage: `url(${resolveThumb()})`}"></div>
+            <div class="bd-remoteCard-infoContainer bd-flex bd-flexCol bd-flexGrow">
+                <div class="bd-remoteCard-infoBox bd-flex bd-flexGrow bd-flexCol">
+                    <div class="bd-remoteCard-info">{{item.installs}} Installs</div>
+                    <div class="bd-remoteCard-info">{{item.activeUsers}} Active Users</div>
+                    <div class="bd-remoteCard-info">Updated: Some time ago</div>
+                </div>
+            </div>
+        </div>
+        <div class="bd-flexRow bd-flex bd-flexGrow">
+            <div class="bd-flexGrow bd-remoteCard-tags">{{item.tags.join(', ')}}</div>
+            <div class="bd-button-group">
+                <div class="bd-button">Install</div>
+                <div class="bd-button">Preview</div>
+                <div class="bd-button">Source</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import { WebpackModules } from 'modules';
+    export default {
+        props: ['item'],
+        data() {
+            return {}
+        },
+        methods: {
+            resolveThumb() {
+                window.momentTest = WebpackModules;
+                return `${this.item.repository.rawUri}/${this.item.files.previews[0].thumb}`;
+            }
+        }
+    }
+</script>

client/src/ui/components/bd/ThemesView.vue

@@ -27,7 +27,7 @@
             </div>
             <div v-if="!local" class="bd-online-ph">
                 <h2 v-if="loadingOnline">Loading</h2>
-                <ThemeCard v-else-if="onlineThemes && onlineThemes.docs" v-for="theme in onlineThemes.docs" :key="theme.id" :theme="theme" :data-theme-id="theme.id" :online="true"/>
+                <RemoteCard v-else-if="onlineThemes && onlineThemes.docs" v-for="theme in onlineThemes.docs" :key="theme.id" :item="theme"/>
             </div>
         </div>
     </SettingsWrapper>
@@ -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
         },