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

lint: format

Browse source
This commit is contained in:
pskfyi 2022-01-05 11:19:51 -08:00 • committed by pskfyi
commit 977a598e42
4 changed files with 84 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

88
components/TabNav.vue
View file

@ -1,59 +1,75 @@
<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">
<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)">
Tab 1
</button><button id="tab2" 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>
<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)"
>
Tab 1</button
><button
id="tab2"
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>
<JohnHacks id="tabcontents1" class="tabshown" />
<InfinityTester id="tabcontents2" class="tabhidden" />
<JohnHacks id="tabcontents3" class="tabhidden" />
<JohnHacks id="tabcontents4" class="tabhidden" />
</div>
</div>
</template>
<script>
export default {
name: 'TabNav',
data () {
return {}
},
methods: {
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 tabDeselected = "text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none"
console.log("clicked " + tabnumber)
for (let i = 1; i <= 4; i++) {
const tabE = document.getElementById("tab" + i)
const viewE = document.getElementById("tabcontents" + i)
if (i === tabnumber) {
tabE.className = tabSelected
viewE.className = "tabshown"
}
else {
tabE.className = tabDeselected
viewE.className = "tabhidden"
}
}
name: 'TabNav',
data() {
return {}
},
methods: {
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 tabDeselected =
'text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none'
console.log('clicked ' + tabnumber)
for (let i = 1; i <= 4; i++) {
const tabE = document.getElementById('tab' + i)
const viewE = document.getElementById('tabcontents' + i)
if (i === tabnumber) {
tabE.className = tabSelected
viewE.className = 'tabshown'
} else {
tabE.className = tabDeselected
viewE.className = 'tabhidden'
}
}
}
},
},
}
</script>
<style scoped>
.tabshown {
display: show;
display: show;
}
.tabhidden {
display: none;
display: none;
}
</style>