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

Use a slot

Browse source
This commit is contained in:
Oliver Davies 2018-12-28 13:56:14 +00:00
parent 4a95a3b3ee
commit 20d41f2ef4
2 changed files with 19 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/components/DrupalMessage.vue
View file

@ -1,13 +1,16 @@
<template>
<div class="bg-green pl-2 rounded-sm">
<div class="py-4 pl-3 pr-4 mb-4 border flex items-center border-green-light text-green-dark bg-green-lighter rounded-sm">
<svg class="fill-current w-4 h-4 text-green mr-2" xmlns="http://www.w3.org/2000/svg"><path d="M6.464 13.676a.502.502 0 0 1-.707 0L.797 8.721a.502.502 0 0 1 0-.707l1.405-1.407a.5.5 0 0 1 .707 0l2.849 2.848a.504.504 0 0 0 .707 0l6.629-6.626a.502.502 0 0 1 .707 0l1.404 1.404a.504.504 0 0 1 0 .707l-8.741 8.736z"/></svg>
<p>
A Bartik clone, built with
<a href="https://vuejs.org" class="text-blue-dark hover:text-blue no-underline border-b border-dotted hover:border-solid border-blue-dark">Vue.js</a>
and <a href="https://tailwindcss.com" class="text-blue-dark hover:text-blue no-underline border-b border-dotted hover:border-solid border-blue-dark">Tailwind CSS</a>.
</p>
<div class="pl-2 rounded-sm" :class="{'bg-green': type == 'status'}">
<div class="py-4 pl-3 pr-4 mb-4 border flex items-center rounded-sm" :class="{'border-green-light text-green-dark bg-green-lighter': type == 'status'}">
<svg v-if="type == 'status'" class="fill-current w-4 h-4 text-green mr-2" xmlns="http://www.w3.org/2000/svg"><path d="M6.464 13.676a.502.502 0 0 1-.707 0L.797 8.721a.502.502 0 0 1 0-.707l1.405-1.407a.5.5 0 0 1 .707 0l2.849 2.848a.504.504 0 0 0 .707 0l6.629-6.626a.502.502 0 0 1 .707 0l1.404 1.404a.504.504 0 0 1 0 .707l-8.741 8.736z"/></svg>
<slot></slot>
</div>
</div>
</template>
<script>
export default {
props: {
type: String,
},
}
</script>

8
src/components/Welcome.vue
View file

@ -23,7 +23,13 @@
<div id="main-content" class="bg-white pt-6 pb-4 lg:pb-12">
<div class="container mx-auto px-4">
<drupal-message />
<drupal-message type="status">
<p>
A Bartik clone, built with
<a href="https://vuejs.org" class="text-blue-dark hover:text-blue no-underline border-b border-dotted hover:border-solid border-blue-dark">Vue.js</a>
and <a href="https://tailwindcss.com" class="text-blue-dark hover:text-blue no-underline border-b border-dotted hover:border-solid border-blue-dark">Tailwind CSS</a>.
</p>
</drupal-message>
<div class="flex flex-col md:flex-row-reverse md:-mx-8 my-6">
<div id="main" class="w-full md:w-auto md:flex-1 md:px-6 mb-8 md:mb-0">