Fixed placement of upload/retry buttons

Reviewed-on: trent_larson/crowd-funder-for-time-pwa#105

.env.development

@@ -1,6 +1,7 @@
-# Only the variables that start with VUE_APP_ are seen in the application process.env in Vue.
 
-# this won't resolve as a URL on production; it's a URN only found in the test system
-VUE_APP_BVC_MEETUPS_PROJECT_CLAIM_ID=https://endorser.ch/entity/01HNTZYJJXTGT0EZS3VEJGX7AK
-VUE_APP_DEFAULT_ENDORSER_API_SERVER=http://localhost:3000
-VUE_APP_DEFAULT_IMAGE_API_SERVER=http://localhost:3002
+# I tried setting values here and using `vue-cli-service build --mode development`
+# but it didn't create some things in "dist":
+# - the "css" directory with the CSS extracted from Vue files
+# - the sw_scripts-combined* files
+#
+# ¯\_(ツ)_/¯

CHANGELOG.md

@@ -6,13 +6,19 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Changed in DB or environment
+- Nothing
+
+
+## [0.3.2] - 2024.03.17
 ### Added
-- Photo on gift records
+- Photo on gift record
 ### Fixed
 - Environment variable for BVC meetings project
 ### Changed in DB or environment
-- Test that a new browser session will get the right default API
-- Test that a new browser session will send the right BVC meetings project
+- New environment variable for image API server
+- Test that a new browser session will get the right default API.
+- Test that a new browser session will send the right BVC meetings project.
 
 
 ## [0.2.17] - 2024.03.01 - 3612ea42240c5e1b7d7eff29a39ff18f1b869b36

README.md

@@ -34,11 +34,24 @@ npm run lint
 
 * Update the project.task.yaml & CHANGELOG.md & the version in package.json, run `npm install`.
 
-* If production: change package.json to remove "_Test". Also record what version is on production.
+* Record what version is currently on production.
 
-* `npm run build-dev` for test servers or `npm run build` for production.
+* Run the correct build
 
-* Get on the server and back up the time-safari folder.
+  * Test
+```
+# (See .env.development for more details.)
+# The test BVC_MEETUPS_PROJECT_CLAIM_ID does not resolve as a URL because it's only in the test DB and the prod redirect won't redirect there.
+APP_TITLE="TimeSafari_Test" VUE_APP_BVC_MEETUPS_PROJECT_CLAIM_ID=https://endorser.ch/entity/01HNTZYJJXTGT0EZS3VEJGX7AK VUE_APP_DEFAULT_ENDORSER_API_SERVER=https://test-api.endorser.ch VUE_APP_DEFAULT_IMAGE_API_SERVER=https://test-image-api.timesafari.app npm run build
+```
+
+  * Production
+```
+# This picks up values from .env.production
+npm run build
+```
+
+* Get on the server and back up the DB and the time-safari folder.
 
 * `rsync -azvu -e "ssh -i ~/.ssh/..." dist ubuntutest@test.timesafari.app:time-safari`
 

package-lock.json

@@ -1,12 +1,12 @@
 {
-  "name": "TimeSafari_Test",
-  "version": "0.2.18-beta",
+  "name": "TimeSafari",
+  "version": "0.3.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "TimeSafari_Test",
-      "version": "0.2.18-beta",
+      "name": "TimeSafari",
+      "version": "0.3.2",
       "dependencies": {
         "@dicebear/collection": "^5.3.5",
         "@dicebear/core": "^5.3.5",

package.json

@@ -1,11 +1,10 @@
 {
-  "name": "TimeSafari_Test",
-  "version": "0.2.18-beta",
+  "name": "TimeSafari",
+  "version": "0.3.2",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "build-dev": "vue-cli-service build --mode development",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {

project.task.yaml

@@ -1,6 +1,7 @@
 
 tasks :
 
+- bug maybe - a new give remembers the previous project
 - alert & stop if give amount < 0
 - onboarding video
 
@@ -14,10 +15,7 @@ tasks :
 - .2 anchor hash into BTC
 - .2 list the "show more" contacts alphabetically
 
-- 32 image on give :
-  - upload a photo from elsewhere
-  - go-live - create cert for new image domain, set up haproxy redirect, test-image-api.timesafari.app
-  - make Time Safari a share_target for images
+- .5 make Time Safari a share_target for images
 
 - 08 add image on profile
 

src/components/GiftedPhotoDialog.vue

@@ -1,38 +1,43 @@
 <template>
-  <div v-if="visible" class="dialog-overlay">
+  <div v-if="visible" class="dialog-overlay z-[60]">
     <!-- Breadcrumb -->
-    <div class="dialog">
+    <div class="dialog relative">
       <!-- Back -->
-      <div class="text-lg text-center font-light relative px-7">
+      <div class="text-lg text-center font-light relative z-50">
+        <!-- Heading -->
         <h1
-          class="text-lg text-center px-2 py-1 absolute -right-2 -top-1"
+          id="ViewHeading"
+          class="text-center font-bold absolute top-0 left-0 right-0 px-4 py-2 bg-black/50 text-white leading-none"
+        >
+          <span v-if="uploading"> Uploading... </span>
+          <span v-else-if="blob"> Look Good? </span>
+          <span v-else> Say "Cheese"! </span>
+        </h1>
+
+        <div
+          class="text-lg text-center p-2 leading-none absolute right-0 top-0 text-white"
           @click="close()"
         >
-          <fa icon="xmark" class="fa-fw"></fa>
-        </h1>
+          <fa icon="xmark" class="w-[1em]"></fa>
+        </div>
       </div>
 
-      <!-- Heading -->
-      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4">
-        <span v-if="uploading"> Uploading... </span>
-        <span v-else-if="blob"> Look Good? </span>
-        <span v-else> Say "Cheese"! </span>
-      </h1>
-
       <div v-if="uploading" class="flex justify-center">
         <fa icon="spinner" class="fa-spin fa-3x text-center block" />
       </div>
       <div v-else-if="blob">
-        <div class="flex justify-around">
+        <div
+          class="flex justify-center gap-2 absolute bottom-[1rem] left-[1rem] right-[1rem] bg-black/50 px-4 py-2"
+        >
           <button
             @click="uploadImage"
-            class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2 rounded-full"
+            class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full"
           >
             <span>Upload</span>
           </button>
           <button
             @click="retryImage"
-            class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-2 px-2 rounded-full"
+            class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-2 px-4 rounded-full"
           >
             <span>Retry</span>
           </button>
@@ -45,13 +50,15 @@
           :resolution="{ width: 375, height: 812 }"
         -->
         <camera facingMode="environment" autoplay ref="camera">
-          <div class="absolute bottom-0 w-full flex justify-center pb-4">
+          <div
+            class="absolute portrait:bottom-0 portrait:left-0 portrait:right-0 landscape:right-0 landscape:top-0 landscape:bottom-0 flex landscape:flex-row justify-center items-center portrait:pb-2 landscape:pr-4"
+          >
             <!-- Button -->
             <button
               @click="takeImage"
-              class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2 rounded-full"
+              class="bg-blue-500 hover:bg-blue-700 text-white font-bold p-3 rounded-full text-2xl leading-none"
             >
-              <fa icon="camera" class="fa-fw"></fa>
+              <fa icon="camera" class="w-[1em]"></fa>
             </button>
           </div>
         </camera>

src/views/HelpView.vue

@@ -11,7 +11,7 @@
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
           @click="$router.back()"
         >
-          <fa icon="chevron-left" class="fa-fw"></fa>
+          <fa icon="chevron-left" class="fa-fw" />
         </h1>
       </div>
 
@@ -217,6 +217,28 @@
       </ul>
       <p>To erase your data from our servers, contact us (below).</p>
 
+      <h2 class="text-xl font-semibold">
+        How do I get higher limits?
+      </h2>
+      <p>
+        Let's talk. Contact us (below).
+      </p>
+
+      <h2 class="text-xl font-semibold">
+        How do I access even more functionality?
+      </h2>
+      <p>
+        There is an "Advanced" section at the bottom of the Account
+        <fa icon="circle-user" /> page.
+      </p>
+      <p>
+        There is a even more functionality in a mobile app (and more
+        documentation) at
+        <a href="https://endorser.ch" class="text-blue-500">
+          EndorserSearch.com
+        </a>
+      </p>
+
       <h2 class="text-xl font-semibold">
         I know there is a record from someone, so why can't I see that info?
       </h2>
@@ -240,35 +262,64 @@
       </h2>
       <p>
         <router-link class="text-blue-500" to="/help-notifications"
-          >Here.</router-link
+        >Here.</router-link
         >
       </p>
 
       <h2 class="text-xl font-semibold">
-        How do I get higher limits?
+        My app is misbehaving, like showing me a blank screen or failing to show a feed.
+        What can I do?
       </h2>
       <p>
-        Let's talk. Contact us (below).
+        First, note that clearing the cache will clear all your identity and contact info,
+        so we recommend doing other things first (unless you know you have your backups ready).
       </p>
-
-      <h2 class="text-xl font-semibold">
-        How do I access even more functionality?
-      </h2>
+      <ul class="list-disc list-outside ml-4">
+        <li>
+          Drag down on the screen to refresh it; do that multiple times, because
+          it sometimes takes multiple tries for the app to refresh to the current version.
+          You can see the version information at the bottom of this page; the best
+          way to determine the current version is to open this page in an incognito
+          browser window and look at the version there.
+        </li>
+        <li>
+          Close all tabs that have Time Safari open; it can be difficult to find them all,
+          and you may have to close all your tabs. In addition, it may be running as an
+          installed app, so look for any Time Safari app that may be running outside a browser.
+        </li>
+        <li>
+          It can help to reregister the service worker:
+          <ul>
+            <li>
+              In Chrome, open a tab to
+              "chrome://serviceworker-internals",
+              find "timesafari.app", and click "Unregister".</li>
+            <li>
+              In Firefox,
+              open a tab to "about:serviceworkers",
+              find "timesafari.app", and click "Unregister".
+            </li>
+            <li>
+              <a href="https://duckduckgo.com/?q=unregister+service+worker" class="text-blue-500">Search</a>
+              for instructions for other browsers.</li>
+          </ul>
+          Then reload Time Safari.
+        </li>
+        <li>
+          Restart your device.
+        </li>
+      </ul>
       <p>
-        There is an "Advanced" section at the bottom of the Account
-        <fa icon="circle-user" /> page.
-      </p>
-      <p>
-        There is a even more functionality in a mobile app (and more
-        documentation) at
-        <a href="https://endorser.ch" class="text-blue-500">
-          EndorserSearch.com
-        </a>
+        If you still have problems, you can clear the cache and even uninstall
+        and reinstall the app, but be sure to have your backups ready or be
+        prepared to restart with a new identity and recreate your network.
+        Nobody else has access to your identity or contact information because
+        this app is designed to give you full control over your data.
       </p>
 
       <h2 class="text-xl font-semibold">What are the terms & conditions and the privacy policy?</h2>
       <p style="display:inline; align-items: center">
-        This work is marked with
+        This work is public domain, governed by
         <a href="http://creativecommons.org/publicdomain/zero/1.0?ref=chooser-v1" target="_blank" rel="license noopener noreferrer">
           <span class="text-blue-500 mr-1">CC0 1.0</span>
           <img

vue.config.js

@@ -3,6 +3,8 @@ const { gitDescribeSync } = require("git-describe");
 const { exec } = require("child_process");
 
 process.env.VUE_APP_GIT_HASH = gitDescribeSync().hash;
+const TIME_SAFARI_APP_TITLE =
+  process.env.TIME_SAFARI_APP_TITLE || require("./package.json").name;
 
 module.exports = defineConfig({
   transpileDependencies: true,
@@ -30,6 +32,7 @@ module.exports = defineConfig({
     ],
   },
   pwa: {
+    name: TIME_SAFARI_APP_TITLE,
     iconPaths: {
       faviconSVG: "img/icons/safari-pinned-tab.svg",
     },