Skip to content

Commit

Permalink
Improvements for mobile view on landing page
Browse files Browse the repository at this point in the history
  • Loading branch information
@suzalflueck
suzalflueck committed Nov 30, 2023
1 parent 3954adc commit 6366578
Show file tree
Hide file tree
Showing 7 changed files with 252 additions and 235 deletions.
7 changes: 6 additions & 1 deletion frontend/src/assets/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,14 @@ div.v-application__wrap {

@media (max-width: 768px) {
#app {
min-width: 1130px; /* Adjust as needed */
/* min-width: 600px; */
padding: 0; /* Adjust as needed */
}

.full-width {
margin-left: calc(-1*(100vw - 400px)/2);
margin-right: calc(-1*(100vw - 400px)/2);
}
}
.school-search{
margin-left:175px
Expand Down
96 changes: 49 additions & 47 deletions frontend/src/views/AuthorityView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -212,54 +212,56 @@ onMounted(async () => {
]"
></v-breadcrumbs>
<v-sheet style="z-index: 100; position: relative" elevation="2" class="py-6 full-width">
<v-row no-gutters justify="space-between">
<v-col>
<h1 class="mt-3 mb-2">
{{ authority.value.authorityData?.authorityNumber }} -
{{ authority.value.authorityData?.displayName }}
</h1>
<v-row v-if="authority.value.authorityData">
<v-col>
<p>
<strong>Phone:</strong>
{{ formatPhoneNumber(authority.value.authorityData?.phoneNumber) }}
</p>
<p>
<strong>Fax:</strong>
{{ formatPhoneNumber(authority.value.authorityData?.faxNumber) }}
</p>
<p>
<strong>Email: </strong>
<a :href="'mailto:' + authority.value.authorityData?.email">{{
authority.value.authorityData?.email
}}</a>
</p>
</v-col>
<v-col
v-for="item in authority.value.authorityData.addresses"
:key="item.addressTypeCode"
>
<DisplayAddress v-bind="item" />
</v-col>
<v-col>
<v-btn
variant="text"
class="text-none text-subtitle-1 ma-1 v-btn-align-left"
@click="downloadAuthorityContacts()"
><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Download
Authority Contacts (CSV)</v-btn
>
<v-btn
variant="text"
class="text-none text-subtitle-1 ma-1 v-btn-align-left"
@click="downloadAuthoritySchools()"
><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Download
Authority Schools (CSV)</v-btn
<v-container class="main">
<v-row no-gutters justify="space-between">
<v-col>
<h1 class="mt-3 mb-2">
{{ authority.value.authorityData?.authorityNumber }} -
{{ authority.value.authorityData?.displayName }}
</h1>
<v-row v-if="authority.value.authorityData">
<v-col>
<p>
<strong>Phone:</strong>
{{ formatPhoneNumber(authority.value.authorityData?.phoneNumber) }}
</p>
<p>
<strong>Fax:</strong>
{{ formatPhoneNumber(authority.value.authorityData?.faxNumber) }}
</p>
<p>
<strong>Email: </strong>
<a :href="'mailto:' + authority.value.authorityData?.email">{{
authority.value.authorityData?.email
}}</a>
</p>
</v-col>
<v-col
v-for="item in authority.value.authorityData.addresses"
:key="item.addressTypeCode"
>
</v-col>
</v-row>
</v-col>
</v-row>
<DisplayAddress v-bind="item" />
</v-col>
<v-col>
<v-btn
variant="text"
class="text-none text-subtitle-1 ma-1 v-btn-align-left"
@click="downloadAuthorityContacts()"
><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Download
Authority Contacts (CSV)</v-btn
>
<v-btn
variant="text"
class="text-none text-subtitle-1 ma-1 v-btn-align-left"
@click="downloadAuthoritySchools()"
><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Download
Authority Schools (CSV)</v-btn
>
</v-col>
</v-row>
</v-col>
</v-row>
</v-container>
</v-sheet>
<!-- END Authority Info Header Block -->
<v-sheet class="pa-6">
Expand Down
56 changes: 29 additions & 27 deletions frontend/src/views/ContactsView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,33 +108,35 @@ onMounted(() => {
:items="[{ title: 'Home', href: '/' }, 'Contacts by Type']"
></v-breadcrumbs>
<v-sheet style="z-index: 100; position: relative" elevation="2" class="py-6 full-width">
<v-row no-gutters justify="space-between">
<v-spacer />
<v-col cols="12">
<h2 class="mt-3 mb-2">Find District Contacts by Type</h2>
<v-row>
<v-autocomplete
v-model="selectedContactType"
label="Select a Contact by Type"
:items="appStore.getDistrictContactTypeCodes"
item-title="label"
item-value="districtContactTypeCode"
></v-autocomplete>
<v-btn
@click="searchContact"
icon="mdi-magnify"
color="primary"
variant="flat"
rounded="lg"
size="large"
class="text-none text-subtle-1 ml-3"
/>
</v-row>
<v-btn @click="resetContactFilters" variant="outlined" color="primary" class="text-none"
>Reset</v-btn
>
</v-col>
</v-row>
<v-container class="main">
<v-row no-gutters justify="space-between">
<v-spacer />
<v-col cols="12">
<h2 class="mt-3 mb-2">Find District Contacts by Type</h2>
<v-row>
<v-autocomplete
v-model="selectedContactType"
label="Select a Contact by Type"
:items="appStore.getDistrictContactTypeCodes"
item-title="label"
item-value="districtContactTypeCode"
></v-autocomplete>
<v-btn
@click="searchContact"
icon="mdi-magnify"
color="primary"
variant="flat"
rounded="lg"
size="large"
class="text-none text-subtle-1 ml-3"
/>
</v-row>
<v-btn @click="resetContactFilters" variant="outlined" color="primary" class="text-none"
>Reset</v-btn
>
</v-col>
</v-row>
</v-container>
</v-sheet>
<!-- END Contacts by Type header-->
<v-container>
Expand Down
102 changes: 52 additions & 50 deletions frontend/src/views/DistrictView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -186,58 +186,60 @@ onMounted(async () => {
></v-breadcrumbs>

<v-sheet style="z-index: 100; position: relative" elevation="2" class="py-6 full-width">
<v-row no-gutters justify="space-between">
<v-col v-if="district.value.districtData">
<v-row no-gutters>
<h1 class="mt-3 mb-2">
{{ district.value.districtData?.districtNumber }} -
{{ district.value.districtData?.displayName }}
</h1>
</v-row>
<v-row no-gutters justify="space-between">
<v-col>
<p>
<strong>Phone:</strong>
{{ formatPhoneNumber(district.value.districtData?.phoneNumber) }}
</p>
<p>
<strong>Fax:</strong>
{{ formatPhoneNumber(district.value.districtData?.faxNumber) }}
</p>
<p><strong>Email:</strong> {{ district.value.districtData?.email }}</p>
<p>
<a :href="district.value.districtData?.website">{{
district.value.districtData?.website
}}</a>
</p>
</v-col>

<v-col
v-for="item in district.value.districtData.addresses"
:key="item.addressTypeCode"
>
<DisplayAddress v-bind="item" />
</v-col>
<v-container class="main">
<v-row no-gutters justify="space-between">
<v-col v-if="district.value.districtData">
<v-row no-gutters>
<h1 class="mt-3 mb-2">
{{ district.value.districtData?.districtNumber }} -
{{ district.value.districtData?.displayName }}
</h1>
</v-row>
<v-row no-gutters justify="space-between">
<v-col>
<p>
<strong>Phone:</strong>
{{ formatPhoneNumber(district.value.districtData?.phoneNumber) }}
</p>
<p>
<strong>Fax:</strong>
{{ formatPhoneNumber(district.value.districtData?.faxNumber) }}
</p>
<p><strong>Email:</strong> {{ district.value.districtData?.email }}</p>
<p>
<a :href="district.value.districtData?.website">{{
district.value.districtData?.website
}}</a>
</p>
</v-col>

<v-col>
<v-btn
variant="text"
class="text-none text-subtitle-1 ma-1 v-btn-align-left"
@click="downloadDistrictContacts"
><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Download
District Contacts (CSV)</v-btn
<v-col
v-for="item in district.value.districtData.addresses"
:key="item.addressTypeCode"
>
<v-btn
variant="text"
class="text-none text-subtitle-1 ma-1 v-btn-align-left"
@click="downloadDistrictSchools"
><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Download
District Schools (CSV)</v-btn
>
</v-col>
</v-row>
</v-col>
</v-row>
<DisplayAddress v-bind="item" />
</v-col>

<v-col>
<v-btn
variant="text"
class="text-none text-subtitle-1 ma-1 v-btn-align-left"
@click="downloadDistrictContacts"
><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Download
District Contacts (CSV)</v-btn
>
<v-btn
variant="text"
class="text-none text-subtitle-1 ma-1 v-btn-align-left"
@click="downloadDistrictSchools"
><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Download
District Schools (CSV)</v-btn
>
</v-col>
</v-row>
</v-col>
</v-row>
</v-container>
</v-sheet>
<!-- END DISTRICT HEADER INFO -->

Expand Down
8 changes: 4 additions & 4 deletions frontend/src/views/HomeView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,16 @@ import SchoolSelect from '../components/SchoolSelect.vue'
<SchoolSelect />
</v-col>
</v-row>
<v-row justify="center">
<v-col cols="8" md="4" class="d-flex py-6">
<v-row justify="center" class="pa-2 pa-md-0">
<v-col cols="12" md="4" class="d-flex py-md-6 pa-2 px-md-3">
<DistrictSelect />
</v-col>

<v-col cols="8" md="4" class="d-flex py-6">
<v-col cols="12" md="4" class="d-flex py-md-6 pa-2 px-md-3">
<AuthoritySelect />
</v-col>

<v-col cols="8" md="4" class="d-flex py-6">
<v-col cols="12" md="4" class="d-flex py-md-6 pa-2 px-md-3">
<OffshoreSelect />
</v-col>
</v-row>
Expand Down
Loading

0 comments on commit 6366578

Please sign in to comment.