added mobile view

TwigSlot · Dec 8, 2022 · f3143f6 · f3143f6
1 parent ac52a12
commit f3143f6
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 5 deletions.
diff --git a/kubernetes/nginx-service.yaml b/kubernetes/nginx-service.yaml
@@ -14,7 +14,7 @@ spec:
     spec:
       containers:
       - name: nginx-container
-        image: tch1001/twig_client:v3.1.1
+        image: tch1001/twig_client:v4.2.1
         ports:
         - containerPort: 80
 ---

diff --git a/src/components/ControlPanel.vue b/src/components/ControlPanel.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="control-panel">
+    <div class="control-panel" v-if="!this.$store.state.mobileView">
         <div id="control-box">
             <button class="button is-light control-box-item" @click="$emit('home')">Center</button>
             <DropdownComponent @custom_change="changed_item" :dropdownItem="options"></DropdownComponent>

diff --git a/src/components/DataPanel.vue b/src/components/DataPanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="info-panel-outer">
+  <div class="info-panel-outer" v-if="!this.$store.state.mobileView">
     <h1 class="title is-4">ID : {{ (data_panel.uid ? data_panel.uid : "Hover over a node") }}</h1>
     <div class="control">
       <input class="input is-hovered info-panel-item" type="text" placeholder="Name" :value="data_panel.name"

diff --git a/src/components/DecoPanel.vue b/src/components/DecoPanel.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="deco-panel">
+    <div class="deco-panel" v-if="!this.$store.state.mobileView">
         <h1 class="title is-4 deco-text">
             Tags: {{ showing_tags_for }}
             <button class="button" @click="hide_deco_panel = !hide_deco_panel">

diff --git a/src/components/GraphLogs.vue b/src/components/GraphLogs.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="graph-logs-panel" @click="show_all = !show_all">
+  <div class="graph-logs-panel" @click="show_all = !show_all" v-if="!this.$store.state.mobileView">
     <text v-if="show_all" class="log-message" v-for="log in logs">{{ log.type }} : {{ log.message }}<br></text>
     <text v-else class="log-message">{{ logs[logs.length-1].type }} : {{ logs[logs.length-1].message }}<br></text>
   </div>

diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
@@ -2,6 +2,10 @@
   <nav class="navbar" role="navigation" aria-label="main navigation">
     <div class="navbar-brand">
       <a class="navbar-item" href="/"> TWIGSLOT </a>
+      <a class="navbar-item" @click="toggleView" >
+        <text v-if="this.$store.state.mobileView"> Mobile View </text>
+        <text v-else> Desktop View </text>
+      </a>
       <a
         role="button"
         class="navbar-burger"
@@ -108,6 +112,9 @@ export default defineComponent({
     logout: function () {
       this.$store.commit("update_kratos_user_id", "guest");
     },
+    toggleView: function() {
+      this.$store.commit("toggle_view" );
+    }
   },
   data() {
     return {

diff --git a/src/store/index.ts b/src/store/index.ts
@@ -10,13 +10,17 @@ const store : any = new Vuex.Store ({
     state: {
         kratos_user_id: 'guest',
         selected_mode: 'move',
+        mobileView: false
     },
     mutations: {
         update_kratos_user_id(state, kratos_user_id){
             state.kratos_user_id = kratos_user_id
         },
         update_selected_mode(state, new_mode){
             state.selected_mode = new_mode
+        },
+        toggle_view(state){
+            state.mobileView = !state.mobileView
         }
     }
 })