Merge branch 'nodeLook'

CHANGELOG.md

+# 0.1.18
+
+_2nd July 2020_
+
+### Changes
+
+- Tweaked onboarding wording.
+- Edited some button text.
+- Edited CSS a little for text boxes.
+- Hide connection mode button for now.
+
+### Fixed
+
+- Offline mode reloads correctly when you are back online.
+- Move mode showed wrong styling.
+
 # 0.1.17
 
 _25th June 2020_

app/package.json

 {
   "name": "nodenogg.in",
-  "version": "0.1.17",
+  "version": "0.1.18",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

app/src/components/IpfsInfo.vue

@@ -3,15 +3,15 @@
     <h1>IPFS View</h1>
     <h3>Testing Only</h3>
     <h1>{{ status }}</h1>
-    <!-- <h2>ID: {{ id }}</h2> -->
-    <!-- <h2>Agent version: {{ agentVersion }}</h2> -->
+    <h2>ID: {{ id }}</h2>
+    <h2>Agent version: {{ agentVersion }}</h2>
     <!-- <h3>Files : {{ fileContents }}</h3> -->
-    <!-- <h3>Path: {{ path }}</h3> -->
+    <!-- <h3>Path: {{ path }}</h3>
     <div v-if="path == 'ready'"></div>
     <div v-else>
       <img :src="'https://ipfs.io/ipfs/' + path" />
     </div>
-    <!-- <img :src="'data:image/jpg;base64,' + output" /> -->
+    <img :src="'data:image/jpg;base64,' + output" /> -->
 
     <form>
       <input
@@ -47,8 +47,8 @@ export default {
   data: function () {
     return {
       status: 'Connecting to IPFS...',
-      // id: '',
-      // agentVersion: '',
+      id: '',
+      agentVersion: '',
       selectedFile: null,
       fileContents: this.fileContents,
       output: output,

app/src/components/NodesLayer.vue

@@ -38,7 +38,7 @@
               ></p>
             </div>
 
-            <h3>Reactions</h3>
+            <!-- <h3>Reactions</h3> -->
 
             <div v-for="(emojis, index) in configEmoji" :key="index">
               <p class="allemoji" v-if="nodeid == emojis.node_id">
@@ -46,8 +46,7 @@
               </p>
             </div>
 
-            <p class="info">*markdown supported</p>
-            <p class="info">*autosaves</p>
+            <p class="info">*markdown supported &amp; autosaves</p>
             <div class="btn-row">
               <BaseButton buttonClass="danger" @click="deleteFlag()"
                 >Delete</BaseButton
@@ -117,7 +116,7 @@
               ></p>
             </div>
 
-            <h3>Reactions</h3>
+            <!-- <h3>Reactions</h3> -->
 
             <div v-for="(emojis, index) in configEmoji" :key="index">
               <p class="allemoji" v-if="nodeid == emojis.node_id">
@@ -125,8 +124,7 @@
               </p>
             </div>
 
-            <p class="info">*markdown supported</p>
-            <p class="info">*autosaves</p>
+            <p class="info">*markdown supported &amp; autosaves</p>
             <div class="btn-row">
               <BaseButton buttonClass="danger" @click="deleteFlag()"
                 >Delete</BaseButton
@@ -325,6 +323,7 @@ export default {
 
 .info {
   font-size: 0.8em;
+  display: inline;
 }
 
 textarea {
@@ -335,7 +334,10 @@ textarea {
   font-family: 'Inter var', Helvetica, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  outline: #cab6ff;
+  border: none;
+  outline: none;
+  background-color: rgb(187, 227, 255);
+  scrollbar-color: yellow rgb(187, 227, 255);
 }
 
 .btn-row {
@@ -351,6 +353,7 @@ textarea {
 
 .allemoji {
   font-size: 2em;
+  /* float: left; */
 }
 
 img {

app/src/components/OtherNodeslayer.vue

@@ -21,7 +21,7 @@
           <p class="read" :id="nodeid" :inner-html.prop="nodetext | marked">
             {{ nodeid }}
           </p>
-          <h3>Reactions</h3>
+          <!-- <h3>Reactions</h3> -->
           <div v-for="(emojis, index) in configEmoji" :key="index">
             <p class="allemoji" v-if="nodeid == emojis.node_id">
               {{ emojis.emoji_text }}
@@ -117,14 +117,14 @@
           <p class="read" :id="nodeid" :inner-html.prop="nodetext | marked">
             {{ nodeid }}
           </p>
-          <h3>Reactions</h3>
+          <!-- <h3>Reactions</h3> -->
           <div v-for="(emojis, index) in configEmoji" :key="index">
             <p class="allemoji" v-if="nodeid == emojis.node_id">
               {{ emojis.emoji_text }}
             </p>
           </div>
           <div class="react" v-if="nodeid != undefined">
-            <h2>React</h2>
+            <!-- <h2>React</h2> -->
             <div class="eeee">
               <input :value="nodeid" name="id" readonly hidden />
               <input
@@ -340,6 +340,7 @@ input {
 
 .allemoji {
   font-size: 2em;
+  /* float: left; */
 }
 
 h3 {
@@ -357,20 +358,26 @@ h3 {
   right: 0.5rem;
   width: 1.5rem;
   height: 1.5rem;
-
+  /* transform: scale(1.6); */
   margin: 0em 0em 1em 0em;
   border-radius: 50%;
   cursor: pointer;
   transition: all 0.2s;
 }
-.emoji-invoker:hover {
-  transform: scale(1.1);
+.emoji-invoker:hover > svg {
+  fill: #84949b;
+
+  /* transform: scale(1.5); */
 }
 .emoji-invoker > svg {
   fill: #b1c6d0;
+  margin-top: -15px;
+  margin-left: 0.2em;
+  transform: scale(1.5);
 }
 
 .emoji-picker {
+  transform: scale(1.2);
   z-index: 1;
   font-family: Montserrat;
   border: 1px solid #ccc;

app/src/experimental/ModeToolbar.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script>
-var serverUrl = 'http://nodenogg.in'
+var serverUrl = 'https://nodenogg.in'
 import { mapState, mapGetters } from 'vuex'
 
 import * as allModes from '@/experimental/modes'