From 30bf59ff8920026d4a8cb702ea6c25e6e7cd03c0 Mon Sep 17 00:00:00 2001 From: Adam Procter <adamprocter@researchnot.es> Date: Mon, 8 Jun 2020 18:04:31 +0100 Subject: [PATCH] brand new onboarding and enhanced CSS --- .DS_Store | Bin 6148 -> 8196 bytes CHANGELOG.md | 43 ++++- app/package.json | 2 +- app/src/components/BaseButton.vue | 11 +- app/src/components/NodesLayer.vue | 21 ++- app/src/components/OnBoard-old.vue | 175 +++++++++++++++++++++ app/src/components/OnBoard.vue | 208 ++++++++++++------------- app/src/components/OtherNodeslayer.vue | 51 ++++-- app/src/experimental/ModeToolbar.vue | 14 +- app/src/experimental/ViewToolbar.vue | 14 +- app/src/store/index.js | 4 +- app/src/views/Home.vue | 25 ++- 12 files changed, 425 insertions(+), 143 deletions(-) create mode 100644 app/src/components/OnBoard-old.vue diff --git a/.DS_Store b/.DS_Store index 5c588bae285e7f51f378996362af221f47000e0f..fd53f8143debf746468430364110e21fcbb4dcc4 100644 GIT binary patch literal 8196 zcmZQzU|@7AO)+F(kYHe7;9!8z0^AH(0Z1N%F(jFwBCH_u7#IW?iVKo*@{<@C7)~V> zK;=fM(GVC7fzc2c4S~@R7!85J6#|S9=WyVt_aU;Q<Y)+thQNpn0Z{p%0BPGZI6&zJ z2n~{AU}RtbcL5j~7+7Ed#0csKK-7S=g4BStf@qLd21XDIEDzSozzEgK2=0b3FfcL* zfQ@2g0BdJp1ltS}2Ww|w1l!EOzzEUKzzDUO5!ypxglK1AglK1A1ltZaa+DYifzc2^ z3jt8yotYt#p@5+vsT{fgo|9QzVqkEck%^gwm5rT)gM*ucmm@YfBfmVjB(bEl*eS6n z8pI1oEXhcMvP1IobKva6q_E7?@^}Fe=lr~q#LT?ZB9QXn%#_rm#G;t+%)FHRa;N;# zyp&?FIZz2sPEHQacmc`kYC}U~3mpYZ1Jha^g=$L+6CDK;W3$>?P7ZNZLtD>;+{&uz zn%cTq5dXl61qOZyA5P9@U|@jyFQqs+Cn-Na2ULPUg>s6^oFPLNOly-0AYQ%&^D-wF zH#e`Oho^^^r+2)7KxuJmP-;$MNoHB9OJYfCal8P3aYlZ*XL5dCKv8O0W@>qOa(+%} zZeDS`fM9ZBPI75ZVo9oFPEK%U6-0G%QGQNNKz?y%NoIatWJF17MF~g_WDtr}L{xEp zQHe9yu!zj${5*&%A&?#Z1t87EVW~yMnfZB~oU8f7WfWDl^i3@7oUiZ;2nq>vi*iS0 zrljVTWTs`N7DXl&C#UA6Wag!ZmS?7vWQ3Px7H1~qq=w`r=B9EAGM?lF>ynU^l8h)# z$}B9+EUDxWQ04%O%1X*}$D|~dr26KkfJ{r_5ZDS)uOuli84Z$gE=o--NloG4xFRGd zz|XBNsmUpj$PrSUS(OSA(c#wP6e#8l$<EA60gFf)avO69q;Q7jBqpWiK!nV=EjR?c zIm62!-hv2PbK7zVGU{+fB<JVmrskCtgWY5==_nZove_rGxWvC8H7_-VLtr<=y)KgS zl93=e$CMP1n>dtV=|I`R0K!D^jsU3Ek!3JoaANRch+`;VsATA7n8q-lVGF}nhHVUo z7)~=>V|c*ujNu)_XNE5f-x+=|GBR>8ax?NW@-d1tsxYcDsxxXZ8Zz24+A-QQdN6u2 zdNcYk1~Nu5Ml;4T#xW){<}l_m<}(&BmNC{dHZV3ZHZyiJPGOwNID>H}<08h@jJp_j zGwx;F$9SCaBI6~-%ZyhT?=n7P{0wm{6DX;Im_8r^ff>IdQgu#o8FbW*X%hA%EDuh? znu9h8-{b?QTM<z)aRpT^J!1=7CwP>j#WYInA*VlZf`g<ea7u%vBycjnA|WXyEhEb< zADWq$l3D@D2#AaU%Mt?Ypwz~3MOsQyLS9~3g@Z$2w*Z98Ew7=;$sw>+fDtOIq07M` zzyvl}-$0&QfLS1sgA>d(G3AyQU=>K=<N$Lmt+=@bSOkhWA+mP%-0}i!0^XcZbGcpJ zI6=8kfPqk2W#C}Iol;LSTw-|0@Q&dZ!+%CrMlMDnMsY?3Mm0tqMl(h`Mh8Y`Mi)j` zMn6V>#sJ13#t?AYjAu-Qrq4Xa0>(<lYQ|c|I>vg&4#qCV9>!kAKE~;cGZ|+y&S9L( zxQuZH<0{70jB6OTGHzqs&bW(l5940OV~pn^X%e1Jy&-%U$#@5mPRoLe@^bR?(!p&% zn1WGyAVYu|Vz~sU|L@AcfNT68qH2^J4S~@R7?vTx$l?<0;)JJQ2KBW;{pkd#_d(4P zP<NaW)GvqV11SM@?ZMq~M#!WhST!R9q$khF0O`pyGBAL&4%|S%X#GE0|ASNJ$R+?P CQ5Ww3 delta 138 zcmZp1XfcprU|?W$DortDU=UznVBlbY&<t%83&ketDT*+G<UwM|IZ65XIgAVp49pV? zH6|O#uuOh0Aho$fY%=4<hSRKz**Q1_nHj)9fSZAV!Igo5p>1Q~cjn3bGP;}~eFs32 VlWlmUd6*y;f$V139M3a@833wN7#9El diff --git a/CHANGELOG.md b/CHANGELOG.md index 3a8e02f..65c6397 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,20 +1,47 @@ +# 0.1.14 + +_8th June 2020_ + +### Changed + +- edited CSS to be more mobile friendly (just a little). +- edited CSS to make things look a little nicer. + +### Added + +- created the brand new onboarding microcosm, all new devices will see this view on arrival. + +# 0.1.13 + +_7th June 2020_ + +### Added + +- Leave microcosm button added to toolbar. +- Add simple offline mode if your device disconnects. + +### Changed + +- Tool bar add node works in basic format (press it to create node). +- Home by default is the new spatial view. + # 0.1.12 _4th June 2020_ ### Added -- Read status is now in store so preserved for your nodes -- iOS Home screen icon +- Read status is now in store so preserved for your nodes. +- iOS Home screen icon. # 0.1.11d _2 June 2020_ -This version has been move to alpha as I need to use the app more and thus drive some more development. The COVID-19 pandemic has slowed things down a lot and this version moves to introduce the new spatial mode. The new spatial mode is still missing some vital component to the main home version however for now keeping both old and new views should allow for a quicker capture of some of the missing components that need to be added to Sandbox. +This version has been moved to alpha as I need to use the app more and thus drive some more development. The COVID-19 pandemic has slowed things down a lot and this version moves to introduce the new spatial mode. The new spatial mode is still missing some vital component to the main home version however for now keeping both old and new views should allow for a quicker capture of some of the missing components that need to be added to Sandbox. ### Changed -- New menu bar at the top +- New menu bar at the top. - Sandbox view is a updated view of nodenogg.in and will replace home. # 0.1.11 @@ -27,7 +54,7 @@ _10th April 2020_ ### Fixed -- Typo in CHANGELOG.md +- Typo in CHANGELOG.md. # 0.1.10 @@ -51,11 +78,11 @@ _26th March 2020_ ### Added -- Simple read mode for your own nodes can now be activated +- Simple read mode for your own nodes can now be activated. ### Changed -- made some minor changes to textarea CSS +- made some minor changes to textarea CSS. # 0.1.8 @@ -67,7 +94,7 @@ _25th March 2020_ ### Changed -- Simplified About page opening text +- Simplified About page opening text. # 0.1.7 diff --git a/app/package.json b/app/package.json index 541ed68..6263630 100644 --- a/app/package.json +++ b/app/package.json @@ -1,6 +1,6 @@ { "name": "nodenogg.in", - "version": "0.1.12", + "version": "0.1.14", "private": true, "scripts": { "serve": "vue-cli-service serve", diff --git a/app/src/components/BaseButton.vue b/app/src/components/BaseButton.vue index 4404fce..0ce8b1d 100644 --- a/app/src/components/BaseButton.vue +++ b/app/src/components/BaseButton.vue @@ -11,9 +11,9 @@ export default { props: { buttonClass: { - type: String - } - } + type: String, + }, + }, } </script> @@ -28,6 +28,7 @@ button { box-shadow: 1px 1px 1px #000000; padding: 0.6em; margin-right: 1em; + margin-top: 1em; } button.onboard { @@ -44,6 +45,10 @@ button.onboard { padding: 0px; } +button.special { + background-color: #f2c94c; +} + button.danger { color: white; background-color: red; diff --git a/app/src/components/NodesLayer.vue b/app/src/components/NodesLayer.vue index ac547ba..1fb966e 100644 --- a/app/src/components/NodesLayer.vue +++ b/app/src/components/NodesLayer.vue @@ -31,7 +31,11 @@ </div> </div> <div v-if="posvalue.read_mode == true"> - <p :id="nodeid" :inner-html.prop="nodetext | marked"></p> + <p + class="read" + :id="nodeid" + :inner-html.prop="nodetext | marked" + ></p> </div> <h3>Reactions</h3> @@ -105,7 +109,11 @@ </div> </div> <div v-if="posvalue.read_mode == true"> - <p :id="nodeid" :inner-html.prop="nodetext | marked"></p> + <p + class="read" + :id="nodeid" + :inner-html.prop="nodetext | marked" + ></p> </div> <h3>Reactions</h3> @@ -303,6 +311,10 @@ export default { position: relative; } +.vdr { + padding: 0 0.5em; +} + .info { font-size: 0.8em; } @@ -320,6 +332,7 @@ textarea { .btn-row { position: relative; + margin-bottom: 5px; display: flex; justify-content: center; @@ -328,6 +341,10 @@ textarea { border-radius: 4px; } +.allemoji { + font-size: 2em; +} + img { width: 100%; } diff --git a/app/src/components/OnBoard-old.vue b/app/src/components/OnBoard-old.vue new file mode 100644 index 0000000..2085657 --- /dev/null +++ b/app/src/components/OnBoard-old.vue @@ -0,0 +1,175 @@ +<template> + <div class="notlogged"> + <p> + nodenogg.in is a + <span>work in progress</span> collaborative co-creation research and + design thinking tool, read more details and links in the + <a href="/about">about</a> section. + </p> + + <form v-show="parta" onsubmit="return false;"> + <h2>1</h2> + <h3>microcosm</h3> + <p> + create or join a microcosm. a microcosm is a sharable digital space that + can be shared privately between a group of individuals. all content / + data you contribute is stored locally on your device and then shared + privately to others on the same microcosm. you can remove your + contributions at any time, they belong to you. + </p> + <input + type="text" + v-model.trim="localmicrocosm" + placeholder="microcosm name" + autocorrect="off" + autocapitalize="none" + autofocus + v-on:keyup.enter="createMicrocosm(), setFocus()" + /> + <BaseButton buttonClass="onboard" @click="createMicrocosm(), setFocus()" + >+</BaseButton + > + </form> + + <form v-show="partb" onsubmit="return false;"> + <h2>2</h2> + <h3>object</h3> + <p> + give yourself an object name, this is what connects you to your content + / data. this object name is anonymous and stored privately. + </p> + <input + type="text" + v-model.trim="clientid" + placeholder="object name" + autocorrect="off" + autocapitalize="none" + ref="objectname" + v-on:keyup.enter="setClient(), setFocusTwo()" + /> + <BaseButton buttonClass="onboard" @click="setClient(), setFocusTwo()" + >+</BaseButton + > + </form> + + <form v-show="partc"> + <input + class="start" + type="text" + v-on:keyup.enter="letsGo()" + ref="objectnametwo" + /> + <h2>3</h2> + <h3>start</h3> + <BaseButton buttonClass="onboard" @click="letsGo()">+</BaseButton> + </form> + </div> +</template> + +<script> +var delay = 100 +var delaytwo = 100 + +import Router from '@/router' + +export default { + data: function () { + return { + localmicrocosm: Router.currentRoute.params.microcosm, + clientid: '', + parta: true, + partb: false, + partc: false, + } + }, + + mounted() { + if (localStorage.myNNClient) { + this.clientid = localStorage.myNNClient + this.localmicrocosm = localStorage.mylastMicrocosm + this.createMicrocosm() + this.setClient() + this.letsGo() + } + }, + + methods: { + createMicrocosm() { + this.partb = true + this.$store.dispatch('createMicrocosm', this.localmicrocosm) + localStorage.setItem('mylastMicrocosm', this.localmicrocosm) + }, + setClient() { + ;(this.partc = true), + this.$store.dispatch('setClient', this.clientid), + localStorage.setItem('myNNClient', this.clientid) + }, + + letsGo() { + this.$emit('clientAdded') + // this.$emit('readyMode') + }, + setFocus() { + setTimeout(this.readyFocus, delay) + }, + setFocusTwo() { + setTimeout(this.readyFocusTwo, delaytwo) + }, + readyFocus() { + this.$refs.objectname.focus() + }, + readyFocusTwo() { + this.$refs.objectnametwo.focus() + }, + }, +} +</script> + +<style lang="css" scoped> +.start { + opacity: 0; + filter: alpha(opacity=0); +} + +h1, +h2, +h3, +p { + margin: 0px; +} + +h2 { + float: right; + font-size: 3em; +} + +h3 { + font-size: 3em; + margin-top: 0.5em; +} + +form { + /* width: 400px; */ + padding: 1em; + border-style: solid; + border-width: 0.5em; + border-color: #cab6ff; + margin-top: 1em; +} + +input { + border-style: solid; + border-width: 1px; + border-color: #cab6ff; + padding: 0.5em; +} + +@media only screen and (min-width: 640px) { + /* Style adjustments for viewports that meet the condition */ + + /* .notlogged { + grid-column: 1 / 3; + grid-row: 1; + } */ +} +</style> diff --git a/app/src/components/OnBoard.vue b/app/src/components/OnBoard.vue index 4f2f60c..f822496 100644 --- a/app/src/components/OnBoard.vue +++ b/app/src/components/OnBoard.vue @@ -1,90 +1,96 @@ <template> - <div class="notlogged"> - <p> - nodenogg.in is a - <span>work in progress</span> collaborative co-creation research and - design thinking tool, read more details and links in the - <a href="/about">about</a> section. - </p> - - <form v-show="parta" onsubmit="return false;"> - <h2>1</h2> - <h3>microcosm</h3> - <p> - create or join a microcosm. a microcosm is a sharable digital space that - can be shared privately between a group of individuals. all content / - data you contribute is stored locally on your device and then shared - privately to others on the same microcosm. you can remove your - contributions at any time, they belong to you. - </p> - <input - type="text" - v-model.trim="localmicrocosm" - placeholder="microcosm name" - autocorrect="off" - autocapitalize="none" - autofocus - v-on:keyup.enter="createMicrocosm(), setFocus()" - /> - <BaseButton buttonClass="onboard" @click="createMicrocosm(), setFocus()" - >+</BaseButton - > - </form> - - <form v-show="partb" onsubmit="return false;"> - <h2>2</h2> - <h3>object</h3> - <p> - give yourself an object name, this is what connects you to your content - / data. this object name is anonymous and stored privately. - </p> - <input - type="text" - v-model.trim="clientid" - placeholder="object name" - autocorrect="off" - autocapitalize="none" - ref="objectname" - v-on:keyup.enter="setClient(), setFocusTwo()" - /> - <BaseButton buttonClass="onboard" @click="setClient(), setFocusTwo()" - >+</BaseButton - > - </form> - - <form v-show="partc"> - <input - class="start" - type="text" - v-on:keyup.enter="letsGo()" - ref="objectnametwo" - /> - <h2>3</h2> - <h3>start</h3> - <BaseButton buttonClass="onboard" @click="letsGo()">+</BaseButton> - </form> + <div ref="nodes" class="node"> + <vue-draggable-resizable + class="innernode" + :w="300" + :h="335" + :x="560" + :y="50" + :z="0" + :draggable="true" + style="background-color: #6fcf97;" + > + <form> + <div> + <p id="nodeid" :inner-html.prop="nodetext | marked"></p> + <input + type="text" + v-model.trim="clientid" + placeholder="device name" + autocorrect="off" + autocapitalize="none" + ref="objectname" + v-on:keyup.enter="setClient()" + @focus="editTrue(true)" + @blur="editTrue(false)" + /> + <div class="btn-row"> + <BaseButton buttonClass="special" @click="setClient()" + >Store</BaseButton + > + </div> + </div> + </form> + </vue-draggable-resizable> + + <vue-draggable-resizable + class="innernode" + :w="300" + :h="345" + :x="1100" + :y="50" + :z="0" + :draggable="true" + style="background-color: #6fcf97;" + > + <form> + <div> + <p id="nodeid" :inner-html.prop="nodetext2 | marked"></p> + <input + type="text" + v-model.trim="localmicrocosm" + placeholder="microcosm name" + autocorrect="off" + autocapitalize="none" + autofocus + v-on:keyup.enter="createMicrocosm()" + @focus="editTrue(true)" + @blur="editTrue(false)" + /> + <div class="btn-row"> + <BaseButton + buttonClass="special" + @click="createMicrocosm(), letsGo()" + >Create Microcosm</BaseButton + > + </div> + </div> + </form> + </vue-draggable-resizable> </div> </template> <script> -var delay = 100 -var delaytwo = 100 - import Router from '@/router' +import marked from 'marked' export default { data: function () { return { localmicrocosm: Router.currentRoute.params.microcosm, clientid: '', - parta: true, - partb: false, - partc: false, + nodetext: + '## What shall we call you ? 💥 \n First we need to connect this device to your ideas. This name is what allows you to create and edit your nodes and can be anything you like and this name is always anonymous.', + nodetext2: + '## Start those engines ! 🏎 \n Now you can create your own microcosm to store your ideas and ask people to join you, either just tell them the name of the microcosm or share the alpha.nodenogg.in URL and add the ending; </br><em><b>/microcosm/nameofyourmicrocosm</b></em>', + // parta: true, + // partb: false, + // partc: false, } }, mounted() { - if (localStorage.myNNClient) { + if (localStorage.myNNClient && localStorage.mylastMicrocosm) { this.clientid = localStorage.myNNClient this.localmicrocosm = localStorage.mylastMicrocosm this.createMicrocosm() @@ -92,34 +98,26 @@ export default { this.letsGo() } }, + filters: { + marked: marked, + }, methods: { createMicrocosm() { - this.partb = true this.$store.dispatch('createMicrocosm', this.localmicrocosm) localStorage.setItem('mylastMicrocosm', this.localmicrocosm) }, setClient() { - ;(this.partc = true), - this.$store.dispatch('setClient', this.clientid), + this.$store.dispatch('setClient', this.clientid), localStorage.setItem('myNNClient', this.clientid) }, + editTrue(e) { + this.$emit('editTrue', e) + }, + letsGo() { this.$emit('clientAdded') - // this.$emit('readyMode') - }, - setFocus() { - setTimeout(this.readyFocus, delay) - }, - setFocusTwo() { - setTimeout(this.readyFocusTwo, delaytwo) - }, - readyFocus() { - this.$refs.objectname.focus() - }, - readyFocusTwo() { - this.$refs.objectnametwo.focus() }, }, } @@ -130,6 +128,9 @@ export default { opacity: 0; filter: alpha(opacity=0); } +.vdr { + padding: 0 0.5em; +} h1, h2, @@ -148,27 +149,22 @@ h3 { margin-top: 0.5em; } -form { - padding: 1em; - border-style: solid; - border-width: 0.5em; - border-color: #cab6ff; - margin-top: 1em; +.btn-row { + margin-bottom: 5px; + padding: 0px 0px 15px 10px; + border-radius: 4px; } input { - border-style: solid; - border-width: 1px; - border-color: #cab6ff; - padding: 0.5em; -} - -@media only screen and (min-width: 640px) { - /* Style adjustments for viewports that meet the condition */ - - /* .notlogged { - grid-column: 1 / 3; - grid-row: 1; - } */ + font-size: 1em; + padding: 10px; + /* margin-left: 20px; */ + border-radius: 4px; + display: flex; + justify-content: center; + margin: 10px; + -webkit-box-shadow: none; + box-shadow: none; + border-style: dotted; } </style> diff --git a/app/src/components/OtherNodeslayer.vue b/app/src/components/OtherNodeslayer.vue index d2f9d82..78b5f67 100644 --- a/app/src/components/OtherNodeslayer.vue +++ b/app/src/components/OtherNodeslayer.vue @@ -18,7 +18,9 @@ @resizestop="onResizestop" style="border: 1px solid black; background-color: rgb(205, 234, 255);" > - <p :id="nodeid" :inner-html.prop="nodetext | marked">{{ nodeid }}</p> + <p class="read" :id="nodeid" :inner-html.prop="nodetext | marked"> + {{ nodeid }} + </p> <h3>Reactions</h3> <div v-for="(emojis, index) in configEmoji" :key="index"> <p class="allemoji" v-if="nodeid == emojis.node_id"> @@ -86,9 +88,11 @@ </div> </div> </emoji-picker> - <BaseButton buttonClass="action" @click="sentReact()" - >Send Reaction</BaseButton - > + <!-- <div class="btn-row"> + <BaseButton buttonClass="action" @click="sentReact()" + >Send Reaction</BaseButton + > + </div> --> </div> </div> </vue-draggable-resizable> @@ -110,7 +114,9 @@ @resizestop="onResizestop" style="border: 1px solid black; background-color: rgb(205, 234, 255);" > - <p :id="nodeid" :inner-html.prop="nodetext | marked">{{ nodeid }}</p> + <p class="read" :id="nodeid" :inner-html.prop="nodetext | marked"> + {{ nodeid }} + </p> <h3>Reactions</h3> <div v-for="(emojis, index) in configEmoji" :key="index"> <p class="allemoji" v-if="nodeid == emojis.node_id"> @@ -168,7 +174,7 @@ <span v-for="(emoji, emojiName) in emojiGroup" :key="emojiName" - @click="insert(emoji)" + @click="insert(emoji), sentReact()" :title="emojiName" >{{ emoji }}</span > @@ -178,9 +184,11 @@ </div> </div> </emoji-picker> - <BaseButton buttonClass="action" @click="sentReact()" - >Send Reaction</BaseButton - > + <!-- <div class="btn-row"> + <BaseButton buttonClass="action" @click="sentReact()" + >Send Reaction</BaseButton + > + </div> --> </div> </div> </vue-draggable-resizable> @@ -322,12 +330,35 @@ export default { position: absolute; } +.vdr { + padding: 0 0.5em; +} + +input { + display: none; +} + +.allemoji { + font-size: 2em; +} + +h3 { + margin-bottom: -30px; +} + +.btn-row { + margin-bottom: 5px; + padding: 0px 0px 15px 10px; + border-radius: 4px; +} + .emoji-invoker { top: -0.5rem; right: 0.5rem; width: 1.5rem; height: 1.5rem; - margin-top: 1em; + + margin: 0em 0em 1em 0em; border-radius: 50%; cursor: pointer; transition: all 0.2s; diff --git a/app/src/experimental/ModeToolbar.vue b/app/src/experimental/ModeToolbar.vue index ddac961..85fa0fa 100644 --- a/app/src/experimental/ModeToolbar.vue +++ b/app/src/experimental/ModeToolbar.vue @@ -98,11 +98,13 @@ export default { <style scoped> nav { position: absolute; - bottom: 20px; - left: 20px; + + bottom: 1em; + left: 1em; display: flex; + flex-wrap: wrap; align-items: center; - justify-content: flex-start; + justify-content: space-between; } button { border: none; @@ -110,6 +112,7 @@ button { height: 50px; padding: 0; margin: 0; + margin-top: 1em; background: white; border-radius: 25px; display: flex; @@ -123,4 +126,9 @@ button { button.active { background: rgb(30, 30, 30); } + +@media only screen and (max-width: 600px) { + nav { + } +} </style> diff --git a/app/src/experimental/ViewToolbar.vue b/app/src/experimental/ViewToolbar.vue index 3c2ebc6..aa515dc 100644 --- a/app/src/experimental/ViewToolbar.vue +++ b/app/src/experimental/ViewToolbar.vue @@ -12,8 +12,8 @@ export default { ...mapGetters({ scalePercentage: 'ui/scalePercentage', isScaled: 'ui/isScaled', - isTranslated: 'ui/isTranslated' - }) + isTranslated: 'ui/isTranslated', + }), }, methods: { resetScale() { @@ -21,8 +21,8 @@ export default { }, resetTranslation() { this.$store.commit('ui/setTranslation', { x: 0, y: 0 }) - } - } + }, + }, } </script> @@ -44,4 +44,10 @@ button { border: none; outline: none; } + +@media only screen and (max-width: 600px) { + button { + display: none; + } +} </style> diff --git a/app/src/store/index.js b/app/src/store/index.js index 479108b..982708b 100644 --- a/app/src/store/index.js +++ b/app/src/store/index.js @@ -6,7 +6,6 @@ import VueDraggableResizable from 'vue-draggable-resizable' import 'vue-draggable-resizable/dist/VueDraggableResizable.css' import uiStore from '@/experimental/uiStore' - import Router from '@/router' Vue.use(Vuex) @@ -77,6 +76,7 @@ const store = new Vuex.Store({ pouchdb.close().then(function () { if (urlmicrocosm != undefined) { // myclient = urldevice + microcosm = urlmicrocosm } else { microcosm = doc @@ -363,7 +363,7 @@ const store = new Vuex.Store({ node_id: uniqueid, x_pos: 50, y_pos: 50, - width: 200, + width: 220, height: 275, z_index: 1, read_mode: false, diff --git a/app/src/views/Home.vue b/app/src/views/Home.vue index 075bafa..f8b7c25 100644 --- a/app/src/views/Home.vue +++ b/app/src/views/Home.vue @@ -54,8 +54,25 @@ v-bind:nodetext="value.node_text" /> </div> - - <OnBoard v-else @clientAdded="clientAdded()" /> + <div v-else> + <OnBoard + @clientAdded="clientAdded()" + @editTrue="(e) => editTrue(e)" + /> + <OtherNodeslayer + v-for="value in otherNodes" + v-bind:key="value.node_id" + v-bind:nodeid="value.node_id" + v-bind:nodetext="value.node_text" + /> + <NodesLayer + @editTrue="(e) => editTrue(e)" + v-for="value in myNodes" + v-bind:key="value.node_id" + v-bind:nodeid="value.node_id" + v-bind:nodetext="value.node_text" + /> + </div> </PanZoomContainer> <ModeToolbar @@ -176,9 +193,9 @@ export default { <style scoped> .wrapper { - height: calc(100vh - 120px); + height: calc(100vh - 40px); width: calc(100%-80px); - margin: 40px; + margin: 0px; position: relative; } </style> -- GitLab