Framework version 1.0.114 + fix recap card issue

g-loot · Dec 5, 2023 · 868abb4 · 868abb4
1 parent 1d348aa
commit 868abb4
Show file tree

Hide file tree

Showing 8 changed files with 161 additions and 455 deletions.
diff --git a/assets/styles/card.css b/assets/styles/card.css
@@ -1201,10 +1201,16 @@
   &.is-inactive,
   &:has(.progresscontainer) {
     > .card-image {
-      @apply
-      child:opacity-30
-      [&>img]:opacity-5
-      ;
+      > * {
+        @apply
+        opacity-30
+        ;
+      }
+      > img {
+        @apply
+        opacity-5
+        ;
+      }
     }
   }
   &:has(.button-success) {

diff --git a/framework/package.json b/framework/package.json
@@ -1,4 +1,4 @@
 {
   "name": "@g-loot/css-framework",
-  "version": "1.0.113"
+  "version": "1.0.114"
 }
diff --git a/pages/design-system/recapcard.js b/pages/design-system/recapcard.js
@@ -584,14 +584,14 @@ const DSpage = () => {
                     <div className="flex flex-col justify-between">
                       <Tooltip
                         tooltip={
-                          <ul class="menu menu-rounded w-44">
+                          <ul class="menu menu-rounded w-48">
                             <li>
-                              <button>
-                                <span>Open in Recap editor</span>
+                              <button type="button" className="is-disabled">
+                                <span>Open in Recap editor (new)</span>
                               </button>
                             </li>
                             <li>
-                              <button>
+                              <button type="button">
                                 <span>Publish Recap</span>
                               </button>
                             </li>
@@ -631,7 +631,7 @@ const DSpage = () => {
       <div className="mb-8">
         <Anchor title="Status: not premium" />
         <div className="mb-2">
-          <ButtonStretchy variant="button-success">
+          <ButtonStretchy variant="button-attention">
             <span className="text-sm">
               <span>New matches found</span>
             </span>

diff --git a/pages/stryda/profile/[user_id]/index.js b/pages/stryda/profile/[user_id]/index.js
@@ -237,7 +237,7 @@ export default function Profile() {
             <>
               <div className="relative z-0">
                 {selectedUser.isYou && (
-                  <div className="absolute z-20 w-full max-w-xs rounded border border-ui-200/5 bg-ui-800/95 p-2 right-0 bottom-4 leading-none">
+                  <div className="hidden md:block absolute z-20 w-full max-w-xs rounded border border-ui-200/5 bg-ui-800/95 p-2 right-0 bottom-4 leading-none">
                     <div className="flex items-center justify-center gap-1 text-center mb-2">
                       <span className="text-sm text-ui-100 mr-1">Level:</span>
                       <span className="icon icon-star text-main" />

diff --git a/pages/stryda/profile/[user_id]/tab-achievements.js b/pages/stryda/profile/[user_id]/tab-achievements.js
@@ -77,83 +77,23 @@ export default function TabProfileAchievements() {
         <>
           {isEmpty || selectedUser.achievements?.badges.length === 0 ? (
             <>
-              {selectedUser.isYou ? (
-                <section className="grid lg:grid-cols-2 gap-4">
-                  {prototype
-                    .getAchievementsectionByID(1)
-                    .items.map((item, itemIndex) => (
-                      <div
-                        key={itemIndex}
-                        className={`surface sm:rounded-lg p-2 pr-4 flex items-center gap-6 animate-slide-in-bottom animate-delay ${
-                          item.level === 0 ? "pointer-events-none" : ""
-                        } ${loading ? "is-loading" : ""}`}
-                        style={{ "--delay": "calc(" + itemIndex + " * 0.05s)" }}
-                      >
-                        <div className={`w-36 h-36 achievement`}>
-                          <i />
-                          <i />
-                          <div className={`achievement-level-0`}>
-                            <AchievementFrame
-                              url={`https://res.cloudinary.com/gloot/image/upload/v1678871888/Stryda/achievements/frames/achievement-frame-lvl0-animated.svg`}
-                            />
-                            <AchievementIcon
-                              url={`https://res.cloudinary.com/gloot/image/upload/v1678872380/Stryda/achievements/icons/achievement-icon-${
-                                prototype.getAchievementitemByID(1, item.item)
-                                  .icon
-                              }.svg`}
-                            />
-                          </div>
-                          {item.level > 0 && (
-                            <span className="text-sm uppercase">
-                              Level {item.level}
-                            </span>
-                          )}
-                        </div>
-                        <div className="flex-1">
-                          <h3 className="h5">
-                            {
-                              prototype.getAchievementitemByID(1, item.item)
-                                .name
-                            }
-                          </h3>
-                          <p className="text-ui-300 mt-2 mb-3">
-                            {
-                              prototype.getAchievementitemByID(1, item.item)
-                                .description
-                            }
-                          </p>
-                          <div className="flex items-center gap-4 leading-none font-bold">
-                            <div
-                              className="progressbar progressbar-secondary w-full"
-                              style={{
-                                "--percent": 0,
-                                "--progress": 0,
-                              }}
-                            >
-                              <div />
-                              <div />
-                            </div>
-                            <div className="flex-none mb-0.5">
-                              <span>0</span> / <span>100</span>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    ))}
-                </section>
-              ) : (
-                <div className="surface rounded-lg px-4 py-8 text-center">
-                  <div className="max-w-xs mx-auto">
-                    <span className="icon icon-medal text-6xl text-ui-500" />
-                    <div className="mt-2">
-                      <p className="text-lg text-ui-300">
-                        {selectedUser.nickname} hasn&#39;t unlocked any
-                        achievements.
-                      </p>
-                    </div>
+              <div className="px-4 py-24 text-center">
+                <div className="max-w-xs mx-auto">
+                  <span className="icon icon-medal text-6xl text-ui-500" />
+                  <div className="mt-2">
+                    <p className="text-ui-300">
+                      {selectedUser.isYou ? (
+                        <>You haven&#39;t unlocked any achievements yet.</>
+                      ) : (
+                        <>
+                          {selectedUser.nickname} hasn&#39;t unlocked any
+                          achievements.
+                        </>
+                      )}
+                    </p>
                   </div>
                 </div>
-              )}
+              </div>
             </>
           ) : (
             <section className="grid xl:grid-cols-2 gap-4">
@@ -162,9 +102,7 @@ export default function TabProfileAchievements() {
                   key={itemIndex}
                   className={`surface sm:rounded-lg p-2 pr-4 flex items-center gap-6 animate-slide-in-bottom animate-delay ${
                     item.level === 0 ? "pointer-events-none" : ""
-                  } ${
-                    loading ? "is-loading" : ""
-                  }`}
+                  } ${loading ? "is-loading" : ""}`}
                   style={{ "--delay": "calc(" + itemIndex + " * 0.05s)" }}
                 >
                   {item.level > 0 && selectedUser.isYou && (
@@ -250,6 +188,45 @@ export default function TabProfileAchievements() {
               ))}
             </section>
           )}
+
+          {/* for demo purposes only */}
+          {prototype.showDemo && (
+            <section className="fixed z-[9999] bottom-4 left-4 surface-ui-500 rounded shadow-md p-4 pr-16 text-sm text-ui-100 flex flex-col items-start">
+              <div className="absolute top-1 right-1">
+                <button
+                  type="button"
+                  className="button button-sm button-secondary button-close"
+                  onClick={() => prototype.setShowDemo(!prototype.showDemo)}
+                >
+                  <span className="icon icon-e-remove" />
+                </button>
+              </div>
+              <div className="form-group pl-4">
+                <div className="form-xs form-toggle">
+                  <input
+                    type="checkbox"
+                    name="feed"
+                    id="state-premium"
+                    defaultChecked={prototype.isPremium}
+                    onClick={() => prototype.togglePremium()}
+                  />
+                  <label htmlFor="state-premium">Premium State</label>
+                </div>
+              </div>
+              <div className="form-group pl-4">
+                <div className="form-xs form-toggle">
+                  <input
+                    type="checkbox"
+                    name="feed"
+                    id="state-empty"
+                    defaultChecked={isEmpty}
+                    onClick={() => setIsEmpty(!isEmpty)}
+                  />
+                  <label htmlFor="state-empty">Empty State</label>
+                </div>
+              </div>
+            </section>
+          )}
         </>
       )}
     </>

diff --git a/pages/stryda/profile/[user_id]/tab-followers.js b/pages/stryda/profile/[user_id]/tab-followers.js
@@ -67,7 +67,7 @@ export default function TabProfileFollowers() {
             <>
               {isEmpty ? (
                 <>
-                  <div className="surface rounded-lg px-4 py-8 text-center mb-4">
+                  <div className="px-4 py-24 text-center">
                     <div className="max-w-xs mx-auto">
                       <span className="icon icon-multiple-11 text-6xl text-ui-500" />
                       {selectedUser.isYou ? (

diff --git a/pages/stryda/profile/[user_id]/tab-highlights.js b/pages/stryda/profile/[user_id]/tab-highlights.js
@@ -56,7 +56,7 @@ export default function TabProfileHighlights() {
               {prototype
                 .getUserMatches(selectedUser.id)
                 .filter((m) => m.meta?.media).length === 0 || isEmpty ? (
-                <div className="p-4 text-center">
+                <div className="px-4 py-24 text-center">
                   <div className="max-w-xs mx-auto">
                     <span className="icon icon-video text-6xl text-ui-500" />
                     <div className="mt-2">