Weishen/Hydro
2
0 Fork 0
mirror of https://gitcode.com/gh_mirrors/hy/Hydro.git synced 2026-10-17 09:36:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

ui: remove header

Browse Source
This commit is contained in:
undefined committed 2021-05-26 00:11:26 +08:00
1 parent ef73b97089
commit ec8606cc49
16 files changed
+58 -281
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/ui-default/components/navigation/index.js
-97
View File
@@ -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;
packages/ui-default/components/navigation/nav-logo-small@2x_light.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.2 KiB

packages/ui-default/components/navigation/nav-logo-small_light.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.7 KiB

packages/ui-default/components/navigation/navigation.page.js
-28
View File
@@ -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);
packages/ui-default/components/navigation/navigation.page.styl
+29 -36
View File
@@ -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()
packages/ui-default/components/nprogress/nprogress.page.styl
+7 -10
View File
@@ -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
packages/ui-default/components/sticky/sticky.page.js
+6 -4
View File
@@ -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) {
packages/ui-default/components/table/StyledTable.js
+7 -3
View File
@@ -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));
}
packages/ui-default/handler.js
+2 -16
View File
@@ -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';
packages/ui-default/misc/structure.styl
+1 -1
View File
@@ -21,7 +21,7 @@
flex: 1
+above(rupture.desktop-cutoff)
padding: rem(30px 0)
padding: 4rem 0rem
+mobile()
padding: 0
packages/ui-default/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@hydrooj/ui-default",
"version": "4.9.2",
"version": "4.10.0",
"author": "undefined <i@undefined.moe>",
"license": "AGPL-3.0",
"main": "hydro.js",
packages/ui-default/pages/problem_detail.page.jsx
-11
View File
@@ -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
packages/ui-default/setting.yaml
-30
View File
@@ -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
packages/ui-default/templates/components/md_hint.html
+3 -3
View File
@@ -10,9 +10,9 @@ return 0;
}
```</pre></dd>
<dt>{{ _('Inline formulas') }}</dt>
<dd><pre>$ E=mc^2 $</pre></dd>
<dd><pre>$E=mc^2$</pre></dd>
<dt>{{ _('Formula blocks') }}</dt>
<dd><pre>$$ E=mc^2 $$</pre></dd>
<dd><pre>$$E=mc^2$$</pre></dd>
<dt>{{ _('Links') }}</dt>
<dd><pre>[{{ _('Text') }}](https://...)</pre></dd>
<dt>{{ _('Highlight') }}</dt>
@@ -26,7 +26,7 @@ return 0;
[^1]: Here is the footnote.</pre></dd>
<dt>{{ _('Videos') }}</dt>
<dd><pre>@[{{ _('Description') }}](https://.../file.mp4)</pre></dd>
<dd><pre>@[video](https://.../file.mp4)</pre></dd>
</dl>
<h2>{{ _('Learn More') }}</h2>
<ul>
packages/ui-default/templates/extra.css
+2 -35
View File
@@ -1,45 +1,12 @@
/* {% if header_logo %} */
.header__logo {
background: url({{header_logo}})
}
/* {% endif %} */
/* {% if header_background %} */
.header {
background: url({{header_background}})
}
/* {% endif %} */
/* {% if nav_logo_light %} */
.nav__logo, .header--mobile__domain.is--system {
background-image: url({{nav_logo_light}})
}
/* {% endif %} */
/* {% if nav_logo_dark %} */
.nav.floating .nav__logo, .nojs .nav .nav__logo {
.nav__logo {
background-image: url({{nav_logo_dark}}) !important
}
/* {% endif %} */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), only screen and (min-resolution: 144dpi) {
/* {% if header_2x %} */
.header__logo {
background-image: url({{header_2x}})
}
/* {% endif %} */
/* {% if header_background_2x %} */
.header {
background-image: url({{header_background_2x}})
}
/* {% endif %} */
/* {% if nav_logo_light_2x %} */
.nav__logo, .header--mobile__domain.is--system {
background-image: url({{nav_logo_light_2x}}) !important
}
/* {% endif %} */
/* {% if nav_logo_dark_2x %} */
.nav.floating .nav__logo, .nojs .nav .nav__logo, .header--mobile__domain.is--system {
.nav__logo, .header--mobile__domain.is--system {
background-image: url({{nav_logo_dark_2x}}) !important
}
/* {% endif %} */
packages/ui-default/templates/partials/header.html
-6
View File
@@ -1,6 +0,0 @@
<div class="header{% if no_path_section %} mini{% endif %}">
<div class="header__content"><div class="row"><div class="columns">
<a class="header__logo" href="/" target="_self"></a>
</div></div></div>
{% include "partials/path.html" %}
</div>