trent_larson
/
crowd-funder-for-time-pwa
4
1
Fork 2
Code Pull Requests 4 Releases 5 Wiki Activity
Labels Milestones
New Pull Request

ui-fixes-2024-03 #111

Merged
trentlarson merged 5 commits from ui-fixes-2024-03 into master 8 months ago
Conversation 2 Commits 5 Files Changed 15
15 changed files with 194 additions and 158 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
      src/components/GiftedDialog.vue
  2. 10
      src/components/GiftedPrompts.vue
  3. 26
      src/components/OfferDialog.vue
  4. 2
      src/views/AccountViewView.vue
  5. 24
      src/views/ConfirmContactView.vue
  6. 24
      src/views/ContactScanView.vue
  7. 26
      src/views/GiftedDetails.vue
  8. 6
      src/views/HomeView.vue
  9. 28
      src/views/ImportAccountView.vue
  10. 28
      src/views/ImportDerivedAccountView.vue
  11. 32
      src/views/NewEditAccountView.vue
  12. 49
      src/views/NewEditProjectView.vue
  13. 4
      src/views/ProjectViewView.vue
  14. 3
      src/views/SearchAreaView.vue
  15. 64
      src/views/StartView.vue

26
src/components/GiftedDialog.vue
View File

@ -65,18 +65,20 @@
@click="explainData()" @click="explainData()"
/> />
</p> </p>
<button <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
class="block w-full text-center text-lg font-bold uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2" <button
@click="confirm" class="block w-full text-center text-lg font-bold uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md"
> @click="confirm"
Sign &amp; Send >
</button> Sign &amp; Send
<button </button>
class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md" <button
@click="cancel" class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
> @click="cancel"
Cancel >
</button> Cancel
</button>
</div>
</div> </div>
</div> </div>
</template> </template>

10
src/components/GiftedPrompts.vue
View File

@ -1,7 +1,15 @@
<template> <template>
<div v-if="visible" class="dialog-overlay"> <div v-if="visible" class="dialog-overlay">
<div class="dialog"> <div class="dialog">
<h1 class="text-xl font-bold text-center mb-4">Here's one:</h1> <h1 class="text-xl font-bold text-center mb-4 relative">
Here's one:
<div
class="text-lg text-center p-2 leading-none absolute right-0 -top-1"
@click="cancel"
>
<fa icon="xmark" class="w-[1em]"></fa>
</div>
</h1>
<span class="flex justify-between"> <span class="flex justify-between">
<span <span
class="rounded-l border border-slate-400 bg-slate-200 px-4 py-2 flex" class="rounded-l border border-slate-400 bg-slate-200 px-4 py-2 flex"

26
src/components/OfferDialog.vue
View File

@ -50,18 +50,20 @@
<p class="text-center mt-6 mb-2 italic"> <p class="text-center mt-6 mb-2 italic">
Sign & Send to publish to the world Sign & Send to publish to the world
</p> </p>
<button <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
class="block w-full text-center text-lg font-bold uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2" <button
@click="confirm" class="block w-full text-center text-lg font-bold uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md"
> @click="confirm"
Sign &amp; Send >
</button> Sign &amp; Send
<button </button>
class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md" <button
@click="cancel" class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
> @click="cancel"
Cancel >
</button> Cancel
</button>
</div>
</div> </div>
</div> </div>
</template> </template>

2
src/views/AccountViewView.vue
View File

@ -503,7 +503,7 @@
<button> <button>
<router-link <router-link
:to="{ name: 'statistics' }" :to="{ name: 'statistics' }"
class="block w-fit text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md mb-2" class="block w-fit text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md mb-2"
> >
See Global Animated History of Giving See Global Animated History of Giving
</router-link> </router-link>

24
src/views/ConfirmContactView.vue
View File

@ -30,17 +30,19 @@
</div> </div>
<div class="mt-8"> <div class="mt-8">
<input <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
type="submit" <input
class="block w-full text-center text-lg font-bold uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2" type="submit"
value="Add Contact" class="block w-full text-center text-lg font-bold uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md"
/> value="Add Contact"
<button />
type="button" <button
class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md" type="button"
> class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
Cancel >
</button> Cancel
</button>
</div>
</div> </div>
</section> </section>
</template> </template>

24
src/views/ContactScanView.vue
View File

@ -65,17 +65,19 @@
/> />
<div class="mt-8"> <div class="mt-8">
<input <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
type="submit" <input
class="block w-full text-center text-lg font-bold uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2" type="submit"
value="Look Up Contact" class="block w-full text-center text-lg font-bold uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md"
/> value="Look Up Contact"
<button />
type="button" <button
class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md" type="button"
> class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
Cancel >
</button> Cancel
</button>
</div>
</div> </div>
</section> </section>
</template> </template>

26
src/views/GiftedDetails.vue
View File

@ -98,18 +98,20 @@
@click="explainData()" @click="explainData()"
/> />
</p> </p>
<button <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
class="block w-full text-center text-lg font-bold uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2" <button
@click="confirm" class="block w-full text-center text-lg font-bold uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md"
> @click="confirm"
Sign &amp; Send >
</button> Sign &amp; Send
<button </button>
class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md" <button
@click="cancel" class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
> @click="cancel"
Cancel >
</button> Cancel
</button>
</div>
</section> </section>
</template> </template>

6
src/views/HomeView.vue
View File

@ -118,7 +118,9 @@
<h2 class="text-xl font-bold">Record Something Given By:</h2> <h2 class="text-xl font-bold">Record Something Given By:</h2>
</div> </div>
<ul class="grid grid-cols-4 gap-x-3 gap-y-5 text-center mb-5"> <ul
class="grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 gap-x-3 gap-y-5 text-center mb-5"
>
<li @click="openDialog()"> <li @click="openDialog()">
<img <img
src="../assets/blank-square.svg" src="../assets/blank-square.svg"
@ -158,7 +160,7 @@
</router-link> </router-link>
<button <button
@click="openGiftedPrompts()" @click="openGiftedPrompts()"
class="block text-center text-md font-bold bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md" class="block text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md"
> >
Ideas... Ideas...
</button> </button>

28
src/views/ImportAccountView.vue
View File

@ -56,19 +56,21 @@
</div> </div>
<div class="mt-8"> <div class="mt-8">
<button <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
@click="fromMnemonic()" <button
class="block w-full text-center text-lg font-bold uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2" @click="fromMnemonic()"
> class="block w-full text-center text-lg font-bold uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md"
Import >
</button> Import
<button </button>
@click="onCancelClick()" <button
type="button" @click="onCancelClick()"
class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md" type="button"
> class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
Cancel >
</button> Cancel
</button>
</div>
</div> </div>
</section> </section>
</template> </template>

28
src/views/ImportDerivedAccountView.vue
View File

@ -49,19 +49,21 @@
</ul> </ul>
</div> </div>
<div class="mt-8"> <div class="mt-8">
<button <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
@click="incrementDerivation()" <button
class="block w-full text-center text-lg font-bold uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2" @click="incrementDerivation()"
> class="block w-full text-center text-lg font-bold uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md"
Increment and Import >
</button> Increment and Import
<button </button>
@click="onCancelClick()" <button
type="button" @click="onCancelClick()"
class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md" type="button"
> class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
Cancel >
</button> Cancel
</button>
</div>
</div> </div>
</section> </section>
</template> </template>

32
src/views/NewEditAccountView.vue
View File

@ -22,21 +22,23 @@
/> />
<div class="mt-8"> <div class="mt-8">
<button <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
type="button" <button
class="block w-full text-center text-lg font-bold uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2" type="button"
@click="onClickSaveChanges()" class="block w-full text-center text-lg font-bold uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2"
> @click="onClickSaveChanges()"
Save Changes >
</button> Save Changes
<!-- SHOW ME instead while processing saving changes --> </button>
<button <!-- SHOW ME instead while processing saving changes -->
type="button" <button
class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md" type="button"
@click="onClickCancel()" class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
> @click="onClickCancel()"
Cancel >
</button> Cancel
</button>
</div>
</div> </div>
</section> </section>
</template> </template>

49
src/views/NewEditProjectView.vue
View File

@ -73,16 +73,17 @@
/> />
<label for="includeLocation">Include Location</label> <label for="includeLocation">Include Location</label>
</div> </div>
<div v-if="includeLocation" style="height: 600px; width: 800px"> <div v-if="includeLocation" class="mb-4 aspect-video">
<div class="px-2 py-2"> <p class="text-sm mb-2 text-slate-500">
For your security, choose a location nearby but not exactly at the For your security, choose a location nearby but not exactly at the
place. place.
</div> </p>
<l-map <l-map
ref="map" ref="map"
v-model:zoom="zoom" v-model:zoom="zoom"
:center="[0, 0]" :center="[0, 0]"
class="!z-40 rounded-md"
@click=" @click="
(event) => { (event) => {
latitude = event.latlng.lat; latitude = event.latlng.lat;
@ -104,28 +105,30 @@
</div> </div>
<div class="mt-8"> <div class="mt-8">
<button <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
:disabled="isHiddenSave" <button
class="block w-full text-center text-lg font-bold uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2" :disabled="isHiddenSave"
@click="onSaveProjectClick()" class="block w-full text-center text-lg font-bold uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2"
> @click="onSaveProjectClick()"
<!-- SHOW if in idle state --> >
<span :class="{ hidden: isHiddenSave }">Save Project</span> <!-- SHOW if in idle state -->
<span :class="{ hidden: isHiddenSave }">Save Project</span>
<!-- SHOW if in saving state; DISABLE button while in saving state --> <!-- SHOW if in saving state; DISABLE button while in saving state -->
<span :class="{ hidden: isHiddenSpinner }"> <span :class="{ hidden: isHiddenSpinner }">
<!-- icon no worky? --> <!-- icon no worky? -->
<i class="fa-solid fa-spinner fa-spin-pulse"></i> <i class="fa-solid fa-spinner fa-spin-pulse"></i>
Saving...</span Saving...</span
>
</button>
<button
type="button"
class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
@click="onCancelClick()"
> >
</button> Cancel
<button </button>
type="button" </div>
class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
@click="onCancelClick()"
>
Cancel
</button>
</div> </div>
</section> </section>
</template> </template>

4
src/views/ProjectViewView.vue
View File

@ -134,7 +134,9 @@
<div class="text-center"> <div class="text-center">
<p class="mt-2 mb-4 text-center">Record a contribution from:</p> <p class="mt-2 mb-4 text-center">Record a contribution from:</p>
</div> </div>
<ul class="grid grid-cols-4 gap-x-3 gap-y-5 text-center mb-5"> <ul
class="grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 gap-x-3 gap-y-5 text-center mb-5"
>
<li @click="openGiftDialog({ name: 'you', did: activeDid })"> <li @click="openGiftDialog({ name: 'you', did: activeDid })">
<fa icon="hand" class="fa-fw text-slate-400 text-5xl" /> <fa icon="hand" class="fa-fw text-slate-400 text-5xl" />
<h3 <h3

3
src/views/SearchAreaView.vue
View File

@ -64,10 +64,11 @@
</div> </div>
</div> </div>
<div style="height: 600px; width: 800px"> <div class="mb-4 aspect-video">
<l-map <l-map
ref="map" ref="map"
:center="[localCenterLat, localCenterLong]" :center="[localCenterLat, localCenterLong]"
class="!z-40 rounded-md"
v-model:zoom="localZoom" v-model:zoom="localZoom"
@click="setMapPoint" @click="setMapPoint"
> >

64
src/views/StartView.vue
View File

@ -23,36 +23,40 @@
<!-- id used by puppeteer test script --> <!-- id used by puppeteer test script -->
<div id="start-question" class="mt-8"> <div id="start-question" class="mt-8">
<p class="text-center text-xl font-light"> <div class="max-w-3xl mx-auto">
Do you want a new identifier of your own? <p class="text-center text-xl font-light">
</p> Do you want a new identifier of your own?
<p class="text-center font-light"> </p>
If you haven't used this before, click "Yes" to generate a new <p class="text-center font-light">
identifier. If you haven't used this before, click "Yes" to generate a new
</p> identifier.
<p class="text-center mb-4 font-light"> </p>
Only click "No" if you have a seed of 12 or 24 words generated <p class="text-center mb-4 font-light">
elsewhere. Only click "No" if you have a seed of 12 or 24 words generated
</p> elsewhere.
<a </p>
@click="onClickYes()" <a
class="block w-full text-center text-lg uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md" @click="onClickYes()"
> class="block w-full text-center text-lg uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2"
Yes, generate one >
</a> Yes, generate one
<a </a>
@click="onClickNo()" <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md mt-2" <a
> @click="onClickNo()"
No, I have a seed class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
</a> >
<a No, I have a seed
v-if="numAccounts > 0" </a>
@click="onClickDerive()" <a
class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md mt-2" v-if="numAccounts > 0"
> @click="onClickDerive()"
Derive new address from existing seed class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
</a> >
Derive new address from existing seed
</a>
</div>
</div>
</div> </div>
</section> </section>
</template> </template>

Write Preview
Loading…
Cancel
Save