Administrator approval is now required for registering new accounts. If you are registering a new account, and are external to the University, please ask the repository owner to contact ServiceLine to request your account be approved. Repository owners must include the newly registered email address, and specific repository in the request for approval.

Commit 283abead authored by Adam Procter's avatar Adam Procter
Browse files

Merge branch 'minorUI' into main

parents 7a47800a d1df3808
# 0.2.4
_6th Septemeber 2021_
## Added
- onboarding now slides to next section of form
- validation if you do not include a name you cannot proceed
## Fixed
- spelling of Hexagon
# 0.2.3
_3rd September 2021_
......
{
"name": "nodenogg.in",
"version": "0.2.3",
"version": "0.2.4",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
......@@ -9,6 +9,7 @@
},
"dependencies": {
"core-js": "^3.17.2",
"focus-trap-vue": "3",
"freeze-dry": "^0.2.5",
"marked": "^3.0.2",
"pouchdb": "^7.2.2",
......
......@@ -10,7 +10,6 @@
</p>
<div class="breaker-one">
<label for="name">Your Name: {{ nameFormatted }}</label>
<input
v-model.trim="name"
type="text"
......@@ -29,6 +28,7 @@
either tell them the microcosm name or share the URL and add the ending;
/microcosm/<strong>nameofyourmicrocosm</strong>
</p>
<div class="breaker-two">
<label for="microcosm">Microcosm:</label>
......@@ -41,9 +41,9 @@
autocorrect="off"
autocapitalize="none"
/>
<p class="validation">{{ error }}</p>
<router-link to="/collect">
<button type="button" @click="setName(), setMicrocosm()">
<button type="button" @click="setName(name), setMicrocosm()">
Start or Join
</button>
</router-link>
......@@ -51,6 +51,7 @@
Change CouchDB Configuration
</button>
</div>
<template v-if="settings">
<h2>Configure your own <span class="long">CouchDB !</span> 👩‍🔧</h2>
......@@ -117,8 +118,17 @@
export default {
name: 'JoinMicrocosm',
// directives: {
// focus: {
// mounted(el) {
// el.focus()
// },
// },
// },
data: function () {
return {
error: '',
// what you are calling yourself / device
name: '',
nameSet: false,
......@@ -136,29 +146,36 @@ export default {
},
methods: {
setName() {
setName(name) {
// format name so no spaces or dashes PouchDB/ CouchDB dont like them
var lowercasename = this.name.toLowerCase()
var spacesremoved = lowercasename.split(' ').join('')
this.nameFormatted = spacesremoved.split('-').join('')
this.nameSet = true
if (name == '') {
this.error = 'Please set your name above first ☺️'
} else {
this.nameSet = true
}
localStorage.setItem('nogg_name', this.nameFormatted)
},
setMicrocosm() {
this.$router.push({ path: '/collect' })
// format microcosm so no spaces or dashes PouchDB/ CouchDB dont like them
var lowercasemicrocosm = this.microcosm.toLowerCase()
var spacesremoved = lowercasemicrocosm.split(' ').join('')
this.microcosmFormatted = spacesremoved.split('-').join('')
this.microcosmSet = true
localStorage.setItem('nogg_microcosm', this.microcosmFormatted)
// now we sent this same data set to the store
var devicename = this.nameFormatted
var microcosm = this.microcosmFormatted
this.$store.dispatch('setMicrocosm', { devicename, microcosm })
this.$store.dispatch('startDB')
if (this.nameSet == true) {
this.$router.push({ path: '/collect' })
// format microcosm so no spaces or dashes PouchDB/ CouchDB dont like them
var lowercasemicrocosm = this.microcosm.toLowerCase()
var spacesremoved = lowercasemicrocosm.split(' ').join('')
this.microcosmFormatted = spacesremoved.split('-').join('')
this.microcosmSet = true
localStorage.setItem('nogg_microcosm', this.microcosmFormatted)
// now we sent this same data set to the store
var devicename = this.nameFormatted
var microcosm = this.microcosmFormatted
this.$store.dispatch('setMicrocosm', { devicename, microcosm })
this.$store.dispatch('startDB')
}
},
configureRemote(protocol, username, password, url) {
// console.log(protocol, username, password, url)
this.$store.dispatch('configureRemote', {
......@@ -191,6 +208,12 @@ h2 {
color: black;
}
.validation {
font-weight: 700;
font-style: bold;
color: rgb(104, 39, 255);
}
.arrow {
font-size: 6em;
color: #1cc469;
......
......@@ -38,7 +38,7 @@
<option value="square">Square</option>
<option value="circle">Circle</option>
<option value="triangle">Triangle</option>
<option value="hexegon">Hexegon</option>
<option value="hexagon">Hexagon</option>
</select>
<button @click.prevent="toggleMode(nodes.node_id)">Read</button>
......@@ -67,6 +67,14 @@ export default {
components: { VSwatches },
// directives: {
// focus: {
// mounted(el) {
// el.focus()
// },
// },
// },
props: {
added: Boolean,
},
......
<template>
<div>
<h1>Messy mapping tool for multiplayer thinking</h1>
<p class="info">⚠️This is a non functional beta build of nodenogg.in⚠️</p>
<p>
nodenogg.in is free/libre open source software, built in the open,
inclusive by design, private by design, human led design, humane by
......
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/store'
import store from './store/store' // Register a global custom directive called `v-focus`
createApp(App).use(store).use(router).mount('#app')
......@@ -12,7 +12,7 @@ export default {
mounted() {
this.$store.dispatch('getMicrocosm')
// register, i.e. in a `beforeDestroy` hook
window.addEventListener('unload', this.someMethod)
window.addEventListener('unload', this.removeLocalStorage)
},
name: 'Collect',
......@@ -31,7 +31,7 @@ export default {
addedNode() {
this.added = !this.added
},
someMethod() {
removeLocalStorage() {
localStorage.removeItem('nogg_microcosm')
localStorage.removeItem('nogg_name')
......
......@@ -4,17 +4,19 @@
<h2>a messy mapping tool for multiplayer thinking</h2>
</header>
<nav class="nav">
<a role="button" class="letsplay" href="#" @click="isStart = true"
<a role="button" class="letsplay" href="#" @click="letsPlay"
>let's play !</a
>
<a role="button" class="tellmemore" href="#" @click="isStart = false"
<a role="button" class="tellmemore" href="#" @click="tellMore"
>tell me more</a
>
</nav>
<main v-if="isStart"><JoinMicrocosm /></main>
<main v-if="isStart" ref="start">
<JoinMicrocosm />
</main>
<aside v-if="isStart == false">
<aside v-if="isStart == false" ref="moreinfo">
<TellmeMore />
</aside>
</template>
......@@ -35,6 +37,27 @@ export default {
isStart: null,
}
},
methods: {
letsPlay() {
this.isStart = true
setTimeout(() => {
const el = this.$refs.start
if (el) {
el.scrollIntoView({ behavior: 'smooth' })
}
}, 100)
},
tellMore() {
this.isStart = false
setTimeout(() => {
const el = this.$refs.moreinfo
if (el) {
el.scrollIntoView({ behavior: 'smooth' })
}
}, 100)
},
},
}
</script>
......
......@@ -3709,6 +3709,11 @@ flush-write-stream@^1.0.0:
inherits "^2.0.3"
readable-stream "^2.3.6"
focus-trap-vue@3:
version "3.2.1"
resolved "https://registry.yarnpkg.com/focus-trap-vue/-/focus-trap-vue-3.2.1.tgz#630023bb96bfe45ebcf2e817eee6eb28d4edf52b"
integrity sha512-nThbiBo4F9ilwEc3kOYTW63RDbOsWNdz7jWFk9CmA9/LmZ7EJgEszV2MBXaQQMceEsB7h0WuIkkfzQznU5yj+A==
follow-redirects@^1.0.0:
version "1.14.1"
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.1.tgz#d9114ded0a1cfdd334e164e6662ad02bfd91ff43"
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment