Skip to content

Commit

Permalink
Form text and alignment updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@kyle1morel
kyle1morel committed Jun 3, 2024
1 parent e0041b9 commit 4389eeb
Show file tree
Hide file tree
Showing 5 changed files with 72 additions and 54 deletions.
Binary file added frontend/src/assets/images/house.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 4 additions & 4 deletions frontend/src/components/housing/intake/ShasEnquiryForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ async function confirmNext(data: any) {
confirm.require({
/* eslint-disable max-len */
message:
'After confirming, your enquiry will get submitted, and you will be directed to the PermitConnect Navigator Service application.',
'After confirming, your enquiry will be submitted, and you will be directed to register your project with a Navigator.',
/*eslint-enable max-len */
header: 'Please confirm',
acceptLabel: 'Confirm',
Expand Down Expand Up @@ -355,8 +355,8 @@ onBeforeMount(async () => {
<Card v-if="values.basic?.isRelated === BASIC_RESPONSES.NO">
<template #title>
<div class="flex">
<span class="section-header">Would you like to register for Navigator assistance with a project?</span>
<div v-tooltip.right="`Consider applying if you are working or getting started on a housing project.`">
<span class="section-header">Would you like to register your project with a Navigator?</span>
<div v-tooltip.right="`Consider registering if you are working or getting started on a housing project.`">
<font-awesome-icon icon="fa-solid fa-circle-question" />
</div>
</div>
Expand All @@ -375,7 +375,7 @@ onBeforeMount(async () => {
v-if="values.basic?.applyForPermitConnect === BASIC_RESPONSES.YES"
class="col-12 text-blue-500"
>
Please proceed to the next page. It will take you to the Single Housing Application.
Please proceed to the next page to register your project with a Navigator.
</div>
</div>
</template>
Expand Down
25 changes: 15 additions & 10 deletions frontend/src/components/housing/intake/ShasIntakeForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -419,8 +419,6 @@ onBeforeMount(async () => {
/>
</template>
<template #content="{ prevCallback, nextCallback }">
<CollectionDisclaimer />

<Message
v-if="validationErrors.length"
severity="error"
Expand All @@ -441,7 +439,7 @@ onBeforeMount(async () => {
<InputText
class="col-6"
name="housing.projectName"
label="Type in project name - well known title like Capital Park"
label="Type in project - well known title like Capital Park"
:bold="false"
:disabled="!editable"
/>
Expand Down Expand Up @@ -769,8 +767,6 @@ onBeforeMount(async () => {
/>
</template>
<template #content="{ prevCallback, nextCallback }">
<CollectionDisclaimer />

<Message
v-if="validationErrors.length"
severity="error"
Expand All @@ -784,7 +780,9 @@ onBeforeMount(async () => {
<Card>
<template #title>
<div class="flex">
<span class="section-header">Has the location of the project been affected by natural disaster?</span>
<span class="section-header">
Has the location of this project been affected by natural disaster?
</span>
</div>
<Divider type="solid" />
</template>
Expand Down Expand Up @@ -926,11 +924,20 @@ onBeforeMount(async () => {
<Card class="no-shadow">
<template #content>
<div class="formgrid grid">
<div class="col-12">
<label>
<a
href="https://ltsa.ca/property-owners/about-land-records/property-information-resources/"
target="_blank"
>
LTSA PID Lookup
</a>
</label>
</div>
<!-- eslint-disable max-len -->
<InputText
class="col-12"
name="location.ltsaPIDLookup"
label="LTSA PID Lookup"
:bold="false"
:disabled="!editable"
help-text="List the parcel IDs - if multiple PIDS, separate them with commas, e.g., 006-209-521, 007-209-522"
Expand Down Expand Up @@ -1056,8 +1063,6 @@ onBeforeMount(async () => {
/>
</template>
<template #content="{ prevCallback }">
<CollectionDisclaimer />

<Message
v-if="validationErrors.length"
severity="error"
Expand Down Expand Up @@ -1345,7 +1350,7 @@ onBeforeMount(async () => {
severity="success"
:closable="false"
>
Your application has been succesfully submitted.
Your application has been successfully submitted.
</Message>
<h3>Confirmation ID: {{ assignedActivityId }}</h3>
<div>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/views/HomeView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ const toHousing = (): void => {
width: 100%;
height: 100%;
background-color: $app-primary;
opacity: 0.8;
opacity: 0.9;
}
.p-button {
Expand Down
91 changes: 52 additions & 39 deletions frontend/src/views/housing/HousingView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,65 +31,78 @@ const items = ref([
</script>

<template>
<div class="flex flex-row align-items-center w-full housing">
<font-awesome-icon
icon="fa-solid fa-house"
class="mr-3 text-5xl app-primary-color"
/>
<h1 class="app-primary-color">Housing</h1>
</div>
<div class="flex flex-column">
<div
v-for="(item, index) in items"
:key="index"
class="flex justify-content-center mb-5"
>
<router-link
v-slot="{ href, navigate }"
:to="{ name: item.route }"
custom
<div class="flex flex-column align-items-center justify-content-start h-full">
<div class="flex flex-row align-items-center w-full housing">
<img
class="mr-3"
src="@/assets/images/house.png"
width="147"
height="141"
alt="Housing image"
/>
<h1 class="app-primary-color">Housing</h1>
</div>
<div class="flex flex-column align-items-center justify-content-start mt-8">
<div
v-for="(item, index) in items"
:key="index"
class="flex justify-content-center mb-5"
>
<a
:href="href"
@click="navigate"
<router-link
v-slot="{ href, navigate }"
:to="{ name: item.route }"
custom
>
<Button
class="p-0 m-0"
text
<a
:href="href"
@click="navigate"
>
<div class="card">
<div class="flex align-items-center text-left h-full mx-3">
<div :class="['mr-2', { 'pb-4': item.bottom }]">
<font-awesome-icon
:icon="`fa-solid
<Button
class="p-0 m-0"
text
>
<div class="card">
<div class="flex align-items-center text-left h-full mx-3">
<div :class="['mr-2 text-2xl', { 'pb-4': item.bottom }]">
<font-awesome-icon
:icon="`fa-solid
${item.icon}`"
/>
</div>
<div>
<div class="font-bold">{{ item.top }}</div>
<div v-if="item.bottom">{{ item.bottom }}</div>
/>
</div>
<div>
<div class="font-bold">{{ item.top }}</div>
<div v-if="item.bottom">{{ item.bottom }}</div>
</div>
</div>
</div>
</div>
</Button>
</a>
</router-link>
</Button>
</a>
</router-link>
</div>
</div>
</div>
</template>

<style scoped lang="scss">
.card {
.p-button {
border-width: 2px;
border-style: solid;
border-radius: 0.5rem;
border-color: $app-primary;
width: 550px;
height: 80px;
background-color: #fff;
color: $app-primary;
box-shadow: 0 6px 6px -1px rgb(145, 145, 145);
}
.p-button:hover {
opacity: 1;
background-color: $app-primary;
color: $app-outline-on-primary;
}
.housing {
// background-color: #f8f9fa;
padding-left: 3.5rem;
}
</style>

0 comments on commit 4389eeb

Please sign in to comment.