New Problem UI (Problem Information & Submit Button) (#95)
This commit is contained in:
Van Duc Le
GitHub
parent
32a1ea8919
commit
729a28bce5
5 changed files with 177 additions and 15 deletions
|
|
@ -4753,7 +4753,7 @@ msgstr "Phiếu tình nguyện"
|
|||
|
||||
#: templates/problem/feed/problems.html:53
|
||||
msgid "Submit"
|
||||
msgstr "Gửi"
|
||||
msgstr "Nộp bài"
|
||||
|
||||
#: templates/problem/feed/problems.html:60
|
||||
msgid "Value"
|
||||
|
|
|
|||
|
|
@ -422,13 +422,25 @@ ul.problem-list {
|
|||
border-radius: 25px;
|
||||
font-size: 14px;
|
||||
height: 25px;
|
||||
width: 100%;
|
||||
width: 98%;
|
||||
display: table;
|
||||
padding: 5px;
|
||||
margin-top: 12px;
|
||||
margin-top: 14px;
|
||||
border: solid;
|
||||
border-color: black;
|
||||
border-width: 0.1px;
|
||||
}
|
||||
|
||||
.info-block {
|
||||
display:table-cell;
|
||||
vertical-align:middle;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1100px) {
|
||||
.d-flex-problem {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
|
@ -16,4 +16,4 @@
|
|||
@import "organization";
|
||||
@import "ticket";
|
||||
@import "pagedown_widget";
|
||||
@import "dmmd-preview";
|
||||
@import "dmmd-preview";
|
||||
|
|
@ -28,6 +28,9 @@
|
|||
|
||||
// Bootstrap-y buttons
|
||||
.button, button, input[type=submit] {
|
||||
-webkit-transition: .3s all ease;
|
||||
-o-transition: .3s all ease;
|
||||
transition: .3s all ease;
|
||||
align-items: center;
|
||||
background-clip: padding-box;
|
||||
background-color: $theme_color;
|
||||
|
|
@ -78,10 +81,10 @@
|
|||
}
|
||||
|
||||
&.btn-green {
|
||||
background: green;
|
||||
background: #28a745;
|
||||
|
||||
&:hover {
|
||||
background: #2c974b;
|
||||
background: green;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -741,4 +744,135 @@ ul.errorlist {
|
|||
.github-icon i {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.btn {
|
||||
-webkit-transition: none;
|
||||
-o-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
color: #212529;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn-block + .btn-block {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.d-flex {
|
||||
display: -webkit-box !important;
|
||||
display: -ms-flexbox !important;
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.justify-content-center {
|
||||
-webkit-box-pack: center !important;
|
||||
-ms-flex-pack: center !important;
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
.align-items-center {
|
||||
-webkit-box-align: center !important;
|
||||
-ms-flex-align: center !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
.align-content-center {
|
||||
-ms-flex-line-pack: center !important;
|
||||
align-content: center !important;
|
||||
}
|
||||
|
||||
.align-self-center {
|
||||
-ms-flex-item-align: center !important;
|
||||
-ms-grid-row-align: center !important;
|
||||
align-self: center !important;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 15px;
|
||||
line-height: 1.8;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
a {
|
||||
-webkit-transition: .3s all ease;
|
||||
-o-transition: .3s all ease;
|
||||
transition: .3s all ease;
|
||||
}
|
||||
|
||||
button:hover, button:focus {
|
||||
text-decoration: none !important;
|
||||
outline: none !important;
|
||||
-webkit-box-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 8px 12px;
|
||||
cursor: pointer;
|
||||
border-width: 1px;
|
||||
border-radius: 5px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
-webkit-box-shadow: 0px 10px 20px -6px rgba(0, 0, 0, 0.12);
|
||||
-moz-box-shadow: 0px 10px 20px -6px rgba(0, 0, 0, 0.12);
|
||||
box-shadow: 0px 10px 20px -6px rgba(0, 0, 0, 0.12);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
-moz-transition: all 0.3s ease;
|
||||
-o-transition: all 0.3s ease;
|
||||
-webkit-transition: all 0.3s ease;
|
||||
-ms-transition: all 0.3s ease;
|
||||
transition: all 0.3s ease;
|
||||
span {
|
||||
margin-left: -20px;
|
||||
-moz-transition: all 0.3s ease;
|
||||
-o-transition: all 0.3s ease;
|
||||
-webkit-transition: all 0.3s ease;
|
||||
-ms-transition: all 0.3s ease;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.icon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 45px;
|
||||
bottom: 0;
|
||||
background: #fff;
|
||||
i {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
.icon.icon-round {
|
||||
border-radius: 50%;
|
||||
}
|
||||
&.btn-round {
|
||||
border-radius: 40px;
|
||||
}
|
||||
&:hover, &:active, &:focus {
|
||||
outline: none;
|
||||
span {
|
||||
margin-left: -10px;
|
||||
}
|
||||
}
|
||||
&.btn-primary {
|
||||
color: #fff;
|
||||
.icon i {
|
||||
color: #28a745;
|
||||
}
|
||||
}
|
||||
&.btn-disabled {
|
||||
color: #fff;
|
||||
background: gray;
|
||||
border-color: gray;
|
||||
}
|
||||
}
|
||||
|
|
@ -49,6 +49,11 @@
|
|||
{% endblock %}
|
||||
|
||||
{% block content_js_media %}
|
||||
<script>
|
||||
function redirectTo(url) {
|
||||
window.location.href = url;
|
||||
}
|
||||
</script>
|
||||
{% include "comments/media-js.html" %}
|
||||
{% include "actionbar/media-js.html" %}
|
||||
{% if request.in_contest_mode %}
|
||||
|
|
@ -138,9 +143,12 @@
|
|||
{% block info_float %}
|
||||
{% if request.user.is_authenticated and request.in_contest_mode and submission_limit %}
|
||||
{% if submissions_left > 0 %}
|
||||
<a href="{{ url('problem_submit', problem.code) }}" class="unselectable button full btn-green small">
|
||||
{{ _('Submit solution') }}
|
||||
</a>
|
||||
<button onclick="redirectTo('{{ url('problem_submit', problem.code) }}')" class="btn-green btn btn-primary btn-block btn-round">
|
||||
<span>{{ _('Submit') }}</span>
|
||||
<div class="icon icon-round d-flex align-items-center justify-content-center">
|
||||
<i class="fa fa-send"></i>
|
||||
</div>
|
||||
</button>
|
||||
<div class="submissions-left">
|
||||
{% trans trimmed counter=submissions_left %}
|
||||
{{ counter }} submission left
|
||||
|
|
@ -149,13 +157,21 @@
|
|||
{% endtrans %}
|
||||
</div>
|
||||
{% else %}
|
||||
<a class="unselectable button full disabled small">{{ _('Submit solution') }}</a>
|
||||
<button class="btn btn-disabled btn-block btn-round">
|
||||
<span>{{ _('Submit') }}</span>
|
||||
<div class="icon icon-round d-flex align-items-center justify-content-center">
|
||||
<i class="fa fa-send"></i>
|
||||
</div>
|
||||
</button>
|
||||
<div class="no-submissions-left submissions-left">{{ _('0 submissions left') }}</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<a href="{{ url('problem_submit', problem.code) }}" class="unselectable button full btn-green small">
|
||||
{{ _('Submit solution') }}
|
||||
</a>
|
||||
<button onclick="redirectTo('{{ url('problem_submit', problem.code) }}')" class="btn-green btn btn-primary btn-block btn-round">
|
||||
<span>{{ _('Submit') }}</span>
|
||||
<div class="icon icon-round d-flex align-items-center justify-content-center">
|
||||
<i class="fa fa-send"></i>
|
||||
</div>
|
||||
</button>
|
||||
{% endif %}
|
||||
|
||||
<hr style="padding-bottom: 0.3em">
|
||||
|
|
@ -295,7 +311,7 @@
|
|||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class = "new-problem-info center">
|
||||
<div class = "new-problem-info d-flex-problem">
|
||||
<span class="info-block">
|
||||
<i class="fa fa-check fa-fw"></i><span class="pi-name">{{ _('Points:') }}</span>
|
||||
<span class="new-pi-value">
|
||||
|
|
@ -324,7 +340,7 @@
|
|||
</span>
|
||||
</span>
|
||||
|
||||
<span class="info-block">
|
||||
<span>
|
||||
<i class="fa fa-file fa-fw"></i><span class="pi-name">{{ _('Output:') }}</span>
|
||||
<span class="new-pi-value">{{ fileio_output or _('stdout') }}</span>
|
||||
</span>
|
||||
|
|
|
|||
Loading…
Reference in a new issue