Matthew Aaron Raymer
2 years ago
10 changed files with 183 additions and 90 deletions
@ -1,3 +1,107 @@ |
|||||
<template> |
<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> |
</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