Commit 393f2689 authored by Evert Prants's avatar Evert Prants Committed by GitHub

Merge pull request #62 from IcyNet/bootstrap

Bootstrap
parents e8e4433b 25b37d6f
......@@ -77,6 +77,7 @@ INSTALLED_APPS = [
'django.contrib.messages',
'django.contrib.staticfiles',
'guardian',
'widget_tweaks'
]
MIDDLEWARE = [
......
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;
}
}
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;
}
.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;
overflow: hidden;
word-break: break-all;
}
.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;
......
......@@ -2,10 +2,13 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel='stylesheet' type='text/css' href='{% static 'css/style.css' %}'>
<link rel='stylesheet' type='text/css' href='{% static 'css/footer.css' %}'>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<meta charset="utf-8">
{% block meta %}
<meta name="description" content="Episodes.Community - Share, Discuss and Watch your Favourite Shows">
......@@ -17,23 +20,48 @@
</head>
<body>
{% block unibar %}
<div class="unibar">
<span class="logo">Episodes<span class="period">.</span>Community</span>
<div class="userdata">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="/">Episodes.Community</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/shows/">Shows</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/community">Community</a>
</li>
</ul>
<ul class="navbar-nav my-2 my-lg-0">
{% if user.is_authenticated %}
{% if user.is_staff %}<a class="mod" href="/admin"><i class="fa fa-fw fa-shield"></a></i>{% endif %}
{{ user.display_name }}
{% if user.is_staff %}
<li class="nav-item">
<a class="nav-link" href="/admin">
<i class="fa fa-fw fa-shield"></i>
Admin
</a>
</li>
{% endif %}
<li class="nav-item">
<a class="nav-link" href="/community/user/{{user.pk}}-{{user.display_name|slugify}}">{{ user.display_name }}</a>
</li>
{% else %}
<a href="/login">Log in</a>
<li class="nav-item">
<a class="nav-link" href="/login">Log in</a>
</li>
{% endif %}
</ul>
</div>
</div>
</nav>
{% endblock %}
<div class="wrapper">
{% block content %}{% endblock %}
</div>
{% block footer %}
<footer class="icy"><img class="squeebot" src="https://icynet.eu/static/image/squeebot.svg"><span class="copyright"><a href="https://icynet.eu" target="_blank"><div class="logo small"><div class="part1">Icy</div><div class="part2">Network</div></div></a><div class="social"><a class="socialbtn" id="github" href="https://github.com/IcyNet/" target="_blank"><i class="fa fa-fw fa-github"></i></a><a class="socialbtn" id="twitter" href="https://twitter.com/IcyNet" target="_blank"><i class="fa fa-fw fa-twitter"></i></a><a class="socialbtn" id="discord" href="https://discord.gg/Xe7MKSx" target="_blank"><span class="discordlogo"></span></a></div><span>© 2017 - Icy Network - Some Rights Reserved</span><br><span> <a href="https://icynet.eu/docs/terms-of-service">Terms of Service</a><span class="divider">|</span><a href="https://icynet.eu/docs/privacy-policy">Privacy Policy</a><span class="divider">|</span><a href="https://icynet.eu/donate">Donate</a></span></span></footer>
{% include "footer.html" %}
{% endblock %}
</body>
</html>
<footer class="container mb-4">
<div class="row">
<div class="col">
<a href="https://icynet.eu" target="_blank">
<div class="logo small">
<div class="part1">Icy</div>
<div class="part2">Network</div>
</div>
</a>
</div>
<div class="col">
<span class="float-sm-right ml-4">
<a class="align-middle" href="https://icynet.eu/docs/terms-of-service">Terms</a> ·
<a class="align-middle" href="https://icynet.eu/docs/privacy-policy">Privacy</a> ·
<a class="align-middle" href="https://icynet.eu/donate">Donate</a>
</div>
</div>
<div class="row">
<div class="col d-flex justify-content-center">
<a class="btn-social" id="github" href="https://github.com/IcyNet/" target="_blank">
<i class="fa fa-fw fa-github"></i>
</a>
<a class="btn-social" id="twitter" href="https://twitter.com/IcyNet" target="_blank">
<i class="fa fa-fw fa-twitter"></i>
</a>
<a class="btn-social" id="discord" href="https://discord.gg/Xe7MKSx" target="_blank">
<span></span>
</a>
</div>
</div>
</footer>
{% load i18n widget_tweaks %}
{% csrf_token %}
{% for field in form %}
{% if field.errors %}
<div class="form-group has-error">
<label class="control-label" for="id_{{ field.name }}">{{ field.label }}</label>
{{ field|attr:"class:form-control" }}
<span class="help-block">
{% for error in field.errors %}{{ error }}{% endfor %}
</span>
</div>
{% else %}
<div class="form-group">
<label class="control-label" for="id_{{ field.name }}">{{ field.label }}</label>
{{ field|attr:"class:form-control" }}
{% if field.help_text %}
<p class="help-block"><small>{{ field.help_text }}</small></p>
{% endif %}
</div>
{% endif %}
{% endfor %}
{% extends "base.html" %}
{% block content %}
<div class="blocklayout columns">
<div class="column smaller">
<div class="block">
<h1>Donate</h1>
<div class="content">
<p>Donate to Icy Network to help us keep up our communities.</p>
<a href="https://icynet.eu/donate">Click Here to Donate</a>
</div>
</div>
</div>
<div class="column primary">
<div class="block">
<h1>Welcome to Episodes.Community!</h1>
<div class="content">
<p>Episodes.Community is a platform for sharing, watching and discussing your favorite shows!</p>
<p>Currently hosting {{ stats.shows }} shows, {{ stats.episodes }} submissions and {{ stats.boards }} discussions</p>
</div>
</div>
<div class="block">
<div class="jumbotron">
<h1 class="display-4">Welcome to Episodes.Community!</h1>
<p class="lead">Episodes.Community is a platform for sharing, watching and discussing your favourite shows!</p>
<hr class="my-4">
<p>Currently hosting {{ stats.shows }} shows, {{ stats.episodes }} submissions and {{ stats.boards }} discussions.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="/shows/" role="button">Browse Shows</a>
</p>
</div>
<div class="container mt-4 mb-4">
<div class="row">
<div class="col">
<h1>Latest releases</h1>
<div class="content">
{% if not recent %} Nothing to show {% endif %}
<div class="text-center">
{% for show in recent %}
<a class="show-promo" href="/show/{{show.abbr}}">
<img class="artwork" src="/media/uploaded_resources/{{show.artwork}}">
......
{% extends "base.html" %}
{% block content %}
<div class="container mt-4 mb-4">
<h1>Show Index</h1>
<div class="row">
{% for show in shows %}
<div class="col">
<a href="/show/{{show.abbr}}">{{show.name}}</a>
</div>
{% if forloop.counter|divisibleby:3 %}
<div class="w-100"></div>
{% endif %}
{% endfor %}
</div>
</div>
{% endblock %}
......@@ -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()),
]
......@@ -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
......@@ -3,33 +3,25 @@
Ban an user from {{show.name}} - Episodes.Community
{% endblock %}
{% 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>
</div>
</section>
<section class="submissions">
<a href="/show/{{show.abbr}}" class="button"><i class="fa fa-fw fa-home"></i>&nbsp;Show Index</a>
{% include "partials/show_banner.html" %}
<section class="container mt-2 mb-5">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/show/{{show.abbr}}">{{show.name}}</a></li>
<li class="breadcrumb-item active" aria-current="page">New Season</li>
</ol>
</nav>
<h1>Ban an User</h1>
{% if error %}
<div class="message error">{{error}}</div>
<div class="alert alert-danger">{{error}}</div>
{% endif %}
<form action="" method="post">
{% csrf_token %}
<form class="form-horizontal" role="form" action="" method="post">
<p>Banning user <b>{{ target.display_name }}</b></p>
{{ form }}
<input type="submit" value="Ban" />
<input type="submit" name="delete" value="Ban and Delete all submissions" />
{% include "form.html" %}
<div class="form-group">
<button type="submit" class="btn btn-primary">Add</button>
<button type="submit" name="delete" class="btn btn-alert">Ban and Delete all submissions</button>
</div>
</form>
</div>
</section>
{% endblock %}
......@@ -18,7 +18,7 @@
{% get_obj_perms request.user for show as "show_perms" %}
<section class="show-details">
<div class="banner" style="background-image: url(/media/uploaded_resources/{{show.banner}});"></div>
<div class="banner-cover">
<div class="banner-cover row p-4">
<div class="artwork">
{% if episode.season.artwork %}
<img src="/media/uploaded_resources/{{episode.season.artwork}}">
......@@ -26,14 +26,14 @@
<img src="/media/uploaded_resources/{{show.artwork}}">
{% endif %}
</div>
<div class="details season">
<div class="details season col">
<h1>{{show.name}}</h1>
{% if episode.season.name %}
<h3>{{ episode.season.name }}</h3>
{% else %}
<h3>Season {{ episode.season.number }}</h3>
{% endif %}
<p class="description">
<p>
{% if episode.season.description %}
{{ episode.season.description }}
{% else %}
......@@ -43,42 +43,45 @@
</div>
</div>
</section>
<section class="submissions">
<a href="/show/{{show.abbr}}" class="button"><i class="fa fa-fw fa-home"></i>&nbsp;Show Index</a>
{% if user.is_authenticated %}
{% if "can_moderate_show" in show_perms %}
<a href="/show/{{show.abbr}}/episode/{{episode.season.number}}/{{episode.episode}}/submit" class="button modbutton"><i class="fa fa-fw fa-plus"></i>&nbsp;Add New Link</a>
{% else %}
<a href="/show/{{show.abbr}}/episode/{{episode.season.number}}/{{episode.episode}}/submit" class="button"><i class="fa fa-fw fa-plus"></i>&nbsp;Submit New Link</a>
{% endif %}
{% else %}
<span class="fillertext"><a href="/login">Log in</a> to submit a link</span>
{% endif %}
<section class="container mb-5 mt-2">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/show/{{show.abbr}}">{{show.name}}</a></li>
<li class="breadcrumb-item active" aria-current="page">{{episode.name}}</li>
</ol>
</nav>
<h1>Watch <q>{{episode.name}}</q> From</h1>
<div class="submission-list">
{% for sbm in submissions %}
<div class="submission{% if sbm.positives < sbm.negatives %} buried{% endif %}{% if sbm.pinned %} pinned{% endif %}{% if highlight and highlight == sbm.id %} highlighted{% endif %}">
<a href="{{sbm.url}}" class="link">
{% if sbm.pinned %}<i class="fa fa-fw fa-thumb-tack" title="Pinned submission"></i>{% endif %}
{% if sbm.title %}
<span class="urld" title="Web URL: {{sbm.url}}">{{sbm.title}}</span>
{% else %}
<i class="fa fa-fw fa-globe"></i>&nbsp;{{sbm.url}}
{% endif %}
</a>
<div class="vote-btns" data-vote-id="{{sbm.id}}">
<form method="POST" action="/show/{{show.abbr}}/vote/{{sbm.id}}/1">
{% csrf_token %}
<button class="vote-positive">
<i class="fa fa-fw fa-thumbs-up"></i>&nbsp;{{sbm.positives}}
</button>
</form>
<form method="POST" action="/show/{{show.abbr}}/vote/{{sbm.id}}/0">
{% csrf_token %}
<button class="vote-negative">
<i class="fa fa-fw fa-thumbs-down"></i>&nbsp;{{sbm.negatives}}
</button>
</form>
<div class="submission{% if sbm.positives < sbm.negatives %} buried{% endif %}{% if sbm.pinned %} pinned{% endif %}{% if highlight and highlight == sbm.id %} highlighted{% endif %} mb-2">
<div class="row">
<div class="col">
<a href="{{sbm.url}}" class="link d-block mb-2">
{% if sbm.pinned %}<i class="fa fa-fw fa-thumb-tack" title="Pinned submission"></i>{% endif %}
{% if sbm.title %}
<span class="urld" title="Web URL: {{sbm.url}}">{{sbm.title}}</span>
{% else %}
<i class="fa fa-fw fa-globe"></i>&nbsp;{{sbm.url}}
{% endif %}
</a>
</div>
<div class="col-md-2 text-md-right">
<div class="vote-btns" data-vote-id="{{sbm.id}}">
<form method="POST" class="d-inline" action="/show/{{show.abbr}}/vote/{{sbm.id}}/1">
{% csrf_token %}
<button class="btn btn-success">
<i class="fa fa-fw fa-thumbs-up"></i>&nbsp;{{sbm.positives}}
</button>
</form>
<form method="POST" class="d-inline" action="/show/{{show.abbr}}/vote/{{sbm.id}}/0">
{% csrf_token %}
<button class="btn btn-danger">
<i class="fa fa-fw fa-thumbs-down"></i>&nbsp;{{sbm.negatives}}
</button>
</form>
</div>
</div>
</div>
<div class="data">
{% get_obj_perms sbm.user for show as "publisher_perms" %}
......@@ -100,5 +103,16 @@
<h3>Nobody has submitted any links yet.</h3>
{% endfor %}
</div>
<div class="d-flex flex-row-reverse mt-4">
{% if user.is_authenticated %}
{% if "can_moderate_show" in show_perms %}
<a href="/show/{{show.abbr}}/episode/{{episode.season.number}}/{{episode.episode}}/submit" class="btn btn-warning"><i class="fa fa-fw fa-plus"></i>&nbsp;Add New Link</a>
{% else %}
<a href="/show/{{show.abbr}}/episode/{{episode.season.number}}/{{episode.episode}}/submit" class="btn btn-primary"><i class="fa fa-fw fa-plus"></i>&nbsp;Submit New Link</a>
{% endif %}
{% else %}
<span class="fillertext"><a href="/login">Log in</a> to submit a link</span>
{% endif %}
</div>
</section>
{% endblock %}
......@@ -5,7 +5,7 @@
{% 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="banner-cover row p-4">
<div class="artwork">
{% if episode.season.artwork %}
<img src="/media/uploaded_resources/{{season.artwork}}">
......@@ -13,14 +13,14 @@
<img src="/media/uploaded_resources/{{show.artwork}}">
{% endif %}
</div>
<div class="details season">
<div class="details season col">
<h1>{{show.name}}</h1>
{% if season.name %}
<h3>{{ season.name }}</h3>
{% else %}