xevion/the-office
1
0
Fork 0
mirror of https://github.com/Xevion/the-office.git synced 2025-12-07 20:08:40 -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

133
src/App.vue
View File

@@ -1,76 +1,87 @@
<template> <template>
<div id="app"> <div id="app">
<b-navbar> <div class="wrapper">
<b-navbar-brand> <b-navbar>
<router-link :to="{ name: 'Home' }" class="no-link"> <b-navbar-brand>
The Office Quotes <router-link :to="{ name: 'Home' }" class="no-link">
</router-link> The Office
<b-badge v-if="showBreakpointMarker" style="font-size: 0.80rem;" class="mx-2" variant="dark"> </router-link>
<span id="marker-xs" class="d-sm-none">XS</span> <b-badge v-if="showBreakpointMarker" style="font-size: 0.80rem;" class="mx-2" variant="dark">
<span id="marker-sm" class="d-none d-sm-block d-md-none">SM</span> <span id="marker-xs" class="d-sm-none">XS</span>
<span id="marker-md" class="d-none d-md-block d-lg-none">MD</span> <span id="marker-sm" class="d-none d-sm-block d-md-none">SM</span>
<span id="marker-lg" class="d-none d-lg-block d-xl-none">LG</span> <span id="marker-md" class="d-none d-md-block d-lg-none">MD</span>
<span id="marker-xl" class="d-none d-xl-block">XL</span> <span id="marker-lg" class="d-none d-lg-block d-xl-none">LG</span>
</b-badge> <span id="marker-xl" class="d-none d-xl-block">XL</span>
</b-navbar-brand> </b-badge>
<b-collapse id="nav-collapse" is-nav> </b-navbar-brand>
<b-navbar-nav> <b-collapse id="nav-collapse" is-nav>
<b-nav-item href="#"> <b-navbar-nav>
<router-link :to="{ name: 'Home' }" class="no-link"> <b-nav-item href="#">
Home <router-link :to="{ name: 'Home' }" class="no-link">
</router-link> Home
</b-nav-item> </router-link>
<b-nav-item href="#"> </b-nav-item>
<router-link :to="{ name: 'Home' }" class="no-link"> <b-nav-item href="#">
About <router-link :to="{ name: 'Home' }" class="no-link">
</router-link> About
</b-nav-item> </router-link>
<b-nav-item href="#"> </b-nav-item>
<router-link :to="{ name: 'Characters' }" class="no-link"> <b-nav-item href="#">
Characters <router-link :to="{ name: 'Characters' }" class="no-link">
</router-link> Characters
</b-nav-item> </router-link>
</b-navbar-nav> </b-nav-item>
</b-collapse> </b-navbar-nav>
</b-navbar> </b-collapse>
<ais-instant-search </b-navbar>
index-name="prod_THEOFFICEQUOTES" :search-client="searchClient" <ais-instant-search
:insights-client="insightsClient" index-name="prod_THEOFFICEQUOTES" :search-client="searchClient"
> :insights-client="insightsClient"
<b-container :fluid="true" class="py-2 px-lg-5 px-md-4"> >
<b-row class="my-3 pl-1" cols="12"> <b-container :fluid="true" class="py-2 px-lg-5 px-md-4">
<b-col lg="3" xl="2" md="12"> <b-row class="my-3 pl-1" cols="12">
<ais-search-box ref="searchbox" placeholder="Search here…" @keydown.native="showResults" /> <b-col lg="3" xl="2" md="12">
<Skeleton <ais-search-box ref="searchbox" placeholder="Search here…" @keydown.native="showResults" />
secondary_color="#3e3e3e" border_radius="1px" <Skeleton
primary_color="#4A4A4A" secondary_color="#3e3e3e" border_radius="1px"
:inner_style="{ 'min-height': '35.6px' }" primary_color="#4A4A4A"
/> :inner_style="{ 'min-height': '35.6px' }"
</b-col> />
</b-row> </b-col>
<b-row align-h="start" cols="12"> </b-row>
<b-col lg="3" xl="2" md="12"> <b-row align-h="start" cols="12">
<SeasonList /> <b-col lg="3" xl="2" md="12">
</b-col> <SeasonList />
<b-col lg="8" xl="7" md="12" class="pt-md-2 pt-lg-0"> </b-col>
<router-view /> <b-col lg="8" xl="7" md="12" class="pt-md-2 pt-lg-0">
<Footer :build-moment="buildMoment" /> <router-view />
</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 {