trentlarson/crowd-funder-from-jason
1
0
Fork 0
forked from jsnbuchanan/crowd-funder-for-time-pwa
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request 'design-tweaks-2023-12' (#96) from design-tweaks-2023-12 into master

Browse Source 
Reviewed-on: trent_larson/crowd-funder-for-time-pwa#96
This commit is contained in:
trentlarson
2023-12-13 11:20:54 -05:00
parent 8fb21c3d89 1d262b8da9
commit f2e5d8168d
3 changed files with 93 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
src/views/AccountViewView.vue
View File

@@ -58,9 +58,9 @@
<span v-else> <span v-else>
<router-link <router-link
:to="{ name: 'new-edit-account' }" :to="{ name: 'new-edit-account' }"
class="text-xs bg-blue-500 text-white px-1.5 py-1 rounded-md" class="block w-full text-center text-md text-slate-500 uppercase border border-dashed border-slate-400 px-1.5 py-2 rounded-md mb-2"
> >
(set name) (Set Your Name)
</router-link> </router-link>
</span> </span>
@@ -89,7 +89,7 @@
<div class="bg-slate-100 rounded-md overflow-hidden px-4 py-4 mt-8 mb-8"> <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-4 mt-8 mb-8">
<label <label
for="toggleNotifications" for="toggleNotifications"
class="flex items-center cursor-pointer" class="flex items-center justify-between cursor-pointer"
@click=" @click="
!toggleNotifications !toggleNotifications
? this.$notify( ? this.$notify(
@@ -129,7 +129,7 @@
</label> </label>
<label <label
for="toggleMuteNotifications" for="toggleMuteNotifications"
class="flex items-center cursor-pointer mt-4" class="flex items-center justify-between cursor-pointer mt-4"
@click=" @click="
this.$notify( this.$notify(
{ {
@@ -179,30 +179,42 @@
</a> </a>
<a ref="downloadLink" /> <a ref="downloadLink" />
<div v-if="activeDid" class="flex py-2"> <div v-if="activeDid" class="my-8">
<button class="text-center text-md text-blue-500" @click="checkLimits()"> <h3 class="text-sm uppercase font-semibold mb-3">Rate Limits</h3>
<button
class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
@click="checkLimits()"
>
Check Limits Check Limits
</button> </button>
<!-- show spinner if loading limits --> <!-- show spinner if loading limits -->
<div v-if="loadingLimits" class="ml-2"> <div v-if="loadingLimits" class="text-center mb-4">
Checking... <fa icon="spinner" class="fa-spin"></fa> Checking&hellip; <fa icon="spinner" class="fa-spin"></fa>
</div> </div>
<div class="ml-2"> <div class="mb-4">
{{ limitsMessage }} {{ limitsMessage }}
</div> </div>
<div v-if="!!limits?.nextWeekBeginDateTime" class="px-9"> <div v-if="!!limits?.nextWeekBeginDateTime">
<span class="font-bold">Rate Limits</span> <p class="mb-3 text-sm">
<p> You have done <b>{{ limits.doneClaimsThisWeek }}</b> claims out of
You have done {{ limits.doneClaimsThisWeek }} claims out of <b>{{ limits.maxClaimsPerWeek }}</b> for this week. Your claims
{{ limits.maxClaimsPerWeek }} for this week. Your claims counter counter resets at
resets at {{ readableTime(limits.nextWeekBeginDateTime) }} <b class="whitespace-nowrap">{{
readableTime(limits.nextWeekBeginDateTime)
}}</b>
</p> </p>
<p> <p class="text-sm">
You have done {{ limits.doneRegistrationsThisMonth }} registrations You have done
out of {{ limits.maxRegistrationsPerMonth }} for this month. (You can <b>{{ limits.doneRegistrationsThisMonth }}</b> registrations out of
register nobody on your first day, and after that only one a day in <b>{{ limits.maxRegistrationsPerMonth }}</b> for this month.
your first month.) Your registration counter resets at <i
{{ readableTime(limits.nextMonthBeginDateTime) }} >(You can register nobody on your first day, and after that only one
a day in your first month.)</i
>
Your registration counter resets at
<b class="whitespace-nowrap">
{{ readableTime(limits.nextMonthBeginDateTime) }}
</b>
</p> </p>
</div> </div>
</div> </div>
@@ -216,13 +228,13 @@
Advanced Advanced
</h3> </h3>
<div v-if="showAdvanced"> <div v-if="showAdvanced">
<p> <p class="text-rose-600 mb-8">
Beware: the features here can be confusing and even change data in ways Beware: the features here can be confusing and even change data in ways
you do not expect. But we support your freedoms! you do not expect. But we support your freedoms!
</p> </p>
<!-- Deep Identity Details --> <!-- Deep Identity Details -->
<h2 class="text-slate-500 text-sm font-bold mb-2 py-2"> <h2 class="text-sm uppercase font-semibold mb-3">
Deep Identity Details Deep Identity Details
</h2> </h2>
<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">
@@ -280,13 +292,11 @@
<label <label
for="toggleShowAmounts" for="toggleShowAmounts"
class="flex items-center cursor-pointer py-2" class="flex items-center justify-between cursor-pointer my-4"
@click="handleChange" @click="handleChange"
> >
<!-- label --> <!-- label -->
<h2 class="text-slate-500 text-sm font-bold mb-2"> <h2>Show amounts given with contacts</h2>
Show amounts given with contacts
</h2>
<!-- toggle --> <!-- toggle -->
<div class="relative ml-2"> <div class="relative ml-2">
<!-- input --> <!-- input -->
@@ -305,35 +315,28 @@
</div> </div>
</label> </label>
<div class="flex py-2"> <router-link
<button class="text-blue-500"> :to="{ name: 'statistics' }"
<router-link :to="{ name: 'statistics' }" class="block text-center"> class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
See Global Animated History of Giving >
</router-link> See Global Animated History of Giving
</button> </router-link>
</div>
<div class="flex py-2"> <!-- id used by puppeteer test script -->
<button class="text-blue-500"> <router-link
<!-- id used by puppeteer test script --> id="switch-identity-link"
<router-link :to="{ name: 'identity-switcher' }"
id="switch-identity-link" class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
:to="{ name: 'identity-switcher' }" >
class="block text-center" Switch Identity / No Identity
> </router-link>
Switch Identity / No Identity
</router-link>
</button>
</div>
<div class="flex py-2"> <button
<button @click="alertWebPushSubscription()"
@click="alertWebPushSubscription()" 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 text-center text-md bg-blue-500 text-white px-1.5 py-2 rounded-md mr-2 mb-2" >
> Show Subscription from Web Push Server
Show Subscription from Web Push Server </button>
</button>
</div>
<div class="flex py-4"> <div class="flex py-4">
<h2 class="text-slate-500 text-sm font-bold mb-2">Claim Server</h2> <h2 class="text-slate-500 text-sm font-bold mb-2">Claim Server</h2>

13
src/views/ContactsView.vue
View File

@@ -19,12 +19,13 @@
</div> </div>
<!-- New Contact --> <!-- New Contact -->
<div class="mb-4 flex"> <div class="mb-4 flex items-stretch">
<span class="self-center bg-slate-500 text-white px-1.5 py-1 rounded-md"> <router-link
<router-link :to="{ name: 'contact-qr' }"> :to="{ name: 'contact-qr' }"
<fa icon="qrcode" class="fa-fw" /> class="flex items-center bg-slate-500 text-white px-1.5 py-1 mr-1 rounded-md"
</router-link> >
</span> <fa icon="qrcode" class="fa-fw text-2xl" />
</router-link>
<input <input
type="text" type="text"
placeholder="DID, Name, Public Key (base 16 or 64)" placeholder="DID, Name, Public Key (base 16 or 64)"

42
src/views/HomeView.vue
View File

@@ -8,28 +8,44 @@
<!-- show the actions for recognizing a give --> <!-- show the actions for recognizing a give -->
<div class="mb-8"> <div class="mb-8">
<div v-if="!activeDid"> <div
To record others' giving, v-if="!activeDid"
<router-link :to="{ name: 'start' }" class="text-blue-500"> class="bg-amber-200 rounded-md overflow-hidden text-center px-4 py-3 mb-4"
create your identifier.</router-link >
<p class="text-lg mb-3">
You need an <b>identifier</b> before you can record anyone's giving.
</p>
<router-link
:to="{ name: 'start' }"
class="block text-center text-md font-bold uppercase bg-blue-500 text-white mt-2 px-2 py-3 rounded-md"
>
Create Your Identifier</router-link
> >
</div> </div>
<div v-else-if="!isRegistered"> <div
To record others' giving, someone must register your account, so show v-else-if="!isRegistered"
them class="bg-amber-200 rounded-md overflow-hidden text-center px-4 py-3 mb-4"
<router-link :to="{ name: 'contact-qr' }" class="text-blue-500"> >
your identity info</router-link Someone must register your account before you can record anyone's
giving. To do this:
<router-link
:to="{ name: 'contact-qr' }"
class="block text-center text-md font-bold uppercase bg-blue-500 text-white mt-2 px-2 py-3 rounded-md"
> >
and then 1. Show Them Your Identity Info</router-link
<router-link :to="{ name: 'account' }" class="text-blue-500"> >
check your limits.</router-link <router-link
:to="{ name: 'account' }"
class="block text-center text-md font-bold uppercase bg-blue-500 text-white mt-2 px-2 py-3 rounded-md"
>
2. Check Your Limits</router-link
> >
</div> </div>
<div v-else> <div v-else>
<!-- activeDid && isRegistered --> <!-- activeDid && isRegistered -->
<h2 class="text-xl font-bold">Record Something Given</h2> <h2 class="text-xl font-bold mb-4">Record Something Given</h2>
<ul class="grid grid-cols-4 gap-x-3 gap-y-5 text-center mb-5"> <ul class="grid grid-cols-4 gap-x-3 gap-y-5 text-center mb-5">
<li @click="openDialog()"> <li @click="openDialog()">