Matthew Aaron Raymer
2 years ago
10 changed files with 183 additions and 90 deletions
@ -1,3 +1,107 @@ |
|||
<template> |
|||
<section id="Content" class="p-6 pb-24"></section> |
|||
<section id="Content" class="p-6 pb-24"> |
|||
<!-- Heading --> |
|||
<h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8"> |
|||
My Projects |
|||
</h1> |
|||
|
|||
<!-- Quick Search --> |
|||
<form id="QuickSearch" class="mb-4 flex"> |
|||
<input |
|||
type="text" |
|||
placeholder="Search…" |
|||
class="block w-full rounded-l border-r-0 border-slate-400" |
|||
/> |
|||
<button |
|||
class="px-4 rounded-r bg-slate-200 border border-l-0 border-slate-400" |
|||
> |
|||
<i class="fa-solid fa-magnifying-glass fa-fw"></i> |
|||
</button> |
|||
</form> |
|||
|
|||
<!-- New Project --> |
|||
<button |
|||
class="fixed right-6 bottom-24 text-center text-4xl leading-none bg-blue-600 text-white w-14 py-2.5 rounded-full" |
|||
@click="onClickNewProject()" |
|||
> |
|||
<fa icon="plus" class="fa-fw"></fa> |
|||
</button> |
|||
|
|||
<!-- Results List --> |
|||
<ul class=""> |
|||
<li class="border-b border-slate-300"> |
|||
<a href="project-view.html" class="block py-4 flex gap-4"> |
|||
<div class="flex-none w-12"> |
|||
<img |
|||
src="https://picsum.photos/200/200?random=1" |
|||
class="w-full rounded" |
|||
/> |
|||
</div> |
|||
|
|||
<div class="grow overflow-hidden"> |
|||
<h2 class="text-base font-semibold">Canyon cleanup</h2> |
|||
<div class="text-sm truncate"> |
|||
The quick brown fox jumps over the lazy dog. The quick brown fox |
|||
jumps over the lazy dog. |
|||
</div> |
|||
</div> |
|||
</a> |
|||
</li> |
|||
|
|||
<li class="border-b border-slate-300"> |
|||
<a href="project-view.html" class="block py-4 flex gap-4"> |
|||
<div class="flex-none w-12"> |
|||
<img |
|||
src="https://picsum.photos/200/200?random=2" |
|||
class="w-full rounded" |
|||
/> |
|||
</div> |
|||
|
|||
<div class="grow overflow-hidden"> |
|||
<h2 class="text-base font-semibold">Potluck with neighbors</h2> |
|||
<div class="text-sm truncate"> |
|||
The quick brown fox jumps over the lazy dog. The quick brown fox |
|||
jumps over the lazy dog. |
|||
</div> |
|||
</div> |
|||
</a> |
|||
</li> |
|||
|
|||
<li class="border-b border-slate-300"> |
|||
<a href="project-view.html" class="block py-4 flex gap-4"> |
|||
<div class="flex-none w-12"> |
|||
<img |
|||
src="https://picsum.photos/200/200?random=3" |
|||
class="w-full rounded" |
|||
/> |
|||
</div> |
|||
|
|||
<div class="grow overflow-hidden"> |
|||
<h2 class="text-base font-semibold">Historical site</h2> |
|||
<div class="text-sm truncate"> |
|||
The quick brown fox jumps over the lazy dog. The quick brown fox |
|||
jumps over the lazy dog. |
|||
</div> |
|||
</div> |
|||
</a> |
|||
</li> |
|||
</ul> |
|||
</section> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { Options, Vue } from "vue-class-component"; |
|||
|
|||
@Options({ |
|||
components: {}, |
|||
}) |
|||
export default class ProjectsView extends Vue { |
|||
onClickNewProject(): void { |
|||
const route = { |
|||
name: "new-edit-project", |
|||
}; |
|||
console.log(route); |
|||
this.$router.push(route); |
|||
} |
|||
} |
|||
</script> |
|||
|
Loading…
Reference in new issue