Permalink
Browse files

now with fancy voting and prettier gallery!

  • Loading branch information...
1 parent 95354ef commit 66b4deaa629e8e946d043dd10f3cba279c453af5 @potch potch committed Jan 10, 2011
@@ -3,7 +3,8 @@
def nav(request):
return {
'menu' : [
- ('Competition Home', 'home'),
+ ('Home', 'home'),
+ ('Gallery', 'games.view_list'),
('Rules', 'rules'),
('Judges', 'judges'),
('Prizes', 'prizes'),
@@ -0,0 +1,17 @@
+<section class="game" id="game-{{ game.id }}">
+ <div class="thumb">
+ <div>
+ {% if game.screenshot_set.all %}
+ <img src="{{ game.screenshot_set.all.0.get_absolute_url }}">
+ {% endif %}
+ </div>
+ </div>
+ <h2><a href="{{ game.get_absolute_url }}">{{ game.name }}</a></h2>
+ <p>{{ game.description }}</p>
+ <nav>
+ <a class="action" href="{{ game.url }}">Play</a>
+ {% if game.source %}
+ <a class="action" href="{{ game.source }}">See the source</a>
+ {% endif %}
+ </nav>
+</section>
@@ -1,19 +1,10 @@
{% extends "games/base.html" %}
{% block content %}
- <h1>Games</h1>
+ <h1>Game Gallery</h1>
<article class="tile-list">
{% for game in games %}
- <section class="game" id="game-{{ game.id }}">
- <h2><a href="{{ game.get_absolute_url }}">{{ game.name }}</a></h2>
- <p>{{ game.description|truncatewords_html:40 }}</p>
- <ul class="links">
- <li><a href="{{ game.url }}">Play</a></li>
- {% if game.source %}
- <li><a href="{{ game.source }}">See the source</a></li>
- {% endif %}
- </ul>
- </section>
+ {% include "games/game_listing.html" %}
{% endfor %}
</article>
{% endblock %}
@@ -4,17 +4,7 @@
<h1>My Games</h1>
<article class="tile-list">
{% for game in games %}
- <section class="game" id="game-{{ game.id }}">
- <h2><a href="{{ game.get_absolute_url }}">{{ game.name }}</a></h2>
- <p>{{ game.description|truncatewords_html:40 }}</p>
- <ul class="links">
- <li><a href="{% url games.edit game.id %}">Edit</a></li>
- <li><a href="{{ game.url }}">Play</a></li>
- {% if game.source %}
- <li><a href="{{ game.source }}">See the source</a></li>
- {% endif %}
- </ul>
- </section>
+ {% include "games/game_listing.html" %}
{% empty %}
<h2>You haven't submitted any games yet.</h2>
{% endfor %}
@@ -8,7 +8,7 @@ <h2>Screenshots</h2>
<ul class="screenshots">
{% for screenshot in game.screenshot_set.all %}
<li id="screenshot-{{ screenshot.id }}">
- <img src="{{ screenshot.get_absolute_url }}" height="{{ screenshot.file.height }}" width="{{ screenshot.file.width }}">
+ <img src="{{ screenshot.get_absolute_url }}">
</li>
{% empty %}
<li>No Screenshots Available</li>
@@ -21,21 +21,21 @@ <h3><a href="{% url games.edit game.id %}">Add Screenshots</a></h3>
<section class="description">
<ul class="links">
- <li><a href="{{ game.url }}">Play the game</a></li>
+ <li><a class="action" href="{{ game.url }}">Play the game</a></li>
{% if game.source %}
- <li><a href="{{ game.source }}">See the source</a></li>
+ <li><a class="action" href="{{ game.source }}">See the source</a></li>
{% endif %}
{% if game.creator == request.user %}
- <li><a href="{% url games.edit game.id %}">Edit</a></li>
+ <li><a class="action" href="{% url games.edit game.id %}">Edit</a></li>
{% endif %}
</ul>
<h2>Description</h2>
- <p>{{ game.description|linebreaks }}</p>
+ {{ game.description|linebreaks }}
{% if game.resources %}
<h2>Resources Used</h2>
- <p>{{ game.resources|linebreaks }}</p>
+ {{ game.resources|linebreaks }}
{% endif %}
</section>
@@ -9,7 +9,7 @@ <h1 class="home-title">&lt;&#x200a;GAME_ON&#x200a;&gt;</h1>
{% flatblock "home" 3600 %}
</div>
<div class="button">
- <a href="{% url games.create %}"><br>ENTER NOW</a>
+ <a href="{% url vote.ballot %}"><br>VOTE NOW!</a>
</div>
<img class="header-left" src="{{ MEDIA_URL }}img/ships-ani.png">
<img class="header-right" src="{{ MEDIA_URL }}img/raygun.png">
@@ -4,20 +4,26 @@
{% block content %}
<h1>Vote on Games</h1>
- <ol>
+ <ol class="ballot">
{% for game in ballot.get_games %}
- <li>{{ game }}
- <form class="vote" action="{% url vote.vote %}" method="post">
- {% csrf_token %}
- {% vote_score for request.user game as score %}
- <input type="hidden" name="game" value="{{ game.id }}"/>
- <input type="radio" name="score" value="1" {% if score == 1 %}checked="checked"{% endif %} />
- <input type="radio" name="score" value="2" {% if score == 2 %}checked="checked"{% endif %} />
- <input type="radio" name="score" value="3" {% if score == 3 %}checked="checked"{% endif %} />
- <input type="radio" name="score" value="4" {% if score == 4 %}checked="checked"{% endif %} />
- <input type="radio" name="score" value="5" {% if score == 5 %}checked="checked"{% endif %} />
- <input type="submit" value="Vote"/>
- </form>
+ <li>
+ <section class="game" id="game-{{ game.id }}">
+ <h2><a href="{{ game.get_absolute_url }}">{{ game.name }}</a></h2>
+ <form class="vote" action="{% url vote.vote %}" method="post">
+ {% csrf_token %}
+ {% vote_score for request.user game as score %}
+ <input type="hidden" name="game" value="{{ game.id }}"/>
+ <div class="stars stars-{{ score }}">
+ <label><input type="radio" name="score" value="1" {% if score == 1 %}checked="checked"{% endif %} /></label>
+ <label><input type="radio" name="score" value="2" {% if score == 2 %}checked="checked"{% endif %} /></label>
+ <label><input type="radio" name="score" value="3" {% if score == 3 %}checked="checked"{% endif %} /></label>
+ <label><input type="radio" name="score" value="4" {% if score == 4 %}checked="checked"{% endif %} /></label>
+ <label><input type="radio" name="score" value="5" {% if score == 5 %}checked="checked"{% endif %} /></label>
+ </div>
+ <input type="submit" value="Vote"/>
+ <a target="_blank" class="action" href="{{ game.url }}">Play</a>
+ </form>
+ </section>
</li>
{% endfor %}
</ol>
View
@@ -22,10 +22,9 @@ form textarea {
width: 310px;
}
-form input[type=submit] {
+form input[type=submit], a.action {
+ text-decoration: none;
cursor: pointer;
- min-width: 10em;
- margin: 0 0 0 208px;
border: 0;
font-family: Matiz, Helvetica, Arial, sans-serif;
color: #fff;
@@ -34,7 +33,11 @@ form input[type=submit] {
text-transform: uppercase;
text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
-form input[type=submit]:hover {
+form input[type=submit] {
+ min-width: 10em;
+ margin: 0 0 0 208px;
+}
+form input[type=submit]:hover, a.action:hover {
color: #FDEB6A;
}
ul.errorlist + label:before {
@@ -99,3 +102,76 @@ form.vote input[type="submit"] {
form.vote.changed input[type="submit"] {
display: inline;
}
+
+/* ballot */
+.stars input {
+ visibility: hidden;
+ width: 26px;
+ height: 22px;
+ padding: 0;
+ margin: 0;
+}
+.stars label {
+ display: block;
+ width: 26px;
+ height: 22px;
+ padding: 0;
+ margin: 0;
+ float: left;
+ cursor: pointer;
+}
+.stars label:hover {
+ opacity: .7;
+ background-image: url(/media/img/stars.png);
+}
+.stars {
+ background-image: url(/media/img/stars.png);
+ background-position: 0 50%;
+ background-repeat: no-repeat;
+ margin-right: 0.5em;
+ width: 130px;
+ height: 22px;
+ float: right;
+ display: inline-block;
+}
+.stars-4 {
+ background-position: -26px 50%;
+}
+.stars-3 {
+ background-position: -52px 50%;
+}
+.stars-2 {
+ background-position: -78px 50%;
+}
+.stars-1 {
+ background-position: -104px 50%;
+}
+.stars-0 {
+ background-position: -130px 50%;
+}
+.ballot {
+ padding: 0;
+ list-style-type: none;
+}
+.ballot .game {
+ display: block;
+ overflow: hidden;
+ clear: both;
+ padding: 2em;
+ height: auto;
+ margin-bottom: 1em;
+ -moz-transition: .2s opacity;
+ background: #777442;
+ background: rgba(0,0,0,.2);
+}
+.ballot h2 {
+ float: left;
+ margin: 0;
+ max-width: 600px;
+ font-size: 20px;
+ line-height: 28px;
+}
+.ballot .action {
+ margin: 0 1em 0 0;
+ float: right;
+}
View
@@ -3,18 +3,31 @@
display: block;
width: 43%;
float:left;
- padding: 1em 3%;
- height: 200px;
+ padding: 2em 2%;
+ height: 150px;
margin-bottom: 1em;
background: #777442;
background: rgba(0,0,0,.2);
- box-shadow: inset 0 8px 4px rgba(0,0,0,.2);
+/* box-shadow: inset 0 8px 4px rgba(0,0,0,.2);
-moz-box-shadow: inset 0 8px 4px rgba(0,0,0,.2);
-webkit-box-shadow: inset 0 8px 4px rgba(0,0,0,.2);
border-radius: 1em;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
-}
+*/}
+
+.games .tile-list .game {
+ width: 36%;
+ margin-left: 3%;
+ padding-left: 8%;
+ position: relative;
+/* box-shadow: inset 0 8px 4px rgba(0,0,0,.2);
+ -moz-box-shadow: inset 0 8px 4px rgba(0,0,0,.2);
+ -webkit-box-shadow: inset 0 8px 4px rgba(0,0,0,.2);
+ border-radius: 1em;
+ -moz-border-radius: 1em;
+ -webkit-border-radius: 1em;
+*/}
.games section.screenshots {
height: auto;
@@ -26,15 +39,42 @@
.games .game p {
width: auto;
+ max-height: 4.8em;
+ min-height: 4.8em;
+ overflow: hidden;
+}
+
+.game nav {
+ position: absolute;
+ bottom: 2em;
+}
+
+.thumb {
+ position: absolute;
+ left: -32px;
+ width: 71px;
+ height: 71px;
+ padding: 8px;
+ background: url("/media/img/thumb.png") no-repeat;
}
+.thumb div {
+ width: 71px;
+ height: 71px;
+ overflow: hidden;
+}
+
+
body.games h1 {
clear: both;
- margin: 1em 0 1em 0;
+ line-height: 1em;
+ font-size: 4em;
+ margin: 1em 0 .5em 0;
}
body.games h2 {
clear: left;
+ margin-top: 1px;
}
.games .description h2 {
@@ -56,21 +96,20 @@ body.games p.edit {
body.games ul.links {
list-style-type: none;
- margin: 1em 0 0;
padding: 0;
}
body.games ul.links li {
- float: left;
+ display: inline;
+ display: inline-block;
margin: 0;
- padding: 0 1em 2em 1em;
}
-body.games ul.links li a {
+/*body.games ul.links li a {
font-family: OrbitronMed, "Courier New", monospace;
font-size: 1.5em;
}
-
+*/
.games section.screenshots {
float: right;
width: 300px;
View
@@ -269,7 +269,8 @@ header nav {
margin-top: 20px;
}
-header nav .selected, input[type=submit] {
+header nav .selected, input[type=submit], a.action {
+ color: #fff;
margin-bottom: 40px;
font-size: 13px;
border-radius: 0.5em;
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.

0 comments on commit 66b4dea

Please sign in to comment.