Merge pull request #128 from anhkha2003/master

Improve UI for mobile

resources/base.scss

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

resources/contest.scss

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

resources/table.scss

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

templates/course/grades.html

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

templates/two-column-content.html

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