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

move breakpoint badge, add color styling from history-of-robotics, add computed breakpoint bool, change Character breadcrumb to CharacterList component, attempt at Season content column alignment

Browse Source
This commit is contained in:
Xevion
2020-09-15 07:17:33 -05:00
parent 3e0873da3f
commit 04320d15b5
3 changed files with 34 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
client/src/App.vue
View File

@@ -3,6 +3,13 @@
<b-navbar>
<b-navbar-brand>
<router-link :to="{ name: 'Home' }" class="no-link">The Office Quotes</router-link>
<b-badge style="font-size: 0.80rem;" class="mx-2" v-if="showBreakpointMarker" 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>
@@ -16,13 +23,6 @@
About
</router-link>
</b-nav-item>
<b-badge 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-nav>
</b-collapse>
</b-navbar>
@@ -76,6 +76,26 @@
.ais-SearchBox-input::placeholder {
color: white;
}
#marker-xs {
color: #ff0000;
}
#marker-sm {
color: #f37506;
}
#marker-md {
color: #0090ff;
}
#marker-lg {
color: #05ff80;
}
#marker-xl {
color: #82f500;
}
</style>
<script>
@@ -105,5 +125,10 @@ export default {
this.$router.push({name: "SearchResults"});
},
},
computed: {
showBreakpointMarker() {
return process.env.NODE_ENV === 'development';
}
}
};
</script>

2
client/src/components/Character.vue
View File

@@ -45,7 +45,7 @@ export default {
},
{
text: 'Characters',
to: {name: 'Home'},
to: {name: 'CharacterList'},
},
{
text:

2
client/src/components/Season.vue
View File

@@ -4,7 +4,7 @@
<b-card>
<b-list-group>
<b-list-group-item v-for="episode in season.episodes" :key="episode.episode_id">
<b-row align-v="start">
<b-row align-v="start" align-content="start">
<b-col cols="5" md="4" lg="4" xl="3">
<b-img-lazy fluid-grow class="px-2" src="https://via.placeholder.com/250"></b-img-lazy>
</b-col>