footer

src/components/Footer.vue

@@ -1,9 +1,9 @@
 <template>
-  <v-footer class="text-center d-flex flex-column mb-12" location="bottom">
+  <div>
     <social/>
     <div class="text-grey logo" style="font-size: small; margin-bottom: 0;">dexorder</div>
     <div class="text-grey" style="font-size: x-small">&copy;{{ new Date().getFullYear() }}</div>
-  </v-footer>
+  </div>
 </template>
 
 <script setup>

src/components/Social.vue

@@ -1,12 +1,13 @@
 <template>
   <div>
     <!--      <v-btn variant="plain" icon="mdi-facebook" @click="window.open('https://facebook.com','facebook')"/>-->
-    <v-btn variant="plain" icon="mdi-twitter" @click="open('https://twitter.com/Dexorder_trade','twitter')"/>
+    <v-btn :v-bind="props" variant="plain" icon="mdi-twitter" @click="open('https://twitter.com/Dexorder_trade','twitter')" :size="size"/>
     <!--      <v-btn variant="plain" icon="mdi-reddit" @click="window.open('https://reddit.com','reddit')"/>-->
-    <v-btn variant="plain" icon="mdi-discord" @click="open('https://discord.gg/fqp9JXXQyt','discord')"/>
+    <v-btn :v-bind="props" variant="plain" icon="mdi-discord" @click="open('https://discord.gg/fqp9JXXQyt','discord')" :size="size"/>
   </div>
 </template>
 
 <script setup>
+const props = defineProps(['size'])
 function open(url, target) {window.open(url,target)}
 </script>

src/components/chart/ChartFooter.vue

@@ -0,0 +1,34 @@
+<template>
+    <div class="w-100 d-flex flex-row justify-center align-center footer">
+      <div class="text-grey" style="font-size: small">&copy;{{ new Date().getFullYear() }}</div>
+      <div class="text-grey logo" style="font-size: small; margin-bottom: 0;">&nbsp;dexorder</div>
+      <social size="x-small"/>
+      <div class="text-grey tv" style="font-size: x-small">
+        <span>Charts by <a href="https://tradingview.com" target="TradingView">TradingView</a></span>
+      </div>
+    </div>
+</template>
+
+<script setup>
+
+import Social from "@/components/Social.vue";
+</script>
+
+<style scoped lang="scss">
+div.footer {
+    margin-left: 1em;
+    margin-right: 1em;
+}
+.tv {
+  margin-left: 1em;
+  a {
+    text-decoration: none;
+    &:visited {
+      color: grey;
+    }
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+</style>

src/components/chart/ToolbarPane.vue

@@ -6,12 +6,14 @@
     <div class="overflow-y-auto">
       <slot/>
     </div>
+    <chart-footer/>
   </div>
 </template>
 
 <script setup>
 
 import Toolbar from "@/components/chart/Toolbar.vue";
+import ChartFooter from "@/components/chart/ChartFooter.vue";
 
 const props = defineProps(['title', 'icon'])