fix: 突出提交按钮

BITNP · Aug 23, 2024 · 03c384c · 03c384c
1 parent 67c8365
commit 03c384c
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 6 deletions.
diff --git a/contest/quiz/templates/base.html b/contest/quiz/templates/base.html
@@ -38,7 +38,7 @@
               <!-- Left nav -->
               <div class="flex items-center">
                 <div class="flex-shrink-0">
-                  <img class="h-8 w-8" src="{% static 'img/bit-icon.svg' %}" alt="北京理工大学">
+                  <img class="size-8" src="{% static 'img/bit-icon.svg' %}" alt="北京理工大学">
                 </div>
                 <div class="hidden md:block">
                   <div class="ml-10 flex items-baseline space-x-4">
@@ -86,7 +86,7 @@
                   <span class="absolute -inset-0.5"></span>
                   <span class="sr-only">打开主菜单</span>
                   <!-- Show if menu is closed -->
-                  <svg class="h-6 w-6"
+                  <svg class="size-6"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke-width="1.5"
@@ -95,7 +95,7 @@
                     <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
                   </svg>
                   <!-- Show if menu is open -->
-                  <svg class="hidden h-6 w-6"
+                  <svg class="hidden size-6"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke-width="1.5"

diff --git a/contest/quiz/templates/contest.html b/contest/quiz/templates/contest.html
@@ -62,7 +62,20 @@
         {% endfor %}
         <div class="text-center">
           <button type="submit"
-                  class="px-4 py-2 bg-red-700 text-white shadow rounded-full hover:bg-red-500">提交</button>
+                  class="text-lg text-red-700 font-bold px-4 py-2 bg-white shadow rounded-full hover:bg-gray-100">
+            <!-- https://heroicons.com/ arrow-up-tray -->
+            {# 图标上下不对称，不能按默认居中对齐，不然显得偏 #}
+            <svg class="size-6 inline align-text-bottom"
+                 xmlns="http://www.w3.org/2000/svg"
+                 fill="none"
+                 viewBox="0 0 24 24"
+                 stroke-width="2"
+                 stroke="currentColor"
+                 class="size-6">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5" />
+            </svg>
+            提交
+          </button>
         </div>
       </form>
     </article>

diff --git a/contest/quiz/templates/index.html b/contest/quiz/templates/index.html
@@ -46,7 +46,7 @@ <h1 class="text-3xl font-bold tracking-tight sm:text-4xl text-center lg:text-lef
                  id="url-quiz-contest"
                  class="text-lg px-4 py-2 bg-red-700 text-white shadow rounded-full hover:bg-red-500">
                 <!-- https://heroicons.com/ arrow-left-on-rectangle -->
-                <svg class="h-6 w-6 inline"
+                <svg class="size-6 inline"
                      xmlns="http://www.w3.org/2000/svg"
                      fill="none"
                      viewBox="0 0 24 24"

diff --git a/contest/quiz/templates/info.html b/contest/quiz/templates/info.html
@@ -29,7 +29,7 @@ <h2>成绩</h2>
              id="url-quiz-contest"
              class="text-lg px-4 py-2 bg-red-700 text-white shadow rounded-full hover:bg-red-500">
             <!-- https://heroicons.com/ arrow-left-on-rectangle -->
-            <svg class="h-6 w-6 inline"
+            <svg class="size-6 inline"
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"