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

SeasonList, Card Color, CharacterList adjustments, class arrangements

Browse Source
This commit is contained in:
Xevion
2020-08-11 05:51:02 -05:00
parent 4e0dcfa532
commit ba9f806550
4 changed files with 37 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
client/src/assets/scss/_variables.scss
View File

@@ -1,3 +1,5 @@
$grey-11: #dddddd;
$grey-10: #cfcfcf;
$grey-9: #b3b3b3;
$grey-8: #a0a0a0;
$grey-7: #565656;
@@ -5,7 +7,7 @@ $grey-6: #3e3e3e;
$grey-5: #292929;
$grey-4: #242424;
$grey-3: #1d1d1d;
$grey-2: #181818;
$grey-1: #151515;
$grey-0: #000000;
$grey-2: #131313;
$grey-1: #0e0e0e;
$grey-0: #070707;
$highlight: #d2ca00;

5
client/src/components/CharacterList.vue
View File

@@ -20,8 +20,9 @@
}
.character-button {
background-color: $grey-6;
border-color: $grey-4;
color: $grey-10;
background-color: $grey-4;
border-color: $grey-3;
}
.character-button {

4
client/src/components/Home.vue
View File

@@ -14,8 +14,8 @@
.card {
color: $grey-9;
background-color: $grey-1;
border-bottom: 1px solid rgba(0, 0, 0, 0.88);
background-color: $grey-2;
border-bottom: 1px solid $grey-1;
border-radius: 0;
}
</style>

68
client/src/components/SeasonList.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="accordion" role="tablist">
<b-card class="season-card" v-for="season in seasons" :key="season.season_id">
<b-card class="season-item" v-for="season in seasons" :key="season.season_id">
<b-card-header header-tag="header" role="tab">
<a class="no-link align-items-center justify-content-between d-flex"
v-b-toggle="'accordion-' + season.season_id">
@@ -14,7 +14,8 @@
<b-card-body class="h-100 px-0">
<b-list-group>
<template v-for="episode in season.episodes">
<b-list-group-item :id="`s-${season.season_id}-ep-${episode.episode_id}`"
<b-list-group-item class="episode-item"
:id="`s-${season.season_id}-ep-${episode.episode_id}`"
:key="`rl-${episode.episode_id}`">
<router-link class="no-link"
:to="`/${season.season_id}/${episode.episode_id}`">
@@ -38,20 +39,18 @@
<style lang="scss">
@import "../assets/scss/_variables";
.season-card > .card-body > .card-header {
// Make all season cards 'clickable'
.season-item > .card-body > .card-header {
cursor: pointer;
}
// Make all chevron icons rotate 180 when clicked
.bi-chevron-down {
-moz-transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.collapsed > .bi-chevron-down {
text-align: right;
}
.not-collapsed > .bi-chevron-down {
transform: rotate(180deg);
-ms-transform: rotate(180deg);
@@ -59,70 +58,47 @@
-webkit-transform: rotate(180deg);
}
// White popovers use white background on top left/right corners, this disables it.
.b-popover {
background: transparent;
}
// Dark theme popover
.popover-header {
background-color: $grey-3;
border-color: $grey-2;
color: white;
color: $grey-11;
}
// Dark theme popover, arrow-right fix
.bs-popover-right > .arrow::after, .bs-popover-auto[x-placement^="right"] > .arrow::after {
/*left: 1px;*/
/*border-width: 0.5rem 0.5rem 0.5rem 0;*/
border-right-color: $grey-2;
}
// Dark theme popover body
.popover-body {
color: white;
color: $grey-10;
background-color: $grey-2;
}
.season-title { color: $grey-8; cursor: pointer; }
.accordion.list-group-item {
border-radius: 0;
border-width: 0 0 0 0;
border-bottom-width: 1px;
padding-left: 30px;
font-weight: 500;
&:first-child { border-top-width: 1px; }
&:last-child { border-bottom-width: 0; }
// Season Card Background Color
.season-item {
.card-body {
padding: 0;
}
.accordion {
.list-group-item {
padding: 10px 20px;
a { display: block; }
.badge { float: right; min-width: 36px; }
}
.card-body { padding: 0; }
}
.card-header {
background-color: $grey-2;
border-bottom: 1px solid rgba(0, 0, 0, 0.88);
color: $grey-9;
border-bottom: 1px solid $grey-0;
font-family: 'Montserrat', sans-serif;
}
.card {
background-color: inherit;
/*border: 3px solid #0a0a0a;*/
/*border-radius: 0;*/
padding-bottom: 0;
/*&:not(:first-child) { border-top-width: 0; }*/
/*&:not(:last-child) { border-bottom-width: 0; }*/
}
.list-group-item {
border-color: rgba(24, 24, 24, 0.82);
background-color: $grey-3;
.episode-item {
border-color: $grey-2;
background-color: $grey-2;
color: $grey-8;
border-left-width: 0;
border-right-width: 0;