kentbull
/
crowd-funder-for-time-pwa
forked from trent_larson/crowd-funder-for-time-pwa
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Resynching master branch

kb/add-usage-guide
Matthew Aaron Raymer 2 years ago
parent
301b96ef3a
commit
f28e2123b1
17 changed files with 329 additions and 107 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 26
      package-lock.json
  2. 2
      package.json
  3. 2
      src/App.vue
  4. 150
      src/components/HelloWorld.vue
  5. 56
      src/main.ts
  6. 66
      src/router/index.ts
  7. 22
      src/views/AccountViewView.vue
  8. 2
      src/views/ConfirmContactView.vue
  9. 8
      src/views/ContactScanView.vue
  10. 21
      src/views/DiscoverView.vue
  11. 5
      src/views/HomeView.vue
  12. 6
      src/views/ImportAccountView.vue
  13. 8
      src/views/NewEditAccountView.vue
  14. 10
      src/views/NewEditCommitmentView.vue
  15. 12
      src/views/NewEditProjectView.vue
  16. 27
      src/views/ProjectViewView.vue
  17. 13
      src/views/StartView.vue

26
package-lock.json
View File

@ -9,8 +9,6 @@
"version": "0.1.0", "version": "0.1.0",
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.2.1", "@fortawesome/fontawesome-svg-core": "^6.2.1",
"@fortawesome/free-brands-svg-icons": "^6.2.1",
"@fortawesome/free-regular-svg-icons": "^6.2.1",
"@fortawesome/free-solid-svg-icons": "^6.2.1", "@fortawesome/free-solid-svg-icons": "^6.2.1",
"@fortawesome/vue-fontawesome": "^3.0.2", "@fortawesome/vue-fontawesome": "^3.0.2",
"core-js": "^3.26.1", "core-js": "^3.26.1",
@ -1830,30 +1828,6 @@
"node": ">=6" "node": ">=6"
} }
}, },
"node_modules/@fortawesome/free-brands-svg-icons": {
"version": "6.2.1",
"resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.2.1.tgz",
"integrity": "sha512-L8l4MfdHPmZlJ72PvzdfwOwbwcCAL0vx48tJRnI6u1PJXh+j2f3yDoKyQgO3qjEsgD5Fr2tQV/cPP8F/k6aUig==",
"hasInstallScript": true,
"dependencies": {
"@fortawesome/fontawesome-common-types": "6.2.1"
},
"engines": {
"node": ">=6"
}
},
"node_modules/@fortawesome/free-regular-svg-icons": {
"version": "6.2.1",
"resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.2.1.tgz",
"integrity": "sha512-wiqcNDNom75x+pe88FclpKz7aOSqS2lOivZeicMV5KRwOAeypxEYWAK/0v+7r+LrEY30+qzh8r2XDaEHvoLsMA==",
"hasInstallScript": true,
"dependencies": {
"@fortawesome/fontawesome-common-types": "6.2.1"
},
"engines": {
"node": ">=6"
}
},
"node_modules/@fortawesome/free-solid-svg-icons": { "node_modules/@fortawesome/free-solid-svg-icons": {
"version": "6.2.1", "version": "6.2.1",
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.2.1.tgz", "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.2.1.tgz",

2
package.json
View File

@ -9,8 +9,6 @@
}, },
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.2.1", "@fortawesome/fontawesome-svg-core": "^6.2.1",
"@fortawesome/free-brands-svg-icons": "^6.2.1",
"@fortawesome/free-regular-svg-icons": "^6.2.1",
"@fortawesome/free-solid-svg-icons": "^6.2.1", "@fortawesome/free-solid-svg-icons": "^6.2.1",
"@fortawesome/vue-fontawesome": "^3.0.2", "@fortawesome/vue-fontawesome": "^3.0.2",
"core-js": "^3.26.1", "core-js": "^3.26.1",

2
src/App.vue
View File

@ -1,3 +1,5 @@
<template> <template>
<router-view /> <router-view />
</template> </template>
<style></style>

150
src/components/HelloWorld.vue
View File

@ -0,0 +1,150 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br />
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener"
>vue-cli documentation</a
>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
target="_blank"
rel="noopener"
>babel</a
>
</li>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa"
target="_blank"
rel="noopener"
>pwa</a
>
</li>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
target="_blank"
rel="noopener"
>router</a
>
</li>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
target="_blank"
rel="noopener"
>vuex</a
>
</li>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
target="_blank"
rel="noopener"
>eslint</a
>
</li>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript"
target="_blank"
rel="noopener"
>typescript</a
>
</li>
</ul>
<h3>Essential Links</h3>
<ul>
<li>
<a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
</li>
<li>
<a href="https://forum.vuejs.org" target="_blank" rel="noopener"
>Forum</a
>
</li>
<li>
<a href="https://chat.vuejs.org" target="_blank" rel="noopener"
>Community Chat</a
>
</li>
<li>
<a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
>Twitter</a
>
</li>
<li>
<a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
</li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li>
<a href="https://router.vuejs.org" target="_blank" rel="noopener"
>vue-router</a
>
</li>
<li>
<a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
</li>
<li>
<a
href="https://github.com/vuejs/vue-devtools#vue-devtools"
target="_blank"
rel="noopener"
>vue-devtools</a
>
</li>
<li>
<a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
>vue-loader</a
>
</li>
<li>
<a
href="https://github.com/vuejs/awesome-vue"
target="_blank"
rel="noopener"
>awesome-vue</a
>
</li>
</ul>
</div>
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
@Options({
props: {
msg: String,
},
})
export default class HelloWorld extends Vue {
msg!: string;
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

56
src/main.ts
View File

@ -6,21 +6,49 @@ import store from "./store";
import "./assets/styles/tailwind.css"; import "./assets/styles/tailwind.css";
/* import the fontawesome core */
import { library } from "@fortawesome/fontawesome-svg-core"; import { library } from "@fortawesome/fontawesome-svg-core";
import {
faChevronLeft,
faHouseChimney,
faMagnifyingGlass,
faFolderOpen,
faHand,
faCircleUser,
faCopy,
faShareNodes,
faQrcode,
faUser,
faPen,
faTrashCan,
faCalendar,
faEllipsisVertical,
faSpinner,
faCircleCheck,
} from "@fortawesome/free-solid-svg-icons";
library.add(
faChevronLeft,
faHouseChimney,
faMagnifyingGlass,
faFolderOpen,
faHand,
faCircleUser,
faCopy,
faShareNodes,
faQrcode,
faUser,
faPen,
faTrashCan,
faCalendar,
faEllipsisVertical,
faSpinner,
faCircleCheck
);
/* import font awesome icon component */
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
/* import specific icons */ createApp(App)
import { faUserSecret } from "@fortawesome/free-solid-svg-icons"; .component("fa", FontAwesomeIcon)
.use(store)
/* add icons to the library */ .use(router)
library.add(faUserSecret); .mount("#app");
/* add font awesome icon component */
App.component("font-awesome-icon", FontAwesomeIcon);
App.config.productionTip = false;
createApp(App).use(store).use(router).mount("#app");

66
src/router/index.ts
View File

@ -22,6 +22,72 @@ const routes: Array<RouteRecordRaw> = [
component: () => component: () =>
import(/* webpackChunkName: "start" */ "../views/StartView.vue"), import(/* webpackChunkName: "start" */ "../views/StartView.vue"),
}, },
{
path: "/account",
name: "account",
component: () =>
import(/* webpackChunkName: "account" */ "../views/AccountViewView.vue"),
},
{
path: "/confirm-contact",
name: "confirm-contact",
component: () =>
import(
/* webpackChunkName: "confirm-contact" */ "../views/ConfirmContactView.vue"
),
},
{
path: "/scan-contact",
name: "scan-contact",
component: () =>
import(
/* webpackChunkName: "scan-contact" */ "../views/ContactScanView.vue"
),
},
{
path: "/discover",
name: "discover",
component: () =>
import(/* webpackChunkName: "discover" */ "../views/DiscoverView.vue"),
},
{
path: "/import-account",
name: "import-account",
component: () =>
import(
/* webpackChunkName: "import-account" */ "../views/ImportAccountView.vue"
),
},
{
path: "/new-edit-account",
name: "new-edit-account",
component: () =>
import(
/* webpackChunkName: "new-edit-account" */ "../views/NewEditAccountView.vue"
),
},
{
path: "/new-edit-commitment",
name: "new-edit-commitment",
component: () =>
import(
/* webpackChunkName: "new-edit-commitment" */ "../views/NewEditCommitmentView.vue"
),
},
{
path: "/new-edit-project",
name: "new-edit-project",
component: () =>
import(
/* webpackChunkName: "new-edit-project" */ "../views/NewEditProjectView.vue"
),
},
{
path: "/project",
name: "project",
component: () =>
import(/* webpackChunkName: "project" */ "../views/ProjectViewView.vue"),
},
]; ];
const router = createRouter({ const router = createRouter({

22
src/views/AccountViewView.vue
View File

@ -5,31 +5,31 @@
<!-- Home Feed --> <!-- Home Feed -->
<li class="basis-1/5 rounded-md text-slate-500"> <li class="basis-1/5 rounded-md text-slate-500">
<a href="" class="block text-center py-3 px-1" <a href="" class="block text-center py-3 px-1"
><i class="fa-solid fa-house-chimney fa-fw"></i ><fa icon="house-chimney" class="fa-fw"></fa
></a> ></a>
</li> </li>
<!-- Search --> <!-- Search -->
<li class="basis-1/5 rounded-md text-slate-500"> <li class="basis-1/5 rounded-md text-slate-500">
<a href="search.html" class="block text-center py-3 px-1" <a href="search.html" class="block text-center py-3 px-1"
><i class="fa-solid fa-magnifying-glass fa-fw"></i ><fa icon="magnifying-glass" class="fa-fw"></fa
></a> ></a>
</li> </li>
<!-- Projects --> <!-- Projects -->
<li class="basis-1/5 rounded-md text-slate-500"> <li class="basis-1/5 rounded-md text-slate-500">
<a href="" class="block text-center py-3 px-1" <a href="" class="block text-center py-3 px-1"
><i class="fa-solid fa-folder-open fa-fw"></i ><fa icon="folder-open" class="fa-fw"></fa
></a> ></a>
</li> </li>
<!-- Commitments --> <!-- Commitments -->
<li class="basis-1/5 rounded-md text-slate-500"> <li class="basis-1/5 rounded-md text-slate-500">
<a href="" class="block text-center py-3 px-1" <a href="" class="block text-center py-3 px-1"
><i class="fa-solid fa-hand fa-fw rotate-45"></i ><fa icon="hand" class="fa-fw"></fa
></a> ></a>
</li> </li>
<!-- Profile --> <!-- Profile -->
<li class="basis-1/5 rounded-md bg-slate-400 text-white"> <li class="basis-1/5 rounded-md bg-slate-400 text-white">
<a href="account-view.html" class="block text-center py-3 px-1" <a href="account-view.html" class="block text-center py-3 px-1"
><i class="fa-solid fa-circle-user fa-fw"></i ><fa icon="circle-user" class="fa-fw"></fa
></a> ></a>
</li> </li>
</ul> </ul>
@ -68,18 +68,18 @@
> >
<span <span
><code>did:peer:kl45kj41lk451kl3</code> ><code>did:peer:kl45kj41lk451kl3</code>
<i class="fa-solid fa-copy text-slate-400 fa-fw"></i <fa icon="copy" class="text-slate-400 fa-fw ml-1"></fa
></span> ></span>
<span> <span>
<button <button
class="text-xs uppercase bg-slate-500 text-white px-1.5 py-1 rounded-md" class="text-xs uppercase bg-slate-500 text-white px-1.5 py-1 rounded-md"
> >
<i class="fa-solid fa-share-nodes fa-fw"></i> <fa icon="share-nodes" class="fa-fw"></fa>
</button> </button>
<button <button
class="text-xs uppercase bg-slate-500 text-white px-1.5 py-1 rounded-md" class="text-xs uppercase bg-slate-500 text-white px-1.5 py-1 rounded-md ml-1"
> >
<i class="fa-solid fa-qrcode fa-fw"></i> <fa icon="qrcode" class="fa-fw"></fa>
</button> </button>
</span> </span>
</div> </div>
@ -88,7 +88,7 @@
<div class="text-sm text-slate-500 mb-1"> <div class="text-sm text-slate-500 mb-1">
<span <span
><code>dyIgKepL19trfrFu5jzkoNhI</code> ><code>dyIgKepL19trfrFu5jzkoNhI</code>
<i class="fa-solid fa-copy text-slate-400 fa-fw"></i <fa icon="copy" class="text-slate-400 fa-fw ml-1"></fa
></span> ></span>
</div> </div>
@ -96,7 +96,7 @@
<div class="text-sm text-slate-500 mb-1"> <div class="text-sm text-slate-500 mb-1">
<span <span
><code>m/44'/0'/0'/0/0</code> ><code>m/44'/0'/0'/0/0</code>
<i class="fa-solid fa-copy text-slate-400 fa-fw"></i <fa icon="copy" class="text-slate-400 fa-fw ml-1"></fa
></span> ></span>
</div> </div>
</div> </div>

2
src/views/ConfirmContactView.vue
View File

@ -8,7 +8,7 @@
<a <a
href="account-view.html" href="account-view.html"
class="text-lg text-center px-2 py-1 absolute -left-2 -top-1" class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
><i class="fa-solid fa-chevron-left fa-fw"></i ><fa icon="chevron-left" class="fa-fw"></fa
></a> ></a>
Confirm Contact Confirm Contact

8
src/views/ContactScanView.vue
View File

@ -7,7 +7,7 @@
<a <a
href="account-view.html" href="account-view.html"
class="text-lg text-center px-2 py-1 absolute -left-2 -top-1" class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
><i class="fa-solid fa-chevron-left fa-fw"></i ><fa icon="chevron-left" class="fa-fw"></fa
></a> ></a>
Scan Contact Scan Contact
@ -56,17 +56,17 @@
<input <input
type="text" type="text"
placeholder="Name (optional)" placeholder="Name (optional)"
class="block w-full rounded border-slate-400 mb-2" class="block w-full rounded border border-slate-400 mb-2 px-3 py-2"
/> />
<input <input
type="text" type="text"
placeholder="ID" placeholder="ID"
class="block w-full rounded border-slate-400 mb-2" class="block w-full rounded border border-slate-400 mb-2 px-3 py-2"
/> />
<input <input
type="text" type="text"
placeholder="Public Key (optional)" placeholder="Public Key (optional)"
class="block w-full rounded border-slate-400 mb-4" class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
/> />
<div class="mt-8"> <div class="mt-8">

21
src/views/DiscoverView.vue
View File

@ -1,34 +1,35 @@
<template> <template>
<!-- QUICK NAV -->
<nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200"> <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200">
<ul class="flex text-2xl p-2 gap-2"> <ul class="flex text-2xl p-2 gap-2">
<!-- Home Feed --> <!-- Home Feed -->
<li class="basis-1/5 rounded-md text-slate-500"> <li class="basis-1/5 rounded-md text-slate-500">
<a href="" class="block text-center py-3 px-1" <a href="" class="block text-center py-3 px-1"
><i class="fa-solid fa-house-chimney fa-fw"></i ><fa icon="house-chimney" class="fa-fw"></fa
></a> ></a>
</li> </li>
<!-- Search --> <!-- Search -->
<li class="basis-1/5 rounded-md bg-slate-400 text-white"> <li class="basis-1/5 rounded-md bg-slate-400 text-white">
<a href="search.html" class="block text-center py-3 px-1" <a href="search.html" class="block text-center py-3 px-1"
><i class="fa-solid fa-magnifying-glass fa-fw"></i ><fa icon="magnifying-glass" class="fa-fw"></fa
></a> ></a>
</li> </li>
<!-- Projects --> <!-- Projects -->
<li class="basis-1/5 rounded-md text-slate-500"> <li class="basis-1/5 rounded-md text-slate-500">
<a href="" class="block text-center py-3 px-1" <a href="" class="block text-center py-3 px-1"
><i class="fa-solid fa-folder-open fa-fw"></i ><fa icon="folder-open" class="fa-fw"></fa
></a> ></a>
</li> </li>
<!-- Commitments --> <!-- Commitments -->
<li class="basis-1/5 rounded-md text-slate-500"> <li class="basis-1/5 rounded-md text-slate-500">
<a href="" class="block text-center py-3 px-1" <a href="" class="block text-center py-3 px-1"
><i class="fa-solid fa-hand fa-fw rotate-45"></i ><fa icon="hand" class="fa-fw"></fa
></a> ></a>
</li> </li>
<!-- Profile --> <!-- Profile -->
<li class="basis-1/5 rounded-md text-slate-500"> <li class="basis-1/5 rounded-md text-slate-500">
<a href="account-view.html" class="block text-center py-3 px-1" <a href="account-view.html" class="block text-center py-3 px-1"
><i class="fa-solid fa-circle-user fa-fw"></i ><fa icon="circle-user" class="fa-fw"></fa
></a> ></a>
</li> </li>
</ul> </ul>
@ -46,12 +47,12 @@
<input <input
type="text" type="text"
placeholder="Search…" placeholder="Search…"
class="block w-full rounded-l border-r-0 border-slate-400" class="block w-full rounded-l border border-r-0 border-slate-400 px-3 py-2"
/> />
<button <button
class="px-4 rounded-r bg-slate-200 border border-l-0 border-slate-400" 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> <fa icon="magnifying-glass" class="fa-fw"></fa>
</button> </button>
</form> </form>
@ -99,7 +100,7 @@
<div class="grow"> <div class="grow">
<h2 class="text-base font-semibold">Canyon cleanup</h2> <h2 class="text-base font-semibold">Canyon cleanup</h2>
<div class="text-sm"> <div class="text-sm">
<i class="fa-solid fa-user fa-fw text-slate-400"></i> Rotary <fa icon="user" class="fa-fw text-slate-400"></fa> Rotary
</div> </div>
</div> </div>
</a> </a>
@ -117,7 +118,7 @@
<div class="grow"> <div class="grow">
<h2 class="text-base font-semibold">Potluck with neighbors</h2> <h2 class="text-base font-semibold">Potluck with neighbors</h2>
<div class="text-sm"> <div class="text-sm">
<i class="fa-solid fa-user fa-fw text-slate-400"></i> Andrew A. <fa icon="user" class="fa-fw text-slate-400"></fa> Andrew A.
</div> </div>
</div> </div>
</a> </a>
@ -135,7 +136,7 @@
<div class="grow"> <div class="grow">
<h2 class="text-base font-semibold">Historical site</h2> <h2 class="text-base font-semibold">Historical site</h2>
<div class="text-sm"> <div class="text-sm">
<i class="fa-solid fa-user fa-fw text-slate-400"></i> <fa icon="user" class="fa-fw text-slate-400 mr-1"></fa>
<em>Unknown</em> <em>Unknown</em>
</div> </div>
</div> </div>

5
src/views/HomeView.vue
View File

@ -4,9 +4,12 @@
<script lang="ts"> <script lang="ts">
import { Options, Vue } from "vue-class-component"; import { Options, Vue } from "vue-class-component";
import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src
@Options({ @Options({
components: {}, components: {
HelloWorld,
},
}) })
export default class HomeView extends Vue {} export default class HomeView extends Vue {}
</script> </script>

6
src/views/ImportAccountView.vue
View File

@ -7,8 +7,8 @@
<a <a
href="start.html" href="start.html"
class="text-lg text-center px-2 py-1 absolute -left-2 -top-1" class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
><i class="fa-solid fa-chevron-left fa-fw"></i ><fa icon="chevron-left"></fa>
></a> </a>
Import Existing Identity Import Existing Identity
</h1> </h1>
</div> </div>
@ -20,7 +20,7 @@
<input <input
type="text" type="text"
placeholder="Seed Phrase" placeholder="Seed Phrase"
class="block w-full rounded border-slate-400 mb-4" class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
/> />
<div class="mt-8"> <div class="mt-8">
<input <input

8
src/views/NewEditAccountView.vue
View File

@ -7,8 +7,8 @@
<a <a
href="account-view.html" href="account-view.html"
class="text-lg text-center px-2 py-1 absolute -left-2 -top-1" class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
><i class="fa-solid fa-chevron-left fa-fw"></i ><fa icon="chevron-left" class="fa-fw"></fa>
></a> </a>
[New/Edit] Identity [New/Edit] Identity
</h1> </h1>
</div> </div>
@ -16,12 +16,12 @@
<input <input
type="text" type="text"
placeholder="First Name" placeholder="First Name"
class="block w-full rounded border-slate-400 mb-4" class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
/> />
<input <input
type="text" type="text"
placeholder="Last Name" placeholder="Last Name"
class="block w-full rounded border-slate-400 mb-4" class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
/> />
<div class="mt-8"> <div class="mt-8">

10
src/views/NewEditCommitmentView.vue
View File

@ -8,8 +8,8 @@
<a <a
href="project-view.html" href="project-view.html"
class="text-lg text-center px-2 py-1 absolute -left-2 -top-1" class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
><i class="fa-solid fa-chevron-left fa-fw"></i ><fa icon="chevron-left" class="fa-fw"></fa>
></a> </a>
Make Commitment Make Commitment
</h1> </h1>
@ -17,7 +17,9 @@
<!-- Project Details --> <!-- Project Details -->
<form> <form>
<select class="block w-full rounded border-slate-400 mb-4"> <select
class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
>
<option disabled>Choose a commitment type…</option> <option disabled>Choose a commitment type…</option>
<option selected>Time</option> <option selected>Time</option>
<option>Cryptocurrency</option> <option>Cryptocurrency</option>
@ -29,7 +31,7 @@
<input <input
type="number" type="number"
placeholder="0.0" placeholder="0.0"
class="block w-full rounded-l border-slate-400" class="block w-full rounded-l border border-slate-400 px-3 py-2"
/> />
<span <span
class="px-4 py-2 rounded-r bg-slate-200 border border-l-0 border-slate-400" class="px-4 py-2 rounded-r bg-slate-200 border border-l-0 border-slate-400"

12
src/views/NewEditProjectView.vue
View File

@ -8,8 +8,8 @@
<a <a
href="project-view.html" href="project-view.html"
class="text-lg text-center px-2 py-1 absolute -left-2 -top-1" class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
><i class="fa-solid fa-chevron-left fa-fw"></i ><fa icon="chevron-left" class="fa-fw"></fa>
></a> </a>
[New/Edit] Project [New/Edit] Project
</h1> </h1>
@ -25,12 +25,12 @@
<button <button
class="text-md font-bold uppercase bg-blue-600 text-white px-3 py-2 rounded" class="text-md font-bold uppercase bg-blue-600 text-white px-3 py-2 rounded"
> >
<i class="fa-solid fa-pen fa-fw"></i> <fa icon="pen" class="fa-fw"></fa>
</button> </button>
<button <button
class="text-md font-bold uppercase bg-red-600 text-white px-3 py-2 rounded" class="text-md font-bold uppercase bg-red-600 text-white px-3 py-2 rounded"
> >
<i class="fa-solid fa-trash-can fa-fw"></i> <fa icon="trash-can" class="fa-fw"></fa>
</button> </button>
</div> </div>
<img src="https://picsum.photos/800/400" class="w-full" /> <img src="https://picsum.photos/800/400" class="w-full" />
@ -39,12 +39,12 @@
<input <input
type="text" type="text"
placeholder="Project Name" placeholder="Project Name"
class="block w-full rounded border-slate-400 mb-4" class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
/> />
<textarea <textarea
placeholder="Description" placeholder="Description"
class="block w-full rounded border-slate-400 mb-4" class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
rows="5" rows="5"
></textarea> ></textarea>
<div class="text-xs text-slate-500 italic -mt-3 mb-4"> <div class="text-xs text-slate-500 italic -mt-3 mb-4">

27
src/views/ProjectViewView.vue
View File

@ -5,31 +5,31 @@
<!-- Home Feed --> <!-- Home Feed -->
<li class="basis-1/5 rounded-md text-slate-500"> <li class="basis-1/5 rounded-md text-slate-500">
<a href="" class="block text-center py-3 px-1" <a href="" class="block text-center py-3 px-1"
><i class="fa-solid fa-house-chimney fa-fw"></i ><fa icon="house-chimney" class="fa-fw"></fa
></a> ></a>
</li> </li>
<!-- Search --> <!-- Search -->
<li class="basis-1/5 rounded-md text-slate-500"> <li class="basis-1/5 rounded-md text-slate-500">
<a href="search.html" class="block text-center py-3 px-1" <a href="search.html" class="block text-center py-3 px-1"
><i class="fa-solid fa-magnifying-glass fa-fw"></i ><fa icon="magnifying-glass" class="fa-fw"></fa
></a> ></a>
</li> </li>
<!-- Projects --> <!-- Projects -->
<li class="basis-1/5 rounded-md bg-slate-400 text-white"> <li class="basis-1/5 rounded-md bg-slate-400 text-white">
<a href="" class="block text-center py-3 px-1" <a href="" class="block text-center py-3 px-1"
><i class="fa-solid fa-folder-open fa-fw"></i ><fa icon="folder-open" class="fa-fw"></fa
></a> ></a>
</li> </li>
<!-- Commitments --> <!-- Commitments -->
<li class="basis-1/5 rounded-md text-slate-500"> <li class="basis-1/5 rounded-md text-slate-500">
<a href="" class="block text-center py-3 px-1" <a href="" class="block text-center py-3 px-1"
><i class="fa-solid fa-hand fa-fw rotate-45"></i ><fa icon="hand" class="fa-fw"></fa
></a> ></a>
</li> </li>
<!-- Profile --> <!-- Profile -->
<li class="basis-1/5 rounded-md text-slate-500"> <li class="basis-1/5 rounded-md text-slate-500">
<a href="account-view.html" class="block text-center py-3 px-1" <a href="account-view.html" class="block text-center py-3 px-1"
><i class="fa-solid fa-circle-user fa-fw"></i ><fa icon="circle-user" class="fa-fw"></fa
></a> ></a>
</li> </li>
</ul> </ul>
@ -42,13 +42,13 @@
<h1 class="text-lg text-center font-light relative px-7"> <h1 class="text-lg text-center font-light relative px-7">
<!-- Back --> <!-- Back -->
<a href="" class="text-lg text-center px-2 py-1 absolute -left-2 -top-1" <a href="" class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
><i class="fa-solid fa-chevron-left fa-fw"></i ><fa icon="chevron-left" class="fa-fw"></fa
></a> ></a>
<!-- Context Menu --> <!-- Context Menu -->
<a <a
href="" href=""
class="text-lg text-center px-2 py-1 absolute -right-2 -top-1" class="text-lg text-center px-2 py-1 absolute -right-2 -top-1"
><i class="fa-solid fa-ellipsis-vertical fa-fw"></i ><fa icon="ellipsis-vertical" class="fa-fw"></fa
></a> ></a>
View Project View Project
@ -65,11 +65,9 @@
<div> <div>
<h2 class="text-xl font-semibold">Canyon cleanup</h2> <h2 class="text-xl font-semibold">Canyon cleanup</h2>
<div class="flex justify-between gap-4 text-sm mb-3"> <div class="flex justify-between gap-4 text-sm mb-3">
<span><fa icon="user" class="fa-fw text-slate-400"></fa> Rotary</span>
<span <span
><i class="fa-solid fa-user fa-fw text-slate-400"></i> Rotary</span ><fa icon="calendar" class="fa-fw text-slate-400"></fa> 8 days
>
<span
><i class="fa-solid fa-calendar fa-fw text-slate-400"></i> 8 days
ago</span ago</span
> >
</div> </div>
@ -99,22 +97,21 @@
<li class="flex justify-between gap-4 py-1.5 border-b border-slate-300"> <li class="flex justify-between gap-4 py-1.5 border-b border-slate-300">
<span>[Username]</span> <span>[Username]</span>
<span <span
>5 hours <i class="fa-solid fa-spinner fa-fw text-slate-400"></i >5 hours <fa icon="spinner" class="fa-fw text-slate-400"></fa
></span> ></span>
</li> </li>
<li class="flex justify-between gap-4 py-1.5 border-b border-slate-300"> <li class="flex justify-between gap-4 py-1.5 border-b border-slate-300">
<span>[Username]</span> <span>[Username]</span>
<span <span
>US$ 20.00 >US$ 20.00 <fa icon="circle-check" class="fa-fw text-lime-500"></fa
<i class="fa-solid fa-circle-check fa-fw text-lime-500"></i
></span> ></span>
</li> </li>
<li class="flex justify-between gap-4 py-1.5 border-b border-slate-300"> <li class="flex justify-between gap-4 py-1.5 border-b border-slate-300">
<span>[Username]</span> <span>[Username]</span>
<span <span
>0.1 BTC <i class="fa-solid fa-spinner fa-fw text-slate-400"></i >0.1 BTC <fa icon="spinner" class="fa-fw text-slate-400"></fa
></span> ></span>
</li> </li>
</ul> </ul>

13
src/views/StartView.vue
View File

@ -12,15 +12,16 @@
<p class="text-center text-xl mb-4 font-light"> <p class="text-center text-xl mb-4 font-light">
Do you already have an identity to import? Do you already have an identity to import?
</p> </p>
<a <router-link
href="account-edit.html" :to="{ name: 'new-edit-account' }"
class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2" class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2"
>No</a
> >
<a No
href="account-import.html" </router-link>
<router-link
:to="{ name: 'import-account' }"
class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md" class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
>Yes</a >Yes</router-link
> >
</div> </div>
</section> </section>

Write Preview
Loading…
Cancel
Save