From 907dba2362a62a98f0a9d9c2e401db769bbe55d8 Mon Sep 17 00:00:00 2001 From: Levy Date: Wed, 6 Sep 2023 14:30:47 +0800 Subject: [PATCH] Add problem detail page style && Fix navBar and problem main page style --- .../ui-default/components/menu/menu.page.styl | 7 +- .../navigation/navigation.page.styl | 2 +- .../components/problem/tag.page.styl | 2 +- packages/ui-default/misc/section.styl | 2 +- packages/ui-default/misc/tailwindstylus.styl | 274 +++++++++--------- .../ui-default/pages/problem_detail.page.styl | 5 +- .../ui-default/pages/problem_main.page.styl | 6 +- .../ui-default/templates/problem_detail.html | 24 +- 8 files changed, 167 insertions(+), 155 deletions(-) diff --git a/packages/ui-default/components/menu/menu.page.styl b/packages/ui-default/components/menu/menu.page.styl index 48777ce..5e52e1d 100644 --- a/packages/ui-default/components/menu/menu.page.styl +++ b/packages/ui-default/components/menu/menu.page.styl @@ -27,7 +27,7 @@ position: relative &.highlight - background: mix($highlight-color, #FFF, 10%) + // background: mix($highlight-color, #FFF, 10%) &.expandable:after font-family: $icon-font-name @@ -50,10 +50,11 @@ a.menu__link, button.menu__link opacity: 0.5 &:hover text-decoration: none + // border: none &:not(.disabled):hover color: $text-1-color - background: $menu-item-bg-color-hover - border-color: darken($primary-color, 10%) + // background: $menu-item-bg-color-hover + // border-color: darken($primary-color, 10%) &.active, &.active:hover border-color: darken($secondary-color, 30%) background: $secondary-color diff --git a/packages/ui-default/components/navigation/navigation.page.styl b/packages/ui-default/components/navigation/navigation.page.styl index 956886b..5de108c 100644 --- a/packages/ui-default/components/navigation/navigation.page.styl +++ b/packages/ui-default/components/navigation/navigation.page.styl @@ -89,7 +89,7 @@ display: block line-height: rem($nav-item-height - 6) padding: rem(0 20px 3px 20px) - margin-right: rem(10px) + margin-right: rem(4px) border-top: 3px solid transparent color: #000 transition: border-color .2s, background .2s, color .2s diff --git a/packages/ui-default/components/problem/tag.page.styl b/packages/ui-default/components/problem/tag.page.styl index 2068e24..acee505 100644 --- a/packages/ui-default/components/problem/tag.page.styl +++ b/packages/ui-default/components/problem/tag.page.styl @@ -7,7 +7,7 @@ display: flex flex-wrap: wrap border-radius: 16px - background: #8BA5FF + // background: #8BA5FF .problem__tag display: inline-block diff --git a/packages/ui-default/misc/section.styl b/packages/ui-default/misc/section.styl index a418352..e9cfe15 100644 --- a/packages/ui-default/misc/section.styl +++ b/packages/ui-default/misc/section.styl @@ -60,7 +60,7 @@ padding: rem($section-gap-h) .section__title - color: $section-title-color + // color: $section-title-color .section__header .section__title line-height: $form-control-height diff --git a/packages/ui-default/misc/tailwindstylus.styl b/packages/ui-default/misc/tailwindstylus.styl index 7b96579..4bfeeb9 100644 --- a/packages/ui-default/misc/tailwindstylus.styl +++ b/packages/ui-default/misc/tailwindstylus.styl @@ -44,50 +44,50 @@ align-items: stretch .p-1 - padding: 4px + padding: 4px !important .p-2 - padding: 8px + padding: 8px !important .p-3 - padding: 12px + padding: 12px !important .p-4 - padding: 16px + padding: 16px !important .px-1 - padding-left: 4px - padding-right: 4px + padding-left: 4px !important + padding-right: 4px !important .py-1 - padding-top: 4px - padding-bottom: 4px + padding-top: 4px !important + padding-bottom: 4px !important .m-1 - margin: 4px + margin: 4px !important .m-2 - margin: 8px + margin: 8px !important .m-3 - margin: 12px + margin: 12px !important .m-4 - margin: 16px + margin: 16px !important .mx-1 - margin-left: 4px - margin-right: 4px + margin-left: 4px !important + margin-right: 4px !important .my-1 - margin-top: 4px - margin-bottom: 4px + margin-top: 4px !important + margin-bottom: 4px !important .text-black - color: #000 + color: #000 !important .text-white - color: #FFF + color: #FFF !important .text-gray color: #888 @@ -101,6 +101,15 @@ .text-blue color: #00F +.text-yellow + color: #FF0 + +.text-purple + color: #800080 !important + +.text-pink + color: #FFC0CB + .bg-black background-color: #000 @@ -119,59 +128,68 @@ .bg-blue background-color: #00F +.bg-purple + background-color: #BE96FF !important + +.bg-yellow + background-color: #FF0 + +.bg-pink + background-color: #FFC0CB + .mt-1 - margin-top: 4px + margin-top: 4px !important .mt-2 - margin-top: 8px + margin-top: 8px !important .mt-3 - margin-top: 12px + margin-top: 12px !important .mt-4 - margin-top: 16px + margin-top: 16px !important .mb-1 - margin-bottom: 4px + margin-bottom: 4px !important .mb-2 - margin-bottom: 8px + margin-bottom: 8px !important .mb-3 - margin-bottom: 12px + margin-bottom: 12px !important .mb-4 - margin-bottom: 16px + margin-bottom: 16px !important .ml-1 - margin-left: 4px + margin-left: 4px !important .ml-2 - margin-left: 8px + margin-left: 8px !important .ml-3 - margin-left: 12px + margin-left: 12px !important .ml-4 - margin-left: 16px + margin-left: 16px !important .mr-1 - margin-right: 4px + margin-right: 4px !important .mr-2 - margin-right: 8px + margin-right: 8px !important .mr-3 - margin-right: 12px + margin-right: 12px !important .mr-4 - margin-right: 16px + margin-right: 16px !important .p-5 - padding: 20px + padding: 20px !important .p-6 - padding: 24px + padding: 24px !important .px-5 padding-left: 20px @@ -182,10 +200,10 @@ padding-bottom: 20px .m-5 - margin: 20px + margin: 20px !important .m-6 - margin: 24px + margin: 24px !important .mx-5 margin-left: 20px @@ -196,191 +214,172 @@ margin-bottom: 20px .mt-5 - margin-top: 20px + margin-top: 20px !important .mt-6 - margin-top: 24px + margin-top: 24px !important .mb-5 - margin-bottom: 20px + margin-bottom: 20px !important .mb-6 - margin-bottom: 24px + margin-bottom: 24px !important .ml-5 - margin-left: 20px + margin-left: 20px !important .ml-6 - margin-left: 24px + margin-left: 24px !important .mr-5 - margin-right: 20px + margin-right: 20px !important .mr-6 - margin-right: 24px - -// Additional font color utilities -.text-yellow - color: #FF0 - -.text-purple - color: #800080 - -.text-pink - color: #FFC0CB - -.bg-yellow - background-color: #FF0 - -.bg-purple - background-color: #800080 - -.bg-pink - background-color: #FFC0CB + margin-right: 24px !important .text-xs - font-size: 10px + font-size: 10px !important .text-sm - font-size: 12px + font-size: 12px !important .text-md - font-size: 16px + font-size: 16px !important .text-lg - font-size: 20px + font-size: 20px !important .text-xl - font-size: 24px + font-size: 24px !important .w-1 - width: 4px + width: 4px !important .w-2 - width: 8px + width: 8px !important .w-3 - width: 12px + width: 12px !important .w-4 - width: 16px + width: 16px !important .w-5 - width: 20px + width: 20px !important .w-6 - width: 24px + width: 24px !important .w-1/2 - width: 50% + width: 50% !important -.w-1/3 +.w-1/3 !important width: 33.33333% .w-2/3 - width: 66.66667% + width: 66.66667% !important .w-1/4 - width: 25% + width: 25% !important .w-3/4 - width: 75% + width: 75% !important .w-full - width: 100% + width: 100% !important .h-1 - height: 4px + height: 4px !important .h-2 - height: 8px + height: 8px !important .h-3 - height: 12px + height: 12px !important .h-4 - height: 16px + height: 16px !important .h-5 - height: 20px + height: 20px !important .h-6 - height: 24px + height: 24px !important .h-1/2 - height: 50% + height: 50% !important .h-1/3 height: 33.33333% .h-2/3 - height: 66.66667% + height: 66.66667% !important .h-1/4 - height: 25% + height: 25% !important .h-3/4 - height: 75% + height: 75% !important .h-full - height: 100% + height: 100% !important .w-7 - width: 28px + width: 28px !important .w-8 - width: 32px + width: 32px !important .w-9 - width: 36px + width: 36px !important .w-10 - width: 40px + width: 40px !important .w-11 - width: 44px + width: 44px !important .w-12 - width: 48px + width: 48px !important .w-13 - width: 52px + width: 52px !important .w-14 - width: 56px + width: 56px !important .w-15 - width: 60px + width: 60px !important .w-16 - width: 64px + width: 64px !important .w-17 - width: 68px + width: 68px !important .w-18 - width: 72px + width: 72px !important .w-19 - width: 76px + width: 76px !important .w-20 - width: 80px + width: 80px !important .w-21 - width: 84px + width: 84px !important .w-22 - width: 88px + width: 88px !important .w-23 - width: 92px + width: 92px !important .w-24 - width: 96px + width: 96px !important .h-7 - height: 28px + height: 28px !important .h-8 height: 32px !important @@ -401,43 +400,43 @@ height: 52px !important .h-14 - height: 56px + height: 56px !important .h-15 - height: 60px + height: 60px !important .h-16 - height: 64px + height: 64px !important .h-17 - height: 68px + height: 68px !important .h-18 - height: 72px + height: 72px !important .h-19 - height: 76px + height: 76px !important .h-20 - height: 80px + height: 80px !important .h-21 - height: 84px + height: 84px !important .h-22 - height: 88px + height: 88px !important .h-23 - height: 92px + height: 92px !important .h-24 - height: 96px + height: 96px !important .text-2xs - font-size: 8px + font-size: 8px !important .text-xs - font-size: 10px + font-size: 10px !important .text-sm font-size: 12px !important @@ -452,19 +451,19 @@ font-size: 24px !important .text-2xl - font-size: 28px + font-size: 28px !important .text-3xl - font-size: 32px + font-size: 32px !important .text-4xl - font-size: 36px + font-size: 36px !important .text-5xl - font-size: 40px + font-size: 40px !important .text-6xl - font-size: 48px + font-size: 48px !important .font-thin font-weight: 100 @@ -476,13 +475,13 @@ font-weight: 300 .font-normal - font-weight: 400 + font-weight: 400 !important .font-medium - font-weight: 500 + font-weight: 500 !important .font-semibold - font-weight: 600 + font-weight: 600 !important .font-bold font-weight: 700 @@ -550,6 +549,15 @@ .rounded-lg border-radius: 8px +.rounded-xl + border-radius: 12px + +.rounded-2xl + border-radius: 16px + +.rounded-3xl + border-radius: 20px !important + .rounded-full border-radius: 9999px diff --git a/packages/ui-default/pages/problem_detail.page.styl b/packages/ui-default/pages/problem_detail.page.styl index 737957f..7676c4f 100644 --- a/packages/ui-default/pages/problem_detail.page.styl +++ b/packages/ui-default/pages/problem_detail.page.styl @@ -20,4 +20,7 @@ background: #f8f8f8; &.tab--active - border-color: #ed5f82; \ No newline at end of file + border-color: #ed5f82; + +.sidebar-detail + width: 280px \ No newline at end of file diff --git a/packages/ui-default/pages/problem_main.page.styl b/packages/ui-default/pages/problem_main.page.styl index 223c58d..1066149 100644 --- a/packages/ui-default/pages/problem_main.page.styl +++ b/packages/ui-default/pages/problem_main.page.styl @@ -247,7 +247,7 @@ margin-left: 4px .sidebar-edit - width: 220px + width: 240px height: 52px border-radius: 16px background: #F6F6F6 @@ -256,7 +256,7 @@ font-weight: 400 .sidebar-create - width: 220px + width: 240px height: 204px border-radius: 16px background: #F6F6F6 @@ -265,7 +265,7 @@ font-weight: 400 .sidebar-category - width: 220px + width: 240px height: 360px border-radius: 16px background: #F6F6F6 diff --git a/packages/ui-default/templates/problem_detail.html b/packages/ui-default/templates/problem_detail.html index 2e9b93b..eb4e44f 100644 --- a/packages/ui-default/templates/problem_detail.html +++ b/packages/ui-default/templates/problem_detail.html @@ -28,7 +28,7 @@
-

+

{% if rdoc %} @@ -66,23 +66,23 @@

@@ -110,7 +110,7 @@

{{ pdoc.title }}

-
+
{% include "partials/problem_sidebar.html" %}