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

Reviewed-on: trent_larson/kick-starter-for-time-pwa#44

project.task.yaml

@@ -1,11 +1,9 @@
 
 tasks:
 - 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
 - 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.
 
 - 08 Scan QR code to import into contacts.
@@ -42,7 +40,7 @@ tasks:
 - Discuss whether the remaining tasks are worthwhile before MVP release.
 
 - 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 :
   - 01 show numeric stats

src/views/AccountViewView.vue

@@ -143,25 +143,23 @@
 
     <!-- QR code popup -->
     <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>
 
     <h3
@@ -260,20 +258,6 @@
         </button>
       </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>
         <button class="text-blue-500">
           <router-link

src/views/ConfirmContactView.vue

@@ -15,35 +15,33 @@
       </h1>
     </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 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>
 </template>
 

src/views/ContactScanView.vue

@@ -14,75 +14,69 @@
       </h1>
     </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"
+      placeholder="Name (optional)"
+      class="block w-full rounded border border-slate-400 mb-2 px-3 py-2"
+    />
+    <input
+      type="text"
+      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
-        type="text"
+        type="submit"
-        placeholder="Name (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-2 px-3 py-2"
+        value="Look Up Contact"
       />
-      <input
+      <button
-        type="text"
+        type="button"
-        placeholder="ID"
+        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 rounded border border-slate-400 mb-2 px-3 py-2"
+      >
-      />
+        Cancel
-      <input
+      </button>
-        type="text"
+    </div>
-        placeholder="Public Key (optional)"
-        class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
-      />
-
-      <div class="mt-8">
-        <input
-          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"
-          value="Look Up Contact"
-        />
-        <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>
 </template>
 

src/views/NewEditAccountView.vue

@@ -13,38 +13,37 @@
         [New/Edit] Identity
       </h1>
     </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>
 </template>
 

src/views/NewEditCommitmentView.vue

@@ -16,47 +16,44 @@
     </div>
 
     <!-- Project Details -->
-    <form>
+
-      <select
+    <select class="block w-full rounded border border-slate-400 mb-4 px-3 py-2">
-        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 -->
+    <div class="mb-4 flex items-stretch">
+      <input
+        type="number"
+        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
       >
-        <option disabled>Choose a commitment type…</option>
+    </div>
-        <option selected>Time</option>
-        <option>Cryptocurrency</option>
-        <option>Money</option>
-      </select>
 
-      <!-- Time amount -->
+    <!-- Crypto amount -->
-      <div class="mb-4 flex items-stretch">
-        <input
-          type="number"
-          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 -->
+    <!-- Money amount -->
 
-      <!-- Money amount -->
+    <div class="mt-8">
-
+      <input
-      <div class="mt-8">
+        type="submit"
-        <input
+        class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2"
-          type="submit"
+        value="Commit"
-          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"
+      <button
-        />
+        type="button"
-        <button
+        class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
-          type="button"
+      >
-          class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
+        Maybe Later
-        >
+      </button>
-          Maybe Later
+    </div>
-        </button>
-      </div>
-    </form>
   </section>
 </template>
 

src/views/ProjectsView.vue

@@ -7,18 +7,17 @@
     </h1>
 
     <!-- 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 -->
     <button