From 3553ce4ea1c7271891283907032a6d679f6519ee Mon Sep 17 00:00:00 2001 From: Jonathan Bernard Date: Wed, 27 Oct 2021 14:02:38 -0500 Subject: [PATCH] web: Expose debug info, fix view on mobile. --- api/hff_entry_forms_api.nimble | 2 +- api/src/hff_entry_forms_apipkg/version.nim | 2 +- web/package-lock.json | 28 ++++++++++++++- web/package.json | 3 +- web/src/App.scss | 40 +++++++++++++++++++++- web/src/App.ts | 6 ++++ web/src/App.vue | 2 ++ web/src/components/DebugInfo.scss | 23 +++++++++++++ web/src/components/DebugInfo.ts | 16 +++++++++ web/src/components/DebugInfo.vue | 22 ++++++++++++ web/src/components/svg/EyeClosedIcon.vue | 16 +++++++++ web/src/components/svg/EyeOpenIcon.vue | 16 +++++++++ web/src/version-info.ts | 17 +++++++++ web/src/views/ProposeEvent.scss | 27 +++++++++++---- web/vue.config.js | 7 ++++ 15 files changed, 215 insertions(+), 12 deletions(-) create mode 100644 web/src/App.ts create mode 100644 web/src/components/DebugInfo.scss create mode 100644 web/src/components/DebugInfo.ts create mode 100644 web/src/components/DebugInfo.vue create mode 100755 web/src/components/svg/EyeClosedIcon.vue create mode 100755 web/src/components/svg/EyeOpenIcon.vue create mode 100644 web/src/version-info.ts create mode 100644 web/vue.config.js diff --git a/api/hff_entry_forms_api.nimble b/api/hff_entry_forms_api.nimble index 2386c12..5fbe0e0 100644 --- a/api/hff_entry_forms_api.nimble +++ b/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" diff --git a/api/src/hff_entry_forms_apipkg/version.nim b/api/src/hff_entry_forms_apipkg/version.nim index 61491c4..d431c47 100755 --- a/api/src/hff_entry_forms_apipkg/version.nim +++ b/api/src/hff_entry_forms_apipkg/version.nim @@ -1 +1 @@ -const HFF_ENTRY_FORMS_API_VERSION* = "0.2.2" \ No newline at end of file +const HFF_ENTRY_FORMS_API_VERSION* = "0.2.3" \ No newline at end of file diff --git a/web/package-lock.json b/web/package-lock.json index f26ad0e..8b83616 100644 --- a/web/package-lock.json +++ b/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", diff --git a/web/package.json b/web/package.json index b572b26..eb23efe 100644 --- a/web/package.json +++ b/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", diff --git a/web/src/App.scss b/web/src/App.scss index 0fc4a10..a77186a 100644 --- a/web/src/App.scss +++ b/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; } } diff --git a/web/src/App.ts b/web/src/App.ts new file mode 100644 index 0000000..a4e980d --- /dev/null +++ b/web/src/App.ts @@ -0,0 +1,6 @@ +import { defineComponent } from 'vue'; +import DebugInfo from '@/components/DebugInfo.vue'; + +export default defineComponent({ + components: { DebugInfo }, +}); diff --git a/web/src/App.vue b/web/src/App.vue index d4a31f3..1161d9a 100644 --- a/web/src/App.vue +++ b/web/src/App.vue @@ -1,4 +1,6 @@ + diff --git a/web/src/components/DebugInfo.scss b/web/src/components/DebugInfo.scss new file mode 100644 index 0000000..32d21c4 --- /dev/null +++ b/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; + } +} diff --git a/web/src/components/DebugInfo.ts b/web/src/components/DebugInfo.ts new file mode 100644 index 0000000..f5cbdff --- /dev/null +++ b/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 }; + }, +}); diff --git a/web/src/components/DebugInfo.vue b/web/src/components/DebugInfo.vue new file mode 100644 index 0000000..68f9984 --- /dev/null +++ b/web/src/components/DebugInfo.vue @@ -0,0 +1,22 @@ + + + diff --git a/web/src/components/svg/EyeClosedIcon.vue b/web/src/components/svg/EyeClosedIcon.vue new file mode 100755 index 0000000..79c4b8b --- /dev/null +++ b/web/src/components/svg/EyeClosedIcon.vue @@ -0,0 +1,16 @@ + diff --git a/web/src/components/svg/EyeOpenIcon.vue b/web/src/components/svg/EyeOpenIcon.vue new file mode 100755 index 0000000..a8b78d1 --- /dev/null +++ b/web/src/components/svg/EyeOpenIcon.vue @@ -0,0 +1,16 @@ + diff --git a/web/src/version-info.ts b/web/src/version-info.ts new file mode 100644 index 0000000..d8e303a --- /dev/null +++ b/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; diff --git a/web/src/views/ProposeEvent.scss b/web/src/views/ProposeEvent.scss index e4c6eab..235caef 100644 --- a/web/src/views/ProposeEvent.scss +++ b/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; } diff --git a/web/vue.config.js b/web/vue.config.js new file mode 100644 index 0000000..00031ad --- /dev/null +++ b/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('.') +);