xevion/the-office
1
0
Fork 0
mirror of https://github.com/Xevion/the-office.git synced 2025-12-10 00:08:46 -06:00
Code Issues Packages Projects Releases Wiki Activity

Fix footer, push down to bottom properly

Browse Source
This commit is contained in:
Xevion
2022-05-20 15:06:51 -05:00
parent 5cf146cf97
commit 5b020fbe1e
2 changed files with 84 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/App.vue
View File

@@ -1,9 +1,10 @@
<template> <template>
<div id="app"> <div id="app">
<div class="wrapper">
<b-navbar> <b-navbar>
<b-navbar-brand> <b-navbar-brand>
<router-link :to="{ name: 'Home' }" class="no-link"> <router-link :to="{ name: 'Home' }" class="no-link">
The Office Quotes The Office
</router-link> </router-link>
<b-badge v-if="showBreakpointMarker" style="font-size: 0.80rem;" class="mx-2" variant="dark"> <b-badge v-if="showBreakpointMarker" style="font-size: 0.80rem;" class="mx-2" variant="dark">
<span id="marker-xs" class="d-sm-none">XS</span> <span id="marker-xs" class="d-sm-none">XS</span>
@@ -54,23 +55,33 @@
</b-col> </b-col>
<b-col lg="8" xl="7" md="12" class="pt-md-2 pt-lg-0"> <b-col lg="8" xl="7" md="12" class="pt-md-2 pt-lg-0">
<router-view /> <router-view />
<Footer :build-moment="buildMoment" />
</b-col> </b-col>
</b-row> </b-row>
</b-container> </b-container>
<ais-configure :click-analytics="true" /> <ais-configure :click-analytics="true" />
</ais-instant-search> </ais-instant-search>
<Footer :build-moment="buildMoment" />
</div>
</div> </div>
</template> </template>
<style lang="scss"> <style lang="scss">
html, body { html, body, #app {
min-height: 100vh; min-height: 100vh;
height: 100%;
} }
#app { #app {
height: 100%;
min-height: 100vh; min-height: 100vh;
.wrapper {
min-height: 100%;
position: relative;
padding-bottom: 150px;
}
} }
.ais-InstantSearch { .ais-InstantSearch {
height: 100%; height: 100%;
} }

17
src/components/Footer.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div class="footer-dark"> <div class="outer-footer">
<footer> <footer class="inner-footer">
<b-container> <b-container>
<b-row style="text-align: center"> <b-row style="text-align: center">
<ul> <ul>
@@ -47,10 +47,17 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.footer-dark { .outer-footer {
margin-top: auto; height: 100px;
width:100%;
position: absolute;
left: 0;
bottom: 0;
}
padding: 50px 0; .inner-footer {
margin: 0 auto;
height: 100%;
color: #6d6d6d; color: #6d6d6d;
.build-time { .build-time {