Change button style

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

View file

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

View file

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

View file

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

View file

@ -28,47 +28,93 @@
// Bootstrap-y buttons // Bootstrap-y buttons
.button, button, input[type=submit] { .button, button, input[type=submit] {
color: white !important; align-items: center;
text-decoration: none !important; 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; 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; 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; text-align: center;
width: auto;
// 4k hack
font-size: $base_font_size;
&:hover {
background: #265a88;
}
&.disabled { &.disabled {
background: linear-gradient(to bottom, darkgray 0, gray 100%) repeat-x !important; background: linear-gradient(to bottom, darkgray 0, gray 100%) repeat-x !important;
border-color: grey !important; border-color: grey !important;
cursor: not-allowed; 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 { .button.full, input[type=submit].full, button.full {
padding: 6px 0;
} }
button:hover, button:hover, input[type=submit]:hover { .button:hover, button:hover, input[type=submit]:hover {
background: #265a88; 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 { .button:active, button:active, input[type=submit]:hover {
border-color: #245580; background-color: #c85000;
background: #265a88; box-shadow: rgba(0, 0, 0, .06) 0 2px 4px;
transform: translateY(0);
} }
.inline-button { .inline-button {

View file

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

View file

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

View file

@ -5,14 +5,14 @@
{% block middle_content %} {% block middle_content %}
<div class="problem-feed-option"> <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')}} {{_('FOR YOU')}}
</a> </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')}} {{_('NEW')}}
</a> </a>
{% if request.user.has_perm('judge.suggest_problem_changes') %} {% 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')}} {{_('VOLUNTEER')}}
</a> </a>
{% endif %} {% endif %}

View file

@ -164,7 +164,7 @@
{% block info_float %} {% block info_float %}
{% if request.user.is_authenticated and request.in_contest_mode and submission_limit %} {% if request.user.is_authenticated and request.in_contest_mode and submission_limit %}
{% if submissions_left > 0 %} {% 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') }} {{ _('Submit solution') }}
</a> </a>
<div class="submissions-left"> <div class="submissions-left">
@ -179,7 +179,7 @@
<div class="no-submissions-left submissions-left">{{ _('0 submissions left') }}</div> <div class="no-submissions-left submissions-left">{{ _('0 submissions left') }}</div>
{% endif %} {% endif %}
{% else %} {% 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') }} {{ _('Submit solution') }}
</a> </a>
{% endif %} {% endif %}

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-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 %}> <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"> <div class="form-submit-group">
<a id="go" class="button">{{ _('Go') }}</a> <a id="go" class="button small btn-darkred">{{ _('Go') }}</a>
<a id="random" class="button">{{ _('Random') }}</a> <a id="random" class="button small btn-darkred">{{ _('Random') }}</a>
</div> </div>
</form> </form>
</div> </div>

View file

@ -348,7 +348,7 @@
</select> </select>
</div> </div>
<div class="form-submit-group"> <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> </div>
</form> </form>
</div> </div>

View file

@ -161,21 +161,6 @@
</a> </a>
</td> </td>
</tr> </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> </table>
</td> </td>
<td> <td>
@ -187,7 +172,20 @@
</tr> </tr>
</table> </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> <div class="block-header">{{ _('User-script') }}:</div>
{{ form.user_script }} {{ form.user_script }}
<hr> <hr>

View file

@ -95,7 +95,7 @@
{% if request.user != user.user %} {% if request.user != user.user %}
<form method="post"> <form method="post">
{% csrf_token %} {% 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 %} {% if followed %}
<i class="fa fa-remove"></i> <i class="fa fa-remove"></i>
{{ _('Unfollow') }} {{ _('Unfollow') }}
@ -109,7 +109,7 @@
<br> <br>
<div> <div>
<form action="{{ url('all_user_submissions', user.user.username) }}"> <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> </form>
</div> </div>
{% if request.user.is_authenticated %} {% if request.user.is_authenticated %}
@ -118,7 +118,7 @@
<form action="{{ url('get_or_create_room') }}" method="POST"> <form action="{{ url('get_or_create_room') }}" method="POST">
{% csrf_token %} {% csrf_token %}
<input type="hidden" value="{{ chat_param(request.profile, user) }}" name="other"> <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> </form>
</div> </div>
{% endif %} {% endif %}