opdavies/rebuilding-acquia
Archived
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Add action card switcher

Browse source
This commit is contained in:
Oliver Davies 2018-12-27 11:45:29 +00:00
parent 9c8a52f1cf
commit 4c68c400db
1 changed files with 109 additions and 95 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/components/Environment/ActionCards.vue
View file

@ -1,6 +1,13 @@
<template> <template>
<div>
<ul class="list-reset flex flex-wrap md:hidden -mx-1 mb-5">
<li class="w-1/3 px-1"><button type="button" class="text-sm text-white w-full py-3" :class="[active == 'code' ? 'bg-blue-darker' : 'bg-blue-dark']" @click="active = 'code'">Code</button></li>
<li class="w-1/3 px-1"><button type="button" class="text-sm text-white w-full py-3" :class="[active == 'databases' ? 'bg-blue-darker' : 'bg-blue-dark']" @click="active = 'databases'">Databases</button></li>
<li class="w-1/3 px-1"><button type="button" class="text-sm text-white w-full py-3" :class="[active == 'files' ? 'bg-blue-darker' : 'bg-blue-dark']" @click="active = 'files'">Files</button></li>
</ul>
<div class="flex flex-wrap -mx-4 -mb-4"> <div class="flex flex-wrap -mx-4 -mb-4">
<div class="w-full md:w-1/3 px-4 mb-4"> <div class="w-full md:w-1/3 md:block px-4 mb-4" :class="[ active == 'code' ? 'block' : 'hidden' ]">
<div class="border border-grey rounded shadow bg-white overflow-hidden"> <div class="border border-grey rounded shadow bg-white overflow-hidden">
<div class="border-t-4 border-teal"> <div class="border-t-4 border-teal">
<div class="border-b border-grey-dark"> <div class="border-b border-grey-dark">
@ -39,7 +46,7 @@
</div> </div>
</div> </div>
<div class="w-full md:w-1/3 px-4 mb-4"> <div class="w-full md:w-1/3 md:block px-4 mb-4" :class="[ active == 'databases' ? 'block' : 'hidden' ]">
<div class="border border-grey rounded shadow bg-white overflow-hidden"> <div class="border border-grey rounded shadow bg-white overflow-hidden">
<div class="border-t-4 border-teal"> <div class="border-t-4 border-teal">
<div class="border-b border-grey-dark"> <div class="border-b border-grey-dark">
@ -93,7 +100,7 @@
</div> </div>
</div> </div>
<div class="w-full md:w-1/3 px-4 mb-4"> <div class="w-full md:w-1/3 md:block px-4 mb-4" :class="[ active == 'files' ? 'block' : 'hidden' ]">
<div class="border border-grey rounded shadow bg-white overflow-hidden"> <div class="border border-grey rounded shadow bg-white overflow-hidden">
<div class="border-t-4 border-teal"> <div class="border-t-4 border-teal">
<div class="border-b border-grey-dark"> <div class="border-b border-grey-dark">
@ -125,6 +132,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
@ -134,5 +142,11 @@ export default {
environment: Object, environment: Object,
isProduction: Boolean isProduction: Boolean
}, },
data() {
return {
active: 'code',
}
},
} }
</script> </script>