moved styles to a css file; more fixes to templates

This commit is contained in:
Boris Bobrov 2014-08-11 20:42:49 +04:00
parent a186505a8a
commit 4dd814a945
3 changed files with 48 additions and 42 deletions

View File

@ -754,6 +754,42 @@ table.media_panel th {
padding-bottom: 4px;
text-align: left;
}
.thumb-overlay-status {
position: absolute;
margin: auto;
top: 0; bottom: 0; left: 0; right: 0;
width: 180px;
height: 20px;
display: inline;
text-align: center;
background-color: rgba(255, 255, 255, 0.8);
}
.thumb-processing {
color: black;
font-weight: bold;
}
.thumb-failed {
color: red;
font-weight: bold;
}
.thumb-wrapper {
position: relative;
/* for proportional thumb resizing */
width: auto;
height: auto;
display: inline-block;
}
.thumb-wrapper img {
max-height: 180px;
max-width: 180px;
}
.media_panel td {
vertical-align: middle;
}
/* moderator panels */

View File

@ -43,8 +43,18 @@
</tr>
{% for media_entry in processing_entries %}
<tr>
<td>
<div class="thumb-wrapper">
<img src="{{ media_entry.thumb_url }}" alt="{{ media_entry.title }}" />
<div class="thumb-overlay-status thumb-processing">Processing...</div>
</div>
</td>
<td>{{ media_entry.id }}</td>
<td>{{ media_entry.get_actor.username }}</td>
<td>
<a href="{{ request.urlgen('mediagoblin.moderation.users_detail', user=media_entry.get_actor.username) }}">
{{ media_entry.get_actor.username }}
</a>
</td>
<td>{{ media_entry.title }}</td>
<td>{{ media_entry.created.strftime("%F %R") }}</td>
{% if media_entry.transcoding_progress %}

View File

@ -29,50 +29,10 @@
{% trans %}You can track the state of media being processed for your gallery here.{% endtrans %}
</p>
<style>
.thumb-overlay-status {
position: absolute;
margin: auto;
top: 0; bottom: 0; left: 0; right: 0;
width: 180px;
height: 20px;
display: inline;
text-align: center;
}
.thumb-processing {
color: black;
font-weight: bold;
background-color: rgba(255, 255, 255, 0.8);
}
.thumb-failed {
color: red;
font-weight: bold;
background-color: rgba(127, 0, 0, 0.5);
}
.thumb-wrapper {
position: relative;
/* for proportional thumb resizing */
width: auto;
height: auto;
display: inline-block;
}
.thumb-wrapper img {
max-height: 180px;
max-width: 180px;
}
.media_panel td {
vertical-align: middle;
}
</style>
{% if entries.count() %}
<table class="media_panel processing">
<tr>
<th>ID</th>
<th>Thumbnail</th>
<th>Title</th>
<th>When submitted</th>
<th>Transcoding progress</th>