Commit

resources/newProblem.scss

@@ -0,0 +1,306 @@
+:root {
+    --green: #28a745;
+    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+
+@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;
+}
+
+@media (min-width: 576px) {
+    .d-sm-flex {
+        display: -webkit-box !important;
+        display: -ms-flexbox !important;
+        display: flex !important;
+    }
+}
+
+@media (min-width: 768px) {
+    .d-md-flex {
+        display: -webkit-box !important;
+        display: -ms-flexbox !important;
+        display: flex !important;
+    }
+}
+
+@media (min-width: 992px) {
+    .d-lg-flex {
+        display: -webkit-box !important;
+        display: -ms-flexbox !important;
+        display: flex !important;
+    }
+}
+
+@media (min-width: 1200px) {
+    .d-xl-flex {
+        display: -webkit-box !important;
+        display: -ms-flexbox !important;
+        display: flex !important;
+    }
+}
+
+@media print {
+    .d-print-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;
+}
+
+@media (min-width: 576px) {
+    .justify-content-sm-center {
+        -webkit-box-pack: center !important;
+        -ms-flex-pack: center !important;
+        justify-content: center !important;
+    }
+    .align-items-sm-center {
+        -webkit-box-align: center !important;
+        -ms-flex-align: center !important;
+        align-items: center !important;
+    }
+    .align-content-sm-center {
+        -ms-flex-line-pack: center !important;
+        align-content: center !important;
+    }
+    .align-self-sm-center {
+        -ms-flex-item-align: center !important;
+        -ms-grid-row-align: center !important;
+        align-self: center !important;
+    }
+}
+
+@media (min-width: 768px) {
+    .justify-content-md-center {
+        -webkit-box-pack: center !important;
+        -ms-flex-pack: center !important;
+        justify-content: center !important;
+    }
+    .align-items-md-center {
+        -webkit-box-align: center !important;
+        -ms-flex-align: center !important;
+        align-items: center !important;
+    }
+    .align-content-md-center {
+        -ms-flex-line-pack: center !important;
+        align-content: center !important;
+    }
+    .align-self-md-center {
+        -ms-flex-item-align: center !important;
+        -ms-grid-row-align: center !important;
+        align-self: center !important;
+    }
+}
+
+@media (min-width: 992px) {
+    .justify-content-lg-center {
+        -webkit-box-pack: center !important;
+        -ms-flex-pack: center !important;
+        justify-content: center !important;
+    }
+    .align-items-lg-center {
+        -webkit-box-align: center !important;
+        -ms-flex-align: center !important;
+        align-items: center !important;
+    }
+    .align-content-lg-center {
+        -ms-flex-line-pack: center !important;
+        align-content: center !important;
+    }
+    .align-self-lg-center {
+        -ms-flex-item-align: center !important;
+        -ms-grid-row-align: center !important;
+        align-self: center !important;
+    }
+}
+
+@media (min-width: 1200px) {
+    .justify-content-xl-center {
+        -webkit-box-pack: center !important;
+        -ms-flex-pack: center !important;
+        justify-content: center !important;
+    }
+    .align-items-xl-center {
+        -webkit-box-align: center !important;
+        -ms-flex-align: center !important;
+        align-items: center !important;
+    }
+    .align-content-xl-center {
+        -ms-flex-line-pack: center !important;
+        align-content: center !important;
+    }
+    .align-self-xl-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;
+}
+
+a:hover, a:focus {
+    text-decoration: none !important;
+    outline: none !important;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+
+button {
+    -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;
+}
+
+.btn 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;
+}
+
+.btn:hover, .btn:active, .btn:focus {
+    outline: none !important;
+}
+
+.btn:hover span, .btn:active span, .btn:focus span {
+    margin-left: -10px;
+}
+
+.btn .icon {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 45px;
+    bottom: 0;
+    background: #fff;
+}
+
+.btn .icon i {
+    font-size: 20px;
+}
+
+.btn .icon.icon-round {
+    border-radius: 50%;
+}
+
+.btn.btn-tertiary {
+    color: #fff;
+    background: var(--green);
+    border-color: var(--green);
+}
+
+.btn.btn-tertiary:hover, .btn.btn-tertiary:focus {
+    border-color: green !important;
+    background: green !important;
+}
+
+.btn.btn-tertiary .icon i {
+    color: var(--green);
+}
+
+.btn.btn-round {
+    border-radius: 40px;
+}
+
+.new-problem-info {
+    background-color: #fff6dd;
+    border-radius: 25px;
+    font-size: 14px;
+    height: 25px;
+    width: 98%;
+    display: table;
+    padding: 5px;
+    margin-top: 14px;
+    border: solid;
+    border-color: black;
+    border-width: 0.1px;
+}
+
+.info-block {
+    margin-right: auto;
+}

resources/problem.scss

@@ -415,20 +415,4 @@ ul.problem-list {
             min-width: 7em;
         }
     }
-}
-
-.new-problem-info {
-    background-color: #fff6dd;
-    border-radius: 25px;
-    font-size: 14px;
-    height: 25px;
-    width: 100%;
-    display: table;
-    padding: 5px;
-    margin-top: 12px;
-}
-
-.info-block {
-    display:table-cell;
-    vertical-align:middle;
 }

resources/style.scss

@@ -17,3 +17,4 @@
 @import "ticket";
 @import "pagedown_widget";
 @import "dmmd-preview";
+@import "newProblem"

templates/problem/problem.html

@@ -1,6 +1,7 @@
 {% extends "common-content.html" %}
 {% block content_media %}
   {% include "comments/media-css.html" %}
+  <link rel="stylesheet" href="resources/newButton.scssfs">
   <style>
     .title-state {
       font-size: 2em;
@@ -49,6 +50,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 +144,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 btn-tertiary 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 +158,21 @@
         {% endtrans %}
       </div>
     {% else %}
-      <a class="unselectable button full disabled small">{{ _('Submit solution') }}</a>
+      <button onclick="redirectTo('{{ url('problem_submit', problem.code) }}')" class="btn btn-tertiary 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 btn-tertiary 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 +312,7 @@
       </a>
     </div>
   {% endif %}
-  <div class = "new-problem-info center">
+  <div class = "new-problem-info d-flex align-items-center justify-content-center">
     <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 +341,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>