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

Inline classes

Browse source
This commit is contained in:
Oliver Davies 2019-06-27 19:00:52 +01:00
parent 85f4cda716
commit 6edb34937c
2 changed files with 22 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/components/Application/ApplicationTags.vue
View file

@ -1,8 +1,8 @@
<template> <template>
<div> <div>
<ul class="list-reset flex flex-wrap -mr-2 -mb-2"> <ul class="list-reset flex flex-wrap -mr-2 -mb-2">
<li class="tag" :data-type="application.type" v-text="applicationTypeName"/> <li class="mr-2 mb-2 py-1 px-2 text-2xs rounded uppercase border" :class="typeClasses" v-text="applicationTypeName"/>
<li class="tag">{{ application.level }}</li> <li class="mr-2 mb-2 py-1 px-2 text-2xs rounded uppercase border border-gray-400 bg-white">{{ application.level }}</li>
</ul> </ul>
</div> </div>
</template> </template>
@ -16,21 +16,15 @@ export default {
computed: { computed: {
applicationTypeName () { applicationTypeName () {
return this.$attrs.types[this.application.type].name return this.$attrs.types[this.application.type].name
},
typeClasses() {
return {
'': 'bg-white border-gray-400',
drupal: 'bg-blue-100 border-blue-100 text-white',
nodejs: 'bg-green border-green text-white'
}[this.application.type]
} }
} }
} }
</script> </script>
<style scoped>
.tag {
@apply text-2xs py-1 px-2 rounded uppercase border border-gray-400 bg-white mr-2 mb-2
}
.tag[data-type="drupal"] {
@apply bg-blue-100 border-blue-100 text-white
}
.tag[data-type="nodejs"] {
@apply bg-green border-green text-white
}
</style>

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

@ -7,18 +7,18 @@
</ul> </ul>
<div class="flex flex-wrap -mx-4 -mb-4"> <div class="flex flex-wrap -mx-4 -mb-4">
<div class="wrapper" :class="[ active == 'code' ? 'block' : 'hidden' ]"> <div class="px-4 mb-4 w-full md:block md:w-1/3" :class="[ active == 'code' ? 'block' : 'hidden' ]">
<action-card title="Code" :description="`${ environment.name }: ${environment.label}`"> <action-card title="Code" :description="`${ environment.name }: ${environment.label}`">
<svg slot="icon" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__code"></use></svg> <svg slot="icon" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__code"></use></svg>
<ul slot="buttons" class="button-list"> <ul slot="buttons" class="-ml-px flex">
<li class="button-list-item"> <li class="w-1/2 flex-1 text-center border-l border-gray-400">
<action-card-button label="Deploy"> <action-card-button label="Deploy">
<svg role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__fork"></use></svg> <svg role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__fork"></use></svg>
</action-card-button> </action-card-button>
</li> </li>
<li class="button-list-item"> <li class="w-1/2 flex-1 text-center border-l border-gray-400">
<action-card-button label="Switch"> <action-card-button label="Switch">
<svg role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__switch"></use></svg> <svg role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__switch"></use></svg>
</action-card-button> </action-card-button>
@ -27,24 +27,24 @@
</action-card> </action-card>
</div> </div>
<div class="wrapper" :class="[ active == 'databases' ? 'block' : 'hidden' ]"> <div class="px-4 mb-4 w-full md:block md:w-1/3" :class="[ active == 'databases' ? 'block' : 'hidden' ]">
<action-card title="Databases" :description="environment.name"> <action-card title="Databases" :description="environment.name">
<svg slot="icon" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__database"></use></svg> <svg slot="icon" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__database"></use></svg>
<ul slot="buttons" class="button-list"> <ul slot="buttons" class="-ml-px flex">
<li class="button-list-item"> <li class="w-1/2 flex-1 text-center border-l border-gray-400">
<action-card-button label="Copy"> <action-card-button label="Copy">
<svg role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__copy"></use></svg> <svg role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__copy"></use></svg>
</action-card-button> </action-card-button>
</li> </li>
<li class="button-list-item"> <li class="w-1/2 flex-1 text-center border-l border-gray-400">
<action-card-button label="Back up"> <action-card-button label="Back up">
<svg role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__backup"></use></svg> <svg role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__backup"></use></svg>
</action-card-button> </action-card-button>
</li> </li>
<li class="button-list-item"> <li class="w-1/2 flex-1 text-center border-l border-gray-400">
<action-card-button label="Restore" :disabled="isProduction" :class="{ <action-card-button label="Restore" :disabled="isProduction" :class="{
'text-blue-300': !isProduction, 'text-blue-300': !isProduction,
'text-gray-500 cursor-not-allowed': isProduction 'text-gray-500 cursor-not-allowed': isProduction
@ -56,12 +56,12 @@
</action-card> </action-card>
</div> </div>
<div class="wrapper" :class="[ active == 'files' ? 'block' : 'hidden' ]"> <div class="px-4 mb-4 w-full md:block md:w-1/3" :class="[ active == 'files' ? 'block' : 'hidden' ]">
<action-card title="Files" :description="environment.name"> <action-card title="Files" :description="environment.name">
<svg slot="icon" class="h-8 w-8 fill-current text-teal" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__environment"></use></svg> <svg slot="icon" class="h-8 w-8 fill-current text-teal" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__environment"></use></svg>
<ul slot="buttons" class="button-list"> <ul slot="buttons" class="-ml-px flex">
<li class="button-list-item"> <li class="w-1/2 flex-1 text-center border-l border-gray-400">
<action-card-button label="Copy"> <action-card-button label="Copy">
<svg role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__copy"></use></svg> <svg role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__copy"></use></svg>
</action-card-button> </action-card-button>
@ -95,21 +95,3 @@ export default {
} }
} }
</script> </script>
<style scoped>
.wrapper {
@apply w-full px-4 mb-4;
@screen md {
@apply w-1/3 block
}
}
.button-list {
@apply flex -ml-px
}
.button-list-item {
@apply w-1/2 flex-1 text-center border-l border-gray-400
}
</style>