ui: update nav logo renderer

packages/ui-default/common/variables.inc.styl

@@ -80,8 +80,7 @@ $nav-item-active-immersive-color = #9AE3F3
 $nav-item-round-height = 32px
 $nav-item-round-color = $primary-color
 $nav-item-round-border = 2px
-$nav-logo-width = 45px
+$nav-logo-height = 32px
-$nav-logo-height = 23px
 
 $header-layer-height = 100px
 $header-bg-width = 1920px

packages/ui-default/components/header/header.page.styl

@@ -68,10 +68,13 @@ $header-gap-mini-domain = ($header-bg-height-mini - $nav-item-height - $header-l
   display: block
   width: $nav-logo-width    // no rem
   height: $nav-logo-height  // no rem
-  margin-top: rem(10px)
+  margin-top: rem(5px)
   +retina()
     background-size: $nav-logo-width $nav-logo-height // no rem
 
+  img
+    height: 100%
+
 .header__hamburger
   background: none
   border: 0

packages/ui-default/components/navigation/navigation.page.styl

@@ -13,10 +13,6 @@
   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
@@ -137,20 +133,10 @@
 .nav__list--secondary .nav__item--round
   margin-left: rem(5px)
 
-.nav__logo__options
-  background-image: url(./nav-logo-small_dark.png)
-  background-image: url(./nav-logo-small@2x_dark.png)
-
 .nav__logo
   display: block
-  background-size:100% 100%;
-  width: 0
-  opacity: 0
   height: rem($nav-logo-height)
-  margin: rem((($nav-item-height - $nav-logo-height) / 2) 0)
+  margin: rem((($nav-item-height - $nav-logo-height) / 2) 5px)
-  background: no-repeat
-  transition: width .3s, opacity .3s
-  transition-timing-function: ease-out-cubic
 
   &:hover
     text-decoration: none

packages/ui-default/entry.js

@@ -46,22 +46,6 @@ document.addEventListener('DOMContentLoaded', async () => {
   // eslint-disable-next-line camelcase
   try { __webpack_public_path__ = UiContext.cdn_prefix; } catch (e) { }
 
-  const e = document.createElement('style');
-  const dark = UiContext.domain.nav_logo_dark || UiContext.nav_logo_dark;
-  const dark2x = UiContext.domain.nav_logo_dark_2x || UiContext.nav_logo_dark_2x;
-  e.innerHTML = `
-    ${dark ? `.nav__logo { background-image: url(${dark}) !important }` : ''}
-    ${dark2x ? `
-      @media
-      only screen and (-webkit-min-device-pixel-ratio: 1.5), 
-      only screen and (min-resolution: 1.5dppx),
-      only screen and (min-resolution: 144dpi) {
-        .nav__logo, .header--mobile__domain {
-          background-image: url(${dark2x}) !important
-        }
-      }` : ''}`;
-  document.body.appendChild(e);
-
   const [data] = await Promise.all([
     (await fetch(`/constant/${UiContext.constantVersion}`, { cache: 'force-cache' })).json(),
     await import('./modules'),

packages/ui-default/index.ts

@@ -19,11 +19,9 @@ declare module 'hydrooj' {
   }
   interface SystemKeys {
     'ui-default.nav_logo_dark': string;
-    'ui-default.nav_logo_dark_2x': string;
   }
   interface UiContextBase {
     nav_logo_dark?: string;
-    nav_logo_dark_2x?: string;
     constantVersion?: string;
   }
 }
@@ -70,9 +68,7 @@ export async function buildUI() {
   logger.success('UI addons built in %d ms', Date.now() - start);
 }
 function updateLogo() {
-  [UiContextBase.nav_logo_dark, UiContextBase.nav_logo_dark_2x] = SystemModel.getMany([
+  UiContextBase.nav_logo_dark = SystemModel.get('ui-default.nav_logo_dark');
-    'ui-default.nav_logo_dark', 'ui-default.nav_logo_dark_2x',
-  ]);
 }
 
 class WikiHelpHandler extends Handler {

packages/ui-default/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hydrooj/ui-default",
-  "version": "4.42.10",
+  "version": "4.42.11",
   "author": "undefined <i@undefined.moe>",
   "license": "AGPL-3.0",
   "main": "index.ts",

packages/ui-default/setting.yaml

@@ -41,11 +41,6 @@ nav_logo_dark:
   name: nav_logo_dark
   desc: Nav Logo Dark
   default: /components/navigation/nav-logo-small_dark.png
-nav_logo_dark_2x:
-  type: text
-  name: nav_logo_dark_2x
-  desc: Nav Logo Dark@2x
-  default: /components/navigation/nav-logo-small@2x_dark.png
 preferredEditorType:
   type:
     wysiwyg: WYSIWYG

packages/ui-default/templates/partials/header_mobile.html

@@ -1,7 +1,9 @@
 <div class="header--mobile">
   <div class="row"><div class="columns clearfix">
     <div class="float-left">
-      <a class="header--mobile__domain" href="/" target="_self">&nbsp;</a>
+      <a class="header--mobile__domain" href="/" target="_self">
+        <img src="{{ UiContext.domain.nav_logo_dark or UiContext.nav_logo_dark }}">
+      </a>
     </div>
     <div class="float-right">
       {% include "partials/hamburger.html" %}

packages/ui-default/templates/partials/nav.html

@@ -9,7 +9,9 @@
 <nav class="nav slideout-menu" id="menu">
   <div class="row"><div class="columns clearfix">
     <ol class="nav__list nav__list--main clearfix">
-      <li class="nav__list-item"><a href="/" class="nav__logo" style="background-size: 100% 100%;">&nbsp;</a></li>
+      <li class="nav__list-item">
+        <a href="/"><img class="nav__logo" src="{{ UiContext.domain.nav_logo_dark or UiContext.nav_logo_dark }}"></a>
+      </li>
       {%- for item in overrideNav|default(ui.getNodes('Nav')) -%}{% if item.checker(handler) %}
         {{ nav_item(item) }}
       {% endif %}{%- endfor -%}