Show - Index Page, CSS
This commit is contained in:
parent
82f2e3dc83
commit
5e0aa075d1
12
.editorconfig
Normal file
12
.editorconfig
Normal file
@ -0,0 +1,12 @@
|
||||
# top-most EditorConfig file
|
||||
root = true
|
||||
|
||||
# Unix-style newlines with a newline ending every file
|
||||
[*]
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
|
||||
[*.py]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 4
|
@ -20,5 +20,6 @@ from django.conf.urls.static import static
|
||||
|
||||
urlpatterns = [
|
||||
url(r'^admin/', admin.site.urls),
|
||||
url(r'^show/(?P<abbreviation>\w{1,5})/', include('Show.urls')),
|
||||
url(r'^', include('LandingPage.urls'))
|
||||
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
|
||||
|
@ -59,6 +59,72 @@ body {
|
||||
width: 20%;
|
||||
float: right;
|
||||
}
|
||||
section.show-details {
|
||||
position: relative;
|
||||
}
|
||||
.show-details .banner {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
filter: blur(4px);
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
z-index: -1;
|
||||
}
|
||||
.show-details .banner-cover {
|
||||
overflow: auto;
|
||||
}
|
||||
.show-details .artwork {
|
||||
width: 182px;
|
||||
margin: 15px;
|
||||
float: left;
|
||||
}
|
||||
.show-details .details {
|
||||
margin-left: 220px;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 10px;
|
||||
display: block;
|
||||
min-height: 260px;
|
||||
overflow: hidden;
|
||||
font-size: 150%;
|
||||
background-color: #dadada38;
|
||||
padding: 10px;
|
||||
}
|
||||
.show-details .details h1 {
|
||||
margin: 0;
|
||||
font-size: 200%;
|
||||
}
|
||||
.show-details .details .description {
|
||||
display: inline-grid;
|
||||
width: 80%;
|
||||
}
|
||||
.show-details .details .data {
|
||||
display: inline-grid;
|
||||
text-align: right;
|
||||
}
|
||||
.show-details .stats .param {
|
||||
color: #a2a2a2;
|
||||
}
|
||||
section.seasons {
|
||||
min-height: 100vh;
|
||||
padding: 25px;
|
||||
}
|
||||
.season-name {
|
||||
padding: 6px;
|
||||
font-size: 180%;
|
||||
background-color: #e8e8e8;
|
||||
}
|
||||
a.episode {
|
||||
padding: 10px;
|
||||
display: block;
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
a.episode:nth-child(even) {
|
||||
background-color: #fbfbfb;
|
||||
}
|
||||
@media all and (max-width: 800px) {
|
||||
.logo {
|
||||
font-size: 5vw !important;
|
||||
|
40
Show/templates/show.html
Normal file
40
Show/templates/show.html
Normal file
@ -0,0 +1,40 @@
|
||||
{% extends "base.html" %}
|
||||
{% block content %}
|
||||
<section class="show-details">
|
||||
<div class="banner" style="background-image: url(/media/uploaded_resources/{{show.banner}});"></div>
|
||||
<div class="banner-cover">
|
||||
<div class="artwork">
|
||||
<img src="/media/uploaded_resources/{{show.artwork}}">
|
||||
</div>
|
||||
<div class="details">
|
||||
<h1>{{show.name}}</h1>
|
||||
<p class="description">
|
||||
{{show.description}}
|
||||
</p>
|
||||
<!--<div class="data">
|
||||
<a class="imdb" href="{{show.imdb}}" target="_blank">IMDb Page</a>
|
||||
<div class="stats">
|
||||
<div class="param">Seasons</div>
|
||||
<div class="value">{{seasons|length}}</div>
|
||||
<div class="param">Episodes</div>
|
||||
<div class="value">{{episodes|length}}</div>
|
||||
</div>
|
||||
</div>-->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="seasons">
|
||||
{% for season in seasons %}
|
||||
<div class="season" data-season="{{season.number}}">
|
||||
<div class="season-name">{% if season.name %}{{season.number}} - {{season.name}}{% else %}Season {{season.number}}{%endif%}</div>
|
||||
<div class="episodes">
|
||||
{% for episode in episodes %}
|
||||
{% if episode.season == season %}
|
||||
<a class="episode" data-season="{{season.number}}" data-number="{{episode.episode}}" data-title="{{episode.name}}" href="episode/{{season.number}}/{{episode.episode}}">{{episode.episode}} - {{episode.name}}</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</section>
|
||||
{% endblock %}
|
23
Show/urls.py
Normal file
23
Show/urls.py
Normal file
@ -0,0 +1,23 @@
|
||||
"""Show URL Configuration
|
||||
|
||||
The `urlpatterns` list routes URLs to views. For more information please see:
|
||||
https://docs.djangoproject.com/en/1.11/topics/http/urls/
|
||||
Examples:
|
||||
Function views
|
||||
1. Add an import: from my_app import views
|
||||
2. Add a URL to urlpatterns: url(r'^$', views.home, name='home')
|
||||
Class-based views
|
||||
1. Add an import: from other_app.views import Home
|
||||
2. Add a URL to urlpatterns: url(r'^$', Home.as_view(), name='home')
|
||||
Including another URLconf
|
||||
1. Import the include() function: from django.conf.urls import url, include
|
||||
2. Add a URL to urlpatterns: url(r'^blog/', include('blog.urls'))
|
||||
"""
|
||||
|
||||
from django.conf import settings
|
||||
from django.conf.urls import url, include
|
||||
from . import views
|
||||
|
||||
urlpatterns = [
|
||||
url(r'^', views.Index.as_view())
|
||||
]
|
@ -1,3 +1,23 @@
|
||||
from django.shortcuts import render
|
||||
from django.shortcuts import render
|
||||
from django.views import View
|
||||
from django.views.generic.base import TemplateView
|
||||
from django.conf import settings
|
||||
from django.http import HttpResponse
|
||||
from django.http import HttpResponseRedirect
|
||||
|
||||
from LandingPage.models import Show
|
||||
from LandingPage.models import Season
|
||||
from LandingPage.models import Episode
|
||||
|
||||
# Create your views here.
|
||||
|
||||
class Index (TemplateView):
|
||||
template_name = "show.html"
|
||||
|
||||
def get_context_data(self, abbreviation, **kwargs):
|
||||
ctx = super().get_context_data()
|
||||
ctx['show'] = Show.objects.filter(abbr=abbreviation).first()
|
||||
ctx['seasons'] = Season.objects.filter(show=ctx['show'])
|
||||
ctx['episodes'] = Episode.objects.filter(show=ctx['show'])
|
||||
return ctx
|
||||
|
Reference in New Issue
Block a user