Skip to content

Commit

Permalink
updated template to accommodate mobile use
Browse files Browse the repository at this point in the history
  • Loading branch information
remko48 committed Oct 23, 2023
1 parent dbc2486 commit e8b8e6b
Show file tree
Hide file tree
Showing 7 changed files with 248 additions and 141 deletions.
2 changes: 1 addition & 1 deletion pwa/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
},
"dependencies": {
"@conduction/components": "2.2.18",
"@conduction/theme": "1.0.50",
"@conduction/theme": "1.0.51",
"@fortawesome/fontawesome-svg-core": "^6.1.1",
"@fortawesome/free-solid-svg-icons": "^6.4.0",
"@fortawesome/react-fontawesome": "^0.1.18",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,20 @@
.button:hover {
cursor: pointer;
}

@media only screen and (max-width: 992px) {
/* Tablet */
.container {
margin-inline-start: unset;
display: flex;
}
}

@media only screen and (max-width: 576px) {
/* Mobile */
.container {
margin-inline-start: unset;
justify-content: center;
display: flex;
}
}
18 changes: 18 additions & 0 deletions pwa/src/templates/landing/LandingTemplate.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -10,3 +10,21 @@
display: flex;
justify-content: space-between;
}

@media only screen and (max-width: 576px) {
/* Mobile */
.container {
margin-block-start: unset;
}

.container > *:not(:last-child) {
margin-block-end: var(--utrecht-space-block-2xl);
}

.pagination {
display: grid;
justify-content: unset;
justify-items: center;
margin-block-start: var(--utrecht-space-block-lg);
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -25,3 +25,16 @@
.description {
color: var(--conduction-card-wrapper-color) !important;
}

@media only screen and (max-width: 992px) {
/* Tablet */
.componentsGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media only screen and (max-width: 576px) {
/* Mobile */
.componentsGrid {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
}
25 changes: 25 additions & 0 deletions pwa/src/templates/templateParts/filters/FiltersTemplate.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -33,3 +33,28 @@
transform: rotate(360deg);
}
}

@media only screen and (max-width: 992px) {
/* Tablet */
.container {
display: grid;
justify-content: unset;
}

.form {
margin-block-end: 12px;
}
}

@media only screen and (max-width: 576px) {
/* Mobile */
.container {
display: grid;
justify-content: unset;
}

.form {
display: grid;
margin-block-end: 12px;
}
}
30 changes: 29 additions & 1 deletion pwa/src/templates/templateParts/footer/FooterTemplate.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@
.contentGrid {
gap: 28px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dynamicSectionTitle {
Expand All @@ -76,3 +76,31 @@
justify-content: space-between;
align-items: flex-end;
}

@media only screen and (max-width: 992px) {
/* Tablet */
.contentGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media only screen and (max-width: 576px) {
/* Mobile */
.footer {
background-position: var(
--utrecht-page-footer-mobile-background-position,
var(--utrecht-page-footer-background-position)
);
}
.contentGrid {
grid-template-columns: repeat(1, minmax(0, 1fr));
}

.imageContainer {
margin-block-end: 15px;
}

.logoAndConduction {
display: block;
}
}
Loading

0 comments on commit e8b8e6b

Please sign in to comment.