mirror of
https://github.com/FuzzyGrim/Yamtrack.git
synced 2026-03-03 02:37:02 +00:00
revert to css
This commit is contained in:
FuzzyGrim
@@ -25,7 +25,6 @@ RUN chmod +x /entrypoint.sh && \
|
||||
|
||||
# Django app
|
||||
COPY src ./
|
||||
RUN python manage.py compilescss
|
||||
RUN python manage.py collectstatic --noinput --ignore=*.scss
|
||||
RUN python manage.py collectstatic
|
||||
|
||||
CMD ["/entrypoint.sh"]
|
||||
@@ -1,12 +1,9 @@
|
||||
crispy-bootstrap5==2024.2
|
||||
Django==5.0.3
|
||||
django-compressor==4.4
|
||||
django-crispy-forms==2.1
|
||||
django_debug_toolbar==4.3.0
|
||||
django-model-utils==4.4.0
|
||||
django-sass-processor==1.4
|
||||
gunicorn==21.2.0
|
||||
libsass==0.23.0
|
||||
Pillow==10.2.0
|
||||
psycopg-binary==3.1.18
|
||||
python-decouple==3.8
|
||||
|
||||
@@ -34,7 +34,6 @@ INSTALLED_APPS = [
|
||||
"integrations",
|
||||
"crispy_forms",
|
||||
"crispy_bootstrap5",
|
||||
"sass_processor",
|
||||
"debug_toolbar",
|
||||
"django.contrib.auth",
|
||||
"django.contrib.contenttypes",
|
||||
@@ -229,14 +228,6 @@ REGISTRATION = config("REGISTRATION", default=True, cast=bool)
|
||||
CRISPY_ALLOWED_TEMPLATE_PACKS = "bootstrap5"
|
||||
CRISPY_TEMPLATE_PACK = "bootstrap5"
|
||||
|
||||
STATICFILES_FINDERS = [
|
||||
"django.contrib.staticfiles.finders.FileSystemFinder",
|
||||
"django.contrib.staticfiles.finders.AppDirectoriesFinder",
|
||||
"sass_processor.finders.CssFinder",
|
||||
]
|
||||
|
||||
SASS_OUTPUT_STYLE = "compact"
|
||||
|
||||
DEBUG_TOOLBAR_CONFIG = {
|
||||
"SKIP_TEMPLATE_PREFIXES": (
|
||||
"django/forms/widgets/",
|
||||
|
||||
@@ -1,35 +0,0 @@
|
||||
/* roboto-300 - latin */
|
||||
@font-face {
|
||||
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
||||
font-family: "Roboto";
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: url("../fonts/roboto-v30-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||
}
|
||||
|
||||
/* roboto-regular - latin */
|
||||
@font-face {
|
||||
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
||||
font-family: "Roboto";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url("../fonts/roboto-v30-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||
}
|
||||
|
||||
/* roboto-700 - latin */
|
||||
@font-face {
|
||||
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
||||
font-family: "Roboto";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: url("../fonts/roboto-v30-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||
}
|
||||
|
||||
/* roboto-900 - latin */
|
||||
@font-face {
|
||||
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
||||
font-family: "Roboto";
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
src: url("../fonts/roboto-v30-latin-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
body {
|
||||
background-color: $background;
|
||||
font-family: "Roboto", sans-serif;
|
||||
|
||||
// hide lazyload img until loaded
|
||||
img.lazyload:not([src]) {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
height: 100svh;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 1rem;
|
||||
}
|
||||
@@ -1,261 +0,0 @@
|
||||
.sidebar {
|
||||
width: 230px;
|
||||
background-color: $primary !important; // override bootstrap sidebar bg
|
||||
|
||||
&.offcanvas-lg {
|
||||
--bs-offcanvas-width: 75% !important; // override bootstrap offcanvas width
|
||||
}
|
||||
|
||||
.nav-link.active {
|
||||
background-color: $secondary;
|
||||
}
|
||||
|
||||
.nav-link:not(.active) {
|
||||
color: hsl(0, 0%, 85%);
|
||||
&:hover {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logout-form {
|
||||
button {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
color: hsl(0, 0%, 85%);
|
||||
&:hover {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
// adjust width of select in search-bar
|
||||
.input-group > .form-select {
|
||||
flex-grow: 0;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-gap: 0.5rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.poster {
|
||||
width: 100%;
|
||||
aspect-ratio: 2/3;
|
||||
object-fit: cover;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.image-not-found {
|
||||
width: 100%;
|
||||
aspect-ratio: 2/3;
|
||||
object-fit: contain;
|
||||
object-position: center top;
|
||||
background-color: $bg-img-none;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.card-img-overlay {
|
||||
// position bottom of card
|
||||
top: auto;
|
||||
padding: 0.5em;
|
||||
border-top-left-radius: 0px;
|
||||
border-top-right-radius: 0px;
|
||||
background-color: rgba(0, 0, 0, 0.692);
|
||||
|
||||
.card-title {
|
||||
margin-bottom: 0;
|
||||
// show only 2 lines of text
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.card-text {
|
||||
font-size: 0.85rem;
|
||||
|
||||
.open-track-btn {
|
||||
padding: 0.1rem 0.3rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.progress-btn {
|
||||
padding: 0.1rem 0.3rem;
|
||||
&:disabled {
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.table-responsive {
|
||||
background-color: $primary;
|
||||
}
|
||||
|
||||
.table {
|
||||
--bs-table-bg: $primary;
|
||||
|
||||
// mainly to fill td for image not found
|
||||
td img {
|
||||
background-color: $bg-img-none;
|
||||
}
|
||||
|
||||
th {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.nostretch {
|
||||
width: 1%; // set width of image td to the minimum
|
||||
}
|
||||
|
||||
.media-title {
|
||||
text-align: left;
|
||||
max-width: 30svw; // auto adjust width of title
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--bs-body-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
// login/register page
|
||||
.entry-wrapper {
|
||||
height: 100svh;
|
||||
.form-signin {
|
||||
max-width: 330px;
|
||||
padding: 1rem;
|
||||
|
||||
.first-input {
|
||||
margin-bottom: -1px;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.middle-input {
|
||||
margin-bottom: -1px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.last-input {
|
||||
margin-bottom: 10px;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// messages list
|
||||
ul {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
|
||||
gap: 1em;
|
||||
|
||||
form.grid-item {
|
||||
text-align: center;
|
||||
|
||||
.form-title {
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 0r.5em;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.details-top {
|
||||
.poster {
|
||||
border-radius: 5px;
|
||||
width: 14rem;
|
||||
aspect-ratio: 2/3;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.image-not-found {
|
||||
border-radius: 5px;
|
||||
width: 14rem;
|
||||
object-fit: contain;
|
||||
aspect-ratio: 2/3;
|
||||
background-color: $bg-img-none;
|
||||
}
|
||||
}
|
||||
|
||||
.details-data {
|
||||
margin-left: 1rem;
|
||||
// link to main details from season details
|
||||
a {
|
||||
color: var(--bs-body-color);
|
||||
}
|
||||
|
||||
.synopsis {
|
||||
// show only 4 lines of text
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
|
||||
.episode-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.episode-img-none {
|
||||
background-image: url(https://www.themoviedb.org/assets/2/v4/glyphicons/basic/glyphicons-basic-38-picture-grey-c2ebdbb057f2a7614185931650f8cee23fa137b93812ccb132b9df511df1cfac.svg);
|
||||
background-color: $bg-img-none;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
height: 170px; // aprox height of episode-img
|
||||
}
|
||||
|
||||
.episode-title {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.episode-overview {
|
||||
// show only 2 lines of text
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.date-btn-group {
|
||||
.btn {
|
||||
border-color: #495057;
|
||||
|
||||
&:hover {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.no-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 75%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
///////////////
|
||||
// Variables //
|
||||
///////////////
|
||||
|
||||
// Colors
|
||||
$background: #1c1e1f;
|
||||
$primary: #212325;
|
||||
$secondary: #6c757d;
|
||||
$accent: #758fa3;
|
||||
$bg-img-none: #2c3032;
|
||||
$white: #fff;
|
||||
$black: #000;
|
||||
|
||||
|
||||
////////////
|
||||
// Alerts //
|
||||
////////////
|
||||
|
||||
// bootstrap alert CSS, translated to the django-standard levels of
|
||||
// debug, info, success, warning, error
|
||||
|
||||
.alert-error {
|
||||
background-color: #2c0b0e;
|
||||
border-color: #842029;
|
||||
color: #ea868f;
|
||||
}
|
||||
388
src/static/css/main.css
Normal file
388
src/static/css/main.css
Normal file
@@ -0,0 +1,388 @@
|
||||
/* roboto-300 - latin */
|
||||
@font-face {
|
||||
font-display: swap;
|
||||
/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
||||
font-family: "Roboto";
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: url("../fonts/roboto-v30-latin-300.woff2") format("woff2");
|
||||
/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||
}
|
||||
|
||||
/* roboto-regular - latin */
|
||||
@font-face {
|
||||
font-display: swap;
|
||||
/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
||||
font-family: "Roboto";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url("../fonts/roboto-v30-latin-regular.woff2") format("woff2");
|
||||
/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||
}
|
||||
|
||||
/* roboto-700 - latin */
|
||||
@font-face {
|
||||
font-display: swap;
|
||||
/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
||||
font-family: "Roboto";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: url("../fonts/roboto-v30-latin-700.woff2") format("woff2");
|
||||
/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||
}
|
||||
|
||||
/* roboto-900 - latin */
|
||||
@font-face {
|
||||
font-display: swap;
|
||||
/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
||||
font-family: "Roboto";
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
src: url("../fonts/roboto-v30-latin-900.woff2") format("woff2");
|
||||
/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||
}
|
||||
|
||||
:root {
|
||||
--background: #1c1e1f;
|
||||
--primary: #212325;
|
||||
--secondary: #6c757d;
|
||||
--accent: #758fa3;
|
||||
--bg-img-none: #2c3032;
|
||||
--white: #fff;
|
||||
--black: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background);
|
||||
font-family: "Roboto", sans-serif;
|
||||
}
|
||||
|
||||
main {
|
||||
height: 100svh;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
/* hide lazyload img until loaded */
|
||||
img.lazyload:not([src]) {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/* bootstrap alert CSS, translated to the django-standard levels of
|
||||
debug, info, success, warning, error */
|
||||
|
||||
.alert-error {
|
||||
background-color: #2c0b0e;
|
||||
border-color: #842029;
|
||||
color: #ea868f;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 230px;
|
||||
|
||||
/* override bootstrap sidebar bg */
|
||||
background-color: var(--primary) !important;
|
||||
|
||||
/* override bootstrap offcanvas width */
|
||||
&.offcanvas-lg {
|
||||
--bs-offcanvas-width: 75% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-pills {
|
||||
.nav-link.active {
|
||||
background-color: var(--secondary);
|
||||
}
|
||||
|
||||
.nav-link:not(.active) {
|
||||
color: hsl(0, 0%, 85%);
|
||||
|
||||
&:hover {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
color: hsl(0, 0%, 85%);
|
||||
|
||||
&:hover {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
@media screen and (min-width: 992px) {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.form-select {
|
||||
/* adjust width of select in search-bar */
|
||||
flex-grow: 0;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-gap: 0.5rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.poster {
|
||||
width: 100%;
|
||||
aspect-ratio: 2/3;
|
||||
object-fit: cover;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.image-not-found {
|
||||
width: 100%;
|
||||
aspect-ratio: 2/3;
|
||||
object-fit: contain;
|
||||
object-position: center top;
|
||||
background-color: var(--bg-img-none);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.card-img-overlay {
|
||||
/* position bottom of card */
|
||||
top: auto;
|
||||
padding: 0.5em;
|
||||
border-top-left-radius: 0px;
|
||||
border-top-right-radius: 0px;
|
||||
background-color: rgba(0, 0, 0, 0.692);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
margin-bottom: 0;
|
||||
/* show only 2 lines of text */
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.card-text {
|
||||
font-size: 0.85rem;
|
||||
|
||||
.open-track-btn {
|
||||
padding: 0.1rem 0.3rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.progress-btn {
|
||||
padding: 0.1rem 0.3rem;
|
||||
|
||||
&:disabled {
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.table-responsive {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
.table {
|
||||
--bs-table-bg: var(--primary);
|
||||
|
||||
/* mainly to fill td for image not found */
|
||||
td img {
|
||||
background-color: var(--bg-img-none);
|
||||
}
|
||||
|
||||
th {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.nostretch {
|
||||
/* set width of image td to the minimum */
|
||||
width: 1%;
|
||||
}
|
||||
|
||||
.media-title {
|
||||
text-align: left;
|
||||
/* auto adjust width of title */
|
||||
max-width: 30svw;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--bs-body-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* login/register page */
|
||||
.entry-wrapper {
|
||||
height: 100svh;
|
||||
|
||||
/* messages list */
|
||||
ul {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.form-signin {
|
||||
max-width: 330px;
|
||||
padding: 1rem;
|
||||
|
||||
.first-input {
|
||||
margin-bottom: -1px;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.middle-input {
|
||||
margin-bottom: -1px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.last-input {
|
||||
margin-bottom: 10px;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
|
||||
gap: 1em;
|
||||
|
||||
form.grid-item {
|
||||
text-align: center;
|
||||
|
||||
.form-title {
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 0r.5em;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.details-top {
|
||||
.poster {
|
||||
border-radius: 5px;
|
||||
width: 14rem;
|
||||
aspect-ratio: 2/3;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.image-not-found {
|
||||
border-radius: 5px;
|
||||
width: 14rem;
|
||||
object-fit: contain;
|
||||
aspect-ratio: 2/3;
|
||||
background-color: var(--bg-img-none);
|
||||
}
|
||||
|
||||
/* xs */
|
||||
@media screen and (max-width: 575px) {
|
||||
/* wrap content under image */
|
||||
flex-wrap: wrap;
|
||||
/* center image */
|
||||
justify-content: center;
|
||||
|
||||
.image {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.details-data {
|
||||
margin-left: 1rem;
|
||||
|
||||
/* link to main details from season details */
|
||||
a {
|
||||
color: var(--bs-body-color);
|
||||
}
|
||||
|
||||
.synopsis {
|
||||
/* show only 3 lines of text */
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
/* xs */
|
||||
@media screen and (max-width: 575px) {
|
||||
margin-left: 0;
|
||||
|
||||
/* only present in season_details */
|
||||
.tv-title {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.episode-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.episode-img-none {
|
||||
background-image: url(https://www.themoviedb.org/assets/2/v4/glyphicons/basic/glyphicons-basic-38-picture-grey-c2ebdbb057f2a7614185931650f8cee23fa137b93812ccb132b9df511df1cfac.svg);
|
||||
background-color: var(--bg-img-none);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
/* aprox height of episode-img */
|
||||
height: 170px;
|
||||
}
|
||||
|
||||
.episode-title {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.episode-overview {
|
||||
/* show only 2 lines of text */
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.date-btn-group {
|
||||
.btn {
|
||||
border-color: #495057;
|
||||
|
||||
&:hover {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.no-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 75%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
@@ -1,54 +0,0 @@
|
||||
@import "fonts";
|
||||
@import "variables";
|
||||
@import "general";
|
||||
@import "structure";
|
||||
|
||||
|
||||
@media screen and (min-width: 992px) {
|
||||
.search-bar {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// xs
|
||||
@media screen and (max-width: 575px) {
|
||||
.details-top {
|
||||
// wrap content under image
|
||||
flex-wrap: wrap;
|
||||
// center image
|
||||
justify-content: center;
|
||||
.image {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.details-data {
|
||||
margin-left: 0;
|
||||
|
||||
// only present in season_details
|
||||
.tv-title{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.buttons-group {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
.btn-secondary {
|
||||
border-radius: 0;
|
||||
}
|
||||
.btn-danger {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -19,7 +19,7 @@
|
||||
<strong>{{ key|totitle }}:</strong> {{ value }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
<div class="mt-auto">
|
||||
<div class="mt-sm-auto mt-3">
|
||||
{% include "app/components/open_track_form.html" with request=request media_type=media.media_type media_id=media.media_id title=media.title only %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<div class="details-top d-flex">
|
||||
<div class="image">
|
||||
<img src="{{ season.image }}"
|
||||
class="{% if season.image != IMG_NONE %} poster {% else %} image-not-found {% endif %}"
|
||||
class="{% if season.image != IMG_NONE %}poster{% else %}image-not-found{% endif %}"
|
||||
alt="{{ season.name }}" />
|
||||
</div>
|
||||
<div class="details-data d-flex flex-column align-items-start">
|
||||
@@ -24,7 +24,7 @@
|
||||
<strong>{{ key|totitle }}:</strong> {{ value }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
<div class="mt-auto">
|
||||
<div class="mt-sm-auto mt-3">
|
||||
{% include "app/components/open_track_form.html" with request=request media_type="season" media_id=tv.media_id season_number=season.season_number title=tv.title|capfirst only %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
{% load static %}
|
||||
{% load sass_tags %}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" data-bs-theme="dark">
|
||||
<head>
|
||||
@@ -11,7 +10,7 @@
|
||||
<!-- Bootstrap CSS -->
|
||||
<link rel="stylesheet" type="text/css" href="{% static "css/bootstrap.min.css" %}" />
|
||||
<link rel="stylesheet" type="text/css" href="{% static "css/bootstrap-icons.css" %}" />
|
||||
<link rel="stylesheet" type="text/css" href="{% sass_src "css/main.scss" %}" />
|
||||
<link rel="stylesheet" type="text/css" href="{% static "css/main.css" %}" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="{% static "favicon/apple-touch-icon.png" %}">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="{% static "favicon/favicon-32x32.png" %}">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="{% static "favicon/favicon-16x16.png" %}">
|
||||
@@ -83,12 +82,10 @@
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<form class="logout-form nav-link"
|
||||
method="post"
|
||||
action="{% url 'logout' %}">
|
||||
<form class="nav-link" method="post" action="{% url 'logout' %}">
|
||||
{% csrf_token %}
|
||||
<i class="bi bi-box-arrow-left me-2"></i>
|
||||
<button type="submit">Logout</button>
|
||||
<button class="logout-btn" type="submit">Logout</button>
|
||||
</form>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
Reference in New Issue
Block a user