mirror of
https://github.com/Xevion/the-office.git
synced 2025-12-06 01:16:34 -06:00
Fix footer, push down to bottom properly
This commit is contained in:
Xevion
133
src/App.vue
133
src/App.vue
@@ -1,76 +1,87 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<b-navbar>
|
||||
<b-navbar-brand>
|
||||
<router-link :to="{ name: 'Home' }" class="no-link">
|
||||
The Office Quotes
|
||||
</router-link>
|
||||
<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-sm" class="d-none d-sm-block d-md-none">SM</span>
|
||||
<span id="marker-md" class="d-none d-md-block d-lg-none">MD</span>
|
||||
<span id="marker-lg" class="d-none d-lg-block d-xl-none">LG</span>
|
||||
<span id="marker-xl" class="d-none d-xl-block">XL</span>
|
||||
</b-badge>
|
||||
</b-navbar-brand>
|
||||
<b-collapse id="nav-collapse" is-nav>
|
||||
<b-navbar-nav>
|
||||
<b-nav-item href="#">
|
||||
<router-link :to="{ name: 'Home' }" class="no-link">
|
||||
Home
|
||||
</router-link>
|
||||
</b-nav-item>
|
||||
<b-nav-item href="#">
|
||||
<router-link :to="{ name: 'Home' }" class="no-link">
|
||||
About
|
||||
</router-link>
|
||||
</b-nav-item>
|
||||
<b-nav-item href="#">
|
||||
<router-link :to="{ name: 'Characters' }" class="no-link">
|
||||
Characters
|
||||
</router-link>
|
||||
</b-nav-item>
|
||||
</b-navbar-nav>
|
||||
</b-collapse>
|
||||
</b-navbar>
|
||||
<ais-instant-search
|
||||
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-col lg="3" xl="2" md="12">
|
||||
<ais-search-box ref="searchbox" placeholder="Search here…" @keydown.native="showResults" />
|
||||
<Skeleton
|
||||
secondary_color="#3e3e3e" border_radius="1px"
|
||||
primary_color="#4A4A4A"
|
||||
:inner_style="{ 'min-height': '35.6px' }"
|
||||
/>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row align-h="start" cols="12">
|
||||
<b-col lg="3" xl="2" md="12">
|
||||
<SeasonList />
|
||||
</b-col>
|
||||
<b-col lg="8" xl="7" md="12" class="pt-md-2 pt-lg-0">
|
||||
<router-view />
|
||||
<Footer :build-moment="buildMoment" />
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-container>
|
||||
<ais-configure :click-analytics="true" />
|
||||
</ais-instant-search>
|
||||
<div class="wrapper">
|
||||
<b-navbar>
|
||||
<b-navbar-brand>
|
||||
<router-link :to="{ name: 'Home' }" class="no-link">
|
||||
The Office
|
||||
</router-link>
|
||||
<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-sm" class="d-none d-sm-block d-md-none">SM</span>
|
||||
<span id="marker-md" class="d-none d-md-block d-lg-none">MD</span>
|
||||
<span id="marker-lg" class="d-none d-lg-block d-xl-none">LG</span>
|
||||
<span id="marker-xl" class="d-none d-xl-block">XL</span>
|
||||
</b-badge>
|
||||
</b-navbar-brand>
|
||||
<b-collapse id="nav-collapse" is-nav>
|
||||
<b-navbar-nav>
|
||||
<b-nav-item href="#">
|
||||
<router-link :to="{ name: 'Home' }" class="no-link">
|
||||
Home
|
||||
</router-link>
|
||||
</b-nav-item>
|
||||
<b-nav-item href="#">
|
||||
<router-link :to="{ name: 'Home' }" class="no-link">
|
||||
About
|
||||
</router-link>
|
||||
</b-nav-item>
|
||||
<b-nav-item href="#">
|
||||
<router-link :to="{ name: 'Characters' }" class="no-link">
|
||||
Characters
|
||||
</router-link>
|
||||
</b-nav-item>
|
||||
</b-navbar-nav>
|
||||
</b-collapse>
|
||||
</b-navbar>
|
||||
<ais-instant-search
|
||||
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-col lg="3" xl="2" md="12">
|
||||
<ais-search-box ref="searchbox" placeholder="Search here…" @keydown.native="showResults" />
|
||||
<Skeleton
|
||||
secondary_color="#3e3e3e" border_radius="1px"
|
||||
primary_color="#4A4A4A"
|
||||
:inner_style="{ 'min-height': '35.6px' }"
|
||||
/>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row align-h="start" cols="12">
|
||||
<b-col lg="3" xl="2" md="12">
|
||||
<SeasonList />
|
||||
</b-col>
|
||||
<b-col lg="8" xl="7" md="12" class="pt-md-2 pt-lg-0">
|
||||
<router-view />
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-container>
|
||||
<ais-configure :click-analytics="true" />
|
||||
</ais-instant-search>
|
||||
<Footer :build-moment="buildMoment" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
html, body {
|
||||
html, body, #app {
|
||||
min-height: 100vh;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#app {
|
||||
height: 100%;
|
||||
min-height: 100vh;
|
||||
|
||||
.wrapper {
|
||||
min-height: 100%;
|
||||
position: relative;
|
||||
padding-bottom: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
.ais-InstantSearch {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="footer-dark">
|
||||
<footer>
|
||||
<div class="outer-footer">
|
||||
<footer class="inner-footer">
|
||||
<b-container>
|
||||
<b-row style="text-align: center">
|
||||
<ul>
|
||||
@@ -47,10 +47,17 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.footer-dark {
|
||||
margin-top: auto;
|
||||
.outer-footer {
|
||||
height: 100px;
|
||||
width:100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
padding: 50px 0;
|
||||
.inner-footer {
|
||||
margin: 0 auto;
|
||||
height: 100%;
|
||||
color: #6d6d6d;
|
||||
|
||||
.build-time {
|
||||
|
||||
Reference in New Issue
Block a user