landing widgets

public/configuration.json

@@ -92,8 +92,8 @@
             "slot.1.widget": "promoarticle",
             "slot.1.conf": "",
             "slot.2.widget": "widgetcontainer",
-            "slot.2.conf": "image:${image.library.url}web_promo_small/spromo_Canal_Bundle.png,btn:HelloHELLO,btnLink:https://google.com/",
+            "slot.2.conf": "image:${image.library.url}web_promo_small/spromo_Canal_Bundle.png,texts:2021NitroPromo,btnLink:https://google.com",
-            "slot.3.widget": "",
+            "slot.3.widget": "promoarticle",
             "slot.3.conf": "",
             "slot.4.widget": "",
             "slot.4.conf": "",

src/views/hotel-view/HotelView.tsx

@@ -52,25 +52,25 @@ export const HotelView: FC<HotelViewProps> = props =>
                                 widgetSlot={ 2 }
                                 widgetType={GetConfiguration('hotelview')['widgets']['slot.' + 2 + '.widget']}
                                 widgetConf={GetConfiguration('hotelview')['widgets']['slot.' + 2 + '.conf']}
-                                className="col-6"
+                                className="col-7"
                             />
                             <WidgetSlotView
                                 widgetSlot={ 3 }
                                 widgetType={GetConfiguration('hotelview')['widgets']['slot.' + 3 + '.widget']}
                                 widgetConf={GetConfiguration('hotelview')['widgets']['slot.' + 3 + '.conf']}
-                                className="col-6"
+                                className="col-5"
                             />
                             <WidgetSlotView
                                 widgetSlot={ 4 }
                                 widgetType={GetConfiguration('hotelview')['widgets']['slot.' + 4 + '.widget']}
                                 widgetConf={GetConfiguration('hotelview')['widgets']['slot.' + 4 + '.conf']}
-                                className="col-6"
+                                className="col-7"
                             />
                             <WidgetSlotView
                                 widgetSlot={ 5 }
                                 widgetType={GetConfiguration('hotelview')['widgets']['slot.' + 5 + '.widget']}
                                 widgetConf={GetConfiguration('hotelview')['widgets']['slot.' + 5 + '.conf']}
-                                className="col-6"
+                                className="col-5"
                             />
                         </div>
                         <WidgetSlotView

src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.scss

@@ -1,15 +1,61 @@
 .hall-of-fame {
+    background-color: rgba($black,.3);
+    border-radius: $border-radius;
+    display: inline-block;
+
     .hof-user-container {
         display:inline-flex;
         height: 100%;
+        position: relative;
+
+        &:hover {
+            .hof-tooltip {
+                display: block;
+            }
+        }
 
         .hof-tooltip {
             position: absolute;
             display: inline;
+            z-index: 2;
+            display: none;
+            background-color: #1c323f;
+            border: 2px solid rgba($white, 0.5);
+            border-radius: $border-radius;
+            bottom:calc(100% - 20px);
+            left: 0;
+            right: 0;
+            margin: auto;
+            padding:2px;
+            color: #fff;
+
+            .hof-tooltip-content {
+                padding:3px;
+                background-color: #3d5f6e;
             }
+
+            &:after {
+                content: "";
+                position: absolute;
+                bottom: -7px;
+                left: 0;
+                right: 0;
+                margin: auto;
+                height: 10px;
+                width: 10px;
+                transform: rotate(45deg);
+                border-color: transparent rgba($white, 0.5) rgba($white, 0.5) transparent;
+                border-style: solid;
+                border-width: 5px;
+            }
+        }
+
         .avatar-image {
             position:relative;
             display:inline;
+            left:0;
+            top:0;
+            z-index: 1;
         }
     }
 }

src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.tsx

@@ -1,6 +1,7 @@
 import { CommunityGoalHallOfFameData, CommunityGoalHallOfFameMessageEvent, GetCommunityGoalHallOfFameMessageComposer } from 'nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { CreateMessageHook, SendMessageHook } from '../../../../../hooks/messages/message-event';
+import { LocalizeText } from '../../../../../utils/LocalizeText';
 import { AvatarImageView } from '../../../../shared/avatar-image/AvatarImageView';
 import { HallOfFameWidgetViewProps } from './HallOfFameWidgetView.types';
 
@@ -26,8 +27,13 @@ export const HallOfFameWidgetView: FC<HallOfFameWidgetViewProps> = props =>
     return (
         <div className="hall-of-fame widget">
         {data.hof && (data.hof.length > 0) && data.hof.map((entry, ind) =>
-      <div className="hof-user-container">
+            <div className="hof-user-container cursor-pointer">
-        <div className="hof-tooltip">{entry.userName}</div>
+                <div className="hof-tooltip">
+                    <div className="hof-tooltip-content">
+                        <div className="fw-bold">{ind + 1}. { entry.userName }</div>
+                        <div className="muted fst-italic small text-center">{LocalizeText('landing.view.competition.hof.points', ['points'], [entry.currentScore.toString()])}</div>
+                    </div>
+                </div>
                 <AvatarImageView figure={entry.figure} direction={2} key={ind} />
             </div>
         )}

src/views/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.tsx

@@ -30,7 +30,7 @@ export const PromoArticleWidgetView: FC<PromoArticleWidgetViewProps> = props =>
   	if (!articles) return null;
 
   	return (
-		<div className="promo-articles widget">
+		<div className="promo-articles widget mb-2">
 			<div className="d-flex flex-row align-items-center w-100 mb-1">
 				<small className="flex-shrink-0 pe-1">{ LocalizeText('landing.view.promo.article.header') }</small>
 			  	<hr className="w-100 my-0"/>

src/views/hotel-view/views/widgets/widgetcontainer/WIdgetContainerView.tsx

@@ -1,5 +1,6 @@
 import { FC, useCallback, useMemo } from 'react';
 import { GetConfigurationManager } from '../../../../../api/core/';
+import { LocalizeText } from '../../../../../utils/LocalizeText';
 import { WidgetContainerViewProps } from './WidgetContainerView.types';
 
 export const WidgetContainerView: FC<WidgetContainerViewProps> = props =>
@@ -40,8 +41,13 @@ export const WidgetContainerView: FC<WidgetContainerViewProps> = props =>
     }, [ config ]);
 
   	return (
-        <div className="widgetcontainer widget">
+        <div className="widgetcontainer widget d-flex flex-row overflow-hidden">
-            { getOption('image') }
+            <div className="widgetcontainer-image flex-shrink-0" style={{ backgroundImage: `url(${getOption('image')})` }} />
+            <div className="d-flex flex-column align-self-center">
+                <h3 className="my-0">{LocalizeText(`landing.view.${getOption('texts')}.header`)}</h3>
+                <i>{ LocalizeText(`landing.view.${getOption('texts')}.body`) }</i>
+                <button className="btn btn-sm btn-gainsboro align-self-start px-3 mt-auto">{ LocalizeText(`landing.view.${getOption('texts')}.button`) }</button>
+            </div>
     	</div>
   	);
 }

src/views/hotel-view/views/widgets/widgetcontainer/WidgetContainerView.scss

@@ -0,0 +1,9 @@
+.widgetcontainer {
+    .widgetcontainer-image {
+        width: 150px;
+        height: 150px;
+        margin-right: 10px;
+        background-repeat: no-repeat;
+        background-position: top center;
+    }
+}