Damn, time is running and I have n time to make it pretty :(

This commit is contained in:
Aaron Mueller 2013-09-30 01:19:45 +02:00
parent 3d4fc79a1f
commit 6ee246f0a6
3 changed files with 34 additions and 24 deletions

View file

@ -4,19 +4,31 @@
font-size: 0;
}
#container {
body {
background-color: #222;
}
#entries {
margin: auto;
text-align: center;
padding: 0 20px;
margin: 0 20px;
border-left: 1px solid #333;
}
div.entry {
display: inline;
float: left;
display: block;
white-space: nowrap;
width:200px;
height: 200px;
vertical-align: top;
position: relative;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
}
div.entry:hover {
opacity: 0.5;
cursor: pointer;
}
div.entry img {
@ -27,6 +39,7 @@ div.entry img {
padding-bottom: 100px;
}
.open-entry div.shadow {
display: block;
position: absolute;
top: 0;
left: 0;
@ -36,6 +49,7 @@ div.entry img {
height: 200px;
}
.open-entry div.details {
display: block;
position: absolute;
top: 200px;
height: 100px;
@ -44,3 +58,7 @@ div.entry img {
left: -200px; /* TODO: Make dynamic */
width: 800px; /* TODO: Make dynamic */
}
.shadow, .details {
display: none;
}

View file

@ -1,24 +1,16 @@
{% extends "ldview/views/templates/layout.html" %}
{% block content %}
<div class="entry"><img src="{{servlet-context}}/img/sample.png" alt="entry-#" /></div>
<div class="entry"><img src="{{servlet-context}}/img/sample.png" alt="entry-#" /></div>
<div class="entry"><img src="{{servlet-context}}/img/sample.png" alt="entry-#" /></div>
<div class="entry"><img src="{{servlet-context}}/img/sample.png" alt="entry-#" /></div>
<div class="entry"><img src="{{servlet-context}}/img/sample.png" alt="entry-#" /></div>
<div class="entry"><img src="{{servlet-context}}/img/sample.png" alt="entry-#" /></div>
<div class="entry"><img src="{{servlet-context}}/img/sample.png" alt="entry-#" /></div>
<div class="entry"><img src="{{servlet-context}}/img/sample.png" alt="entry-#" /></div>
<div class="entry"><img src="{{servlet-context}}/img/sample.png" alt="entry-#" /></div>
<div class="entry open-entry">
<div class="shadow"></div>
<div class="details"></div>
<img src="{{servlet-context}}/img/sample.png" alt="entry-#" />
<div id="entries">
{% for entry in entries %}
<div class="entry">
<div class="shadow">
<p>{{entry.title}}</p>
<em>{{entry.author.name}}</em>
</div>
<div class="entry"><img src="{{servlet-context}}/img/sample.png" alt="entry-#" /></div>
<div class="entry"><img src="{{servlet-context}}/img/sample.png" alt="entry-#" /></div>
<div class="entry"><img src="{{servlet-context}}/img/sample.png" alt="entry-#" /></div>
<div class="entry"><img src="{{servlet-context}}/img/sample.png" alt="entry-#" /></div>
<div class="entry"><img src="{{servlet-context}}/img/sample.png" alt="entry-#" /></div>
<div class="entry"><img src="{{servlet-context}}/img/sample.png" alt="entry-#" /></div>
<div class="details"></div>
<a href="http://www.ludumdare.com/compo/ludum-dare-27/?action=preview&uid={{entry.ld_uid}}"><img src="{{servlet-context}}/img/ld/thumbs/{{entry.ld_uid}}_0.png" alt="{{entry.title}}" /></a>
</div>
{% endfor %}
</div>
<br style="clear: both" />
{% endblock %}

View file

@ -10,7 +10,7 @@
</head>
<body>
<a href="{{servlet-context}}/">Home</a>
<h1>Ludum Dare submissions viewer</h1>
<div id="container">
{% block content %}