hacky mobile view for tech demo

TwigSlot · Dec 8, 2022 · 42b51ce · 42b51ce
1 parent 4143907
commit 42b51ce
Show file tree

Hide file tree

Showing 5 changed files with 359 additions and 289 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -156,4 +156,23 @@ body {
 .command {
  cursor: pointer
 }
+
+.list-item{
+ width: 100%;
+ background: white;
+ padding: 1rem;
+ margin-left: 1rem;
+ margin-right: 1rem;
+ margin-top: 1rem;
+}
+.list-title{
+ font-size: 2rem;
+}
+.list-description{
+ font-size: 2rem;
+}
+.list-layout{
+ height: 100%;
+ background: white;
+}
 </style>
diff --git a/src/components/DataPanel.vue b/src/components/DataPanel.vue
@@ -1,5 +1,5 @@
 <template>
- <div class="info-panel-outer" v-if="!this.$store.state.mobileView">
+ <div class="info-panel-outer" v-if="!this.$store.state.showInfo">
  <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"
@@ -13,7 +13,7 @@
  <a target="_blank" :href="data_panel.link">
  <button class="button is-dark info-panel-item">Open</button>
  </a>
- <button @click="hide_description = !hide_description" class="button info-panel-item">{{ hide_description ? "Show"
+ <button v-if="!this.$store.state.mobileView" @click="hide_description = !hide_description" class="button info-panel-item">{{ hide_description ? "Show"
  : "Hide"}} description</button>
  <text class="subtitle is-4 data-panel-item">{{ retrieval_status }}</text>
  </div>

diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
@@ -2,16 +2,27 @@
  <nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
  <a class="navbar-item" href="/"> TWIGSLOT </a>
+
+ <a class="navbar-item" :style="{ marginLeft: '10px' }" @click="toggleLayout">
+ <text v-if="this.$store.state.layout == 0"> Graph </text>
+ <text v-if="this.$store.state.layout == 1"> List </text>
+ </a>
+ <a class="navbar-item" :style="{ marginLeft: '10px' }" @click="toggleInfo"
+ v-if="this.$store.state.mobileView && this.$store.state.layout == 0"
+ >
+ <text v-if="this.$store.state.showInfo"> Show Info </text>
+ <text v-else> Hide Info </text>
+ </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"
- data-target="navMenu"
- aria-label="menu"
- aria-expanded="false"
+  role="button"
+  class="navbar-burger"
+  data-target="navMenu"
+  aria-label="menu"
+  aria-expanded="false"
  >
  <span aria-hidden="true"></span>
  <span aria-hidden="true"></span>
@@ -32,42 +43,42 @@
  <div class="navbar-item">
  <div class="navbar-item">
  <a
- v-if="!session"
- class="navbar-item"
- :style="{ padding: 0 }"
- :href="authBasePath + '/login'"
+  v-if="!session"
+  class="navbar-item"
+  :style="{ padding: 0 }"
+  :href="authBasePath + '/login'"
  >
  Login
  </a>
  <a
- v-if="session"
- class="navbar-item"
- :href="logoutUrl"
- @click="logout"
+  v-if="session"
+  class="navbar-item"
+  :href="logoutUrl"
+  @click="logout"
  >
  Logout
  </a>
  <a
- v-if="session"
- class="navbar-item"
- :href="authBasePath + '/settings'"
+  v-if="session"
+  class="navbar-item"
+  :href="authBasePath + '/settings'"
  >
  Settings
  </a>
  <a
- v-if="session"
- class="navbar-item"
- :href="'/user/' + `${session.identity.id}`"
+  v-if="session"
+  class="navbar-item"
+  :href="'/user/' + `${session.identity.id}`"
  >
  Profile
  </a>
  <a
- href="https://github.com/twigslot"
- :style="{ marginLeft: '20px' }"
+  href="https://github.com/twigslot"
+  :style="{ marginLeft: '20px' }"
  >
  <font-awesome-icon
- icon="fa-brands fa-github"
- class="icon"
+  icon="fa-brands fa-github"
+  class="icon"
  ></font-awesome-icon>
  </a>
  </div>
@@ -114,7 +125,14 @@ export default defineComponent({
  },
  toggleView: function() {
  this.$store.commit("toggle_view" );
+ },
+ toggleLayout: function(){
+ this.$store.commit("toggle_layout")
+ },
+ toggleInfo: function(){
+ this.$store.commit("toggle_info")
  }
+
  },
  data() {
  return {

diff --git a/src/store/index.ts b/src/store/index.ts
@@ -10,7 +10,9 @@ const store : any = new Vuex.Store ({
  state: {
  kratos_user_id: 'guest',
  selected_mode: 'move',
- mobileView: false
+ mobileView: false,
+ showInfo: false,
+ layout: 0
  },
  mutations: {
  update_kratos_user_id(state, kratos_user_id){
@@ -21,7 +23,13 @@ const store : any = new Vuex.Store ({
  },
  toggle_view(state){
  state.mobileView = !state.mobileView
- }
+ },
+ toggle_layout(state){
+ state.layout = (state.layout + 1) % 2;
+ },
+ toggle_info(state){
+ state.showInfo = !state.showInfo;
+ },
  }
 })
 export default store