Framework version 1.0.116 + horizontal Ladder card min height + recap…

… card empty fix

assets/styles/card.css

@@ -1172,7 +1172,7 @@
     text-center
     ;
 
-    > * {
+    > *:not(i):not(span) {
       &:is(:empty) {
         @apply
         hidden

framework/package.json

@@ -1,4 +1,4 @@
 {
   "name": "@g-loot/css-framework",
-  "version": "1.0.115"
+  "version": "1.0.116"
 }

pages/design-system/recapcard.js

@@ -583,6 +583,7 @@ const DSpage = () => {
               }
               rigthContent={
                 <>
+                  <i className="absolute z-10 top-[0.4rem] right-[0.4rem] badge bg-error-300" />
                   <div className="w-full flex-1 flex items-stretch justify-between">
                     <div className="flex-1 flex flex-col items-start justify-around text-left pl-1 leading-normal">
                       <h5>Recap created</h5>
@@ -632,7 +633,75 @@ const DSpage = () => {
               className="rounded"
               width="100%"
               height="200"
-              src="//jsfiddle.net/augustin_hiebel/gvoz8mne/embedded/html/dark/?bodyColor=212333&menuColor=1C1D2C&fontColor=FFFFFF&accentColor=F3C351"
+              src="//jsfiddle.net/augustin_hiebel/Lybzg376/embedded/html/dark/?bodyColor=212333&menuColor=1C1D2C&fontColor=FFFFFF&accentColor=F3C351"
+            ></iframe>
+          </div>
+        </div>
+        <Anchor title="Recap rendered (viewed)" level={3} />
+        <div className="flex flex-col md:flex-row md:items-start gap-2 md:gap-8">
+          <div className="flex-1 sm:w-[420px]">
+            <RecapItem
+              state="ready"
+              imageOverlay={
+                <button
+                  type="button"
+                  class="button button-success button-lg rounded-full"
+                >
+                  <span class="icon icon-triangle-right" />
+                </button>
+              }
+              rigthContent={
+                <>
+                  <div className="w-full flex-1 flex items-stretch justify-between">
+                    <div className="flex-1 flex flex-col items-start justify-around text-left pl-1 leading-normal">
+                      <h5>Recap created</h5>
+                      <ul>
+                        <li>Length: 00:59:00</li>
+                        <li>Moments: 10</li>
+                      </ul>
+                    </div>
+                    <div className="flex flex-col justify-between">
+                      <Tooltip
+                        tooltip={
+                          <ul class="menu menu-rounded w-48">
+                            <li>
+                              <button type="button" className="is-disabled">
+                                <span>Open in Recap editor (new)</span>
+                              </button>
+                            </li>
+                            <li>
+                              <button type="button">
+                                <span>Publish Recap</span>
+                              </button>
+                            </li>
+                          </ul>
+                        }
+                      >
+                        <button
+                          type="button"
+                          className="button button-sm button-tertiary rounded-full"
+                        >
+                          <span className="icon icon-dots-vertical" />
+                        </button>
+                      </Tooltip>
+                      <button
+                        type="button"
+                        className="button button-sm button-tertiary rounded-full"
+                      >
+                        <span className="icon icon-trash" />
+                      </button>
+                    </div>
+                  </div>
+                </>
+              }
+            />
+          </div>
+          <div className="flex-1">
+            <iframe
+              className="rounded"
+              width="100%"
+              height="200"
+              src="//jsfiddle.net/augustin_hiebel/2sL70vaj/embedded/html/dark/?bodyColor=212333&menuColor=1C1D2C&fontColor=FFFFFF&accentColor=F3C351"
             ></iframe>
           </div>
         </div>
@@ -776,7 +845,9 @@ const DSpage = () => {
             <div className="aspect-video relative flex flex-col items-center justify-center text-center gap-4 bg-ui-800">
               <div className="relative z-10 p-4">
                 <h2 className="h5">
-                  Stryda is waiting for you to<br />start playing your game...
+                  Stryda is waiting for you to
+                  <br />
+                  start playing your game...
                 </h2>
                 <p className="leading-tight mt-3">
                   No recordings detected on this computer yet.

pages/stryda/components/TopbarHighlights.js

@@ -34,10 +34,11 @@ const feedItems = [
   },
 ];
 
-export default function TopbarHighlights() {
+export default function TopbarHighlights(props) {
   const uiContext = useContext(UiContext);
   const prototype = usePrototypeData();
   const { query } = useRouter();
+  const isStatic = props.isStatic || false;
   const empty = query.empty === "true" ? true : false;
   const [isEmpty, setIsEmpty] = useState(empty);
   const [activeTab, setActiveTab] = useState("list");
@@ -61,16 +62,18 @@ export default function TopbarHighlights() {
   const [hasNewHighlights, setHasNewHighlights] = useState(false);
   let interval;
 
-  const [isActive, setActive] = useState(false);
+  const [isActive, setActive] = useState(isStatic);
   const ref = useRef(null);
 
   const dropdownActive = (e) => {
     e.preventDefault();
-    setActive(!isActive);
+    if(!isStatic) {
+      setActive(!isActive);
+    }
   };
 
   const handleClickOutside = (e) => {
-    if (ref.current && !ref.current.contains(e.target)) {
+    if (!isStatic && ref.current && !ref.current.contains(e.target)) {
       setActive(false);
     }
   };

pages/stryda/components/TopbarHighlightsListItem.js

@@ -137,7 +137,7 @@ export default function TopbarHighlightsListItem({
       return (
         <button
           type="button"
-          className="group surface flex items-center px-6 py-3 gap-4 interactive rounded-b"
+          className="group surface flex items-center px-6 py-3 gap-4 interactive rounded-t-none"
         >
           <PremiumLogo
             src="https://res.cloudinary.com/gloot/image/upload/v1672241197/Stryda/logos/stryda-premium-logo-main-white-animated.svg"

pages/stryda/demo/demo-highlightmanager.js

@@ -1,17 +1,34 @@
 import React from "react";
 import Structure from "../components/Structure";
+import { usePrototypeData } from "@/contexts/prototype";
 import TopbarHighlights from "../components/TopbarHighlights";
 
 export default function DemoHighlightManager() {
+  const prototype = usePrototypeData();
   return (
     <>
-      <Structure title="Profile" hiddenUI={true}></Structure>
+      <Structure title="Profile" hiddenUI={true}>
+        <section className="max-w-lg mx-auto p-4 flex flex-col md:flex-row items-start justify-center">
+          <div className="flex-none w-full md:w-72 surface rounded p-2 order-2 md:order-1">
+            <div className="form-group">
+              <div className="form-toggle form-full">
+                <input
+                  type="checkbox"
+                  name="feed"
+                  id="state-premium"
+                  defaultChecked={prototype.isPremium}
+                  onClick={() => prototype.togglePremium()}
+                />
+                <label htmlFor="state-premium">Premium State</label>
+              </div>
+            </div>
+          </div>
+          <div className="order-2 md:order-1 flex-1 flex md:justify-end md:items-start min-h-12">
+            <TopbarHighlights isStatic={true} />
+          </div>
+        </section>
+      </Structure>
 
-      <section className="absolute inset-0 p-4 flex items-center justify-center">
-        <div className="w-full max-w-xl flex justify-end items-start h-[calc(80dvh)]">
-          <TopbarHighlights />
-        </div>
-      </section>
     </>
   );
 }