minor edits

app/src/components/CardsLayer.vue

@@ -16,9 +16,6 @@
           ></textarea>
         </div>
 
-        <!-- <div v-if="localreadmode == true && deleted == false">
-          <p class="read" :id="nodeid" :inner-html.prop="nodetext | marked"></p>
-        </div> -->
         <div class="allemoji">
           <div
             class="eachemoji"
@@ -35,16 +32,6 @@
           <BaseButton buttonClass="danger" @click="deleteFlag()"
             >Discard</BaseButton
           >
-          <!-- <div v-if="localreadmode == true && deleted == false">
-            <BaseButton class="read" buttonClass="action" @click="readFlag()"
-              >Edit Mode
-            </BaseButton>
-          </div>
-          <div v-else>
-            <BaseButton class="read" buttonClass="action" @click="readFlag()"
-              >Read Mode</BaseButton
-            >
-          </div> -->
         </div>
       </form>
     </div>
@@ -100,27 +87,9 @@ export default {
         // nothing happens
       }
     },
-
-    // readFlag(e) {
-    //   e = this.nodeid
-
-    //   var i
-    //   for (i = 0; i < Object.keys(this.configPositions).length; i++) {
-    //     if (this.configPositions[i].node_id == this.nodeid) {
-    //       this.localreadmode = this.configPositions[i].read_mode
-    //     }
-    //   }
-
-    //   if (this.localreadmode == true) {
-    //     readmode = false
-    //     this.$store.dispatch('readFlag', { e, readmode })
-    //     this.mode = 'Read'
-    //   } else {
-    //     readmode = true
-    //     this.$store.dispatch('readFlag', { e, readmode })
-    //     this.mode = 'Edit'
-    //   }
-    // },
+    setFocus() {
+      console.log('called')
+    },
   },
 }
 </script>
@@ -142,6 +111,7 @@ textarea {
   width: 90%;
   height: 175px;
   resize: none;
+  font-size: 18px;
   box-sizing: border-box;
   font-family: 'Inter var', Helvetica, sans-serif;
   -webkit-font-smoothing: antialiased;

app/src/components/ListLayer.vue

@@ -17,10 +17,11 @@
                 placeholder="Idea goes here!(auto saved every keystroke)"
               ></textarea>
             </div>
+            <p class="info">*markdown supported &amp; autosaves</p>
           </div>
           <div v-if="value.read_mode && deleted == false">
             <p
-              class="read"
+              class="readmode"
               :id="nodeid"
               :inner-html.prop="nodetext | marked"
             ></p>
@@ -37,7 +38,7 @@
               </p>
             </div>
           </div>
-          <p class="info">*markdown supported &amp; autosaves</p>
+
           <div class="btn-row">
             <BaseButton buttonClass="danger" @click="deleteFlag()"
               >Discard</BaseButton
@@ -151,6 +152,11 @@ h2 {
   margin-left: 1em;
 }
 
+.readmode {
+  margin-top: 1em;
+  margin-left: 1em;
+}
+
 textarea {
   width: 90%;
   height: 175px;

app/src/components/NodesLayer.vue

@@ -32,6 +32,7 @@
                   placeholder="Idea goes here! (auto saved every keystroke)"
                 ></textarea>
               </div>
+              <p class="info">*markdown supported &amp; autosaves</p>
             </div>
             <div v-if="value.read_mode == true">
               <p
@@ -54,7 +55,7 @@
                 </p>
               </div>
             </div>
-            <p class="info">*markdown supported &amp; autosaves</p>
+
             <div class="btn-row">
               <!-- <BaseButton buttonClass="danger" @click="deleteFlag()"
                 >Delete</BaseButton
@@ -119,6 +120,7 @@
                   </textarea>
                 </div>
               </div>
+              <p class="info">*markdown supported &amp; autosaves</p>
             </div>
             <div v-if="value.read_mode == true">
               <p
@@ -140,7 +142,6 @@
                 </p>
               </div>
             </div>
-            <p class="info">*markdown supported &amp; autosaves</p>
             <div class="btn-row">
               <BaseButton buttonClass="danger" @click="deleteFlag()"
                 >Discard</BaseButton

app/src/components/OtherCardslayer.vue

@@ -54,8 +54,8 @@ h2 {
 
 .nodes {
   width: 300px;
-  border: 2px dashed black;
-  background-color: rgb(155, 194, 216);
+  border: 2px solid black;
+  background-color: rgb(205, 234, 255);
   margin-top: 1em;
   margin-left: 1em;
 }

app/src/components/OtherNodeslayer.vue

@@ -358,7 +358,7 @@ export default {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 .node {
-  background-color: aquamarine;
+  background-color: rgb(205, 234, 255);
   position: absolute;
 }
 

app/src/store/index.js

@@ -174,10 +174,10 @@ const store = new Vuex.Store({
         })
         .catch(function (err) {
           if (err.status == 404) {
-            var startup = '777'
-            // var uniqueid =
-            //   Math.random().toString(36).substring(2, 15) +
-            //   Math.random().toString(36).substring(2, 15)
+            var startup =
+              Math.random().toString(36).substring(2, 15) +
+              Math.random().toString(36).substring(2, 15)
+
             return pouchdb.put({
               _id: state.myclient,
               _attachments: {},

app/src/views/Cards.vue

 <template>
   <div id="listwrapper">
     <div v-if="clientset">
-      <h1 class="mobile">Your nodes - list mode</h1>
-
-      <div class="btn-row">
-        <BaseButton class="new" buttonClass="action" @click="addNode()"
-          >Create Node</BaseButton
-        >
-      </div>
+      <h1 class="mobile">All nodes - card view</h1>
 
       <div class="grid">
         <CardsLayer
@@ -27,6 +21,34 @@
           v-bind:deleted="value.deleted"
         />
       </div>
+
+      <div class="btn-row">
+        <!-- <BaseButton class="new" buttonClass="action" @click="addNode()"
+            >Create Node</BaseButton
+          > -->
+
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="80"
+          viewBox="0 0 143 106"
+          class="icon"
+          @click="addNode()"
+          ref="adding"
+        >
+          <g transform="translate(-1345 -843)">
+            <g class="a" transform="translate(1345 865)">
+              <rect class="d" width="127" height="84" />
+              <rect class="e" x="0.5" y="0.5" width="126" height="83" />
+            </g>
+            <g class="b" transform="translate(1361 843)">
+              <rect class="d" width="127" height="84" />
+              <rect class="e" x="3.5" y="3.5" width="120" height="77" />
+            </g>
+            <line class="c" x2="41" transform="translate(1406.5 884.5)" />
+            <line class="c" y2="41" transform="translate(1426.5 863.5)" />
+          </g>
+        </svg>
+      </div>
     </div>
 
     <div v-else>
@@ -88,6 +110,7 @@ export default {
 
     addNode() {
       this.$store.dispatch('addNode')
+      this.$refs.adding.setFocus
     },
 
     editTrue(e) {
@@ -116,4 +139,34 @@ export default {
 .new {
   margin-bottom: 1em;
 }
+
+.example {
+  width: 30px;
+}
+
+.icon {
+  margin-left: 1em;
+  padding: 0.5em;
+  cursor: pointer;
+}
+
+.a {
+  fill: #333;
+  stroke: #707070;
+}
+.b {
+  fill: #fff;
+}
+.b,
+.c {
+  stroke: #333;
+  stroke-width: 7px;
+}
+.c,
+.e {
+  fill: none;
+}
+.d {
+  stroke: none;
+}
 </style>