lkva/NDOJ
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Change button style

Browse source
This commit is contained in:
cuom1999 2022-08-20 11:18:28 -05:00
parent af670f7437
commit f5234dde56
12 changed files with 189 additions and 163 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
resources/base.scss
View file

@ -452,6 +452,7 @@ noscript #noscript {
.toggle {
font-weight: bold;
cursor: pointer;
.fa {
transition: transform 0.4s;

12
resources/contest.scss
View file

@ -185,18 +185,12 @@
form.contest-join-pseudotab {
display: inline;
padding: 6px 8px !important;
line-height: 1.7em;
margin-left: 0.5em;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
margin-left: auto;
input {
display: inline;
border: none;
padding: 0;
background: none;
font-weight: 600;
padding-left: 5px !important;
padding-right: 5px !important;
}
}

2
resources/problem.scss
View file

@ -60,7 +60,6 @@
a {
margin-right: 5px;
display: inline-block;
padding: 3px 10px;
vertical-align: middle;
}
@ -308,6 +307,7 @@ ul.problem-list {
border-radius: 5px;
margin-bottom: 1em;
display: flex;
justify-content: space-between;
}
.problem-feed-option-item {

94
resources/widgets.scss
View file

@ -28,47 +28,93 @@
// Bootstrap-y buttons
.button, button, input[type=submit] {
color: white !important;
text-decoration: none !important;
align-items: center;
background-clip: padding-box;
background-color: #fa6400;
border: 1px solid transparent;
border-radius: .25rem;
box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
box-sizing: border-box;
color: #fff !important;
cursor: pointer;
vertical-align: middle;
white-space: nowrap;
font-weight: 400;
line-height: 1.4;
background: rgb(51, 122, 183) none repeat scroll 0 (0% / auto) padding-box border-box;
background: -webkit-linear-gradient(top, #337ab7 0, #265a88 100%) repeat-x;
background: linear-gradient(to bottom, #337ab7 0, #265a88 100%) repeat-x;
border-radius: $widget_border_radius;
padding: 6px 12px;
display: block;
border: 1px solid #245580;
font-family: system-ui,-apple-system,system-ui,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 16px;
font-weight: 600;
justify-content: center;
line-height: 1.25;
margin: 0;
min-height: 3rem;
padding: calc(.875rem - 1px) calc(1.5rem - 1px);
position: relative;
text-decoration: none;
transition: all 250ms;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
vertical-align: middle;
text-align: center;
// 4k hack
font-size: $base_font_size;
&:hover {
background: #265a88;
}
width: auto;
&.disabled {
background: linear-gradient(to bottom, darkgray 0, gray 100%) repeat-x !important;
border-color: grey !important;
cursor: not-allowed;
}
&.small {
min-height: auto;
padding: calc(.5rem - 1px) calc(1rem - 1px);
}
&.btn-gray {
background: gray;
}
&.btn-green {
background: green;
&:hover {
background: #2c974b;
}
}
&.btn-darkred {
background: darkred;
&:hover {
background: brown;
}
}
&.btn-midnightblue {
background: midnightblue;
&:hover {
background: darkblue;
}
}
}
.button.full, input[type=submit].full, button.full {
padding: 6px 0;
}
button:hover, button:hover, input[type=submit]:hover {
background: #265a88;
.button:hover, button:hover, input[type=submit]:hover {
background-color: #fb8332;
box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
transform: translateY(-1px);
}
.button:focus, button:focus, input[type=submit]:focus {
background-color: #fb8332;
box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
}
.button:active, button:active, input[type=submit]:hover {
border-color: #245580;
background: #265a88;
background-color: #c85000;
box-shadow: rgba(0, 0, 0, .06) 0 2px 4px;
transform: translateY(0);
}
.inline-button {

18
templates/contest/contest-tabs.html
View file

@ -33,14 +33,14 @@
{# Allow users to leave the virtual contest #}
{% if in_contest %}
<form action="{{ url('contest_leave', contest.key) }}" method="post"
class="contest-join-pseudotab unselectable button full">
class="contest-join-pseudotab btn-midnightblue">
{% csrf_token %}
<input type="submit" class="leaving-forever" value="{{ _('Leave contest') }}">
</form>
{% else %}
{# Allow users to virtual join #}
<form action="{{ url('contest_join', contest.key) }}" method="post"
class="contest-join-pseudotab unselectable button full">
class="contest-join-pseudotab btn-midnightblue">
{% csrf_token %}
<input type="submit" value="{{ _('Virtual join') }}">
</form>
@ -49,9 +49,9 @@
{# Allow users to leave the contest #}
{% if in_contest %}
<form action="{{ url('contest_leave', contest.key) }}" method="post"
class="contest-join-pseudotab unselectable button full">
class="contest-join-pseudotab">
{% csrf_token %}
<input type="submit" value="
<input type="submit" class="btn-midnightblue" value="
{%- if request.participation.spectate %}
{{- _('Stop spectating') -}}
{% else %}
@ -59,16 +59,14 @@
{% endif %}">
</form>
{% elif is_editor or is_tester or live_participation.ended %}
<form action="{{ url('contest_join', contest.key) }}" method="post"
class="contest-join-pseudotab unselectable button full">
<form action="{{ url('contest_join', contest.key) }}" method="post" class="contest-join-pseudotab">
{% csrf_token %}
<input type="submit" value="{{ _('Spectate contest') }}">
<input type="submit" class="btn-midnightblue" value="{{ _('Spectate contest') }}">
</form>
{% else %}
<form action="{{ url('contest_join', contest.key) }}" method="post"
class="contest-join-pseudotab unselectable button full">
<form action="{{ url('contest_join', contest.key) }}" method="post" class="contest-join-pseudotab">
{% csrf_token %}
<input type="submit" {% if not has_joined %}class="first-join"{% endif %}
<input type="submit" class="btn-midnightblue {% if not has_joined %}first-join{% endif %}"
value="{{ _('Join contest') }}">
</form>
{% endif %}

171
templates/contest/list.html
View file

@ -91,21 +91,6 @@
'{{ _('Joining a contest for the first time starts your timer, after which it becomes unstoppable.') }}');
});
function makeToggleBtn(btn, divElement) {
btn.click(function() {
divElement.toggle(300);
if (btn.html().trim() === '{{ _('Hide')}}') {
btn.html('{{ _('Show')}}');
}
else {
btn.html('{{ _('Hide')}}');
}
});
}
makeToggleBtn($("#ongoing-btn"), $("#ongoing-table"));
$('#search-org').select2({multiple: 1, placeholder: '{{ _('Groups') }}...'})
.css({'visibility': 'visible'});
@ -205,13 +190,13 @@
{% if request.profile in contest.authors.all() or request.profile in contest.curators.all() or request.profile in contest.testers.all() %}
<form action="{{ url('contest_join', contest.key) }}" method="post">
{% csrf_token %}
<input type="submit" class="unselectable button full participate-button"
<input type="submit" class="unselectable button full small"
value="{{ _('Spectate') }}">
</form>
{% else %}
<form action="{{ url('contest_join', contest.key) }}" method="post">
{% csrf_token %}
<input type="submit" class="unselectable button full participate-button join-warning"
<input type="submit" class="unselectable button full small join-warning"
value="{{ _('Join') }}">
</form>
{% endif %}
@ -233,64 +218,63 @@
{% endfor %}
</select>
{% endif %}
<button id="search-btn"> {{ _('Search')}} </button>
<button id="search-btn" class="btn-green small"> {{ _('Search')}} </button>
</form>
{% if active_participations %}
<h4>{{ _('Active Contests') }}</h4>
<table class="contest-list table striped">
<thead>
<tr>
<th style="width:90%">{{ _('Contest') }}</th>
<th>{{ _('Users') }}</th>
{% if not request.in_contest %}
<th style="width:15%"></th>
{% endif %}
</tr>
</thead>
<tbody>
{% for participation in active_participations %}
{% with contest=participation.contest %}
<tr>
<td>
<div class="contest-block">
{{ contest_head(contest) }}
{% if contest.start_time %}
<br>
{% if contest.time_limit %}
<span class="time">
{% trans countdown=participation.end_time|as_countdown %}Window ends in {{countdown}}{% endtrans %}
</span>
{% elif contest.time_before_end %}
<span class="time">{% trans countdown=contest.end_time|as_countdown %}Ends in {{countdown}}{% endtrans %}</span>
<h4 class="toggle open">
<i class="fa fa-chevron-right fa-fw"></i>
{{ _('Active Contests') }}
</h4>
<div class="toggled">
<table class="contest-list table striped">
<thead>
<tr>
<th style="width:90%">{{ _('Contest') }}</th>
<th>{{ _('Users') }}</th>
{% if not request.in_contest %}
<th style="width:15%"></th>
{% endif %}
</tr>
</thead>
<tbody>
{% for participation in active_participations %}
{% with contest=participation.contest %}
<tr>
<td>
<div class="contest-block">
{{ contest_head(contest) }}
{% if contest.start_time %}
<br>
{% if contest.time_limit %}
<span class="time">
{% trans countdown=participation.end_time|as_countdown %}Window ends in {{countdown}}{% endtrans %}
</span>
{% elif contest.time_before_end %}
<span class="time">{% trans countdown=contest.end_time|as_countdown %}Ends in {{countdown}}{% endtrans %}</span>
{% endif %}
{{ time_left(contest) }}
{% endif %}
{{ time_left(contest) }}
{% endif %}
</div>
</td>
<td>
{{ user_count(contest, request.user) }}
</td>
{{ contest_join(contest, request) }}
</tr>
{% endwith %}
{% endfor %}
</tbody>
</table>
</div>
</td>
<td>
{{ user_count(contest, request.user) }}
</td>
{{ contest_join(contest, request) }}
</tr>
{% endwith %}
{% endfor %}
</tbody>
</table>
</div>
<br>
{% endif %}
{% if current_contests %}
<h4>
<h4 class="toggle open">
<i class="fa fa-chevron-right fa-fw"></i>
{{ _('Ongoing Contests') }}
<button class="btn-contest" id="ongoing-btn">
{% if page_obj and page_obj.number > 1%}
{{_('Show')}}
{% else %}
{{_('Hide')}}
{% endif %}
</button>
</h4>
<div id="ongoing-table">
<div id="ongoing-table" class="toggled">
<table class="contest-list table striped">
<thead>
<tr>
@ -328,33 +312,38 @@
</div>
{% endif %}
<h4>{{ _('Upcoming Contests') }}</h4>
<h4 class="toggle open">
<i class="fa fa-chevron-right fa-fw"></i>
{{ _('Upcoming Contests') }}
</h4>
{% if future_contests %}
<table class="contest-list table striped">
<thead>
<tr>
<th>{{ _('Contest') }}</th>
</tr>
</thead>
<tbody>
{% for contest in future_contests %}
<div class="toggled">
<table class="contest-list table striped">
<thead>
<tr>
<td>
<div class="contest-block">
{{ contest_head(contest) }}
{% if contest.start_time %}
<br>
{% if contest.time_before_start %}
<span class="time">{{ _('Starting in %(countdown)s.', countdown=contest.start_time|as_countdown) }}</span>
{% endif %}
{{ time_left(contest) }}
{% endif %}
</div>
</td>
<th>{{ _('Contest') }}</th>
</tr>
{% endfor %}
</tbody>
</table>
</thead>
<tbody>
{% for contest in future_contests %}
<tr>
<td>
<div class="contest-block">
{{ contest_head(contest) }}
{% if contest.start_time %}
<br>
{% if contest.time_before_start %}
<span class="time">{{ _('Starting in %(countdown)s.', countdown=contest.start_time|as_countdown) }}</span>
{% endif %}
{{ time_left(contest) }}
{% endif %}
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% else %}
<i>{{ _('There are no scheduled contests at this time.') }}</i>
<br>
@ -397,7 +386,7 @@
{% if not request.in_contest %}
<td><form action="{{ url('contest_join', contest.key) }}" method="post">
{% csrf_token %}
<input type="submit" class="unselectable button full participate-button"
<input type="submit" class="unselectable button full small"
value="{{ _('Virtual join') }}">
</form></td>
{% endif %}

6
templates/problem/feed.html
View file

@ -5,14 +5,14 @@
{% block middle_content %}
<div class="problem-feed-option">
<a href="{{url('problem_feed')}}" class="problem-feed-option-item {{'active' if feed_type=='for_you'}}">
<a href="{{url('problem_feed')}}" class="button small {{'btn-darkred' if feed_type=='for_you' else 'btn-gray'}}">
{{_('FOR YOU')}}
</a>
<a href="{{url('problem_feed_new')}}" class="problem-feed-option-item {{'active' if feed_type=='new'}}">
<a href="{{url('problem_feed_new')}}" class="button small {{'btn-darkred' if feed_type=='new' else 'btn-gray'}}">
{{_('NEW')}}
</a>
{% if request.user.has_perm('judge.suggest_problem_changes') %}
<a href="{{url('problem_feed_volunteer')}}" class="problem-feed-option-item {{'active' if feed_type=='volunteer'}}">
<a href="{{url('problem_feed_volunteer')}}" class="button small {{'btn-darkred' if feed_type=='volunteer' else 'btn-gray'}}">
{{_('VOLUNTEER')}}
</a>
{% endif %}

4
templates/problem/problem.html
View file

@ -164,7 +164,7 @@
{% 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">
<a href="{{ url('problem_submit', problem.code) }}" class="unselectable button full btn-green">
{{ _('Submit solution') }}
</a>
<div class="submissions-left">
@ -179,7 +179,7 @@
<div class="no-submissions-left submissions-left">{{ _('0 submissions left') }}</div>
{% endif %}
{% else %}
<a href="{{ url('problem_submit', problem.code) }}" class="unselectable button full">
<a href="{{ url('problem_submit', problem.code) }}" class="unselectable button full btn-green">
{{ _('Submit solution') }}
</a>
{% endif %}

4
templates/problem/search-form.html
View file

@ -98,8 +98,8 @@
<input id="point-start" type="hidden" name="point_start" {% if point_start and point_start != point_values.min %}value="{{ point_start }}"{% else %}disabled{% endif %}>
<input id="point-end" type="hidden" name="point_end" {% if point_end and point_end != point_values.max %}value="{{ point_end }}"{% else %}disabled{% endif %}>
<div class="form-submit-group">
<a id="go" class="button">{{ _('Go') }}</a>
<a id="random" class="button">{{ _('Random') }}</a>
<a id="go" class="button small btn-darkred">{{ _('Go') }}</a>
<a id="random" class="button small btn-darkred">{{ _('Random') }}</a>
</div>
</form>
</div>

2
templates/submission/list.html
View file

@ -348,7 +348,7 @@
</select>
</div>
<div class="form-submit-group">
<a id="go" onclick="form.submit()" class="button">{{ _('Go') }}</a>
<a id="go" onclick="form.submit()" class="button small">{{ _('Go') }}</a>
</div>
</form>
</div>

30
templates/user/edit-profile.html
View file

@ -161,21 +161,6 @@
</a>
</td>
</tr>
<tr>
<td colspan="2"><span class="inline-header">
{% if profile.is_totp_enabled %}
{{ _('Two Factor Authentication is enabled.') }}
{% if require_staff_2fa and request.user.is_staff %}
<a id="disable-2fa-button" class="button inline-button">Disable</a>
{% else %}
<a href="{{ url('disable_2fa') }}" class="button inline-button">Disable</a>
{% endif %}
{% else %}
{{ _('Two Factor Authentication is disabled.') }}
<a href="{{ url('enable_2fa') }}" class="button inline-button">Enable</a>
{% endif %}
</span></td>
</tr>
</table>
</td>
<td>
@ -187,7 +172,20 @@
</tr>
</table>
<hr>
<div>
{% if profile.is_totp_enabled %}
{{ _('Two Factor Authentication is enabled.') }}
{% if require_staff_2fa and request.user.is_staff %}
<a id="disable-2fa-button" class="button inline-button">Disable</a>
{% else %}
<a href="{{ url('disable_2fa') }}" class="button inline-button">Disable</a>
{% endif %}
{% else %}
{{ _('Two Factor Authentication is disabled.') }}
<a href="{{ url('enable_2fa') }}" class="button inline-button">Enable</a>
{% endif %}
</div>
<br><hr>
<div class="block-header">{{ _('User-script') }}:</div>
{{ form.user_script }}
<hr>

6
templates/user/user-base.html
View file

@ -95,7 +95,7 @@
{% if request.user != user.user %}
<form method="post">
{% csrf_token %}
<button style="width:135px" class="{{ 'unfollow' if followed else 'follow' }}">
<button class="small {{ 'unfollow' if followed else 'follow' }}" style="width:135px">
{% if followed %}
<i class="fa fa-remove"></i>
{{ _('Unfollow') }}
@ -109,7 +109,7 @@
<br>
<div>
<form action="{{ url('all_user_submissions', user.user.username) }}">
<input type="submit" value="{{ _('View submissions') }}" style="width:135px">
<input type="submit" value="{{ _('View submissions') }}" class="small" style="width:135px">
</form>
</div>
{% if request.user.is_authenticated %}
@ -118,7 +118,7 @@
<form action="{{ url('get_or_create_room') }}" method="POST">
{% csrf_token %}
<input type="hidden" value="{{ chat_param(request.profile, user) }}" name="other">
<input type="submit" value="{{ _('Send message') }}" style="width:135px">
<input type="submit" value="{{ _('Send message') }}" style="width:135px" class="small btn-midnightblue">
</form>
</div>
{% endif %}