Browse Source

Merge pull request 'Remove form tags' (#44) from form-tag-cleanup into master

Reviewed-on: https://gitea.anomalistdesign.com/trent_larson/kick-starter-for-time-pwa/pulls/44
projects-view-improvements
anomalist 1 year ago
parent
commit
540ef916c2
  1. 6
      project.task.yaml
  2. 48
      src/views/AccountViewView.vue
  3. 48
      src/views/ConfirmContactView.vue
  4. 122
      src/views/ContactScanView.vue
  5. 61
      src/views/NewEditAccountView.vue
  6. 71
      src/views/NewEditCommitmentView.vue
  7. 23
      src/views/ProjectsView.vue

6
project.task.yaml

@ -1,11 +1,9 @@
tasks: tasks:
- 01 design ideas for simple gives on the Home page - 01 design ideas for simple gives on the Home page
- 02 Discover page - add infinite search
- 01 add a location for a project via map pin - 01 add a location for a project via map pin
- 04 search by a bounding box for local projects (see API by clicking on "Nearby") - 04 search by a bounding box for local projects (see API by clicking on "Nearby")
- 01 remove all the "form" fields (or at least investigate to see if that page refresh is desired) - 01 Replace Gifted/Give in ContactsView with GiftedDialog assignee:jose
- 01 Replace Gifted/Give in ContactsView with GiftedDialog
- 02 Fix images on projectview: allow choice of image from a pallete of images or a url image. - 02 Fix images on projectview: allow choice of image from a pallete of images or a url image.
- 08 Scan QR code to import into contacts. - 08 Scan QR code to import into contacts.
@ -42,7 +40,7 @@ tasks:
- Discuss whether the remaining tasks are worthwhile before MVP release. - Discuss whether the remaining tasks are worthwhile before MVP release.
- 01 fix images on project page, on discovery page - 01 fix images on project page, on discovery page
- .2 fix static icon to the right on project page (Matthew: I've made "Rotary" into issuer?) - .2 fix static icon to the right on project page (Matthew: I've made "Rotary" into issuer property?)
- stats v1 : - stats v1 :
- 01 show numeric stats - 01 show numeric stats

48
src/views/AccountViewView.vue

@ -143,25 +143,23 @@
<!-- QR code popup --> <!-- QR code popup -->
<dialog id="dlgQR" class="backdrop:bg-black/75 rounded-md"> <dialog id="dlgQR" class="backdrop:bg-black/75 rounded-md">
<form method="dialog"> <div class="text-slate-500 text-center">
<div class="text-slate-500 text-center"> <b>ID:</b> <code>did:peer:kl45kj41lk451kl3</code>
<b>ID:</b> <code>did:peer:kl45kj41lk451kl3</code> </div>
</div> <img src="/img/sample-qr-code.png" class="w-full mb-3" />
<img src="/img/sample-qr-code.png" class="w-full mb-3" />
<button <button
value="cancel" value="cancel"
class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2" class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
> >
Copy to Clipboard Copy to Clipboard
</button> </button>
<button <button
value="cancel" value="cancel"
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"
> >
Close Close
</button> </button>
</form>
</dialog> </dialog>
<h3 <h3
@ -260,20 +258,6 @@
</button> </button>
</div> </div>
<div v-if="numAccounts > 0" class="flex py-2">
Switch Identifier
<span>
<button class="text-blue-500 px-2" @click="switchAccount(0)">
None
</button>
</span>
<span v-for="accountNum in numAccounts" :key="accountNum">
<button class="text-blue-500 px-2" @click="switchAccount(accountNum)">
#{{ accountNum }}
</button>
</span>
</div>
<div> <div>
<button class="text-blue-500"> <button class="text-blue-500">
<router-link <router-link

48
src/views/ConfirmContactView.vue

@ -15,35 +15,33 @@
</h1> </h1>
</div> </div>
<form> <p class="text-center text-xl mb-4 font-light">
<p class="text-center text-xl mb-4 font-light"> Would you like to add <i>Firstname</i> to your network?
Would you like to add <i>Firstname</i> to your network? </p>
</p>
<!-- Account Details --> <!-- Account Details -->
<div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4"> <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4">
<h2 class="text-xl font-semibold mb-2">Firstname Lastname</h2> <h2 class="text-xl font-semibold mb-2">Firstname Lastname</h2>
<div class="text-slate-500 text-sm font-bold">ID</div> <div class="text-slate-500 text-sm font-bold">ID</div>
<div class="text-sm text-slate-500 mb-1"> <div class="text-sm text-slate-500 mb-1">
<span><code>did:peer:kl45kj41lk451kl3</code></span> <span><code>did:peer:kl45kj41lk451kl3</code></span>
</div>
</div> </div>
</div>
<div class="mt-8"> <div class="mt-8">
<input <input
type="submit" type="submit"
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"
value="Add Contact" value="Add Contact"
/> />
<button <button
type="button" type="button"
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"
> >
Cancel Cancel
</button> </button>
</div> </div>
</form>
</section> </section>
</template> </template>

122
src/views/ContactScanView.vue

@ -14,75 +14,69 @@
</h1> </h1>
</div> </div>
<form> <h3 class="text-sm uppercase font-semibold mb-2">Scan a QR Code</h3>
<h3 class="text-sm uppercase font-semibold mb-2">Scan a QR Code</h3> <div class="bg-black rounded overflow-hidden relative mb-4">
<div class="bg-black rounded overflow-hidden relative mb-4"> <img src="https://picsum.photos/400/400?random=1" class="w-full" />
<img src="https://picsum.photos/400/400?random=1" class="w-full" />
<!-- Darken overlay --> <!-- Darken overlay -->
<!-- Top --> <!-- Top -->
<div class="absolute top-0 left-0 right-0 bg-black/50 h-1/4"></div> <div class="absolute top-0 left-0 right-0 bg-black/50 h-1/4"></div>
<!-- Reft --> <!-- Reft -->
<div class="absolute top-1/4 bottom-1/4 left-0 bg-black/50 w-1/4"></div> <div class="absolute top-1/4 bottom-1/4 left-0 bg-black/50 w-1/4"></div>
<!-- Right --> <!-- Right -->
<div <div class="absolute top-1/4 bottom-1/4 right-0 bg-black/50 w-1/4"></div>
class="absolute top-1/4 bottom-1/4 right-0 bg-black/50 w-1/4" <!-- Bottom -->
></div> <div class="absolute bottom-0 left-0 right-0 bg-black/50 h-1/4"></div>
<!-- Bottom -->
<div class="absolute bottom-0 left-0 right-0 bg-black/50 h-1/4"></div>
<!-- Reticle overlay --> <!-- Reticle overlay -->
<!-- Top-left --> <!-- Top-left -->
<div <div
class="absolute top-1/4 left-1/4 h-6 w-6 border-white border-t-4 border-l-4 drop-shadow" class="absolute top-1/4 left-1/4 h-6 w-6 border-white border-t-4 border-l-4 drop-shadow"
></div> ></div>
<!-- Top-right --> <!-- Top-right -->
<div <div
class="absolute top-1/4 right-1/4 h-6 w-6 border-white border-t-4 border-r-4 drop-shadow" class="absolute top-1/4 right-1/4 h-6 w-6 border-white border-t-4 border-r-4 drop-shadow"
></div> ></div>
<!-- Bottom-left --> <!-- Bottom-left -->
<div <div
class="absolute bottom-1/4 left-1/4 h-6 w-6 border-white border-b-4 border-l-4 drop-shadow" class="absolute bottom-1/4 left-1/4 h-6 w-6 border-white border-b-4 border-l-4 drop-shadow"
></div> ></div>
<!-- Bottom-right --> <!-- Bottom-right -->
<div <div
class="absolute bottom-1/4 right-1/4 h-6 w-6 border-white border-b-4 border-r-4 drop-shadow" class="absolute bottom-1/4 right-1/4 h-6 w-6 border-white border-b-4 border-r-4 drop-shadow"
></div> ></div>
</div> </div>
<h3 class="text-sm uppercase font-semibold mb-2"> <h3 class="text-sm uppercase font-semibold mb-2">or Enter Contact Data</h3>
or Enter Contact Data <input
</h3> type="text"
<input placeholder="Name (optional)"
type="text" class="block w-full rounded border border-slate-400 mb-2 px-3 py-2"
placeholder="Name (optional)" />
class="block w-full rounded border border-slate-400 mb-2 px-3 py-2" <input
/> type="text"
<input placeholder="ID"
type="text" class="block w-full rounded border border-slate-400 mb-2 px-3 py-2"
placeholder="ID" />
class="block w-full rounded border border-slate-400 mb-2 px-3 py-2" <input
/> type="text"
placeholder="Public Key (optional)"
class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
/>
<div class="mt-8">
<input <input
type="text" type="submit"
placeholder="Public Key (optional)" 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 rounded border border-slate-400 mb-4 px-3 py-2" value="Look Up Contact"
/> />
<button
<div class="mt-8"> type="button"
<input class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
type="submit" >
class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2" Cancel
value="Look Up Contact" </button>
/> </div>
<button
type="button"
class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
>
Cancel
</button>
</div>
</form>
</section> </section>
</template> </template>

61
src/views/NewEditAccountView.vue

@ -13,38 +13,37 @@
[New/Edit] Identity [New/Edit] Identity
</h1> </h1>
</div> </div>
<form>
<input
type="text"
placeholder="First Name"
class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
v-model="firstName"
/>
<input
type="text"
placeholder="Last Name"
class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
v-model="lastName"
/>
<div class="mt-8"> <input
<button type="text"
type="button" placeholder="First Name"
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 rounded border border-slate-400 mb-4 px-3 py-2"
@click="onClickSaveChanges()" v-model="firstName"
> />
Save Changes <input
</button> type="text"
<!-- SHOW ME instead while processing saving changes --> placeholder="Last Name"
<button class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
type="button" v-model="lastName"
class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md" />
@click="onClickCancel()"
> <div class="mt-8">
Cancel <button
</button> type="button"
</div> class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2"
</form> @click="onClickSaveChanges()"
>
Save Changes
</button>
<!-- SHOW ME instead while processing saving changes -->
<button
type="button"
class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
@click="onClickCancel()"
>
Cancel
</button>
</div>
</section> </section>
</template> </template>

71
src/views/NewEditCommitmentView.vue

@ -16,47 +16,44 @@
</div> </div>
<!-- Project Details --> <!-- Project Details -->
<form>
<select
class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
>
<option disabled>Choose a commitment type</option>
<option selected>Time</option>
<option>Cryptocurrency</option>
<option>Money</option>
</select>
<!-- Time amount --> <select class="block w-full rounded border border-slate-400 mb-4 px-3 py-2">
<div class="mb-4 flex items-stretch"> <option disabled>Choose a commitment type</option>
<input <option selected>Time</option>
type="number" <option>Cryptocurrency</option>
placeholder="0.0" <option>Money</option>
class="block w-full rounded-l border border-slate-400 px-3 py-2" </select>
/>
<span <!-- Time amount -->
class="px-4 py-2 rounded-r bg-slate-200 border border-l-0 border-slate-400" <div class="mb-4 flex items-stretch">
>hours</span <input
> type="number"
</div> placeholder="0.0"
class="block w-full rounded-l border border-slate-400 px-3 py-2"
/>
<span
class="px-4 py-2 rounded-r bg-slate-200 border border-l-0 border-slate-400"
>hours</span
>
</div>
<!-- Crypto amount --> <!-- Crypto amount -->
<!-- Money amount --> <!-- Money amount -->
<div class="mt-8"> <div class="mt-8">
<input <input
type="submit" type="submit"
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"
value="Commit" value="Commit"
/> />
<button <button
type="button" type="button"
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"
> >
Maybe Later Maybe Later
</button> </button>
</div> </div>
</form>
</section> </section>
</template> </template>

23
src/views/ProjectsView.vue

@ -7,18 +7,17 @@
</h1> </h1>
<!-- Quick Search --> <!-- Quick Search -->
<form id="QuickSearch" class="mb-4 flex">
<input <input
type="text" type="text"
placeholder="Search…" placeholder="Search…"
class="block w-full rounded-l border border-r-0 border-slate-400 px-3 py-2" 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"
> >
<fa icon="magnifying-glass" class="fa-fw"></fa> <fa icon="magnifying-glass" class="fa-fw"></fa>
</button> </button>
</form>
<!-- New Project --> <!-- New Project -->
<button <button

Loading…
Cancel
Save