Fix default background and use flag-team component for team page

ppy · Dec 11, 2024 · 3b57a33 · 3b57a33
1 parent 5522a2d
commit 3b57a33
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 10 deletions.
diff --git a/resources/css/bem/flag-team.less b/resources/css/bem/flag-team.less
@@ -5,6 +5,16 @@
   height: 1em;
   width: 2em;
   display: inline-block;
+  background-color: #333;
   background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
   border-radius: min(0.25em, @border-radius-large);
+
+  &--full {
+    width: 100%;
+    height: 100%;
+    box-shadow: none;
+    border-radius: 0;
+  }
 }
diff --git a/resources/css/bem/profile-info.less b/resources/css/bem/profile-info.less
@@ -2,7 +2,6 @@
 // See the LICENCE file in the repository root for full licence text.
 
 .profile-info {
-  --avatar: none;
   --avatar-radius-extended-desktop: 40px;
   --avatar-radius-extended: 20px;
   --avatar-radius: 20px;
@@ -40,7 +39,6 @@
 
   &--team {
     --avatar-width: calc(var(--avatar-height) * 2);
-    --avatar: url("~@images/headers/generic.jpg");
     --bg: url("~@images/headers/generic.jpg");
     background-color: hsl(var(--hsl-b4));
   }
@@ -60,8 +58,6 @@
     overflow: hidden;
     align-self: flex-end;
     margin-bottom: var(--vertical-padding);
-    background-image: var(--avatar);
-    background-size: contain;
     .default-box-shadow();
   }
 

diff --git a/resources/js/components/flag-team.tsx b/resources/js/components/flag-team.tsx
@@ -3,12 +3,13 @@
 
 import TeamJson from 'interfaces/team-json';
 import * as React from 'react';
+import { urlPresence } from 'utils/css';
 
 export default function FlagTeam({ team }: { team: TeamJson }) {
   return (
     <span
       className='flag-team'
-      style={{ backgroundImage: `url('${team.logo}')` }}
+      style={{ backgroundImage: urlPresence(team.logo) }}
       title={team.name}
     />
   );

diff --git a/resources/views/objects/_flag_team.blade.php b/resources/views/objects/_flag_team.blade.php
@@ -3,7 +3,7 @@
     See the LICENCE file in the repository root for full licence text.
 --}}
 <span
-    class="flag-team"
+    class="{{ class_with_modifiers('flag-team', $modifiers) }}"
     title="{{ $team->name }}"
     {!! background_image($team->logo()->url(), false) !!}
 ></span>
diff --git a/resources/views/teams/show.blade.php b/resources/views/teams/show.blade.php
@@ -45,10 +45,9 @@ class="btn-circle btn-circle--page-toggle"
                     @endif
                 </div>
                 <div class="profile-info__details">
-                    <div
-                        class="profile-info__avatar"
-                        {!! background_image($team->logo()->url()) !!}
-                    ></div>
+                    <div class="profile-info__avatar">
+                        @include('objects._flag_team', ['modifiers' => 'full', 'team' => $team])
+                    </div>
                     <div class="profile-info__info">
                         <h1 class="profile-info__name">
                             {{ $team->name }}