New home UI
This commit is contained in:
cuom1999
parent
e8ee2ac4aa
commit
d10173df5d
14 changed files with 478 additions and 222 deletions
|
|
@ -1,18 +1,16 @@
|
|||
<section class="{% if post.sticky %}sticky {% endif %}post">
|
||||
<h2 class="title">
|
||||
<a href="{{ url('blog_post', post.id, post.slug) }}">{{ post.title }}</a>
|
||||
</h2>
|
||||
<span style="float: right">
|
||||
<section class="{% if post.sticky %}sticky {% endif %}blog-box">
|
||||
<div style="margin-bottom: 0.5em">
|
||||
<span class="time">
|
||||
{%- if post.sticky %}<i title="Sticky" class="fa fa-star fa-fw"></i>{% endif -%}
|
||||
{% with authors=post.authors.all() %}
|
||||
{%- if authors -%}
|
||||
<img src="{{gravatar(authors[0])}}" style="width: 1.5em; border-radius: 50%; margin-bottom: -0.3em">
|
||||
<span class="post-authors">{{ link_users(authors) }}</span>
|
||||
{%- endif -%}
|
||||
{% endwith %}
|
||||
{{_('posted')}} {{ relative_time(post.publish_on, abs=_('on {time}'), rel=_('{time}')) -}}
|
||||
• {{ relative_time(post.publish_on, abs=_('on {time}'), rel=_('{time}')) -}}
|
||||
{%- if post.sticky %} • <i title="Sticky" class="fa fa-star fa-fw"></i>{% endif -%}
|
||||
</span>
|
||||
<span>
|
||||
<span style="float: right">
|
||||
<a href="{{ url('blog_post', post.id, post.slug) }}#comments" class="blog-comment-count-link">
|
||||
<i class="fa fa-comments blog-comment-icon"></i>
|
||||
<span class="blog-comment-count">
|
||||
|
|
@ -20,8 +18,10 @@
|
|||
</span>
|
||||
</a>
|
||||
</span>
|
||||
</span>
|
||||
<div style="clear:both"></div>
|
||||
</div>
|
||||
<h2 class="title">
|
||||
<a href="{{ url('blog_post', post.id, post.slug) }}">{{ post.title }}</a>
|
||||
</h2>
|
||||
{% if post.is_organization_private and show_organization_private_icon %}
|
||||
<div class="organization-tags">
|
||||
{% for org in post.organizations.all() %}
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="summary content-description">
|
||||
<div class="summary content-description blog-description">
|
||||
{% cache 86400 'post_summary' post.id %}
|
||||
{{ post.summary|default(post.content, true)|markdown('blog', 'svg', lazy_load=True)|reference|str|safe }}
|
||||
{% endcache %}
|
||||
|
|
|
|||
|
|
@ -16,30 +16,10 @@
|
|||
clear: both;
|
||||
}
|
||||
}
|
||||
.post {
|
||||
margin: 0 2%;
|
||||
}
|
||||
.time {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.post:first-child {
|
||||
margin-top: 0.6em;
|
||||
}
|
||||
|
||||
.own-open-tickets .title a, .open-tickets .title a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.own-open-tickets .object, .open-tickets .object {
|
||||
margin-left: 1em;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.open-tickets .user {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.no-clarifications-message {
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
|
|
@ -56,6 +36,11 @@
|
|||
#add-clarification:hover {
|
||||
color: cyan;
|
||||
}
|
||||
|
||||
#content {
|
||||
width: 99%;
|
||||
margin-left: 0;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
|
|
@ -81,6 +66,35 @@
|
|||
$('.blog-content').hide();
|
||||
$('.blog-sidebar').show();
|
||||
});
|
||||
$('.blog-description').on('click', function() {
|
||||
var max_height = $(this).css('max-height');
|
||||
if (max_height !== 'fit-content') {
|
||||
$(this).css('max-height', 'fit-content');
|
||||
$(this).parent().css('background-image', 'inherit')
|
||||
.css('padding-bottom', '0.5em');
|
||||
$(this).css('cursor', 'auto');
|
||||
}
|
||||
})
|
||||
$('.blog-description').each(function() {
|
||||
if ($(this).prop('scrollHeight') > $(this).height() ) {
|
||||
$(this).parent().css('background-image', '-webkit-linear-gradient(bottom, lightgray, lightgray 3%, transparent 8%, transparent 100%)');
|
||||
$(this).parent().css('padding-bottom', '0');
|
||||
$(this).css('cursor', 'pointer');
|
||||
}
|
||||
});
|
||||
$('.left-sidebar-item').on('click', function() {
|
||||
var url = $(this).attr('data-href');
|
||||
window.location.replace(url);
|
||||
});
|
||||
{% if feed_type == 'blog' %}
|
||||
$('#news-icon').css('color', 'green');
|
||||
{% elif feed_type == 'problem' %}
|
||||
$('#problems-icon').css('color', 'green');
|
||||
{% elif feed_type == 'ticket' %}
|
||||
$('#tickets-icon').css('color', 'green');
|
||||
{% elif feed_type == 'comment' %}
|
||||
$('#comments-icon').css('color', 'green');
|
||||
{% endif %}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
@ -90,20 +104,50 @@
|
|||
<div id="mobile" class="tabs">
|
||||
<ul>
|
||||
<li id="blog-tab" class="tab active"><a href="#">
|
||||
<i class="tab-icon fa fa-info-circle"></i> {{ _('Blog') }}
|
||||
<i class="tab-icon fa fa-info-circle"></i> {{ _('Feed') }}
|
||||
</a></li>
|
||||
<li id="event-tab" class="tab"><a href="#"><i class="tab-icon fa fa-rss"></i> {{ _('Events') }}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="blog-container">
|
||||
<div class="blog-content sidebox">
|
||||
<h3>{{ _('News') }} <i class="fa fa-terminal"></i></h3>
|
||||
<div class="sidebox-content">
|
||||
{% set show_organization_private_icon=True %}
|
||||
<div class="blog-left-sidebar">
|
||||
<h3 class="left-sidebar-header">{{_('Content')}}</h3>
|
||||
<div class="left-sidebar-item" data-href="{{url('home')}}">
|
||||
<div class="sidebar-icon" id="news-icon"><i class="fa fa-rss"></i></div>
|
||||
{{_('News')}}
|
||||
</div>
|
||||
<div class="left-sidebar-item" data-href="{{url('problem_feed')}}">
|
||||
<div class="sidebar-icon" id="problems-icon"><i class="fa fa-tasks"></i></div>
|
||||
{{_('Problems')}}
|
||||
</div>
|
||||
<div class="left-sidebar-item" data-href="{{url('comment_feed')}}">
|
||||
<div class="sidebar-icon" id="comments-icon"><i class="fa fa-comments"></i></div>
|
||||
{{_('Comments')}}
|
||||
</div>
|
||||
<div class="left-sidebar-item" data-href="{{url('ticket_feed')}}">
|
||||
<div class="sidebar-icon" id="tickets-icon"><i class="fa fa-question-circle"></i></div>
|
||||
{{_('Tickets')}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="blog-content">
|
||||
{% set show_organization_private_icon=True %}
|
||||
{% if feed_type == 'blog' %}
|
||||
{% for post in posts %}
|
||||
{% include "blog/content.html" %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% elif feed_type == 'problem' %}
|
||||
{% for problem in problems %}
|
||||
{% include "problem/feed.html" %}
|
||||
{% endfor %}
|
||||
{% elif feed_type == 'ticket' %}
|
||||
{% for ticket in tickets %}
|
||||
{% include "ticket/feed.html" %}
|
||||
{% endfor %}
|
||||
{% elif feed_type == 'comment' %}
|
||||
{% for comment in comments %}
|
||||
{% include "comments/feed.html" %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% if page_obj.num_pages > 1 %}
|
||||
<div style="margin-bottom:10px;margin-top:10px">{% include "list-pages.html" %}</div>
|
||||
{% endif %}
|
||||
|
|
@ -178,85 +222,36 @@
|
|||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if own_open_tickets %}
|
||||
<div class="blog-sidebox sidebox">
|
||||
<h3>{{ _('My open tickets') }} <i class="fa fa-question-circle"></i></h3>
|
||||
<div class="sidebox-content">
|
||||
<ul class="own-open-tickets">
|
||||
{% for ticket in own_open_tickets %}
|
||||
<li>
|
||||
<div class="title">
|
||||
<a href="{{ url('ticket', ticket.id) }}">{{ ticket.title }}</a>
|
||||
</div>
|
||||
<div class="object">
|
||||
<a href="{{ ticket.linked_item.get_absolute_url() }}">
|
||||
{{ ticket.linked_item|item_title }}</a>
|
||||
</div>
|
||||
<div>{{ link_user(ticket.user) }}</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if open_tickets %}
|
||||
<div class="blog-sidebox sidebox">
|
||||
<h3>{{ _('New tickets') }} <i class="fa fa-exclamation-circle"></i></h3>
|
||||
<div class="sidebox-content">
|
||||
<ul class="open-tickets">
|
||||
{% for ticket in open_tickets %}
|
||||
<li>
|
||||
<div class="title">
|
||||
<a href="{{ url('ticket', ticket.id) }}">{{ ticket.title }}</a>
|
||||
</div>
|
||||
<div class="object">
|
||||
<a href="{{ ticket.linked_item.get_absolute_url() }}">
|
||||
{{ ticket.linked_item|item_title }}</a>
|
||||
</div>
|
||||
<div>{{ link_user(ticket.user) }}</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="blog-sidebox sidebox">
|
||||
<h3>{{ _('New problems') }} <i class="fa fa-puzzle-piece"></i>
|
||||
</h3>
|
||||
<div class="sidebox-content">
|
||||
<ul class="problem-list">
|
||||
{% for problem in new_problems %}
|
||||
<li><a href="{{ url('problem_detail', problem.code) }}">{{ problem.name }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<span class="rssatom">
|
||||
<a href="{{ url('problem_rss') }}"><span><i class="fa fa-rss"></i></span> RSS</a>
|
||||
/
|
||||
<a href="{{ url('problem_atom') }}">Atom</a>
|
||||
</span>
|
||||
<h3>{{ _('Top Rating') }} <i class="fa fa-trophy"></i></h3>
|
||||
<div class="sidebox-content" style="padding: 0; border: 0">
|
||||
<table class="table feed-table">
|
||||
<tbody>
|
||||
{% for user in top_rated %}
|
||||
<tr>
|
||||
<td style="padding: 7px 2px"><b>{{loop.index}}</b></td>
|
||||
<td>{{link_user(user)}}</td>
|
||||
<td>{{user.rating}}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="blog-sidebox sidebox">
|
||||
<h3>{{ _('Comment stream') }} <i class="fa fa-comments"></i></h3>
|
||||
<div class="sidebox-content">
|
||||
<ul>
|
||||
{% for comment in comments %}
|
||||
<li>
|
||||
<span style="padding-left:0.25em" class="poster">
|
||||
{{ link_user(comment.author) }}
|
||||
</span> →
|
||||
<a href="{{ comment.link }}#comment-{{ comment.id }}">{{ page_titles[comment.page] }}</a>
|
||||
</li>{% endfor %}
|
||||
</ul>
|
||||
<span class="rssatom">
|
||||
<a href="{{ url('comment_rss') }}"><span><i class="fa fa-rss"></i></span> RSS</a>
|
||||
/
|
||||
<a href="{{ url('comment_atom') }}">Atom</a>
|
||||
</span>
|
||||
<h3>{{ _('Top Score') }} <i class="fa fa-trophy"></i></h3>
|
||||
<div class="sidebox-content" style="padding: 0; border: 0">
|
||||
<table class="table feed-table">
|
||||
<tbody>
|
||||
{% for user in top_scorer %}
|
||||
<tr>
|
||||
<td style="padding: 7px 2px"><b>{{loop.index}}</b></td>
|
||||
<td>{{link_user(user)}}</td>
|
||||
<td>{{ user.performance_points|floatformat(0) }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<style>
|
||||
#content {
|
||||
margin: -1em 1em 0 0;
|
||||
margin: 2.5em 1em 0 0;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
|
|
|
|||
18
templates/comments/feed.html
Normal file
18
templates/comments/feed.html
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<div class="blog-box">
|
||||
<h3 class="problem-feed-name">
|
||||
<a href="{{ comment.link }}#comment-{{ comment.id }}">
|
||||
{{ page_titles[comment.page] }}
|
||||
</a>
|
||||
</h3>
|
||||
{% with author=comment.author %}
|
||||
{% if author %}
|
||||
<div class="problem-feed-info-entry">
|
||||
<i class="fa fa-pencil-square-o fa-fw"></i>
|
||||
<span class="pi-value">{{ link_user(author) }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
<div class='blog-description content-description'>
|
||||
{{ comment.body |markdown("comment", MATH_ENGINE)|reference|str|safe }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
{% extends "common-content.html" %}
|
||||
|
||||
{% block content_js_media %}
|
||||
{% include "comments/media-js.html" %}
|
||||
{% endblock %}
|
||||
|
||||
{% block content_media %}
|
||||
{% include "comments/media-css.html" %}
|
||||
<style>
|
||||
#comment-header {
|
||||
display: none;
|
||||
}
|
||||
.no-comments-message {
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
{% include "comments/list.html" %}
|
||||
{% endblock %}
|
||||
|
||||
{% block bodyend %}
|
||||
{% if REQUIRE_JAX %}
|
||||
{% include "mathjax-load.html" %}
|
||||
{% endif %}
|
||||
{% include "comments/math.html" %}
|
||||
{% endblock %}
|
||||
28
templates/problem/feed.html
Normal file
28
templates/problem/feed.html
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<div class="blog-box">
|
||||
<h3 class="problem-feed-name">
|
||||
<a href="{{ url('problem_detail', problem.code) }}">
|
||||
{{ problem.name }}
|
||||
</a>
|
||||
</h3>
|
||||
{% with authors=problem.authors.all() %}
|
||||
{% if authors %}
|
||||
<div class="problem-feed-info-entry">
|
||||
<i class="fa fa-pencil-square-o fa-fw"></i>
|
||||
<span class="pi-value">{{ link_users(authors) }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
{% if true %}
|
||||
<div class="problem-feed-types">
|
||||
<i class="fa fa-tag"></i>
|
||||
{% for type in problem.types_list %}
|
||||
<span class="type-tag">{{ type }}</span>{% if not loop.last %}, {% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class='blog-description content-description'>
|
||||
{% cache 86400 'problem_html' problem.id MATH_ENGINE LANGUAGE_CODE %}
|
||||
{{ problem.description|markdown("problem", MATH_ENGINE)|reference|str|safe }}
|
||||
{% endcache %}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
{% extends "common-content.html" %}
|
||||
{% block content_media %}
|
||||
{% include "comments/media-css.html" %}
|
||||
<style>
|
||||
.title-state {
|
||||
font-size: 2em;
|
||||
|
|
@ -54,10 +55,30 @@
|
|||
#clarification_header:hover {
|
||||
color: orange;
|
||||
}
|
||||
|
||||
#comment-announcement {
|
||||
margin-top: 1em;
|
||||
background-color: lightgray;
|
||||
border-radius: 30px;
|
||||
padding: 0.5em;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
color: dimgrey;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#comment-announcement:hover {
|
||||
background-color: gray;
|
||||
}
|
||||
|
||||
#comment-section {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content_js_media %}
|
||||
{% include "comments/media-js.html" %}
|
||||
{% if request.in_contest_mode %}
|
||||
<script type="text/javascript">
|
||||
window.register_contest_notification("{{url('contest_clarification_ajax', request.participation.contest.key)}}");
|
||||
|
|
@ -79,6 +100,14 @@
|
|||
$('#clarification_header_container').hide();
|
||||
window.scrollTo(0, document.body.scrollHeight);
|
||||
})
|
||||
$('#comment-announcement').on('click', function() {
|
||||
$('#comment-section').show();
|
||||
$('#comment-announcement').hide();
|
||||
})
|
||||
|
||||
if (window.location.href.includes('#comment')) {
|
||||
$('#comment-announcement').click();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
@ -164,13 +193,9 @@
|
|||
{% endif %}
|
||||
<div><a href="{{ url('chronological_submissions', problem.code) }}">{{ _('All submissions') }}</a></div>
|
||||
<div><a href="{{ url('ranked_submissions', problem.code) }}">{{ _('Best submissions') }}</a></div>
|
||||
|
||||
{% if not contest_problem or not contest_problem.contest.use_clarifications %}
|
||||
<hr>
|
||||
<div><a href="{{ url('problem_comments', problem.code) }}">{{ _('Discuss') }}</a></div>
|
||||
{% endif %}
|
||||
{% if editorial and editorial.is_public and
|
||||
not (request.user.is_authenticated and request.profile.current_contest) %}
|
||||
<hr>
|
||||
<div><a href="{{ url('problem_editorial', problem.code) }}">{{ _('Read editorial') }}</a></div>
|
||||
{% endif %}
|
||||
{% if can_edit_problem %}
|
||||
|
|
@ -362,6 +387,17 @@
|
|||
{%- endif -%}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if not (contest_problem and contest_problem.contest.use_clarifications) %}
|
||||
<div id="comment-announcement-container">
|
||||
<div id="comment-announcement">
|
||||
{% if has_comments %}
|
||||
{{_('View comments')}} ({{comment_list.count()}})
|
||||
{% else %}
|
||||
{{_('Be the first to comment')}}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block comments %}
|
||||
|
|
@ -381,6 +417,10 @@
|
|||
<p class="no-comments-message">{{ _('No clarifications have been made at this time.') }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div id="comment-section">
|
||||
{% include "comments/list.html" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<iframe name="raw_problem" id="raw_problem"></iframe>
|
||||
{% endblock %}
|
||||
|
|
|
|||
23
templates/ticket/feed.html
Normal file
23
templates/ticket/feed.html
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<div class="blog-box">
|
||||
<h3 class="problem-feed-name">
|
||||
<a href="{{ url('ticket', ticket.id) }}">
|
||||
{{ ticket.title }}
|
||||
</a>
|
||||
</h3>
|
||||
{% with author=ticket.user %}
|
||||
{% if author %}
|
||||
<div class="problem-feed-info-entry">
|
||||
<i class="fa fa-pencil-square-o fa-fw"></i>
|
||||
<span class="pi-value">{{ link_user(author) }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
<div class="problem-feed-types">
|
||||
<i class="fa fa-tag"></i>
|
||||
<a href="{{ ticket.linked_item.get_absolute_url() }}">
|
||||
{{ ticket.linked_item|item_title }}</a>
|
||||
</div>
|
||||
<div class='blog-description content-description'>
|
||||
{{ ticket.messages.last().body |markdown("ticket", MATH_ENGINE)|reference|str|safe }}
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue