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

Add ProjectBreadcrumb component

Browse source
This commit is contained in:
Oliver Davies 2019-04-28 18:50:05 +01:00
parent 1d7d0ab60b
commit 744bb47ae7
3 changed files with 29 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/components/Banner.vue
View file

@ -2,14 +2,16 @@
<div>
<header class="bg-gray-900 text-white pt-4 pb-12">
<div class="max-w-6xl mx-auto px-4">
<div class="flex justify-between items-center -mx-4">
<div class="w-1/2 px-4">
<div class="flex-1 flex justify-between items-center -mx-4">
<div class="w-1/7 px-4">
<router-link :to="{ name: 'projects' }">
<svg alt="icon" class="w-6 h-6" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg"><defs><polygon id="path-1" points="0 0 27.6677333 0 27.6677333 11.0021333 0 11.0021333"></polygon><polygon id="path-3" points="0 0.0373333333 27.6677333 0.0373333333 27.6677333 3.7744 0 3.7744"></polygon><polygon id="path-5" points="0 0.365866667 27.6677333 0.365866667 27.6677333 6.01066667 0 6.01066667"></polygon></defs><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-61.000000, -43.000000)"><g transform="translate(61.000000, 43.000000)"><g><mask id="mask-2" fill="white"><use xlink:href="#path-1"></use></mask><g></g><polygon fill="#ffffff" mask="url(#mask-2)" points="-1.86666667 12.8688 29.5344 12.8688 29.5344 -1.86666667 -1.86666667 -1.86666667"></polygon></g><g transform="translate(0.000000, 23.893333)"><mask id="mask-4" fill="white"><use xlink:href="#path-3"></use></mask><polygon fill="#ffffff" mask="url(#mask-4)" points="-1.86666667 5.64106667 29.5344 5.64106667 29.5344 -1.82933333 -1.86666667 -1.82933333"></polygon></g><g transform="translate(0.000000, 14.186667)"><mask id="mask-6" fill="white"><use xlink:href="#path-5"></use></mask><polygon fill="#ffffff" mask="url(#mask-6)" points="-1.86666667 7.87733333 29.5344 7.87733333 29.5344 -1.5008 -1.86666667 -1.5008"></polygon></g></g></g></g></svg>
</router-link>
</div>
<div class="w-1/2 px-4">
<slot name="banner-left"></slot>
<div class="w-1/4 px-4">
<div class="flex justify-end">
<button type="button" class="font-semibold hover:bg-gray-700 py-1 px-2 rounded inline-flex">
Oliver Davies

11
src/components/ProjectBreadcrumb.vue Normal file
View file

@ -0,0 +1,11 @@
<template>
<div class="flex-1 flex items-center text-sm">
<ul class="flex spaced-x-3">
<li class="flex">
<router-link :to="{ name: 'projects' }" class="font-semibold text-white opacity-75">Projects</router-link>
<svg class="h-6 w-6 fill-current text-white opacity-75" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6.9 9.9c0-.3.1-.5.3-.7.4-.4 1-.4 1.4 0l3.5 3.5 3.5-3.5c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-4.2 4.2c-.4.4-1 .4-1.4 0l-4.2-4.2c-.2-.2-.3-.4-.3-.7z"/></svg>
</li>
<li class="font-semibold">Rebuilding Platform.sh</li>
</ul>
</div>
</template>

14
src/views/Project.vue
View file

@ -1,6 +1,18 @@
<template>
<div>
<banner></banner>
<banner>
<project-breadcrumb slot="banner-left"></project-breadcrumb>
</banner>
Project
</div>
</template>
<script>
import ProjectBreadcrumb from '@/components/ProjectBreadcrumb'
export default {
components: {
ProjectBreadcrumb
}
}
</script>