Improve design for mobile

This commit is contained in:
anhkha2003 2024-10-03 01:50:21 -05:00
parent 18d23c771a
commit dbe3caadb3
5 changed files with 16 additions and 18 deletions

View file

@ -139,7 +139,7 @@ b {
h2 { h2 {
font-weight: 400; font-weight: 400;
font-size: 2em; font-size: 1.7em;
border-radius: $widget_border_radius; border-radius: $widget_border_radius;
padding: 0; padding: 0;
margin: 0; margin: 0;

View file

@ -123,7 +123,7 @@
text-decoration: none; text-decoration: none;
text-align: center; text-align: center;
line-height: 1.3; line-height: 1.3;
font-size: 2.3em; font-size: 2em;
padding-bottom: 0.15em; padding-bottom: 0.15em;
&:link, &:visited { &:link, &:visited {

View file

@ -23,12 +23,10 @@
} }
th:first-child, td:first-child { th:first-child, td:first-child {
border-color: $border_gray;
border-width: 1px 1px 0 1px; border-width: 1px 1px 0 1px;
} }
tr:last-child td { tr:last-child td {
border-color: $border_gray;
border-bottom-width: 1px; border-bottom-width: 1px;
} }

View file

@ -75,15 +75,17 @@
{% block middle_content %} {% block middle_content %}
<center><h2>{{content_title}}</h2></center> <center><h2>{{content_title}}</h2></center>
<div style="margin-top: 0.5em;">
{{_("Sort by")}}: {{_("Sort by")}}:
<div> <div style="margin-top: 0.5em;">
<select id="sortSelect"> <select id="sortSelect">
<option value="username">{{_("Username")}}</option> <option value="username">{{_("Username")}}</option>
<option value="total">{{_("Score")}}</option> <option value="total">{{_("Score")}}</option>
</select> </select>
<input type="text" id="search-input" placeholder="{{_('Search')}}" autofocus> <input type="text" id="search-input" placeholder="{{_('Search')}}" autofocus>
</div> </div>
<div style="overflow-x: auto; margin-top: 1em"> </div>
<div style="overflow-x: auto; margin-top: 1em; clear: both;">
<table class="table striped" id="users-table"> <table class="table striped" id="users-table">
<thead> <thead>
<tr> <tr>

View file

@ -3,13 +3,11 @@
{% block three_col_media %} {% block three_col_media %}
<style> <style>
@media (min-width: 800px) {
.middle-content { .middle-content {
min-width: 96%; min-width: 96%;
max-width: 96%; max-width: 96%;
margin-left: 2%; margin-left: 2%;
} }
}
</style> </style>
{% block two_col_media %}{% endblock %} {% block two_col_media %}{% endblock %}
{% endblock %} {% endblock %}