jason/DigitalConsumer.ISS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

allow footer to stack vertically

Browse source
This commit is contained in:
Bill Richardson 2024-02-02 15:55:16 -05:00
parent 0ffebaf17e
commit 63e8ed0d14
1 changed files with 20 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/iss-components/site-footer/site-footer.vue
View file

@ -3,7 +3,13 @@
<footer <footer
id="infoBox" id="infoBox"
class="footer container-fluid g-5 my-5 px-0"> class="footer container-fluid g-5 my-5 px-0">
<div class="row d-flex flex-row-reverse align-items-center vw-100 mx-0"> <div
class="row d-flex vw-100 mx-0"
:class="[
isStackedVertically
? 'flex-column align-items-stretch'
: 'flex-row-reverse align-items-center'
]">
<div <div
id="stacked" id="stacked"
class="col button-col d-flex px-0"> class="col button-col d-flex px-0">
@ -61,7 +67,8 @@ export default {
isForwardActionDisabled: Boolean, isForwardActionDisabled: Boolean,
isBackButtonHidden: { type: Boolean, default: false }, isBackButtonHidden: { type: Boolean, default: false },
isForwardButtonHidden: { type: Boolean, default: false }, isForwardButtonHidden: { type: Boolean, default: false },
cmsWidgetName: String cmsWidgetName: String,
isStackedVertically: { type: Boolean, default: false }
}, },
emits: ['backClicked', 'forwardClicked'], emits: ['backClicked', 'forwardClicked'],
data() { data() {
@ -161,6 +168,17 @@ export default {
& > .container-fluid { & > .container-fluid {
overflow-x: visible; // needed to fix hidden footer on some iphones overflow-x: visible; // needed to fix hidden footer on some iphones
} }
div.flex-column {
.btn-primary {
width: 100%;
justify-content: center;
}
div.link-col {
display: flex;
justify-content: center;
margin-top: 1.25rem;
}
}
} }
.footerImage .footerImage
{ {