add footer and update tab behavior

src/App.vue

@@ -2,18 +2,20 @@
   <div id="app">
     <barra/>
     <Base/>
+      <br>
+    <footerVue/>
   </div>
 </template>
 <script>
-
 import barra from './components/barra.vue'
 import Base from './components/basecanvas.vue'
-
+import footerVue from './components/extra/footerVue.vue'
 export default {
   name: 'App',
   components: {
     barra,
-    Base
+    Base,
+    footerVue
   }
 }
-</script>
+</script>

src/components/basecanvas.vue

@@ -1,9 +1,6 @@
 <template>
   <b-container>
-    <b-card
-      :class="bytheme"
-      class="dracula col-md-12 mb-3 w-100 mt-2 shadow-lg"
-    >
+    <b-card :class="bytheme" class="yonce col-md-12 mb-3 w-100 mt-2 shadow-lg">
       <b-container style="display: inline">
         <b-form-select
           class="text-center mt-1 text-secondary col-sm-2 font-weight-bold"
@@ -66,12 +63,21 @@
           <b-icon variant="white" icon="puzzle-fill"></b-icon>
         </b-button>
         <b-modal id="extra-modal" title="addons">
-          <b-button v-b-modal.notas-modal variant="dark">Notas</b-button>
+          <b-button
+            v-b-modal.notas-modal
+            title="mostrar panel de  notas"
+            variant="dark"
+            >Notas</b-button
+          >
           <b-modal id="notas-modal" hide-footer>
             <notas />
           </b-modal>
 
-          <b-button class="ml-1" v-b-modal.themes-modal variant="dark"
+          <b-button
+            title="mostrar lista de themas"
+            class="ml-1"
+            v-b-modal.themes-modal
+            variant="dark"
             >themes</b-button
           >
           <b-modal id="themes-modal">
@@ -91,11 +97,25 @@
       <div class="row">
         <div class="rounded col-md-12 shadow-md mt-2">
           <div id="file-list" class="files mb-3">
-            <button @click="changeMode" class="classmode">class</button>
-            <button class="classmode" id="newspace-button" @click="addSpace">
+
+            <button
+              title="cambiar a modo de clases"
+              @click="changeMode"
+              class="classmode"
+            >
+              {{getClassModeName}}
+            </button>
+
+            <button
+              title="añadir un nuevo archivo"
+              class="classmode"
+              id="newspace-button"
+              @click="addSpace"
+            >
               <b-icon variant="white" icon="file-earmark-plus"></b-icon>
             </button>
             <button
+              title="tab home"
               id="tab_id0"
               @click="setSpace({ id: 'tab_id0' })"
               class="tabs"
@@ -104,6 +124,8 @@
             </button>
           </div>
 
+          <br v-if="local_widthMatch">
+
           <div id="files">
             <codemirror
               :style="codeSpaces[0].class"
@@ -135,22 +157,29 @@
         </b-card>
       </div>
       <b-button
+        title="establer entrada del programa"
         v-b-modal.program-input
         variant="primary"
         class="ml-1 float-right mt-1"
         >entrada <b-icon icon="input-cursor-text"></b-icon>
       </b-button>
       <b-button
+        id="establercer las librerias en el modo clasess"
         v-b-modal.headers
         class="float-right mt-1 ml-2"
         variant="secondary"
         v-if="mode"
         >#include</b-button
       >
-      <b-button @click="compile" variant="success" class="ml-1 float-right mt-1"
+      <b-button
+        title="compilar"
+        @click="compile"
+        variant="success"
+        class="ml-1 float-right mt-1"
         >compilar</b-button
       >
       <b-button
+        title="resetear la salida"
         class="float-right mx-auto mt-1 ml-1"
         variant="danger"
         @click="reset"
@@ -197,9 +226,26 @@ export default {
     });
   },
 
+  mounted() {
+    this.local_widthQuery.addEventListener('change',()=>{
+    this.local_widthMatch = this.local_widthQuery.matches;
+    });
+  },
+
+  data(){
+    const local_widthQuery = matchMedia("(min-width: 300px) and (max-width:  991px )") 
+   return {
+    local_class_mode_name: 'class mode ',
+    local_mode: 'off',
+    local_widthQuery: local_widthQuery,
+    local_widthMatch: local_widthQuery.matches
+   }
+  },
+
   methods: {
     changeMode() {
       this.$store.commit("changeMode");
+      this.local_mode = this.$store.state.mode ? 'on' : 'off';
     },
 
     setSpace(value) {
@@ -298,6 +344,9 @@ export default {
     bytheme() {
       return this.$store.state.bytheme;
     },
+    getClassModeName() {
+      return this.local_widthMatch ? '.h' : this.local_class_mode_name + this.local_mode;
+    }
   },
 };
 </script>
@@ -327,7 +376,7 @@ export default {
   width: 100%;
   height: 28px;
   border-radius: 4px;
-  overflow: hidden;
+  overflow: auto;
 }
 .tabs {
   width: 10%;
@@ -339,12 +388,15 @@ export default {
 }
 
 .classmode {
-  width: 5%;
+  width: 13%;
   height: 28px;
   border-radius: 4px;
   background: transparent;
   border: 1px solid white;
   color: white;
   margin-right: 10px;
 }
-</style>
+
+
+
+</style>

src/components/extra/footerVue.vue

@@ -0,0 +1,66 @@
+<template>
+  <b-card class="w-100 footer-vw" type="dark">
+    <hr class="bg-dark" />
+    <ul class="float-left mt-3 footer-list">
+      <li><b-icon icon="code"></b-icon> Kevin Bohorquez</li>
+      <br />
+      <li><b-icon icon="github"></b-icon> scyth3-c</li>
+      <li><b-icon icon="twitter"></b-icon> scyth3_c</li>
+    </ul>
+
+    <b-card no-body class="col-md-4 float-center mx-auto footer-vw">
+      <b-badge style="background: rgba(0, 0, 0, 0)" variant="dark" class="p-2"
+        >enviame algun mensaje:</b-badge
+      >
+      <b-input
+        title="escribe el mensaje aqui"
+        v-model="model"
+        placeholder="¡Hola!, ¿Cómo Estás?"
+      ></b-input>
+      <b-button
+        title="enviar mensaje"
+        class="btn-sm my-2 col-md-3 float-center mx-auto"
+        variant="dark"
+        @click="sendMsg"
+        >enviar</b-button
+      >
+    </b-card>
+    <hr class="bg-dark" />
+  </b-card>
+</template>
+
+<script>
+import store from "@/store";
+
+export default {
+  name: "footerVue",
+  methods: {
+    sendMsg() {
+      store.commit("sendMsg");
+    },
+  },
+  computed: {
+    model: {
+      get() {
+        return store.state.direct_msg;
+      },
+      set(value) {
+        store.state.direct_msg = value;
+      },
+    },
+  },
+};
+</script>
+
+<style scoped>
+.footer-vw {
+  background: rgb(27, 27, 27);
+}
+.footer-list {
+  list-style: none;
+  color: white;
+}
+.text {
+  font-family: "Courier New", Courier, monospace;
+}
+</style>