web: Expose debug info, fix view on mobile.

api/hff_entry_forms_api.nimble

@@ -1,6 +1,6 @@
 # Package
 
-version       = "0.2.2"
+version       = "0.2.3"
 author        = "Jonathan Bernard"
 description   = "Hope Family Fellowship entry forms."
 license       = "GPL-3.0-or-later"

api/src/hff_entry_forms_apipkg/version.nim

@@ -1 +1 @@
-const HFF_ENTRY_FORMS_API_VERSION* = "0.2.2"
+const HFF_ENTRY_FORMS_API_VERSION* = "0.2.3"

web/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "hff-entry-form-web",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -365,6 +365,12 @@
       "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==",
       "dev": true
     },
+    "@types/semver": {
+      "version": "7.3.9",
+      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.3.9.tgz",
+      "integrity": "sha512-L/TMpyURfBkf+o/526Zb6kd/tchUP3iBDEPjqjb+U2MAJhVRxxrmr2fwpe08E7QsV7YLcpq0tUaQ9O9x97ZIxQ==",
+      "dev": true
+    },
     "@types/serve-static": {
       "version": "1.13.10",
       "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.13.10.tgz",
@@ -5129,6 +5135,26 @@
         "assert-plus": "^1.0.0"
       }
     },
+    "git-describe": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/git-describe/-/git-describe-4.1.0.tgz",
+      "integrity": "sha512-NM7JSseVK4Z0r505+2TIrgPQKPvqbOowHP73IY5y69v/t/PmoMleJdij1vTO3qVm1qSvqb6342p1MYSxsnV8QA==",
+      "dev": true,
+      "requires": {
+        "@types/semver": "^7.3.8",
+        "lodash": "^4.17.21",
+        "semver": "^5.6.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "dev": true,
+          "optional": true
+        }
+      }
+    },
     "glob": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",

web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hff-entry-form-web",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "private": true,
   "scripts": {
     "serve": "npx servor dist",
@@ -30,6 +30,7 @@
     "eslint": "^6.7.2",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-vue": "^7.0.0",
+    "git-describe": "^4.1.0",
     "prettier": "^2.2.1",
     "sass": "^1.26.5",
     "sass-loader": "^8.0.2",

web/src/App.scss

@@ -2,9 +2,14 @@
 
 html { font-size: 16px; }
 
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
 #app {
   font-family: "Segoe UI", Helvetica, Arial, sans-serif;
-  box-sizing: border-box;
 
   button, input, select, textarea {
     font-size: inherit;
@@ -14,6 +19,7 @@ html { font-size: 16px; }
 
   button {
     color: #1084AC;
+    cursor: pointer;
     background-color: #1084AC0A;
     border: solid thin #1084AC;
     border-radius: 0.25em;
@@ -37,6 +43,26 @@ html { font-size: 16px; }
     }
 
     &:disabled { opacity: 0.75; }
+
+  }
+
+  button.low-profile {
+    color: black;
+    background-color: unset;
+    border: none;
+    box-shadow: none;
+    font-weight: normal;
+    transition-property: color, font-weight;
+    transition-duration: 250ms;
+
+    &:not(:disabled) {
+      &:hover, &:focus {
+        color: #1084AC;
+        font-weight: bold;
+        background-color: unset;
+        box-shadow: none;
+      }
+    }
   }
 }
 
@@ -66,8 +92,20 @@ html { font-size: 16px; }
 
 @include forSize(mobile) {
   body { margin: 0; }
+
+  #app #debug-information .mobile { display: inline-block; }
+}
+
+@include forSize(tablet) {
+  #app #debug-information .tablet { display: inline-block; }
+}
+
+@include forSize(desktop) {
+  #app #debug-information .desktop { display: inline-block; }
 }
 
 @include forSize(ultrawide) {
   html { font-size: 24px; }
+
+  #app #debug-information .ultrawide { display: inline-block; }
 }

web/src/App.ts

@@ -0,0 +1,6 @@
+import { defineComponent } from 'vue';
+import DebugInfo from '@/components/DebugInfo.vue';
+
+export default defineComponent({
+  components: { DebugInfo },
+});

web/src/App.vue

@@ -1,4 +1,6 @@
 <template>
   <router-view />
+  <DebugInfo />
 </template>
+<script lang="ts" src="./App.ts"></script>
 <style lang="scss" src="./App.scss"></style>

web/src/components/DebugInfo.scss

@@ -0,0 +1,23 @@
+#debug-information {
+  position: fixed;
+  left: 1em;
+  bottom: 1em;
+  opacity: 0.5;
+  font-size: 80%;
+
+  .toggle-content { display: none; }
+  .toggle-content.visible { display: block; }
+
+  .mobile, .tablet, .desktop, .ultrawide { display: none; }
+
+  ul, li {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  label {
+    display: inline-block;
+    width: 8em;
+  }
+}

web/src/components/DebugInfo.ts

@@ -0,0 +1,16 @@
+import { defineComponent, ref } from 'vue';
+
+import EyeClosedIcon from '@/components/svg/EyeClosedIcon.vue';
+import EyeOpenIcon from '@/components/svg/EyeOpenIcon.vue';
+import VERSION from '@/version-info';
+
+export default defineComponent({
+  name: 'DebugInfo',
+  components: { EyeOpenIcon, EyeClosedIcon },
+  setup: function DebugInfo() {
+    const showDebugInfo = ref(false);
+    const version = ref(VERSION);
+
+    return { showDebugInfo, version };
+  },
+});

web/src/components/DebugInfo.vue

@@ -0,0 +1,22 @@
+<template>
+  <div id="debug-information">
+    <div class="toggle-content" :class="{ visible: showDebugInfo }">
+      <ul>
+        <li class="version"><label>version:</label>{{ version.version }}</li>
+        <li class="hash"><label>build hash:</label>{{ version.hash }}</li>
+        <li class="raw"><label>build hash (raw):</label>{{ version.raw }}</li>
+      </ul>
+      <label>device size: </label>
+      <label class="mobile">mobile</label>
+      <label class="tablet">tablet</label>
+      <label class="desktop">desktop</label>
+      <label class="ultrawide">ultrawide</label>
+    </div>
+    <button class="low-profile" @click="showDebugInfo = !showDebugInfo">
+      <EyeOpenIcon v-if="showDebugInfo" />
+      <EyeClosedIcon v-if="!showDebugInfo" />
+    </button>
+  </div>
+</template>
+<script lang="ts" src="./DebugInfo.ts"></script>
+<style scoped lang="scss" src="./DebugInfo.scss"></style>

web/src/components/svg/EyeClosedIcon.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 15 15"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M14.7649 6.07595C14.9991 6.22231 15.0703 6.53078 14.9239 6.76495C14.4849 7.46742 13.9632 8.10644 13.3702 8.66304L14.5712 9.86405C14.7664 10.0593 14.7664 10.3759 14.5712 10.5712C14.3759 10.7664 14.0593 10.7664 13.8641 10.5712L12.6011 9.30816C11.8049 9.90282 10.9089 10.3621 9.93374 10.651L10.383 12.3276C10.4544 12.5944 10.2961 12.8685 10.0294 12.94C9.76266 13.0115 9.4885 12.8532 9.41703 12.5864L8.95916 10.8775C8.48742 10.958 8.00035 10.9999 7.5 10.9999C6.99964 10.9999 6.51257 10.958 6.04082 10.8775L5.58299 12.5864C5.51153 12.8532 5.23737 13.0115 4.97063 12.94C4.7039 12.8685 4.5456 12.5944 4.61706 12.3277L5.06624 10.651C4.09111 10.3621 3.19503 9.90281 2.3989 9.30814L1.1359 10.5711C0.940638 10.7664 0.624058 10.7664 0.428797 10.5711C0.233537 10.3759 0.233537 10.0593 0.428797 9.86404L1.62982 8.66302C1.03682 8.10643 0.515113 7.46742 0.0760677 6.76495C-0.0702867 6.53078 0.000898544 6.22231 0.235064 6.07595C0.46923 5.9296 0.777703 6.00078 0.924057 6.23495C1.40354 7.00212 1.989 7.68056 2.66233 8.2427C2.67315 8.25096 2.6837 8.25971 2.69397 8.26897C4.00897 9.35527 5.65536 9.9999 7.5 9.9999C10.3078 9.9999 12.6563 8.50629 14.0759 6.23495C14.2223 6.00078 14.5308 5.9296 14.7649 6.07595Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

web/src/components/svg/EyeOpenIcon.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 15 15"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M7.5 11C4.80285 11 2.52952 9.62184 1.09622 7.50001C2.52952 5.37816 4.80285 4 7.5 4C10.1971 4 12.4705 5.37816 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11ZM7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C1.65639 10.2936 4.30786 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C13.3436 4.70638 10.6921 3 7.5 3ZM7.5 9.5C8.60457 9.5 9.5 8.60457 9.5 7.5C9.5 6.39543 8.60457 5.5 7.5 5.5C6.39543 5.5 5.5 6.39543 5.5 7.5C5.5 8.60457 6.39543 9.5 7.5 9.5Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

web/src/version-info.ts

@@ -0,0 +1,17 @@
+export interface VersionInfo {
+  version: string;
+  hash: string;
+  raw: string;
+}
+
+const gitVersion: { hash: string; raw: string } = process.env
+  .VUE_APP_HFF_ENTRY_FORMS_GIT_HASH
+  ? JSON.parse(process.env.VUE_APP_HFF_ENTRY_FORMS_GIT_HASH)
+  : { hash: 'missing', raw: 'missing' };
+
+export const VERSION: VersionInfo = {
+  ...gitVersion,
+  version: process.env.VUE_APP_HFF_ENTRY_FORMS_VERSION || 'unavailable',
+};
+
+export default VERSION;

web/src/views/ProposeEvent.scss

@@ -1,20 +1,22 @@
 @import "~@/styles/forSize.mixin";
 
 #event-proposal {
-  margin: 2em auto;
-
   header {
     background-color: #FFFCFC;
     border-bottom: thin solid #aaa;
-    margin: 0;
     padding: 0.5em;
 
     h1, h2 {
+      margin: 0;
       margin-top: 0.5em;
-      margin-bottom: 0;
       padding: 0;
     }
 
+    h2 {
+      font-weight: normal;
+      margin-bottom: -0.30em;
+    }
+
   }
 
   &.success header { background-color: #38b00010; }
@@ -40,7 +42,6 @@
     margin: 0.5em;
     display: flex;
 
-    span { width: 9em; }
     input, textarea, select { flex-grow: 1; }
   }
 
@@ -85,12 +86,21 @@
 @include forSize(mobile) {
   #header-splash {
     width: 100%;
-    margin: 0;
   }
 
   #event-proposal {
-    margin: 1em;
+    padding: 0 1em;
     width: 100%;
+
+    label {
+      flex-wrap: wrap;
+
+      span { width: 100%; }
+      input, select, textarea {
+        margin: 0.125em 1em;
+        width: 100%;
+      }
+    }
   }
 }
 
@@ -106,7 +116,10 @@
     border: solid thin #bbb;
     border-radius: 0.25em;
     box-shadow: 0.25em 0.25em 0.75em #aaa;
+    margin: 2em auto;
     width: 30em;
+
+    label span { width: 9em; }
   }
 
   .successes, .errors { width: 26em; }

web/vue.config.js

@@ -0,0 +1,7 @@
+const fs = require('fs');
+
+process.env.VUE_APP_HFF_ENTRY_FORMS_VERSION = require('./package.json').version;
+
+process.env.VUE_APP_HFF_ENTRY_FORMS_GIT_HASH = JSON.stringify(
+  require('git-describe').gitDescribeSync('.')
+);