Merge pull request #11537 from nanaya/banner-in-your-face

Adjust dashboard banner position

resources/css/bem/menu-image.less

@@ -10,7 +10,9 @@
 
   &__image {
     object-fit: contain;
-    width: 100%;
     height: 100%;
+    max-width: 100%;
+    margin: auto;
+    display: block;
   }
 }

resources/css/bem/menu-images.less

@@ -2,16 +2,13 @@
 // See the LICENCE file in the repository root for full licence text.
 
 .menu-images {
-  --arrow-opacity: 0;
-  --container-height: 90px;
+  --arrow-opacity-desktop: 0;
   --indicators-opacity: 1;
 
-  margin-top: 20px;
-  overflow-x: hidden;
   position: relative;
 
   &:hover {
-    --arrow-opacity: 1;
+    --arrow-opacity-desktop: 1;
   }
 
   &--placeholder {
@@ -21,24 +18,27 @@
   &__arrow {
     .reset-input();
     .fade-element(@hover-transition-duration);
-    height: var(--container-height);
+    height: 100%;
     padding: 10px;
     position: absolute;
     top: 0;
-    opacity: var(--arrow-opacity);
+
+    @media @desktop {
+      opacity: var(--arrow-opacity-desktop);
+    }
 
     &:hover {
       color: @osu-colour-l1;
     }
 
     &--left {
       --icon: @fa-var-chevron-left;
-      left: 0;
+      left: var(--page-gutter);
     }
 
     &--right {
       --icon: @fa-var-chevron-right;
-      right: 0;
+      right: var(--page-gutter);
     }
 
     &::before {
@@ -48,24 +48,56 @@
     }
   }
 
+  &__blur {
+    transition: opacity 600ms;
+    will-change: opacity;
+
+    &::before {
+      .full-size();
+      content: "";
+      background: var(--url);
+      background-position: center;
+      background-size: cover;
+      filter: blur(50px);
+    }
+
+    &::after {
+      .full-size();
+      content: "";
+      background-image: linear-gradient(
+        to top,
+        hsla(var(--hsl-b5), 0%),
+        hsl(var(--hsl-b5))
+      );
+    }
+  }
+
   &__container {
     .center-content();
     display: flex;
-    height: var(--container-height);
     transform: translateX(calc(-100% * var(--index, 0)));
+    width: 100%;
+    height: 100%;
 
     &--transition {
       transition: transform 300ms ease-in-out;
     }
   }
 
+  &__images {
+    height: 120px;
+    overflow: hidden;
+    position: relative;
+  }
+
   &__indicator {
     .reset-input();
     align-items: center;
     display: flex;
 
-    width: 30px;
-    height: 6px;
+    width: 40px;
+    height: 11px;
+    padding: 0 5px 5px;
 
     --content-height: 2px;
     --content-opacity: 0.5;
@@ -95,12 +127,12 @@
   }
 
   &__indicators {
+    position: relative;
     align-items: center;
     display: flex;
     flex-wrap: wrap;
-    gap: 10px;
     justify-content: center;
-    margin-top: 10px;
+    padding: 0 var(--page-gutter);
     opacity: var(--indicators-opacity);
   }
 }

resources/js/components/menu-image.tsx

@@ -13,12 +13,13 @@ interface Props {
 
 export default function MenuImage({ image, index }: Props) {
   return (
-    <a
+    <div
       className={bn}
-      href={image.url}
       style={{ '--index': index } as React.CSSProperties}
     >
-      <img className={`${bn}__image`} src={image.image_url} />
-    </a>
+      <a className='u-contents' href={image.url}>
+        <img className={`${bn}__image`} src={image.image_url} />
+      </a>
+    </div>
   );
 }

resources/js/components/menu-images.tsx

@@ -6,7 +6,7 @@ import { range } from 'lodash';
 import { action, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { classWithModifiers } from 'utils/css';
+import { classWithModifiers, urlPresence } from 'utils/css';
 import MenuImage from './menu-image';
 
 function modulo(dividend: number, divisor: number): number {
@@ -62,38 +62,60 @@ export default class MenuImages extends React.Component<Props> {
     if (this.length === 1) {
       return (
         <div className={bn}>
-          <div className={`${bn}__container`}>
-            <MenuImage image={this.props.images[0]} />
+          <div
+            className={`${bn}__blur`}
+            style={{
+              '--url': urlPresence(this.props.images[0].image_url),
+            } as React.CSSProperties}
+          />
+          <div className={`${bn}__images`}>
+            <div className={`${bn}__container`}>
+              <MenuImage image={this.props.images[0]} />
+            </div>
           </div>
         </div>
       );
     }
 
+    const currentIndex = modulo(this.index, this.length);
+
     return (
       <div
         className={bn}
         onMouseEnter={this.clearAutoRotateTimer}
         onMouseLeave={this.setAutoRotateTimer}
       >
-        <div
-          className={classWithModifiers(`${bn}__container`, { transition: this.transition })}
-          onTransitionEnd={this.handleTransitionEnd}
-          style={{ '--index': this.index } as React.CSSProperties}
-        >
-          {/*
-            Render the images. If minIndex or maxIndex have been adjusted, this
-            will render duplicate images in a cycling pattern to help create
-            the illusion of an infinitely scrolling container
-          */}
-          {range(this.minIndex, this.maxIndex + 1).map((index) => (
-            <MenuImage
-              key={index}
-              image={this.props.images[modulo(index, this.length)]}
-              index={index}
-            />
-          ))}
+        {this.props.images.map((imageJson, i) => (
+          <div
+            key={imageJson.image_url}
+            className={`${bn}__blur`}
+            style={{
+              '--url': urlPresence(imageJson.image_url),
+              opacity: i === currentIndex ? 1 : 0,
+            } as React.CSSProperties}
+          />
+        ))}
+        <div className={`${bn}__images`}>
+          <div
+            className={classWithModifiers(`${bn}__container`, { transition: this.transition })}
+            onTransitionEnd={this.handleTransitionEnd}
+            style={{ '--index': this.index } as React.CSSProperties}
+          >
+            {/*
+              Render the images. If minIndex or maxIndex have been adjusted, this
+              will render duplicate images in a cycling pattern to help create
+              the illusion of an infinitely scrolling container
+            */}
+            {range(this.minIndex, this.maxIndex + 1).map((index) => (
+              <MenuImage
+                key={index}
+                image={this.props.images[modulo(index, this.length)]}
+                index={index}
+              />
+            ))}
+          </div>
+          {this.renderArrows()}
         </div>
-        {this.renderArrows()}
         {this.renderIndicators()}
       </div>
     );

resources/views/home/user.blade.php

@@ -13,26 +13,26 @@
     @include('home._user_header_default')
 
     <div class="osu-page">
-        <div class="user-home">
-            <div class="user-home__news">
-                @if (count($menuImages) > 0)
-                    <div class="js-react--menu-images">
-                        <div class="menu-images menu-images--placeholder">
-                            <div class="menu-images__container">
-                                {!! spinner() !!}
-                            </div>
-                            @if (count($menuImages) > 1)
-                                <div class="menu-images__indicators">
-                                    @foreach ($menuImages as $_i)
-                                        <div class="menu-images__indicator">
-                                        </div>
-                                    @endforeach
+        @if (count($menuImages) > 0)
+            <div class="js-react--menu-images u-contents">
+                <div class="menu-images menu-images--placeholder">
+                    <div class="menu-images__container">
+                        {!! spinner() !!}
+                    </div>
+                    @if (count($menuImages) > 1)
+                        <div class="menu-images__indicators">
+                            @foreach ($menuImages as $_i)
+                                <div class="menu-images__indicator">
                                 </div>
-                            @endif
+                            @endforeach
                         </div>
-                    </div>
-                @endif
+                    @endif
+                </div>
+            </div>
+        @endif
 
+        <div class="user-home">
+            <div class="user-home__news">
                 <h2 class="user-home__news-title">{{ osu_trans('home.user.news.title') }}</h2>
 
                 @foreach ($news as $post)