Merge pull request #142 from CityOfPhiladelphia/fix/311-reports-page-layout

Fix/311 reports page layout

Author: jackmanleydev

apps/philly-311/frontend/src/components/wizard/StepIndicator.vue

@@ -86,7 +86,7 @@ function handleMouseLeave(ev: MouseEvent) {
   padding: 0;
   margin: 0;
   max-width: 32rem;
-  grid-template-columns: 14fr 15fr 15fr 15fr 5fr;
+  grid-template-columns: auto auto auto auto auto;
 }
 
 .step-indicator li {

apps/philly-311/frontend/src/pages/ReportPage.vue

@@ -11,6 +11,7 @@ import { useRouter, useRoute } from 'vue-router'
 import StepIndicator from '@/components/wizard/StepIndicator.vue'
 import ExitDialog from '@/components/wizard/ExitDialog.vue'
 import { PhilaButton } from '@phila/phila-ui-button'
+import { Breadcrumbs } from '@phila/phila-ui-breadcrumbs'
 import { useReportSubmissionStore } from '@/stores/reportSubmission'
 import { useMyCasesStore } from '@/stores/myCases'
 import { WIZARD_CAN_ADVANCE_KEY, WIZARD_SHOW_ERRORS_KEY } from '@/composables/useWizardValidity'
@@ -20,21 +21,7 @@ const router = useRouter()
 const route = useRoute()
 const store = useReportSubmissionStore()
 const myCases = useMyCasesStore()
-
 const exitOpen = ref(false)
-watch(
-  exitOpen,
-  (isOpen, wasOpen) => {
-    if (isOpen) {
-      router.push(`?${store.stateToUrlQueryParams()}`)
-    } else if (!isOpen && wasOpen) {
-      router.back()
-    } else {
-      router.replace({ query: {} })
-    }
-  },
-  { immediate: true },
-)
 
 const STEPS = [
   { title: 'Image', path: '/report' },
@@ -105,46 +92,50 @@ function discardAndExit() {
 
 <template>
   <div ref="wizardEl" class="wizard">
-    <nav class="wizard__crumb" aria-label="Breadcrumb">
-      <RouterLink to="/">Home</RouterLink> / <span>Report an issue</span>
-    </nav>
+    <div class="wizard__header">
+      <Breadcrumbs :items="[{ label: 'Report an issue' }]" class="wizard__bradcrumbs" />
 
-    <StepIndicator
-      :steps="STEPS"
-      :current-step="currentStep"
-      :completed-through="completedThrough"
-      @navigate="(path: string) => router.push(path)"
-    />
+      <StepIndicator
+        :steps="STEPS"
+        :current-step="currentStep"
+        :completed-through="completedThrough"
+        class="wizard__steps"
+        @navigate="(path: string) => router.push(path)"
+      />
+    </div>
 
     <section class="wizard__content">
       <RouterView />
     </section>
 
     <footer class="wizard__nav">
-      <button type="button" class="wizard__exit" data-test="wizard-exit" @click="exitOpen = true">
+      <PhilaButton
+        size="extra-small"
+        class="wizard__exit"
+        data-test="wizard-exit"
+        @click="exitOpen = true"
+      >
         Exit
-      </button>
+      </PhilaButton>
 
       <div class="wizard__nav-right">
-        <PhilaButton v-if="isImageStep" variant="secondary" data-test="wizard-skip" @click="goNext"
-          >Skip</PhilaButton
-        >
         <PhilaButton
-          v-else
+          v-if="!isImageStep"
           variant="secondary"
           data-test="wizard-back"
           :disabled="!prevPath"
           @click="goPrev"
-          >Back</PhilaButton
         >
+          Back
+        </PhilaButton>
         <PhilaButton
           v-if="!isLast"
           variant="primary"
           data-test="wizard-next"
           :disabled="!nextPath"
           @click="goNext"
-          >Next</PhilaButton
-        >
+          >{{ isImageStep ? 'Skip' : 'Next' }}
+        </PhilaButton>
       </div>
     </footer>
 
@@ -154,44 +145,73 @@ function discardAndExit() {
 
 <style scoped>
 .wizard {
-  max-width: 980px;
-  margin: 0 auto;
-  /* No bottom padding: the sticky nav pins to the scrollport's bottom edge and
-     content would otherwise show through a padding-sized gap beneath it. */
-  padding: var(--spacing-m, 1rem) var(--spacing-m, 1rem) 0;
+  display: grid;
+  grid-template-areas:
+    'w_header'
+    'w_content'
+    'w_footer';
+  grid-template-rows: 9rem auto 7rem;
   height: 100%;
-  overflow-y: auto;
+  width: 100%;
+  margin: 0 auto;
 }
-.wizard__crumb {
-  font-size: 0.875rem;
-  margin-bottom: var(--spacing-s, 0.75rem);
+
+.wizard__header {
+  grid-area: w_header;
+  grid-template-areas:
+    'w_breadcrumbs'
+    'w_stepindicator';
+  grid-template-rows: 3fr 5fr;
+  width: 100%;
+  padding: var(--spacing-l, 1.5rem) var(--spacing-xl, 2rem);
 }
+
+.wizard__bradcrumbs {
+  grid-area: w_breadcrumbs;
+  padding: var(--spacing-xs, 0.5rem);
+}
+
+.wizard__bradcrumbs :deep(li) {
+  margin-bottom: 0;
+  padding-left: 0;
+}
+
+.wizard__steps {
+  grid-area: w_stepindicator;
+  display: grid;
+  place-content: center;
+}
+
 .wizard__content {
+  grid-area: w_content;
   padding: var(--spacing-l, 2rem) 0;
-  min-height: 320px;
+  margin: 0 var(--scale-1000, 5rem);
+  overflow-y: auto;
+  overflow-x: auto;
 }
+
 /* Sticky so Exit/Back/Next stay reachable: the wizard scrolls internally
    (the shell locks the viewport) and steps like Location put a wheel-capturing
    map over most of the content, so controls at the end of the scroll run
    can otherwise sit below the fold with no way to reach them. */
 .wizard__nav {
-  position: sticky;
-  bottom: 0;
-  background: #fff;
+  grid-area: w_footer;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: var(--spacing-m, 1rem) 0;
   border-top: 1px solid var(--Schemes-Border-low, #d6d6d6);
+  background: var(--Schemes-Background, #fff);
 }
+
 .wizard__nav-right {
   display: flex;
   gap: var(--spacing-s, 0.75rem);
+  margin-right: var(--scale-1000, 5rem);
 }
+
 .wizard__exit {
-  background: none;
-  border: none;
-  color: var(--Schemes-Primary, #0f4d90);
-  cursor: pointer;
+  margin-left: var(--scale-1000, 5rem);
+  text-decoration: underline;
 }
 </style>

apps/philly-311/frontend/src/pages/report/ImageStep.vue

@@ -2,7 +2,7 @@
      which stores the image (mediaUrl) and returns issue-type suggestions for step 2. Optional;
      Skip/Next both advance. -->
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, useId } from 'vue'
 import { processForClassify } from '@/utils/photo'
 import { useApi } from '@/composables/useApi'
 import { useReportSubmissionStore } from '@/stores/reportSubmission'
@@ -16,8 +16,10 @@ interface ClassifyResponse {
 const store = useReportSubmissionStore()
 useWizardValidity(computed(() => true)) // the step is optional
 
+const waitingImageUpload = ref(true)
 const classifying = ref(false)
 const errorMessage = ref('')
+const imageId = useId()
 
 // classifyBody.imgB64 is mutated before each fetchData() call; useApi reads
 // opts.body lazily so the latest value is always sent.
@@ -28,25 +30,23 @@ const classify = useApi<ClassifyResponse>({
   body: classifyBody,
 })
 
-// createObjectURL produces a short-lived preview URL; the browser holds
-// the underlying blob alive until revokeObjectURL is called or page unloads.
-function makePreview(file: File): string | undefined {
-  return typeof URL.createObjectURL === 'function' ? URL.createObjectURL(file) : undefined
-}
-
 async function onFile(e: Event) {
   if (classifying.value) return
-  const file = (e.target as HTMLInputElement).files?.[0]
+  const target = e.target as HTMLInputElement
+  const file = target.files?.[0]
   if (!file) return
+  waitingImageUpload.value = false
   classifying.value = true
   errorMessage.value = ''
-  const previewUrl = makePreview(file)
+  const previewUrl = URL.createObjectURL(file)
+  const imgElement = document.getElementById(imageId) as HTMLImageElement
+  imgElement.src = previewUrl
   try {
     classifyBody.imgB64 = await processForClassify(file)
     const result = await classify.fetchData()
     if (!result || classify.error.value) {
       errorMessage.value = classify.error.value?.message || 'Classification failed.'
-      if (previewUrl) URL.revokeObjectURL?.(previewUrl)
+      if (previewUrl) URL.revokeObjectURL(previewUrl)
       return
     }
     store.setPhoto({ mediaUrl: result.imageUrl, previewUrl })
@@ -55,10 +55,10 @@ async function onFile(e: Event) {
     )
   } catch (err) {
     errorMessage.value = (err as Error).message || 'Photo processing failed.'
-    if (previewUrl) URL.revokeObjectURL?.(previewUrl)
+    if (previewUrl) URL.revokeObjectURL(previewUrl)
   } finally {
     classifying.value = false
-    ;(e.target as HTMLInputElement).value = ''
+    target.value = ''
   }
 }
 </script>
@@ -71,52 +71,47 @@ async function onFile(e: Event) {
       type to report. Do not upload any images with personal or sensitive information.
     </p>
     <p class="image-step__count">{{ store.photo ? '1/1' : '0/1' }}</p>
-
     <div class="image-step__zones">
       <label class="image-step__zone">
-        <span class="image-step__zone-label">Upload</span>
-        <input type="file" accept="image/*" :disabled="classifying" @change="onFile" />
-      </label>
-      <label class="image-step__zone">
-        <span class="image-step__zone-label">Camera</span>
-        <input
-          type="file"
-          accept="image/*"
-          capture="environment"
-          :disabled="classifying"
-          @change="onFile"
-        />
+        <span v-if="waitingImageUpload" class="image-step__zone-label">Upload</span>
+        <img :id="imageId" alt="Upload" style="display: none" onload="this.style.display = ''" />
+        <input type="file" accept="image/*" @change="onFile" />
       </label>
     </div>
 
     <div role="status">
       <p v-if="classifying" class="image-step__status">Analyzing your photo…</p>
-      <p v-if="store.photo" class="image-step__status">Photo added.</p>
+      <p v-else-if="store.photo" class="image-step__status">Photo added.</p>
+      <p v-else-if="errorMessage" role="alert" class="image-step__error">{{ errorMessage }}</p>
     </div>
-    <p v-if="errorMessage" role="alert" class="image-step__error">{{ errorMessage }}</p>
   </div>
 </template>
 
 <style scoped>
 .image-step {
   max-width: 640px;
 }
+
 .image-step__title {
   font-size: 1.25rem;
   font-weight: 700;
   margin: 0 0 var(--spacing-s, 0.5rem);
 }
+
 .image-step__note {
   color: var(--Schemes-On-Surface-Variant, #4a4a4a);
   margin: 0 0 var(--spacing-s, 0.5rem);
 }
+
 .image-step__count {
   margin: 0 0 var(--spacing-s, 0.5rem);
 }
+
 .image-step__zones {
   display: flex;
   gap: var(--spacing-m, 1rem);
 }
+
 .image-step__zone {
   flex: 1;
   min-height: 180px;
@@ -127,16 +122,19 @@ async function onFile(e: Event) {
   justify-content: center;
   cursor: pointer;
 }
+
 .image-step__zone input {
   position: absolute;
   width: 1px;
   height: 1px;
   opacity: 0;
 }
+
 .image-step__zone:focus-within {
   outline: 2px solid var(--Schemes-Primary, #0f4d90);
   outline-offset: 2px;
 }
+
 .image-step__error {
   color: var(--Schemes-Error, #c0392b);
 }