ui: fix user_detail.rating

packages/ui-default/build/config/webpack.js

@@ -88,7 +88,6 @@ export default function (env = {}) {
     entry: {
       hydro: './entry.js',
       'default.theme': './theme/default.js',
-      // 'theme.98': './theme/98.js',
     },
     output: {
       path: root('public'),

packages/ui-default/misc/section.98.styl

@@ -1,29 +0,0 @@
-.section
-  background: $section-bg-color
-  box-shadow: $section-shadow
-  transition: transform .5s, opacity .5s
-  transition-timing-function: ease-out-cubic
-
-  +mobile()
-    box-shadow: none
-    margin-left: - rem($grid-padding)
-    margin-right: - rem($grid-padding)
-
-  .section__header
-    background: linear-gradient(90deg, #000080, #1084d0);
-    padding: 3px 2px 3px 3px;
-    justify-content: space-between;
-    align-items: center;
-    font-family: "Pixelated MS Sans Serif", Arial;
-    -webkit-font-smoothing: none;
-    font-size: 11px;
-
-    .section__title
-      margin-left: rem(10px);
-      font-weight: bold;
-      color: white;
-      letter-spacing: 0;
-      margin-right: rem(24px);
-
-    .inactive
-      background: linear-gradient(90deg, #808080, #b5b5b5);

packages/ui-default/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hydrooj/ui-default",
-  "version": "4.8.28",
+  "version": "4.8.29",
   "author": "undefined <i@undefined.moe>",
   "license": "AGPL-3.0",
   "main": "hydro.js",
@@ -73,6 +73,7 @@
     "plugin-error": "^1.0.1",
     "postcss-loader": "^3.0.0",
     "prism-themes": "^1.7.0",
+    "prismjs": "^1.23.0",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -99,13 +100,13 @@
     "vditor": "^3.8.4",
     "vinyl-buffer": "^1.0.1",
     "wastyle": "^0.0.5",
+    "web-streams-polyfill": "^3.0.2",
     "webpack": "^4.44.2",
     "webpack-bundle-analyzer": "^4.4.2",
     "webpack-dev-server": "^3.11.2",
     "webpackbar": "^5.0.0-3"
   },
   "dependencies": {
-    "98.css": "^0.1.16",
     "js-yaml": "^4.0.0",
     "katex": "^0.13.11",
     "lodash": "^4.17.21",
@@ -116,9 +117,7 @@
     "markdown-it-mark": "^3.0.1",
     "markdown-it-table-of-contents": "^0.5.2",
     "nunjucks": "^3.2.3",
-    "prismjs": "^1.23.0",
     "streamsaver": "^2.0.5",
-    "web-streams-polyfill": "^3.0.2",
     "xss": "^1.0.9",
     "yargs": "^17.0.1"
   }

packages/ui-default/pages/user_detail.page.js

@@ -36,7 +36,7 @@ const page = new NamedPage('user_detail', async () => {
       bottom: '10%',
     },
     xAxis: { data: history.map((x, i) => moment().add(-30 + i, 'days').fromNow()) },
-    yAxis: { type: 'category' },
+    yAxis: { type: 'value', scale: true },
     toolbox: {
       right: 10,
       feature: {

packages/ui-default/theme/98.js

@@ -1,29 +0,0 @@
-import 'normalize.css/normalize.css';
-import 'pickadate/lib/themes/classic.css';
-import 'pickadate/lib/themes/classic.date.css';
-import 'pickadate/lib/themes/classic.time.css';
-import 'katex/dist/katex.min.css';
-
-import 'vj/misc/float.styl';
-import 'vj/misc/typography.styl';
-import 'vj/misc/textalign.styl';
-import 'vj/misc/grid.styl';
-import 'vj/misc/slideout.styl';
-
-import 'vj/misc/.iconfont/webicon.styl';
-import 'vj/misc/immersive.styl';
-import 'vj/misc/structure.styl';
-import 'vj/misc/section.98.styl';
-import 'vj/misc/nothing.styl';
-
-import 'vj/components/editor/cmeditor.styl';
-import 'vj/components/datepicker/datepicker.styl';
-import 'vj/components/katex/katex.styl';
-
-// load all page stylesheets
-const pageStyleReq = require.context('../', true, /\.page\.styl$/i);
-pageStyleReq.keys().map((key) => pageStyleReq(key));
-const pageStyleReq98 = require.context('../', true, /\.page\.98\.styl$/i);
-pageStyleReq98.keys().map((key) => pageStyleReq(key));
-
-import './98.styl';

packages/ui-default/theme/98.styl

@@ -1,547 +0,0 @@
-$color-1 = #222
-$color-2 = #c0c0c0
-$color-3 = #000
-$color-4 = #fff
-$color-5 = #808080
-
-$surface=#c0c0c0;
-$button-highlight=#ffffff;
-$button-face=#dfdfdf;
-$button-shadow=#808080;
-$window-frame=#0a0a0a;
-$dialog-blue=#000080;
-$dialog-blue-light=#1084d0;
-$dialog-gray=#808080;
-$dialog-gray-light=#b5b5b5;
-$link-blue=#0000ff;
-
-/* Spacing */
-$element-spacing=8px;
-$grouped-button-spacing=4px;
-$grouped-element-spacing=6px;
-$radio-width=12px;
-$checkbox-width=13px;
-$radio-label-spacing=6px;
-$range-track-height=4px;
-$range-spacing=10px;
-
-/* Some detailed computations for radio buttons and checkboxes */
-$radio-total-width-precalc=$radio-width + $radio-label-spacing;
-$radio-total-width=calc($radio-total-width-precalc);
-$radio-left=calc(-1 * $radio-total-width-precalc);
-$radio-dot-width=4px;
-$radio-dot-top=calc($radio-width / 2 - $radio-dot-width / 2);
-$radio-dot-left=calc(-1 * ($radio-total-width-precalc) + $radio-width / 2 - $radio-dot-width / 2);
-$checkbox-total-width-precalc=$checkbox-width +$radio-label-spacing;
-$checkbox-total-width=calc($checkbox-total-width-precalc);
-$checkbox-left=calc(-1 * $checkbox-total-width-precalc);
-$checkmark-width=7px;
-$checkmark-top=3px;
-$checkmark-left=3px;
-
-/* Borders */
-$border-width=1px;
-$border-raised-outer=inset -1px -1px $window-frame, inset 1px 1px $button-highlight;
-$border-raised-inner=inset -2px -2px $button-shadow, inset 2px 2px $button-face;
-$border-sunken-outer=inset -1px -1px $button-highlight, inset 1px 1px $window-frame;
-$border-sunken-inner=inset -2px -2px $button-face, inset 2px 2px $button-shadow;
-
-/* Window borders flip button-face and button-highlight */
-$border-window-outer=inset -1px -1px $window-frame, inset 1px 1px $button-face;
-$border-window-inner=inset -2px -2px $button-shadow, inset 2px 2px $button-highlight;
-
-/* Field borders (checkbox, input, etc) flip window-frame and button-shadow */
-$border-field=inset -1px -1px $button-highlight, inset 1px 1px $button-shadow, inset -2px -2px $button-face, inset 2px 2px $window-frame;
-
-input[type="radio"],
-input[type="checkbox"]
-  -webkit-appearance: none
-  -moz-appearance: none
-  appearance: none
-  border: none
-  margin: 0
-  background: 0
-  opacity: 0
-  position: fixed
-
-@font-face
-    font-family "Pixelated MS Sans Serif"
-    src url("98.css/fonts/converted/ms_sans_serif.woff") format("woff")
-    src url("98.css/fonts/converted/ms_sans_serif.woff2") format("woff2")
-    font-weight normal
-    font-style normal
-
-@font-face
-    font-family "Pixelated MS Sans Serif"
-    src url("98.css/fonts/converted/ms_sans_serif_bold.woff") format("woff")
-    src url("98.css/fonts/converted/ms_sans_serif_bold.woff2") format("woff2")
-    font-weight bold
-    font-style normal
-
-body
-    font-family Arial
-    color $color-1
-
-button
-label
-input
-textarea
-select
-option
-ul.tree-view
-.window
-.help-text
-    font-family "Pixelated MS Sans Serif", Arial
-    font-smoothing none
-
-u
-    text-decoration none
-    border-bottom 0.5px solid $color-1
-
-.vertical-bar
-    width 4px
-    height 20px
-    background $color-2
-    box-shadow var($border-raised-outer), var($border-raised-inner)
-
-button
-    &:not(:disabled)
-        &:hover
-            box-shadow var($border-sunken-outer), var($border-sunken-inner)
-
-button
-    &:focus
-        outline 1px dotted #000000
-        outline-offset -4px
-
-button::-moz-focus-inner
-    border 0
-
-:disabled
-:disabled+label
-    color var($button-shadow)
-    text-shadow 1px 1px 0 var($button-highlight)
-
-.window
-    box-shadow var($border-window-outer), var($border-window-inner)
-    background var($surface)
-    padding 3px
-
-.title-bar-controls
-    display flex
-
-    button
-        padding 0
-        display block
-        min-width 16px
-        min-height 14px
-
-        &:active
-            padding 0
-
-        &:focus
-            outline none
-
-    button[aria-label="Minimize"]
-        background-image svg-load("98.css/icon/minimize.svg")
-        background-repeat no-repeat
-        background-position bottom 3px left 4px
-
-    button[aria-label="Maximize"]
-        background-image svg-load("98.css/icon/maximize.svg")
-        background-repeat no-repeat
-        background-position top 2px left 3px
-
-    button[aria-label="Restore"]
-        background-image svg-load("98.css/icon/restore.svg")
-        background-repeat no-repeat
-        background-position top 2px left 3px
-
-    button[aria-label="Help"]
-        background-image svg-load("98.css/icon/help.svg")
-        background-repeat no-repeat
-        background-position top 2px left 5px
-
-    button[aria-label="Close"]
-        margin-left 2px
-        background-image svg-load("98.css/icon/close.svg")
-        background-repeat no-repeat
-        background-position top 3px left 4px
-
-.window-body
-    margin var($element-spacing)
-
-fieldset
-    border none
-    box-shadow var($border-sunken-outer), var($border-raised-inner)
-    padding calc(2 * var($border-width) + var($element-spacing))
-    padding-block-start var($element-spacing)
-    margin 0
-
-legend
-    background var($surface)
-
-.field-row
-    display flex
-    align-items center
-
-    >*
-        +*
-            margin-left var($grouped-element-spacing)
-
-[class^="field-row"]
-    +[class^="field-row"]
-        margin-top var($grouped-element-spacing)
-
-.field-row-stacked
-    display flex
-    flex-direction column
-
-    *
-        +*
-            margin-top var($grouped-element-spacing)
-
-input[type="radio"]+label
-input[type="checkbox"]+label
-    line-height 13px
-
-input[type="radio"]
-    +label
-        position relative
-        margin-left var($radio-total-width)
-
-    +label::before
-        content ""
-        position absolute
-        top 0
-        left calc(-1 * (var($radio-total-width-precalc)))
-        display inline-block
-        width var($radio-width)
-        height var($radio-width)
-        margin-right var($radio-label-spacing)
-        background svg-load("98.css/icon/radio-border.svg")
-
-input[type="radio"]:active
-    +label::before
-        background svg-load("98.css/icon/radio-border-disabled.svg")
-
-input[type="radio"]:checked
-    +label::after
-        content ""
-        display block
-        width var($radio-dot-width)
-        height var($radio-dot-width)
-        top var($radio-dot-top)
-        left var($radio-dot-left)
-        position absolute
-        background svg-load("98.css/icon/radio-dot.svg")
-
-input[type="radio"]:focus+label
-input[type="checkbox"]:focus+label
-    outline 1px dotted #000000
-
-input[type="radio"][disabled]
-    +label::before
-        background svg-load("98.css/icon/radio-border-disabled.svg")
-
-input[type="radio"][disabled]:checked
-    +label::after
-        background svg-load("98.css/icon/radio-dot-disabled.svg")
-
-input[type="checkbox"]
-    +label
-        position relative
-        margin-left var($checkbox-total-width)
-
-    +label::before
-        content ""
-        position absolute
-        left calc(-1 * (var($checkbox-total-width-precalc)))
-        display inline-block
-        width var($checkbox-width)
-        height var($checkbox-width)
-        background var($button-highlight)
-        box-shadow var($border-field)
-        margin-right var($radio-label-spacing)
-
-input[type="checkbox"]:active
-    +label::before
-        background var($surface)
-
-input[type="checkbox"]:checked
-    +label::after
-        content ""
-        display block
-        width var($checkmark-width)
-        height var($checkmark-width)
-        position absolute
-        top var($checkmark-top)
-        left calc(-1 * (var($checkbox-total-width-precalc)) + var($checkmark-left))
-        background svg-load("98.css/icon/checkmark.svg")
-
-input[type="checkbox"][disabled]
-    +label::before
-        background var($surface)
-
-input[type="checkbox"][disabled]:checked
-    +label::after
-        background svg-load("98.css/icon/checkmark-disabled.svg")
-
-input[type="text"]
-input[type="password"]
-input[type="email"]
-select
-textarea
-    padding 3px 4px
-    border none
-    box-shadow var($border-field)
-    background-color var($button-highlight)
-    box-sizing border-box
-    appearance none
-    border-radius 0
-
-select
-    appearance none
-    position relative
-    padding-right 32px
-    background-image svg-load("98.css/icon/button-down.svg")
-    background-position top 2px right 2px
-    background-repeat no-repeat
-    border-radius 0
-
-    &:focus
-        color var($button-highlight)
-        background-color var($dialog-blue)
-
-        option
-            color $color-3
-            background-color $color-4
-
-    &:active
-        background-image svg-load("98.css/icon/button-down-active.svg")
-
-select:focus
-input[type="text"]:focus
-input[type="password"]:focus
-input[type="email"]:focus
-textarea:focus
-    outline none
-
-input[type="range"]
-    appearance none
-    width 100%
-    background transparent
-
-input[type="range"]:focus
-    outline none
-
-input[type="range"]::-webkit-slider-thumb
-    appearance none
-    height 21px
-    width 11px
-    background svg-load("98.css/icon/indicator-horizontal.svg")
-    transform translateY(-8px)
-
-input[type="range"].has-box-indicator::-webkit-slider-thumb
-    background svg-load("98.css/icon/indicator-rectangle-horizontal.svg")
-    transform translateY(-10px)
-
-input[type="range"]::-moz-range-thumb
-    height 21px
-    width 11px
-    border 0
-    border-radius 0
-    background svg-load("98.css/icon/indicator-horizontal.svg")
-    transform translateY(2px)
-
-input[type="range"].has-box-indicator::-moz-range-thumb
-    background svg-load("98.css/icon/indicator-rectangle-horizontal.svg")
-    transform translateY(0px)
-
-input[type="range"]::-webkit-slider-runnable-track
-    width 100%
-    background black
-    border-right 1px solid grey
-    border-bottom 1px solid grey
-    box-shadow 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey,
-        -1px -1px 0 darkgrey, 0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey
-
-input[type="range"]::-moz-range-track
-    width 100%
-    background black
-    border-right 1px solid grey
-    border-bottom 1px solid grey
-    box-shadow 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey,
-        -1px -1px 0 darkgrey, 0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey
-
-.is-vertical
-    display inline-block
-    width 4px
-    height 150px
-    transform translateY(50%)
-
-    >input[type="range"]
-        width 150px
-        height 4px
-        margin 0 calc(var($grouped-element-spacing) + var($range-spacing)) 0 var($range-spacing)
-        transform-origin left
-        transform rotate(270deg) translateX(calc(-50% + var($element-spacing)))
-
-    >input[type="range"]::-webkit-slider-runnable-track
-        border-left 1px solid grey
-        border-right 0
-        border-bottom 1px solid grey
-        box-shadow -1px 0 0 white, -1px 1px 0 white, 0 1px 0 white, 1px 0 0 darkgrey,
-        1px -1px 0 darkgrey, 0 -1px 0 darkgrey, 1px 1px 0 white, -1px -1px darkgrey
-
-    >input[type="range"]::-moz-range-track
-        border-left 1px solid grey
-        border-right 0
-        border-bottom 1px solid grey
-        box-shadow -1px 0 0 white, -1px 1px 0 white, 0 1px 0 white, 1px 0 0 darkgrey,
-        1px -1px 0 darkgrey, 0 -1px 0 darkgrey, 1px 1px 0 white, -1px -1px darkgrey
-
-    >input[type="range"]::-webkit-slider-thumb
-        transform translateY(-8px) scaleX(-1)
-
-    >input[type="range"].has-box-indicator::-webkit-slider-thumb
-        transform translateY(-10px) scaleX(-1)
-
-    >input[type="range"]::-moz-range-thumb
-        transform translateY(2px) scaleX(-1)
-
-    >input[type="range"].has-box-indicator::-moz-range-thumb
-        transform translateY(0px) scaleX(-1)
-
-a
-    &:focus
-        outline 1px dotted var($link-blue)
-
-ul
-    &.tree-view
-        display block
-        background var($button-highlight)
-        box-shadow var($border-field)
-        padding 6px
-        margin 0
-
-        li
-            list-style-type none
-
-        a
-            text-decoration none
-            color $color-3
-
-            &:focus
-                background-color var($dialog-blue)
-                color var($button-highlight)
-
-        ul
-            margin-left 16px
-            padding-left 16px
-            border-left 1px dotted $color-5
-
-            >li
-                position relative
-
-            >li::before
-                content ""
-                display block
-                position absolute
-                left -16px
-                top 6px
-                width 12px
-                border-bottom 1px dotted $color-5
-
-            >li::after
-                &:last-child
-                    content ""
-                    display block
-                    position absolute
-                    left -20px
-                    top 7px
-                    bottom 0px
-                    width 8px
-                    background var($button-highlight)
-
-            details
-                >summary
-                    &:before
-                        margin-left -22px
-                        position relative
-                        z-index 1
-
-        details
-            margin-top 0
-
-            >summary
-                &:before
-                    text-align center
-                    display block
-                    float left
-                    content "+"
-                    border 1px solid $color-5
-                    width 8px
-                    height 9px
-                    line-height 8px
-                    margin-right 5px
-                    padding-left 1px
-                    background-color $color-4
-
-        details[open]
-            summary
-                margin-bottom 0
-
-            >summary
-                &:before
-                    content "-"
-
-ul.tree-view ul
-ul.tree-view li
-    margin-top 3px
-
-pre
-    background var($button-highlight)
-    box-shadow var($border-field)
-
-summary
-    &:focus
-        outline 1px dotted #000000
-
-::-webkit-scrollbar
-    width 16px
-
-::-webkit-scrollbar:horizontal
-    height 17px
-
-::-webkit-scrollbar-corner
-    background var($button-face)
-
-::-webkit-scrollbar-track
-    background-image svg-load("98.css/icon/scrollbar-background.svg")
-
-::-webkit-scrollbar-thumb
-    background-color var($button-face)
-    box-shadow var($border-raised-outer), var($border-raised-inner)
-
-::-webkit-scrollbar-button:horizontal:start:decrement
-::-webkit-scrollbar-button:horizontal:end:increment
-::-webkit-scrollbar-button:vertical:start:decrement
-::-webkit-scrollbar-button:vertical:end:increment
-    display block
-
-::-webkit-scrollbar-button:vertical:start
-    height 17px
-    background-image svg-load("98.css/icon/button-up.svg")
-
-::-webkit-scrollbar-button:vertical:end
-    height 17px
-    background-image svg-load("98.css/icon/button-down.svg")
-
-::-webkit-scrollbar-button:horizontal:start
-    width 16px
-    background-image svg-load("98.css/icon/button-left.svg")
-
-::-webkit-scrollbar-button:horizontal:end
-    width 16px
-    background-image svg-load("98.css/icon/button-right.svg")