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'])
 

src/corp/CorpLayout.vue

@@ -2,7 +2,9 @@
   <v-app>
     <menu-bar/>
     <corp-view/>
-    <Footer/>
+    <v-footer location="bottom">
+      <Footer class="text-center d-flex flex-column mb-12"/>
+    </v-footer>
   </v-app>
 </template>
 

src/corp/Home.vue

@@ -12,7 +12,7 @@
     <v-card-text>
       <v-list>
         <v-list-item><v-icon icon="mdi-ray-vertex" class="mr-2"/> Limit Orders <alpha/></v-list-item>
-        <v-list-item><v-icon icon="mdi-clock-outline" class="mr-2"/> DCA and TWAP Orders <soon/></v-list-item>
+        <v-list-item><v-icon icon="mdi-clock-outline" class="mr-2"/> DCA and TWAP Orders <alpha/></v-list-item>
         <v-list-item><v-icon icon="mdi-vector-line" class="mr-2"/> Diagonal Limit Orders <soon/></v-list-item>
         <v-list-item><v-icon icon="mdi-chart-timeline-variant-shimmer" class="mr-2"/> Stop Loss / Take Profit <soon/></v-list-item>
         <v-list-item><v-icon icon="mdi-format-list-checks" class="mr-2"/> One-Cancels-the-Other (OCO) Groups <soon/></v-list-item>

src/layouts/chart/MainView.vue

@@ -8,6 +8,7 @@
 <script setup>
 import Alerts from "@/components/Alerts.vue";
 import ChartView from "@/views/ChartView.vue";
+import Social from "@/components/Social.vue";
 </script>
 
 <style scoped lang="scss">

src/views/ChartView.vue

@@ -12,6 +12,7 @@
 <script setup>
 import SplitPane from "@/components/SplitPane.vue";
 import Chart from "@/components/chart/Chart.vue";
+import Social from "@/components/Social.vue";
 
 </script>