Use variable to pass image urls to css

ppy · Jul 5, 2023 · a2036bc · a2036bc
1 parent c6d5579
commit a2036bc
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 38 deletions.
diff --git a/app/helpers.php b/app/helpers.php
@@ -76,9 +76,9 @@ function beatmap_timestamp_format($ms)
 /**
  * Allows using both html-safe and non-safe text inside `{{ }}` directive.
  */
-function blade_safe($html)
+function blade_safe($html): HtmlString
 {
-    return new Illuminate\Support\HtmlString($html);
+    return new HtmlString($html);
 }
 
 /**
@@ -270,16 +270,16 @@ function css_group_colour($group)
     return '--group-colour: '.(optional($group)->colour ?? 'initial');
 }
 
-function css_var_2x(string $key, string $url)
+function css_var_2x(string $key, ?string $url): ?HtmlString
 {
     if (!present($url)) {
-        return;
+        return null;
     }
 
     $url = e($url);
     $url2x = retinaify($url);
 
-    return blade_safe("{$key}: url('{$url}'); {$key}-2x: url('{$url2x}')");
+    return blade_safe("{$key}: url('{$url}'); {$key}-2x: url('{$url2x}');");
 }
 
 function current_locale_meta(): LocaleMeta

diff --git a/resources/css/bem/artist.less b/resources/css/bem/artist.less
@@ -95,7 +95,7 @@
   }
 
   &__portrait {
-    .at2x-simple("~@images/layout/artist-noavatar.jpg");
+    .at2x-fallback(--artist-portrait, "~@images/layout/artist-noavatar.jpg");
     width: 250px;
     height: 250px;
     .default-box-shadow();
@@ -133,6 +133,7 @@
     right: 0;
     position: absolute;
     border-radius: 4px 0 3px 0;
+    .at2x-simple-var(--artist-label-overlay);
   }
 
   &__links-area {

diff --git a/resources/css/bem/tournament.less b/resources/css/bem/tournament.less
@@ -9,6 +9,10 @@
     margin-bottom: 10px;
   }
 
+  &__banner {
+    .at2x-simple-var(--tournament-header-banner);
+  }
+
   &__body {
     .center-content();
     .default-gutter-v2();

diff --git a/resources/css/functions.less b/resources/css/functions.less
@@ -249,6 +249,14 @@
   }
 }
 
+.at2x-simple-var(@var) {
+  background-image: var(@var);
+
+  @media @highdpi {
+    background-image: var(~"@{var}-2x");
+  }
+}
+
 .at2x-fallback(@var, @fallback) {
   @fallback2x: replace(@fallback, "(\.[^.]+)$", "@2x$1");
   background-image: var(@var, url(@fallback));

diff --git a/resources/views/admin/contests/show.blade.php b/resources/views/admin/contests/show.blade.php
@@ -5,9 +5,9 @@
 @extends('master', ['titlePrepend' => osu_trans('layout.header.admin.contest').' / '.$contest->name])
 
 @section('content')
-    @include('objects.css-override', ['mapping' => [
-        '.header-v4__bg' => $contest->header_url,
-    ]])
+    <style>
+        :root { {{ css_var_2x('--header-bg', $contest->header_url) }} }
+    </style>
 
     @include('admin/_header')
 

diff --git a/resources/views/artists/show.blade.php b/resources/views/artists/show.blade.php
@@ -29,11 +29,13 @@
 ])
 
 @section('content')
-    @include('objects.css-override', ['mapping' => [
-        '.header-v4__bg' => $images['header_url'],
-        '.artist__portrait' => $images['cover_url'],
-        '.artist__label-overlay' => $artist->label ? $artist->label->icon_url : '',
-    ]])
+    <style>
+        :root {
+            {{ css_var_2x('--header-bg', $images['header_url']) }}
+            {{ css_var_2x('--artist-portrait', $images['cover_url']) }}
+            {{ css_var_2x('--artist-label-overlay', $artist->label?->icon_url) }}
+        }
+    </style>
 
     @include('layout._page_header_v4', ['params' => [
         'links' => $headerLinks,

diff --git a/resources/views/objects/css-override.blade.php b/resources/views/objects/css-override.blade.php
diff --git a/resources/views/tournaments/show.blade.php b/resources/views/tournaments/show.blade.php
@@ -18,13 +18,14 @@
 @extends('master', ['titlePrepend' => $tournament->name])
 
 @section('content')
-    @include('objects.css-override', ['mapping' => ['.tournament__banner' => $tournament->header_banner]])
-
     @include('layout._page_header_v4', ['params' => [
         'links' => $links,
         'linksBreadcrumb' => true,
         'theme' => 'tournaments',
     ]])
+    <style>
+        :root { {{ css_var_2x('--tournament-header-banner', $tournament->header_banner) }} }
+    </style>
 
     <div class="osu-page osu-page--info-bar">
         <div class="grid-items">