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

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

Reviewed-on: https://gitea.anomalistdesign.com/trent_larson/crowd-funder-for-time-pwa/pulls/96
home-infinite
trentlarson 11 months ago
parent
8fb21c3d89 1d262b8da9
commit
f2e5d8168d
3 changed files with 93 additions and 73 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. 81
      src/views/AccountViewView.vue
  2. 11
      src/views/ContactsView.vue
  3. 42
      src/views/HomeView.vue

81
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
>(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) }} {{ 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 See Global Animated History of Giving
</router-link> </router-link>
</button>
</div>
<div class="flex py-2">
<button class="text-blue-500">
<!-- id used by puppeteer test script --> <!-- id used by puppeteer test script -->
<router-link <router-link
id="switch-identity-link" id="switch-identity-link"
:to="{ name: 'identity-switcher' }" :to="{ name: 'identity-switcher' }"
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"
> >
Switch Identity / No Identity Switch Identity / No Identity
</router-link> </router-link>
</button>
</div>
<div class="flex py-2">
<button <button
@click="alertWebPushSubscription()" @click="alertWebPushSubscription()"
class="block text-center text-md bg-blue-500 text-white px-1.5 py-2 rounded-md mr-2 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"
> >
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>

11
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"
>
<fa icon="qrcode" class="fa-fw text-2xl" />
</router-link> </router-link>
</span>
<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"
>
1. Show Them Your Identity Info</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"
> >
and then 2. Check Your Limits</router-link
<router-link :to="{ name: 'account' }" class="text-blue-500">
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()">

Write Preview
Loading…
Cancel
Save