New Problem UI (Problem Information & Submit Button) (#95)

locale/vi/LC_MESSAGES/django.po

@@ -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"

resources/problem.scss

@@ -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;
+    }
 }

resources/widgets.scss

@@ -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;
         }
     }
 
@@ -742,3 +745,134 @@ ul.errorlist {
         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;
+    }
+}

templates/problem/problem.html

@@ -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">
+      <button onclick="redirectTo('{{ url('problem_submit', problem.code) }}')" class="btn-green btn btn-primary btn-block btn-round">
-        {{ _('Submit solution') }}
+        <span>{{ _('Submit') }}</span>
-      </a>
+        <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">
+    <button onclick="redirectTo('{{ url('problem_submit', problem.code) }}')" class="btn-green btn btn-primary btn-block btn-round">
-      {{ _('Submit solution') }}
+      <span>{{ _('Submit') }}</span>
-    </a>
+      <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>