Skip to content

Commit

Permalink
Add login dialog style && Fix navBar style
Browse files Browse the repository at this point in the history
  • Loading branch information
Lvw666 committed Sep 7, 2023
1 parent 9e9abe4 commit 56a2169
Show file tree
Hide file tree
Showing 8 changed files with 196 additions and 58 deletions.
4 changes: 2 additions & 2 deletions packages/hydrooj/src/model/setting.ts
Original file line number Diff line number Diff line change
Expand Up @@ -242,8 +242,8 @@ SystemSetting(
Setting('setting_smtp', 'smtp.secure', false, 'boolean', 'smtp.secure', 'SSL'),
Setting('setting_smtp', 'smtp.verify', true, 'boolean', 'smtp.verify', 'Verify register email'),
Setting('setting_server', 'server.center', 'https://hydro.ac/center', 'text', 'server.center', '', FLAG_HIDDEN),
Setting('setting_server', 'server.name', 'U+', 'text', 'server.name', 'Server Name'),
Setting('setting_server', 'server.displayName', 'U+', 'text', 'server.name', 'Server Name (Global Display)', FLAG_PRO),
Setting('setting_server', 'server.name', 'Kathy', 'text', 'server.name', 'Server Name'),
Setting('setting_server', 'server.displayName', 'Kathy', 'text', 'server.name', 'Server Name (Global Display)', FLAG_PRO),
Setting('setting_server', 'server.url', '/', 'text', 'server.url', 'Server BaseURL'),
Setting('setting_server', 'server.upload', '256m', 'text', 'server.upload', 'Max upload file size'),
Setting('setting_server', 'server.cdn', '/', 'text', 'server.cdn', 'CDN Prefix'),
Expand Down
7 changes: 4 additions & 3 deletions packages/ui-default/components/dialog/dialog.page.styl
Original file line number Diff line number Diff line change
Expand Up @@ -5,21 +5,22 @@
width: 100%
height: 100%
opacity: 0
z-index: 1000 // managed
z-index: 99999 // managed
// display flex will be added after animation completes
flex-direction: column
align-items: center
justify-content: center
display: none
background: $dialog-layer-bg-color
// background: $dialog-layer-bg-color
background: rgba(0, 0, 0, 0.50) !important

.dialog__content
position: relative

.dialog.withBg .dialog__content
background: $dialog-bg-color
border: 1px solid $dialog-border-color
box-shadow: $dialog-shadow
// box-shadow: $dialog-shadow
min-width: rem(500px)
max-width: rem(900px)
padding: rem(40px) rem(30px)
Expand Down
2 changes: 1 addition & 1 deletion packages/ui-default/components/form/checkbox.page.styl
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ $checkbox-size = 16px
cursor: pointer
user-select: none
color: lighten($text-1-color, 30%) !important
margin: $input-margin !important
margin: $input-margin

&:hover
color: $text-1-color
Expand Down
37 changes: 30 additions & 7 deletions packages/ui-default/components/signin/signin_dialog.page.styl
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
$signin_form_width = 320px
$signin_form_width = 300px
$signin_form_gap_v = 50px
$signin_form_gap_h = 50px
$signin_dialog_expand_v = 50px
Expand All @@ -17,11 +17,14 @@ $signin_dialog_expand_h = 30px
.dialog--signin__main
background: #FFF
width: rem($signin_form_width)
padding: rem($signin_form_gap_v $signin_form_gap_h)
margin-right: rem($signin_form_width - $signin_dialog_expand_h)
// padding: rem($signin_form_gap_v $signin_form_gap_h)
padding: 32px
// margin-right: rem($signin_form_width - $signin_dialog_expand_h)
position: relative
z-index: 2
box-shadow: 0 0 30px rgba(#000, 0.6)
border-radius: 22px
border: 1px solid #DDD
// box-shadow: 0 0 30px rgba(#000, 0.6)

.dialog--signin__side
position: absolute
Expand All @@ -40,15 +43,35 @@ $signin_dialog_expand_h = 30px
line-height: 1.2em

.dialog--signin__title
text-align: center
color: lighten($primary-color, 20%)
text-align: left
// color: lighten($primary-color, 20%)
color: #000
font-weight: 500
font-size: 28px

.dialog--signin__note
margin: 0.3em 0 2em 0
text-align: center
text-align: left
font-size: rem($font-size-secondary)
color: #878787

.dialog--signin__close-container
position: absolute
right: rem(15px)
top: rem(15px)

.fsz13
font-size: 13px

label.material > input
&::placeholder
color: #B4B4B4

.button-submit
width: rem($signin_form_width)

.login-background
width: rem(868px)
height: rem(584px)
background-color: #fff
border-radius: 24px
102 changes: 102 additions & 0 deletions packages/ui-default/misc/tailwindstylus.styl
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,9 @@
.items-stretch
align-items: stretch

.p-0
padding: 0 !important

.p-1
padding: 4px !important

Expand All @@ -63,6 +66,9 @@
padding-top: 4px !important
padding-bottom: 4px !important

.m-0
margin: 0 !important

.m-1
margin: 4px !important

Expand Down Expand Up @@ -92,6 +98,9 @@
.text-gray
color: #888

.text-gray-100
color: #A3A3A3 !important

.text-red
color: #F00

Expand Down Expand Up @@ -219,24 +228,102 @@
.mt-6
margin-top: 24px !important

.mt-7
margin-top: 28px !important

.mt-8
margin-top: 32px !important

.mt-9
margin-top: 36px !important

.mt-10
margin-top: 40px !important

.mt-11
margin-top: 44px !important

.mt-12
margin-top: 48px !important

.mb-5
margin-bottom: 20px !important

.mb-6
margin-bottom: 24px !important

.mb-7
margin-bottom: 28px !important

.mb-8
margin-bottom: 32px !important

.mb-9
margin-bottom: 36px !important

.mb-10
margin-bottom: 40px !important

.mb-11
margin-bottom: 44px !important

.mb-12
margin-bottom: 48px !important

.mb-13
margin-bottom: 52px !important

.mb-14
margin-bottom: 56px !important

.ml-5
margin-left: 20px !important

.ml-6
margin-left: 24px !important

.ml-7
margin-left: 28px !important

.ml-8
margin-left: 32px !important

.ml-9
margin-left: 36px !important

.ml-10
margin-left: 40px !important

.ml-11
margin-left: 44px !important

.ml-12
margin-left: 48px !important

.mr-5
margin-right: 20px !important

.mr-6
margin-right: 24px !important

.mr-7
margin-right: 28px !important

.mr-8
margin-right: 32px !important

.mr-9
margin-right: 36px !important

.mr-10
margin-right: 40px !important

.mr-11
margin-right: 44px !important

.mr-12
margin-right: 48px !important

.text-xs
font-size: 10px !important

Expand All @@ -252,6 +339,21 @@
.text-xl
font-size: 24px !important

.text-2xl
font-size: 28px !important

.text-3xl
font-size: 32px !important

.text-4xl
font-size: 36px !important

.text-5xl
font-size: 40px !important

.text-6xl
font-size: 44px !important

.w-1
width: 4px !important

Expand Down
9 changes: 9 additions & 0 deletions packages/ui-default/static/img/icon_login.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
91 changes: 47 additions & 44 deletions packages/ui-default/templates/partials/login_dialog.html
Original file line number Diff line number Diff line change
@@ -1,54 +1,57 @@
<div class="dialog dialog--signin" style="display:none">
<div class="dialog__content">
<div class="dialog--signin__bg">
{# <div class="dialog--signin__bg">
<div class="dialog--signin__side">
<h1>{{ _("Don't have an account?") }}</h1>
<p>{{ _('注册一个 U+ 通用账户,您就可以在我们提供的所有在线评测服务上提交代码、参与讨论。').format((handler.domain|default({ui:[]})).ui.name|default(model.system.get('server.name'))) }}</p>
<div><a href="{{ url('user_register') }}" class="inverse rounded button">{{ _('Sign Up Now') }}</a></div>
</div>
</div>
<div class="dialog--signin__main">
<form action="{{ url('user_login') }}" method="post">
<div class="dialog--signin__close-container supplementary">
<a name="dialog--signin__close" href="javascript:;">{{ _('CLOSE') }}</a>
</div>
<h1 class="dialog--signin__title">{{ _('SIGN IN') }}</h1>
<p class="dialog--signin__note">{{ _('使用您的 U+ 通用账户').format(model.system.get('server.name')) }}</p>
{% if model.system.get('server.login') %}
<div class="row"><div class="columns">
<label class="material textbox">
{{ _('Username') }}
<input name="uname" type="text" data-autofocus>
</label>
</div></div>
<div class="row"><div class="columns">
<label class="material textbox">
{{ _('Password') }}
<input name="password" type="password">
</label>
</div></div>
<div class="row"><div class="columns">
<label class="checkbox">
<input type="checkbox" name="rememberme" class="checkbox">{{ _('Remember me') }}
</label>
</div></div>
<div class="row"><div class="columns">
<input type="hidden" name="tfa" value="">
<input type="hidden" name="authnChallenge" value="">
<input type="submit" value="{{ _('Login') }}" name="login_submit" class="expanded rounded primary button">
</div></div>
{% endif %}
{%- for v in handler.loginMethods -%}
<div class="row"><div class="columns">
<a href="{{ url('user_oauth', type=v.id) }}" class="expanded rounded button">{{ _(v.text) }}</a>
</div></div>
{%- endfor -%}
<div class="row"><div class="columns">
<div class="supplementary text-center">
<a {% if not model.system.get('smtp.user') %}data-lostpass href="#"{% else %}href="{{ url('user_lostpass') }}"{% endif %}>{{ _('Forgot password or username?') }}</a>
</div>
</div></div>
</form>
</div> #}
<div class="login-background flex flex-row items-center justify-around">
<div>
<img src="{{ UiContext.cdn_prefix }}img/icon_login.svg" width="304" height="244" class="ml-10">
</div>
<div class="dialog--signin__main mr-10">
<form action="{{ url('user_login') }}" method="post">
{# <div class="dialog--signin__close-container supplementary">
<a name="dialog--signin__close" href="javascript:;">{{ _('CLOSE') }}</a>
</div> #}
<h1 class="dialog--signin__title">{{ _('Kathy 登录') }}</h1>
<p class="dialog--signin__note"><span class="font-light fsz13">{{ _('使用您的 Kathy OJ 通用账户').format(model.system.get('server.name')) }}</span></p>
{% if model.system.get('server.login') %}
<div class="row mt-10"><div class="columns p-0">
<label class="material textbox">
{# {{ _('Username') }} #}
<input name="uname" type="text" data-autofocus placeholder="用户名">
</label>
</div></div>
<div class="row"><div class="columns p-0">
<label class="material textbox">
{# {{ _('Password') }} #}
<input name="password" type="password" placeholder="密码">
</label>
</div></div>
<div class="row mb-9"><div class="p-0 flex flex-row justify-between items-center">
<label class="checkbox m-0">
<input type="checkbox" name="rememberme" class="checkbox"><span class="text-gray-100 text-sm">{{ _('Remember me') }}</span>
</label>
<div class="supplementary">
<a {% if not model.system.get('smtp.user') %}data-lostpass href="#"{% else %}href="{{ url('user_lostpass') }}"{% endif %}><span class="text-gray-100 text-sm">{{ _('忘记密码') }}</span></a>
</div>
</div></div>
<div class="row"><div>
<input type="hidden" name="tfa" value="">
<input type="hidden" name="authnChallenge" value="">
<input type="submit" value="{{ _('Login') }}" name="login_submit" class="expanded rounded primary button button-submit">
</div></div>
{% endif %}
{%- for v in handler.loginMethods -%}
<div class="row"><div class="columns">
<a href="{{ url('user_oauth', type=v.id) }}" class="expanded rounded button">{{ _(v.text) }}</a>
</div></div>
{%- endfor -%}
</form>
</div>
</div>
</div>
</div>
2 changes: 1 addition & 1 deletion packages/ui-default/templates/partials/nav.html
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@
</li> #}
{% endif %}
<li class="nav__list-item" data-dropdown-pos="bottom right" data-dropdown-custom-class="nav__dropdown" data-dropdown-target="#menu-nav-user" data-dropdown-disabledconstrainToWindow data-dropdown-trigger-desktop-only>
<a href="{{ url('user_detail', uid=handler.user._id) }}" class="nav__item"><span class="icon mr-2"><img class="small user-profile-avatar v-center" loading="lazy" src="{{ avatarUrl(udoc.avatar|default('')) }}" width="20" height="20"></span>{{ handler.user.uname }}</a>
<a href="{{ url('user_detail', uid=handler.user._id) }}" class="nav__item"><span class="icon mr-2"><img class="small user-profile-avatar v-center" loading="lazy" src="{{ avatarUrl(udoc.avatar|default('')) }}" width="24" height="24"></span><span class="font-medium">{{ handler.user.uname }}</span></a>
<ol class="dropdown-target menu" id="menu-nav-user">
<li class="menu__item">
<a href="{{ url('user_detail', uid=handler.user._id) }}" class="menu__link">
Expand Down

0 comments on commit 56a2169

Please sign in to comment.