From c9350f357d31c4013c5a850e8c7e6422c572fb09 Mon Sep 17 00:00:00 2001 From: Evert Date: Tue, 27 Feb 2018 19:49:45 +0200 Subject: [PATCH 1/2] Implement bootstrap, redesign some elements --- EpisodesCommunity/settings.py | 1 + LandingPage/static/css/footer.css | 91 ------------ LandingPage/static/css/style.css | 180 ++++++++--------------- LandingPage/templates/base.html | 50 +++++-- LandingPage/templates/footer.html | 31 ++++ LandingPage/templates/form.html | 21 +++ LandingPage/templates/landing_page.html | 35 ++--- Show/templates/create_ban.html | 38 ++--- Show/templates/episode.html | 86 ++++++----- Show/templates/episode_add.html | 27 ++-- Show/templates/partials/show_banner.html | 14 ++ Show/templates/report.html | 40 +++-- Show/templates/season_add.html | 36 ++--- Show/templates/show.html | 68 ++++----- Show/templates/submit.html | 29 ++-- Show/templates/submit_mod.html | 35 +++-- requirements.txt | 1 + 17 files changed, 365 insertions(+), 418 deletions(-) delete mode 100644 LandingPage/static/css/footer.css create mode 100644 LandingPage/templates/footer.html create mode 100644 LandingPage/templates/form.html create mode 100644 Show/templates/partials/show_banner.html diff --git a/EpisodesCommunity/settings.py b/EpisodesCommunity/settings.py index fd08adc..a78521c 100644 --- a/EpisodesCommunity/settings.py +++ b/EpisodesCommunity/settings.py @@ -77,6 +77,7 @@ INSTALLED_APPS = [ 'django.contrib.messages', 'django.contrib.staticfiles', 'guardian', + 'widget_tweaks' ] MIDDLEWARE = [ diff --git a/LandingPage/static/css/footer.css b/LandingPage/static/css/footer.css deleted file mode 100644 index e50612e..0000000 --- a/LandingPage/static/css/footer.css +++ /dev/null @@ -1,91 +0,0 @@ -footer { - padding: 20px; - background: #e9f6fd; - background: -moz-linear-gradient(top, #e9f6fd 0%, #d3eefb 100%); - background: -webkit-linear-gradient(top, #e9f6fd 0%, #d3eefb 100%); - background: linear-gradient(to bottom, #e9f6fd 0%, #d3eefb 100%); - border-top: 1px solid #ddd; - text-align: center; -} -footer .copyright { - display: inline-block; - text-align: center; - font-size: 90%; - vertical-align: top; - margin-top: 35px; - padding: 15px; - margin-left: 5vw; -} -footer .squeebot { - width: 200px; -} -footer .logo { - font-family: "Open Sans"; - font-weight: bold; - text-transform: uppercase; - text-shadow: 2px 2px 1px #007104; - color: #00b300; - letter-spacing: 5px; - user-select: none; - font-size: 30px; - text-align: inherit; - cursor: pointer; - display: inline-block; -} -footer .logo .part1, -footer .logo .part2 { - display: inline-block; -} -footer .logo .part1 { - color: #03a9f4; - text-shadow: 2px 2px 1px #0059a0; - margin-right: 5px; -} -footer .socialbtn { - width: 28px; - height: 28px; - display: inline-block; - line-height: 28px; - color: #fff; - font-size: 160%; - border-radius: 100px; - padding: 2px; - margin: 5px; -} -footer .socialbtn#github { - background-color: #000; -} -footer .socialbtn#twitter { - background-color: #03a9f4; -} -footer .socialbtn#discord { - background-color: #2c2f33; -} -footer .socialbtn#discord .discordlogo { - position: relative; - top: 3px; - background: url("https://icynet.eu/static/image/Discord-Logo-White.svg"); - width: 22px; - height: 22px; - display: inline-block; -} -footer .socialbtn i { - position: relative; - right: 1px; -} -footer span.divider { - color: #ddd; - margin: 0 5px; - cursor: default; -} -@media all and (max-width: 800px) { - footer .squeebot { - margin: 0; - width: 150px; - margin: auto; - display: block; - } - footer .copyright { - margin-left: 0; - } -} diff --git a/LandingPage/static/css/style.css b/LandingPage/static/css/style.css index b99f928..5294b35 100644 --- a/LandingPage/static/css/style.css +++ b/LandingPage/static/css/style.css @@ -1,63 +1,8 @@ body { background-color: #fff; - font-family: "Open Sans", Helvetica; margin: 0; padding: 0; } -.button, input[type="submit"], button { - display: inline-block; - padding: 5px 10px; - background-color: #fdfdfd; - border: 1px solid #ddd; - border-radius: 5px; - text-decoration: none; - color: #000; -} -.button.modbutton { - background-color: #ffe599; - border: 1px solid #a76300; - color: #945800; - font-weight: bold; -} -input[type="submit"] { - font-size: 120%; -} -label { - width: 200px; - display: block; -} -input[type=text], input[type=email], input[type=password], input[type=number], input[type=url] { - padding: 5px; - font-size: 120%; - width: 280px; - border-radius: 5px; - border: 1px solid #b3b3b3; - background-color: #ffffff; - box-shadow: inset 2px 2px 5px #ddd; -} -.helptext { - display: block; - margin-bottom: 10px; - font-style: italic; - font-size: 80%; - cursor: help; -} -.unibar { - padding: 20px; - border-bottom: 1px solid #ddd; - box-shadow: 2px 2px 5px #9c9c9c; -} -.unibar .logo { - font-size: 200%; -} -.unibar .userdata { - display: inline-block; - float: right; - padding: 12px; -} -.wrapper { - min-height: 100vh; -} .show-promo { display: inline-block; width: 200px; @@ -100,8 +45,9 @@ input[type=text], input[type=email], input[type=password], input[type=number], i width: 20%; float: right; } -section.show-details { - position: relative; +.show-details { + position: relative; + overflow: hidden; } .show-details .banner { position: absolute; @@ -117,14 +63,13 @@ section.show-details { } .show-details .artwork { width: 182px; - margin: 15px; - float: left; + position: relative; + -webkit-box-flex: 0; + -ms-flex: 0 0 190px; + flex: 0 0 190px; + max-width: 190px; } .show-details .details { - margin-left: 220px; - margin-right: 10px; - margin-bottom: 10px; - margin-top: 10px; display: block; min-height: 260px; overflow: hidden; @@ -132,45 +77,10 @@ section.show-details { background-color: #dadada38; padding: 10px; } -.show-details .details h1 { - margin: 0; - font-size: 200%; -} -.show-details .details.season h3 { - margin-top: 0; -} -.show-details .details .description { - width: 80%; -} section.seasons, section.submissions { 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; -} -a.episode .submission_cnt { - float: right; - color: #949494; -} -.submission-list .submission { - background-color: #f9f9f9; -} -.submission-list .submission:nth-child(even) { - background-color: #ececec; -} .submission { padding: 10px; } @@ -187,30 +97,10 @@ a.episode .submission_cnt { text-decoration: none; color: #191919; font-style: italic; - display: inline-block; - padding: 15px 0; + overflow: hidden; + word-break: break-all; } -.vote-btns { - float: right; -} -.vote-positive, .vote-negative, .sub-report { - padding: 10px; - display: inline-block; - min-width: 20px; - text-align: center; - border-radius: 5px; - font-weight: bold; - cursor: pointer; - text-decoration: none; -} -.vote-btns form { - display: inline-block; -} -.vote-positive { - background-color: #a4ffa7; - color: #008005; -} -.vote-negative, .sub-report { +.sub-report { background-color: #ffa6a6; color: #ab0000; } @@ -249,6 +139,54 @@ a.episode .submission_cnt { font-size: 90%; color: #6d6d6d; } +.btn-social { + width: 28px; + height: 28px; + display: block; + line-height: 28px; + color: #fff; + font-size: 120%; + border-radius: 100px; + padding: 0 2px; + margin: 5px; +} +.btn-social#github { + background-color: #000; +} +.btn-social#twitter { + background-color: #03a9f4; +} +.btn-social#discord { + background-color: #2c2f33; + padding: 3px; +} +.btn-social#discord span { + background: url("https://icynet.eu/static/image/discord.svg"); + background-size: contain; + width: 22px; + height: 22px; + display: block; +} +footer .logo { + font-weight: bold; + text-transform: uppercase; + text-shadow: 2px 2px 1px #007104; + color: #00b300; + user-select: none; + font-size: 30px; + text-align: inherit; + cursor: pointer; + display: inline-block; +} +footer .logo .part1, +footer .logo .part2 { + display: inline-block; +} +footer .logo .part1 { + color: #03a9f4; + text-shadow: 2px 2px 1px #0059a0; + margin-right: 5px; +} @media all and (max-width: 800px) { .logo { font-size: 5vw !important; diff --git a/LandingPage/templates/base.html b/LandingPage/templates/base.html index 8026219..4bd1f6e 100644 --- a/LandingPage/templates/base.html +++ b/LandingPage/templates/base.html @@ -2,10 +2,13 @@ - + + + + {% block meta %} @@ -17,23 +20,48 @@ {% block unibar %} -
- -
+
+ {% endblock %} -
{% block content %}{% endblock %} -
{% block footer %} - + {% include "footer.html" %} {% endblock %} diff --git a/LandingPage/templates/footer.html b/LandingPage/templates/footer.html new file mode 100644 index 0000000..fe7f4a5 --- /dev/null +++ b/LandingPage/templates/footer.html @@ -0,0 +1,31 @@ + diff --git a/LandingPage/templates/form.html b/LandingPage/templates/form.html new file mode 100644 index 0000000..5f94642 --- /dev/null +++ b/LandingPage/templates/form.html @@ -0,0 +1,21 @@ +{% load i18n widget_tweaks %} +{% csrf_token %} +{% for field in form %} + {% if field.errors %} +
+ + {{ field|attr:"class:form-control" }} + + {% for error in field.errors %}{{ error }}{% endfor %} + +
+ {% else %} +
+ + {{ field|attr:"class:form-control" }} + {% if field.help_text %} +

{{ field.help_text }}

+ {% endif %} +
+ {% endif %} +{% endfor %} diff --git a/LandingPage/templates/landing_page.html b/LandingPage/templates/landing_page.html index 172e3d9..933935e 100644 --- a/LandingPage/templates/landing_page.html +++ b/LandingPage/templates/landing_page.html @@ -1,29 +1,20 @@ {% extends "base.html" %} {% block content %} -
-
-
-

Donate

-
-

Donate to Icy Network to help us keep up our communities.

- Click Here to Donate -
-
-
- -
-
-

Welcome to Episodes.Community!

-
-

Episodes.Community is a platform for sharing, watching and discussing your favorite shows!

-

Currently hosting {{ stats.shows }} shows, {{ stats.episodes }} submissions and {{ stats.boards }} discussions

-
-
- -
+
+

Welcome to Episodes.Community!

+

Episodes.Community is a platform for sharing, watching and discussing your favourite shows!

+
+

Currently hosting {{ stats.shows }} shows, {{ stats.episodes }} submissions and {{ stats.boards }} discussions.

+

+ Browse Shows +

+
+
+
+

Latest releases

-
{% if not recent %} Nothing to show {% endif %} +
{% for show in recent %} diff --git a/Show/templates/create_ban.html b/Show/templates/create_ban.html index 3ec4a4e..dfdb19e 100644 --- a/Show/templates/create_ban.html +++ b/Show/templates/create_ban.html @@ -3,33 +3,25 @@ Ban an user from {{show.name}} - Episodes.Community {% endblock %} {% block content %} -
- - -
-
-  Show Index +{% include "partials/show_banner.html" %} +
+

Ban an User

{% if error %} -
{{error}}
+
{{error}}
{% endif %} -
- {% csrf_token %} +

Banning user {{ target.display_name }}

- {{ form }} - - + {% include "form.html" %} +
+ + +
-
{% endblock %} diff --git a/Show/templates/episode.html b/Show/templates/episode.html index ab87936..9a9d551 100644 --- a/Show/templates/episode.html +++ b/Show/templates/episode.html @@ -18,7 +18,7 @@ {% get_obj_perms request.user for show as "show_perms" %}
-
-
-  Show Index - {% if user.is_authenticated %} - {% if "can_moderate_show" in show_perms %} -  Add New Link - {% else %} -  Submit New Link - {% endif %} - {% else %} - Log in to submit a link - {% endif %} +
+ +

Watch {{episode.name}} From

{% for sbm in submissions %} -
- - {% if sbm.pinned %}{% endif %} - {% if sbm.title %} - {{sbm.title}} - {% else %} -  {{sbm.url}} - {% endif %} - -
-
- {% csrf_token %} - -
-
- {% csrf_token %} - -
+
+
+
+ + {% if sbm.pinned %}{% endif %} + {% if sbm.title %} + {{sbm.title}} + {% else %} +  {{sbm.url}} + {% endif %} + +
+
+
+
+ {% csrf_token %} + +
+
+ {% csrf_token %} + +
+
+
{% get_obj_perms sbm.user for show as "publisher_perms" %} @@ -100,5 +103,16 @@

Nobody has submitted any links yet.

{% endfor %}
+
+ {% if user.is_authenticated %} + {% if "can_moderate_show" in show_perms %} +  Add New Link + {% else %} +  Submit New Link + {% endif %} + {% else %} + Log in to submit a link + {% endif %} +
{% endblock %} diff --git a/Show/templates/episode_add.html b/Show/templates/episode_add.html index 2c4eed7..0c5dac9 100644 --- a/Show/templates/episode_add.html +++ b/Show/templates/episode_add.html @@ -5,7 +5,7 @@ {% block content %}
-
-
-  Show Index +
+

Add an Episode

{% if error %} -
{{error}}
+
{{error}}
{% endif %} -
- {% csrf_token %} - {{ form }} - + + {% include "form.html" %} +
+ +
-
{% endblock %} diff --git a/Show/templates/partials/show_banner.html b/Show/templates/partials/show_banner.html new file mode 100644 index 0000000..847a28f --- /dev/null +++ b/Show/templates/partials/show_banner.html @@ -0,0 +1,14 @@ +
+ + +
diff --git a/Show/templates/report.html b/Show/templates/report.html index 5799e63..394d43b 100644 --- a/Show/templates/report.html +++ b/Show/templates/report.html @@ -5,7 +5,7 @@ {% block content %}
-
-
-  Show Index - Back to Episode +
+

Report a Submission

{% if error %} -
{{error}}
+
{{error}}
{% endif %}
-
- Submission by {{ submission.user.display_name }} - URL: {{ submission.url }} +
+
Submission by {{ submission.user.display_name }}
+
{{ submission.url }}
{% if submission.user.is_staff %} -
Warning
This submission is made by a staff member.
Unnecessary reporters will be banned.
- {% endif %} +
+ Warning +

This submission is made by a staff member. Unnecessary reporters will be banned.

+
+ {% endif %} +
+ {% include "form.html" %} +
+
- {% csrf_token %} - {{ form }} - -
{% endblock %} diff --git a/Show/templates/season_add.html b/Show/templates/season_add.html index e907841..f7e250e 100644 --- a/Show/templates/season_add.html +++ b/Show/templates/season_add.html @@ -3,31 +3,23 @@ Add a season - {{show.name}} - Episodes.Community {% endblock %} {% block content %} -
- - -
-
-  Show Index +{% include "partials/show_banner.html" %} +
+

Add a Season

{% if error %} -
{{error}}
+
{{error}}
{% endif %} -
- {% csrf_token %} - {{ form }} - + + {% include "form.html" %} +
+ +
-
{% endblock %} diff --git a/Show/templates/show.html b/Show/templates/show.html index e5b3dfb..03d484a 100644 --- a/Show/templates/show.html +++ b/Show/templates/show.html @@ -14,50 +14,42 @@ {% block content %} {% load guardian_tags %} {% get_obj_perms request.user for show as "show_perms" %} -
- - -
-
- {% if "can_moderate_show" in show_perms %} -  Add a Season - {% endif %} -

Watch Now

+{% include "partials/show_banner.html" %} +
+ {% for season in seasons %} -
- {% if "can_moderate_show" in show_perms %} -
- -
- {% endif %} -
{% if season.name %}{{season.number}} - {{season.name}}{% else %}Season {{season.number}}{%endif%}
+
+
+

{% if season.name %}{{season.number}} - {{season.name}}{% else %}Season {{season.number}}{%endif%}

+
+
{% for episode in season.episodes.all %} - {{episode.episode}} - {{episode.name}} - {{episode.submissions.all|length}} Available Links - +
+
+

+ {{episode.episode}} - {{episode.name}} +

+
+
{% endfor %}
+ {% if "can_moderate_show" in show_perms %} +
+ +
+ {% endif %} +
{% endfor %} + {% if "can_moderate_show" in show_perms %} +
+  Add a Season +
+ {% endif %}
{% endblock %} diff --git a/Show/templates/submit.html b/Show/templates/submit.html index 1a835f9..6c01cda 100644 --- a/Show/templates/submit.html +++ b/Show/templates/submit.html @@ -5,7 +5,7 @@ {% block content %}
-
-
-  Show Index - Back to Episode +
+

Submit a link

{% if error %} -
{{error}}
+
{{error}}
{% endif %} -
- {% csrf_token %} - {{ form }} - + + {% include "form.html" %} +
+ +
-
{% endblock %} diff --git a/Show/templates/submit_mod.html b/Show/templates/submit_mod.html index d3ffc83..4ed99f0 100644 --- a/Show/templates/submit_mod.html +++ b/Show/templates/submit_mod.html @@ -5,7 +5,7 @@ {% block content %}
-
-
+
{% load guardian_tags %} {% get_obj_perms request.user for show as "show_perms" %} -  Show Index - Back to Episode +

Submission

{% if error %}
{{error}}
{% endif %} -
- {% csrf_token %} - {{ form }} - - - {% if "can_create_show_ban" in show_perms %} - - {% endif %} + + {% include "form.html" %} +
+ + + {% if "can_create_show_ban" in show_perms %} + + {% endif %} +
-
{% endblock %} diff --git a/requirements.txt b/requirements.txt index 71ad7c5..ea18de1 100644 --- a/requirements.txt +++ b/requirements.txt @@ -3,3 +3,4 @@ Pillow==4.2.1 dj-database-url==0.4.2 requests==2.18.4 django-guardian==1.4.9 +django-widget-tweaks==1.4.1 From 25b37d6f45102961d6b0e19aefad3330674d698a Mon Sep 17 00:00:00 2001 From: Evert Date: Tue, 27 Feb 2018 20:14:28 +0200 Subject: [PATCH 2/2] Add a page with full list of shows --- LandingPage/templates/shows.html | 16 ++++++++++++++++ LandingPage/urls.py | 1 + LandingPage/views.py | 8 +++++++- 3 files changed, 24 insertions(+), 1 deletion(-) create mode 100644 LandingPage/templates/shows.html diff --git a/LandingPage/templates/shows.html b/LandingPage/templates/shows.html new file mode 100644 index 0000000..969774e --- /dev/null +++ b/LandingPage/templates/shows.html @@ -0,0 +1,16 @@ +{% extends "base.html" %} +{% block content %} +
+

Show Index

+
+ {% for show in shows %} +
+ {{show.name}} +
+ {% if forloop.counter|divisibleby:3 %} +
+ {% endif %} + {% endfor %} +
+
+{% endblock %} diff --git a/LandingPage/urls.py b/LandingPage/urls.py index 4a601a3..fcced34 100644 --- a/LandingPage/urls.py +++ b/LandingPage/urls.py @@ -22,6 +22,7 @@ urlpatterns = [ url(r'^logout/$', views.LogoutView), url(r'^login/redirect$', views.LoginRedirect.as_view()), url(r'^login$', views.Login.as_view()), + url(r'^shows/$', views.Shows.as_view()), url(r'^$', views.LandingPage.as_view()), ] diff --git a/LandingPage/views.py b/LandingPage/views.py index fd54be4..946f09b 100644 --- a/LandingPage/views.py +++ b/LandingPage/views.py @@ -92,5 +92,11 @@ class LandingPage(TemplateView): 'boards': DiscussionBoard.objects.count() } return ctx - +class Shows(TemplateView): + template_name = "shows.html" + + def get_context_data(self, **kwargs): + ctx = super().get_context_data() + ctx['shows'] = Show.objects.all() + return ctx