diff --git a/packages/ui-default/components/navigation/index.js b/packages/ui-default/components/navigation/index.js deleted file mode 100644 index 1ed699da3..000000000 --- a/packages/ui-default/components/navigation/index.js +++ /dev/null @@ -1,97 +0,0 @@ -import _ from 'lodash'; -import responsiveCutoff from 'vj/breakpoints.json'; -import { isBelow } from 'vj/utils/mediaQuery'; - -class MultipleStateContainer { - constructor(onStateChange, initialState = false) { - this.onStateChange = onStateChange; - this.states = {}; - this.currentState = initialState; - } - - set(name, value, update = true) { - this.states[name] = value; - if (update) { - this.update(); - } - } - - get(name) { - return this.states[name]; - } - - update() { - const newState = this.getState(); - if (newState !== this.currentState) { - this.onStateChange(newState); - this.currentState = newState; - } - } - - getState() { - return _.values(this.states).indexOf(true) > -1; - } -} - -class Navigation { - constructor($nav, $navShadow) { - this.updateExpandWidth = _.throttle(this.updateExpandWidthImmediate.bind(this), 200); - this.$nav = $nav; - this.$navRow = $nav.children('.row'); - this.$navShadow = $navShadow; - this.floating = new MultipleStateContainer(this.updateFloating.bind(this)); - this.logoVisible = new MultipleStateContainer(this.updateLogoVisibility.bind(this)); - this.expanded = new MultipleStateContainer(this.updateExpandState.bind(this)); - } - - updateFloating(state) { - if (state) { - this.$nav.addClass('floating'); - this.$navShadow.addClass('floating'); - $('body').addClass('nav--floating'); - } else { - this.$nav.removeClass('floating'); - this.$navShadow.removeClass('floating'); - $('body').removeClass('nav--floating'); - } - } - - updateLogoVisibility(state) { - if (state) { - this.$nav.addClass('showlogo'); - } else { - this.$nav.removeClass('showlogo'); - } - } - - updateExpandWidthImmediate() { - this.$navRow.css('max-width', `${window.innerWidth}px`); - } - - updateExpandState(state) { - if (state) { - $(window).on('resize', this.updateExpandWidth); - this.updateExpandWidthImmediate(); - } else { - $(window).off('resize', this.updateExpandWidth); - this.$navRow.css('max-width', ''); - } - } - - getHeight() { - if (isBelow(responsiveCutoff.mobile)) { - return 0; - } - if (this.$nav.length === 0) { - return 0; - } - if (!this._navHeight) { - this._navHeight = this.$nav.height(); - } - return this._navHeight; - } -} - -Navigation.instance = new Navigation($('.nav'), $('.nav--shadow')); - -export default Navigation; diff --git a/packages/ui-default/components/navigation/nav-logo-small@2x_light.png b/packages/ui-default/components/navigation/nav-logo-small@2x_light.png deleted file mode 100644 index 3f4726b85..000000000 Binary files a/packages/ui-default/components/navigation/nav-logo-small@2x_light.png and /dev/null differ diff --git a/packages/ui-default/components/navigation/nav-logo-small_light.png b/packages/ui-default/components/navigation/nav-logo-small_light.png deleted file mode 100644 index f89c209af..000000000 Binary files a/packages/ui-default/components/navigation/nav-logo-small_light.png and /dev/null differ diff --git a/packages/ui-default/components/navigation/navigation.page.js b/packages/ui-default/components/navigation/navigation.page.js index c4c192310..a081037cd 100644 --- a/packages/ui-default/components/navigation/navigation.page.js +++ b/packages/ui-default/components/navigation/navigation.page.js @@ -1,22 +1,7 @@ -import _ from 'lodash'; import Slideout from 'slideout'; import { AutoloadPage } from 'vj/misc/Page'; import request from 'vj/utils/request'; -import responsiveCutoff from 'vj/breakpoints.json'; -import { isAbove } from 'vj/utils/mediaQuery'; -import Navigation from '.'; - -const nav = Navigation.instance; -const { $nav } = nav; - -function handleScroll() { - const currentState = $(window).scrollTop() > 20; - if (nav.floating.get('nonTop') !== currentState) { - nav.floating.set('nonTop', currentState); - nav.logoVisible.set('nonTop', currentState); - } -} function handleNavLogoutClick(ev) { const $logoutLink = $(ev.currentTarget); @@ -30,19 +15,6 @@ const navigationPage = new AutoloadPage('navigationPage', () => { if (!document.getElementById('panel') || !document.getElementById('menu')) { return; } - if ($nav.length > 0 - && document.documentElement.getAttribute('data-layout') === 'basic' - && isAbove(responsiveCutoff.mobile) - ) { - $(window).on('scroll', _.throttle(handleScroll, 100)); - $nav.hover( - () => nav.floating.set('hover', true), - () => nav.floating.set('hover', false), - ); - $nav.on('vjDropdownShow', () => nav.floating.set('dropdown', true)); - $nav.on('vjDropdownHide', () => nav.floating.set('dropdown', false)); - handleScroll(); - } $(document).on('click', '[name="nav_logout"]', handleNavLogoutClick); diff --git a/packages/ui-default/components/navigation/navigation.page.styl b/packages/ui-default/components/navigation/navigation.page.styl index c979b1dfe..55ae1b6d2 100644 --- a/packages/ui-default/components/navigation/navigation.page.styl +++ b/packages/ui-default/components/navigation/navigation.page.styl @@ -11,6 +11,32 @@ transition: background .2s transition-timing-function: ease-out-cubic z-index: 500 + background: rgba(#FFF, 0.98) + + .nav__logo + width: rem($nav-logo-width + 10) + opacity: 1 + + .nav__item + color: $text-1-color + &.nav--active + border-color: $nav-item-active-color + &:before + box-shadow: 0 0 30px $nav-item-active-color, + 0 0 30px $nav-item-active-color + &:hover + border-color: $nav-item-hover-color + background: #F8F8F8 + &:before + box-shadow: none + + .nav__item--round + border-color: $primary-color + color: $primary-color + + &:hover + background-color: $primary-color + color: #FFF .hasjs & position: fixed @@ -32,6 +58,7 @@ z-index: 300 transition: box-shadow .2s transition-timing-function: ease-out-cubic + box-shadow: 0 0 6px rgba(#000, 0.3) .nojs & display: none @@ -47,7 +74,7 @@ line-height: rem($nav-item-height - 6) padding: rem(0 20px 3px 20px) border-top: 3px solid transparent - color: #FFF + color: #000 transition: border-color .2s, background .2s, color .2s transition-timing-function: ease-out-cubic position: relative @@ -61,7 +88,7 @@ height: 1px &:visited, &:active - color: #FFF + color: #000 &.nav--active border-color: $nav-item-active-immersive-color @@ -108,9 +135,7 @@ margin-left: rem(5px) .nav__logo__options - background-image: url(./nav-logo-small_light.png) background-image: url(./nav-logo-small_dark.png) - background-image: url(./nav-logo-small@2x_light.png) background-image: url(./nav-logo-small@2x_dark.png) .nav__logo @@ -131,38 +156,6 @@ +mobile() display: none -.nav.showlogo, .layout--immersive - .nav__logo - width: rem($nav-logo-width + 10) - opacity: 1 - -.nav.floating, .nojs .nav - background: rgba(#FFF, 0.98) - - .nav__item - color: $text-1-color - &.nav--active - border-color: $nav-item-active-color - &:before - box-shadow: 0 0 30px $nav-item-active-color, - 0 0 30px $nav-item-active-color - &:hover - border-color: $nav-item-hover-color - background: #F8F8F8 - &:before - box-shadow: none - - .nav__item--round - border-color: $primary-color - color: $primary-color - - &:hover - background-color: $primary-color - color: #FFF - -.nav--shadow.floating - box-shadow: 0 0 6px rgba(#000, 0.3) - // For Mobile: show a slideout vertical arranged menu +mobile() diff --git a/packages/ui-default/components/nprogress/nprogress.page.styl b/packages/ui-default/components/nprogress/nprogress.page.styl index 9315258da..4c6a724e9 100644 --- a/packages/ui-default/components/nprogress/nprogress.page.styl +++ b/packages/ui-default/components/nprogress/nprogress.page.styl @@ -13,9 +13,8 @@ $spinner-margin = ($nav-item-height - $spinner-size) / 2 width: 100% height: 2px - .nav--floating & - +above(rupture.mobile-cutoff) - background: $nprogress-color-floating + &+above(rupture.mobile-cutoff) + background: $nprogress-color-floating #nprogress .peg display: block @@ -27,9 +26,8 @@ $spinner-margin = ($nav-item-height - $spinner-size) / 2 opacity: 1.0 transform: rotate(3deg) translate(0px, -4px) - .nav--floating & - +above(rupture.mobile-cutoff) - box-shadow: 0 0 10px $nprogress-color-floating, 0 0 5px $nprogress-color-floating + &+above(rupture.mobile-cutoff) + box-shadow: 0 0 10px $nprogress-color-floating, 0 0 5px $nprogress-color-floating #nprogress .spinner display: block @@ -48,10 +46,9 @@ $spinner-margin = ($nav-item-height - $spinner-size) / 2 border-radius: 50% animation: nprogress-spinner 400ms linear infinite - .nav--floating & - +above(rupture.mobile-cutoff) - border-top-color: $nprogress-color-floating - border-left-color: $nprogress-color-floating + &+above(rupture.mobile-cutoff) + border-top-color: $nprogress-color-floating + border-left-color: $nprogress-color-floating .nprogress-custom-parent overflow: hidden diff --git a/packages/ui-default/components/sticky/sticky.page.js b/packages/ui-default/components/sticky/sticky.page.js index 28938f120..1c560e954 100644 --- a/packages/ui-default/components/sticky/sticky.page.js +++ b/packages/ui-default/components/sticky/sticky.page.js @@ -1,11 +1,13 @@ import 'sticky-kit/dist/sticky-kit'; import _ from 'lodash'; - +import { isBelow, isAbove } from 'vj/utils/mediaQuery'; import { AutoloadPage } from 'vj/misc/Page'; -import Navigation from 'vj/components/navigation'; -import { isAbove } from 'vj/utils/mediaQuery'; import responsiveCutoff from 'vj/breakpoints.json'; +const navHeight = isBelow(responsiveCutoff.mobile) + ? 0 + : $('.nav').height(); + function updateStickies($stickies) { $stickies.get().forEach((element) => { const $sticky = $(element); @@ -17,7 +19,7 @@ function updateStickies($stickies) { if ($stickyParent.length > 0) { stickyOptions.parent = $stickyParent; } - stickyOptions.offset_top = 10 + Navigation.instance.getHeight(); + stickyOptions.offset_top = 10 + navHeight; $sticky.stick_in_parent(stickyOptions); $sticky.data('sticky-enabled', true); } else if (!shouldEnableSticky && stickyEnabled) { diff --git a/packages/ui-default/components/table/StyledTable.js b/packages/ui-default/components/table/StyledTable.js index cc51b60fc..31101553d 100644 --- a/packages/ui-default/components/table/StyledTable.js +++ b/packages/ui-default/components/table/StyledTable.js @@ -1,8 +1,12 @@ import 'sticky-kit/dist/sticky-kit'; import _ from 'lodash'; - -import Navigation from 'vj/components/navigation'; import DOMAttachedObject from 'vj/components/DOMAttachedObject'; +import { isBelow } from 'vj/utils/mediaQuery'; +import responsiveCutoff from 'vj/breakpoints.json'; + +const navHeight = isBelow(responsiveCutoff.mobile) + ? 0 + : $('.nav').height(); export default class StyledTable extends DOMAttachedObject { static DOMAttachKey = 'vjStyledTableInstance'; @@ -33,7 +37,7 @@ export default class StyledTable extends DOMAttachedObject { const stickyOptions = { parent: this.$container, - offset_top: Navigation.instance.getHeight(), + offset_top: navHeight, }; _.defer(() => this.$header.stick_in_parent(stickyOptions)); } diff --git a/packages/ui-default/handler.js b/packages/ui-default/handler.js index 2e8ff0f18..1cdcb8f03 100644 --- a/packages/ui-default/handler.js +++ b/packages/ui-default/handler.js @@ -60,27 +60,13 @@ class UiSettingsHandler extends Handler { } async get({ domainId }) { - const [ - header_logo, header_logo_2x, - nav_logo_dark, nav_logo_light, - nav_logo_dark_2x, nav_logo_light_2x, - header_background, header_background_2x, - ] = system.getMany([ - 'ui-default.header_logo', 'ui-default.header_logo_2x', - 'ui-default.nav_logo_dark', 'ui-default.nav_logo_light', - 'ui-default.nav_logo_dark_2x', 'ui-default.nav_logo_light_2x', - 'ui-default.header_background', 'ui-default.header_background2x', + const [nav_logo_dark, nav_logo_dark_2x] = system.getMany([ + 'ui-default.nav_logo_dark', 'ui-default.nav_logo_dark_2x', ]); const ddoc = await domain.get(domainId); this.response.body = await this.renderHTML('extra.css', { - header_logo, - header_logo_2x, nav_logo_dark, - nav_logo_light, nav_logo_dark_2x, - nav_logo_light_2x, - header_background, - header_background_2x, ...ddoc, }); this.response.type = 'text/css'; diff --git a/packages/ui-default/misc/structure.styl b/packages/ui-default/misc/structure.styl index 73ef77448..828881a91 100644 --- a/packages/ui-default/misc/structure.styl +++ b/packages/ui-default/misc/structure.styl @@ -21,7 +21,7 @@ flex: 1 +above(rupture.desktop-cutoff) - padding: rem(30px 0) + padding: 4rem 0rem +mobile() padding: 0 diff --git a/packages/ui-default/package.json b/packages/ui-default/package.json index cd427354c..1ddd18eb9 100644 --- a/packages/ui-default/package.json +++ b/packages/ui-default/package.json @@ -1,6 +1,6 @@ { "name": "@hydrooj/ui-default", - "version": "4.9.2", + "version": "4.10.0", "author": "undefined ", "license": "AGPL-3.0", "main": "hydro.js", diff --git a/packages/ui-default/pages/problem_detail.page.jsx b/packages/ui-default/pages/problem_detail.page.jsx index e30e170d3..af2d55320 100644 --- a/packages/ui-default/pages/problem_detail.page.jsx +++ b/packages/ui-default/pages/problem_detail.page.jsx @@ -2,14 +2,10 @@ import yaml from 'js-yaml'; import { getScoreColor } from '@hydrooj/utils/lib/status'; import * as echarts from 'echarts'; import { NamedPage } from 'vj/misc/Page'; -import Navigation from 'vj/components/navigation'; -import Notification from 'vj/components/notification/index'; import { ActionDialog } from 'vj/components/dialog'; import { downloadProblemSet } from 'vj/components/zipDownloader'; import loadReactRedux from 'vj/utils/loadReactRedux'; import delay from 'vj/utils/delay'; -import i18n from 'vj/utils/i18n'; -import request from 'vj/utils/request'; import base64 from 'vj/utils/base64'; class ProblemPageExtender { @@ -33,9 +29,6 @@ class ProblemPageExtender { this.$content.transition({ opacity: 0 }, { duration: 100 }); await delay(100); - Navigation.instance.floating.set('scratchpad', true); - Navigation.instance.logoVisible.set('scratchpad', true); - Navigation.instance.expanded.set('scratchpad', true); $('body').addClass('header--collapsed mode--scratchpad'); await this.$scratchpadContainer .css({ @@ -77,10 +70,6 @@ class ProblemPageExtender { .get(0) .getBoundingClientRect(); - Navigation.instance.floating.set('scratchpad', false); - Navigation.instance.logoVisible.set('scratchpad', false); - Navigation.instance.expanded.set('scratchpad', false); - $('body').removeClass('header--collapsed mode--scratchpad'); await this.$scratchpadContainer diff --git a/packages/ui-default/setting.yaml b/packages/ui-default/setting.yaml index a177e18bd..3c7b630ea 100644 --- a/packages/ui-default/setting.yaml +++ b/packages/ui-default/setting.yaml @@ -3,41 +3,11 @@ footer_extra_html: name: footer_extra_html desc: Footer Extra HTML default: '' -header_logo: - type: text - name: header_logo - desc: Header Logo - default: /components/header/header-logo.png -header_logo_2x: - type: text - name: header_logo_2x - desc: Header Logo@2x - default: /components/header/header-logo@2x.png -header_background: - type: text - name: header_background - desc: Header Background - default: /components/header/header-background.png -header_background_2x: - type: text - name: header_background_2x - desc: Header Background@2x - default: /components/header/header-background@2x.png -nav_logo_light: - type: text - name: nav_logo_light - desc: Nav Logo Light - default: /components/navigation/nav-logo-small_light.png nav_logo_dark: type: text name: nav_logo_dark desc: Nav Logo Dark default: /components/navigation/nav-logo-small_dark.png -nav_logo_light_2x: - type: text - name: nav_logo_light_2x - desc: Nav Logo Light@2x - default: /components/navigation/nav-logo-small@2x_light.png nav_logo_dark_2x: type: text name: nav_logo_dark_2x diff --git a/packages/ui-default/templates/components/md_hint.html b/packages/ui-default/templates/components/md_hint.html index f1281fbf0..cc916360c 100644 --- a/packages/ui-default/templates/components/md_hint.html +++ b/packages/ui-default/templates/components/md_hint.html @@ -10,9 +10,9 @@ return 0; } ```
{{ _('Inline formulas') }}
- 
$ E=mc^2 $
+ 
$E=mc^2$
{{ _('Formula blocks') }}
- 
$$ E=mc^2 $$
+ 
$$E=mc^2$$
{{ _('Links') }}
[{{ _('Text') }}](https://...)
{{ _('Highlight') }}
@@ -26,7 +26,7 @@ return 0; [^1]: Here is the footnote.
{{ _('Videos') }}
- 
@[{{ _('Description') }}](https://.../file.mp4)
+ 
@[video](https://.../file.mp4)

{{ _('Learn More') }}