Skip to content

Commit 335adfe

Browse files
hminsky2002hminsky2002
committed
Implement first pass desktop layout
This commit introduces a first-pass desktop layout for the application, primarily handled through media queries on the base css. It also introduces a new set of css variables for setting font size.
1 parent 044eed7 commit 335adfe

10 files changed

+188
-87
lines changed

‎front-end/src/assets/base.css

+17-2
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,24 @@
66
:root {
77
--color-black: #363636;
88
--color-white: #ffffff;
9+
--font-size-base: 16px;
10+
--wac-font-size--small: calc(var(--font-size-base) * 0.75);
11+
--wac-font-size--med: var(--font-size-base);
12+
--wac-font-size--lg: calc(var(--font-size-base) * 1.25);
13+
--wac-font-size--xl: calc(var(--font-size-base) * 1.5);
14+
--wac-font-size--xxl: calc(var(--font-size-base) * 2);
15+
--wac-font-size--xxxl: calc(var(--font-size-base) * 3);
16+
--wac-font-size--xxxxl: calc(var(--font-size-base) * 4);
17+
}
18+
19+
@media screen and (max-width: 940px) {
20+
:root {
21+
--font-size-base: 16px;
22+
}
923
}
1024

1125
body {
12-
background-color: var(--color-background);
26+
background-color: var(--color-white);
1327
font-family: 'Inter', sans-serif;
14-
}
28+
font-size: var(--wac-font-size--med);
29+
}

‎front-end/src/assets/main.css

+1-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
@import './base.css';
22

3-
:root {
4-
}
5-
63
.v-enter-active,
74
.v-leave-active {
85
transition: opacity 0.5s ease;
@@ -16,4 +13,4 @@
1613
.resource-link {
1714
text-decoration: underline;
1815
cursor: pointer;
19-
}
16+
}

‎front-end/src/components/LeafletMap.vue

+18
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,8 @@ watch(
9898
<style scoped>
9999
.expand-map-button {
100100
cursor: pointer;
101+
font-weight: 700;
102+
padding-bottom: 16px;
101103
}
102104
103105
#map {
@@ -118,4 +120,20 @@ watch(
118120
height: 400px;
119121
transition: height 0.5s ease;
120122
}
123+
124+
@media (min-width: 940px) {
125+
.map-container-expanded,
126+
.map-container-collapsed {
127+
height: 100%;
128+
transition: none;
129+
}
130+
131+
.map-container-collapsed * {
132+
pointer-events: all;
133+
}
134+
135+
.expand-map-button {
136+
display: none;
137+
}
138+
}
121139
</style>

‎front-end/src/components/MoreArtworksByArtist.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ const setActiveResource = (newResourceId: string) => {
7070
.more-artworks-by-artist-title {
7171
font-style: normal;
7272
font-weight: 700;
73-
font-size: 16px;
73+
font-size: var(--wac-font-size--med);
7474
line-height: 100%;
7575
7676
color: #000000;

‎front-end/src/components/ResourceDetail.vue

+4-4
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@
5151
.resource-detail-metadata-title {
5252
font-style: normal;
5353
font-weight: 700;
54-
font-size: 16px;
54+
font-size: var(--wac-font-size--med);
5555
line-height: 100%;
5656
5757
color: #999999;
@@ -60,7 +60,7 @@
6060
.resource-detail-metadata-content {
6161
font-style: normal;
6262
font-weight: 400;
63-
font-size: 16px;
63+
font-size: var(--wac-font-size--med);
6464
line-height: 140%;
6565
6666
color: #999999;
@@ -69,14 +69,14 @@
6969
.resource-detail-header-label {
7070
font-style: normal;
7171
font-weight: 400;
72-
font-size: 24px;
72+
font-size: var(--wac-font-size--lg);
7373
line-height: 100%;
7474
}
7575
7676
.resource-detail-header-title {
7777
font-style: normal;
7878
font-weight: 900;
79-
font-size: 32px;
79+
font-size: var(--wac-font-size--xxl);
8080
line-height: 100%;
8181
}
8282
</style>

‎front-end/src/components/ResourceDetailItem.vue

+3-4
Original file line numberDiff line numberDiff line change
@@ -51,13 +51,12 @@ const imageUrl = props.imageUrl ? import.meta.env.VITE_ARCHES_API_URL + props.im
5151
flex-direction: column;
5252
align-items: flex-start;
5353
padding: 0px;
54-
gap: 8px;
5554
}
5655
5756
.resource-detail-item-header-byline {
5857
font-style: normal;
5958
font-weight: 700;
60-
font-size: 16px;
59+
font-size: var(--wac-font-size--med);
6160
line-height: 100%;
6261
6362
color: #000000;
@@ -66,7 +65,7 @@ const imageUrl = props.imageUrl ? import.meta.env.VITE_ARCHES_API_URL + props.im
6665
.resource-detail-item-header-title {
6766
font-style: normal;
6867
font-weight: 900;
69-
font-size: 24px;
68+
font-size: var(--wac-font-size--xxl);
7069
line-height: 120%;
7170
text-decoration-line: underline;
7271
@@ -76,7 +75,7 @@ const imageUrl = props.imageUrl ? import.meta.env.VITE_ARCHES_API_URL + props.im
7675
.resource-detail-item-credit {
7776
font-style: normal;
7877
font-weight: 400;
79-
font-size: 16px;
78+
font-size: var(--wac-font-size--med);
8079
line-height: 140%;
8180
8281
color: #000000;

‎front-end/src/components/ResourcePanel.vue

+14-22
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,7 @@
2222
v-for="relatedArtwork in resourceRelations.filter(
2323
(resourceRelation) => graphIdToNameTable[resourceRelation.graph_id] === 'Artwork'
2424
)"
25-
v-else-if="
26-
validateArtistSchema(props.resource.resource) &&
27-
graphIdToNameTable[props.resource.graph_id] === 'Artist'
28-
"
25+
v-else-if="graphIdToNameTable[props.resource.graph_id] === 'Artist'"
2926
:key="relatedArtwork.graph_id"
3027
:related-artwork="relatedArtwork"
3128
:id-references="props.idReferences"
@@ -35,10 +32,7 @@
3532
v-for="relatedArtwork in resourceRelations.filter(
3633
(resourceRelation) => graphIdToNameTable[resourceRelation.graph_id] === 'Artwork'
3734
)"
38-
v-else-if="
39-
validateStructureSchema(props.resource.resource) &&
40-
graphIdToNameTable[props.resource.graph_id] === 'Structure'
41-
"
35+
v-else-if="graphIdToNameTable[props.resource.graph_id] === 'Structure'"
4236
:key="relatedArtwork.resourceinstanceid"
4337
:related-artwork="relatedArtwork"
4438
:id-references="props.idReferences"
@@ -48,23 +42,14 @@
4842
v-for="relatedArtwork in resourceRelations.filter(
4943
(resourceRelation) => graphIdToNameTable[resourceRelation.graph_id] === 'Artwork'
5044
)"
51-
v-else-if="
52-
validatePhotographerSchema(props.resource.resource) &&
53-
graphIdToNameTable[props.resource.graph_id] === 'Photographer'
54-
"
45+
v-else-if="graphIdToNameTable[props.resource.graph_id] === 'Photographer'"
5546
:key="relatedArtwork.root_ontology_class"
5647
:related-artwork="relatedArtwork"
5748
:id-references="props.idReferences"
5849
:panel-resource-type="PanelResourceEnum.PHOTOGRAPHER"
5950
/>
6051
</template>
61-
<template
62-
v-if="
63-
validateArtworkSchema(props.resource.resource) &&
64-
graphIdToNameTable[props.resource.graph_id] === 'Artwork'
65-
"
66-
#more-by-artist
67-
>
52+
<template v-if="graphIdToNameTable[props.resource.graph_id] === 'Artwork'" #more-by-artist>
6853
<MoreArtworksByArtist
6954
:resource="props.resource"
7055
:resource-relations="resourceRelations"
@@ -93,10 +78,7 @@ import type {
9378
Resource
9479
} from '@/types';
9580
import {
96-
validateArtistSchema,
9781
validateArtworkSchema,
98-
validateStructureSchema,
99-
validatePhotographerSchema,
10082
PanelResourceEnum
10183
} from '@/types';
10284
import useResourceStore from '@/stores/resourceStore';
@@ -131,9 +113,19 @@ const clearActiveResource = () => {
131113
align-items: center;
132114
padding: 8px 0px;
133115
gap: 8px;
116+
font-weight: 700;
134117
}
135118
136119
.resource-detail-back-button {
137120
cursor: pointer;
138121
}
122+
123+
@media (min-width: 940px) {
124+
.resource-detail {
125+
height: 100vh;
126+
}
127+
.resource-detail {
128+
overflow-y: scroll;
129+
}
130+
}
139131
</style>

‎front-end/src/components/SearchList.vue

+13-3
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,6 @@ const filterByType = (type: string) => {
106106
display: flex;
107107
flex-direction: column;
108108
align-items: flex-start;
109-
padding: 0px;
110109
gap: 32px;
111110
isolation: isolate;
112111
}
@@ -149,7 +148,7 @@ button {
149148
background: none;
150149
font-style: normal;
151150
font-weight: 700;
152-
font-size: 16px;
151+
font-size: var(--wac-font-size--med);
153152
line-height: 100%;
154153
display: flex;
155154
align-items: center;
@@ -166,7 +165,6 @@ button.active {
166165
.search-bar {
167166
box-sizing: border-box;
168167
169-
/* Auto layout */
170168
display: flex;
171169
flex-direction: row;
172170
align-items: center;
@@ -177,4 +175,16 @@ button.active {
177175
border: 1px solid #000000;
178176
border-radius: 5px;
179177
}
178+
179+
@media (min-width: 940px) {
180+
.search-list-container {
181+
height: 100vh;
182+
}
183+
.search-results {
184+
overflow-y: scroll;
185+
padding-top: 40px;
186+
mask-image: linear-gradient(to top, transparent, black 10%, black 90%, transparent);
187+
mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
188+
}
189+
}
180190
</style>

‎front-end/src/components/SearchListItem.vue

+16-4
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ const setActiveResource = (newResourceId: string) => {
7272
.search-result-title {
7373
font-style: normal;
7474
font-weight: 900;
75-
font-size: 16px;
75+
font-size: var(--wac-font-size--lg);
7676
line-height: 120%;
7777
display: flex;
7878
align-items: center;
@@ -81,7 +81,7 @@ const setActiveResource = (newResourceId: string) => {
8181
.search-result-resource-type {
8282
font-style: normal;
8383
font-weight: 400;
84-
font-size: 14px;
84+
font-size: var(--wac-font-size--med);
8585
line-height: 100%;
8686
8787
display: flex;
@@ -91,8 +91,8 @@ const setActiveResource = (newResourceId: string) => {
9191
.search-result-resource-description {
9292
font-style: normal;
9393
font-weight: 400;
94-
font-size: 12px;
95-
line-height: 110%;
94+
font-size: var(--wac-font-size--small);
95+
line-height: 120%;
9696
display: -webkit-box;
9797
-webkit-line-clamp: 5;
9898
line-clamp: 5;
@@ -106,4 +106,16 @@ const setActiveResource = (newResourceId: string) => {
106106
object-fit: cover;
107107
flex-shrink: 0;
108108
}
109+
@media (min-width: 940px) {
110+
.search-result-title {
111+
font-size: var(--wac-font-size--xxl);
112+
}
113+
.search-result-resource-type {
114+
font-size: var(--wac-font-size--med);
115+
}
116+
117+
.search-result-resource-description {
118+
font-size: var(--wac-font-size--small);
119+
}
120+
}
109121
</style>

0 commit comments

Comments
 (0)