john
/
timekeeper
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

lint: format

This commit is contained in:
pskfyi 2022-01-05 11:19:51 -08:00 committed by pskfyi
parent 2b4ab9c6ea
commit 977a598e42
4 changed files with 84 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
components/InfinityTester.vue
View File

@ -1,35 +1,33 @@
<template> <template>
<div> <div>
<button @click="add"> add {{addIncrement}} </button> <button @click="add">add {{ addIncrement }}</button>
<button @click="stepup"> add to the adding </button> <button @click="stepup">add to the adding</button>
<div> big value = {{ bigvalue }} </div> <div>big value = {{ bigvalue }}</div>
</div> </div>
</template> </template>
<script> <script>
// import Decimal from "break_infinity.js"; // import Decimal from "break_infinity.js";
export default { export default {
name: 'InfinityTester', name: 'InfinityTester',
data () { data() {
return { return {
addIncrement: 0, addIncrement: 0,
bigvalue: 0, bigvalue: 0,
} }
}, },
methods: { methods: {
add () { add() {
// eslint-disable-next-line no-console // eslint-disable-next-line no-console
console.log("!") console.log('!')
this.bigvalue = 0; this.bigvalue = 0
}, },
stepup () { stepup() {
this.addIncrement += 100; this.addIncrement += 100
},
} },
}
} }
</script> </script>

22
components/JohnHacks.vue
View File

@ -1,10 +1,12 @@
<template> <template>
<div class="hello"> <div class="hello">
<h1>{{ msg }}</h1> <h1>{{ msg }}</h1>
<button @click="button_clicky()"> Click Me </button> <button @click="button_clicky()">Click Me</button>
<div> clicks = {{ clicks }} </div> <div>clicks = {{ clicks }}</div>
<ul> <ul>
<li v-for="value in testvalues.slice(0, clicks)" :key="value">{{value}}</li> <li v-for="value in testvalues.slice(0, clicks)" :key="value">
{{ value }}
</li>
</ul> </ul>
</div> </div>
</template> </template>
@ -12,7 +14,7 @@
<script> <script>
export default { export default {
name: 'JohnHacks', name: 'JohnHacks',
data () { data() {
return { return {
msg: 'John copies files and makes a mess', msg: 'John copies files and makes a mess',
testvalues: [1, 1, 2, 3, 5, 8, 13, 21], testvalues: [1, 1, 2, 3, 5, 8, 13, 21],
@ -20,12 +22,12 @@ export default {
} }
}, },
methods: { methods: {
button_clicky () { button_clicky() {
// eslint-disable-next-line no-console // eslint-disable-next-line no-console
console.log("!") console.log('!')
this.clicks += 1 this.clicks += 1
} },
} },
} }
</script> </script>

88
components/TabNav.vue
View File

@ -1,59 +1,75 @@
<template> <template>
<div class="bg-white grid place-content-center border-2 w-3/4 mx-auto"> <div class="bg-white grid place-content-center border-2 w-3/4 mx-auto">
<nav class="flex flex-col sm:flex-row"> <nav class="flex flex-col sm:flex-row">
<button id="tab1" class="text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none text-blue-500 border-b-2 font-medium border-blue-500" @click="tabclicked(1)"> <button
Tab 1 id="tab1"
</button><button id="tab2" class="text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none" @click="tabclicked(2)"> class="text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none text-blue-500 border-b-2 font-medium border-blue-500"
Tab 2 @click="tabclicked(1)"
</button><button id="tab3" class="text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none" @click="tabclicked(3)"> >
Tab 3 Tab 1</button
</button><button id="tab4" class="text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none" @click="tabclicked(4)"> ><button
Tab 4 id="tab2"
</button> class="text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none"
@click="tabclicked(2)"
>
Tab 2</button
><button
id="tab3"
class="text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none"
@click="tabclicked(3)"
>
Tab 3</button
><button
id="tab4"
class="text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none"
@click="tabclicked(4)"
>
Tab 4
</button>
</nav> </nav>
<JohnHacks id="tabcontents1" class="tabshown" /> <JohnHacks id="tabcontents1" class="tabshown" />
<InfinityTester id="tabcontents2" class="tabhidden" /> <InfinityTester id="tabcontents2" class="tabhidden" />
<JohnHacks id="tabcontents3" class="tabhidden" /> <JohnHacks id="tabcontents3" class="tabhidden" />
<JohnHacks id="tabcontents4" class="tabhidden" /> <JohnHacks id="tabcontents4" class="tabhidden" />
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'TabNav', name: 'TabNav',
data () { data() {
return {} return {}
}, },
methods: { methods: {
tabclicked (tabnumber) { tabclicked(tabnumber) {
const tabSelected = "text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none text-blue-500 border-b-2 font-medium border-blue-500" const tabSelected =
const tabDeselected = "text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none" 'text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none text-blue-500 border-b-2 font-medium border-blue-500'
console.log("clicked " + tabnumber) const tabDeselected =
for (let i = 1; i <= 4; i++) { 'text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none'
const tabE = document.getElementById("tab" + i) console.log('clicked ' + tabnumber)
const viewE = document.getElementById("tabcontents" + i) for (let i = 1; i <= 4; i++) {
if (i === tabnumber) { const tabE = document.getElementById('tab' + i)
tabE.className = tabSelected const viewE = document.getElementById('tabcontents' + i)
viewE.className = "tabshown" if (i === tabnumber) {
} tabE.className = tabSelected
else { viewE.className = 'tabshown'
tabE.className = tabDeselected } else {
viewE.className = "tabhidden" tabE.className = tabDeselected
} viewE.className = 'tabhidden'
}
} }
} }
},
},
} }
</script> </script>
<style scoped> <style scoped>
.tabshown { .tabshown {
display: show; display: show;
} }
.tabhidden { .tabhidden {
display: none; display: none;
} }
</style> </style>

19
pages/index.vue
View File

@ -1,12 +1,8 @@
<template> <template>
<div class="gridcontainer container mx-auto bg-red-500"> <div class="gridcontainer container mx-auto bg-red-500">
<header> <header>I'm a header. Check this box</header>
I'm a header. Check this box <TabNav />
</header> <footer>This is a game jam game.</footer>
<TabNav/>
<footer>
This is a game jam game.
</footer>
</div> </div>
</template> </template>
@ -18,19 +14,18 @@ export default {
<style scoped> <style scoped>
.gridcontainer { .gridcontainer {
display: grid | inline-grid; display: grid;
} }
header { header {
grid-row: 1; grid-row: 1;
} }
.gridcenter { .gridcenter {
grid-row: 2; grid-row: 2;
} }
footer { footer {
grid-row: 3; grid-row: 3;
} }
</style> </style>