Merge pull request #9975 from kodadot/main

beta update
kodadot · Apr 4, 2024 · 1d5a7c4 · 1d5a7c4
2 parents 6f13e9b + bed67b4
commit 1d5a7c4
Show file tree

Hide file tree

Showing 77 changed files with 1,738 additions and 766 deletions.
diff --git a/assets/styles/components/_connect-wallet.scss b/assets/styles/components/_connect-wallet.scss
@@ -30,6 +30,7 @@
     width: 100%;
 
     @include mobile {
+      inset: 0;
       border-left: none !important;
       max-width: 100vw;
       height: calc(100% - $navbar-mobile-min-height) ;

diff --git a/assets/styles/layouts/_main-navigation.scss b/assets/styles/layouts/_main-navigation.scss
@@ -71,8 +71,11 @@
           }
 
           &--fullpage {
-            @apply fixed h-screen w-full z-[100] top-[57px];
-
+            @apply fixed h-screen w-full z-[100];
+            top: $navbar-desktop-min-height;
+            @include mobile {
+              top: $navbar-mobile-min-height;
+            }
             @include ktheme() {
               background: theme('background-color');
             }
@@ -138,7 +141,10 @@
     }
 
     &.is-active .navbar-brand {
-      min-height: $navbar-mobile-min-height;
+      min-height: $navbar-desktop-min-height;
+      @include mobile {
+        min-height: $navbar-mobile-min-height;
+      }
     }
   }
 }

diff --git a/components/CookieBanner.vue b/components/CookieBanner.vue
@@ -5,23 +5,25 @@
         class="notices flex overflow-hidden pointer-events-none fixed p-[2em] inset-0 is-bottom items-center w-full z-[1000]">
         <div
           role="alertdialog"
-          class="snackbar is-success is-bottom-left py-2 px-4 mb-3">
-          <div>
+          class="snackbar is-success is-bottom-left !py-4 md:!py-2 px-4 mb-3 flex-col md:flex-row">
+          <div class="md:flex md:gap-1">
             {{ $t('cookies.notice') }}, see
             <nuxt-link to="/cookie-notice" target="_blank" class="is-underlined"
               >Cookie Policy</nuxt-link
             >
             for details.
           </div>
-          <div class="bar ml-4 mr-4" />
-          <div class="action is-success">
+          <div
+            class="bg-separator-line-color m-4 md:!my-0 !w-full !h-[1px] md:!w-[1px] md:!h-[13px]" />
+          <div
+            class="flex items-center justify-between md:!my-0 w-full md:w-fit">
             <NeoButton variant="text" no-shadow @click="declineCookies">
               {{ $t('cookies.decline') }}
             </NeoButton>
             <NeoButton
-              variant="text"
+              variant="secondary-rounded"
               no-shadow
-              class="font-bold ml-3"
+              class="ml-3 h-8"
               data-testid="cookie-banner-button-accept"
               @click="acceptCookies">
               {{ $t('cookies.accept') }}
@@ -58,29 +60,7 @@ const declineCookies = () => {
 .cookie-banner {
   .snackbar {
     align-self: flex-start;
-    height: 2.188rem;
     max-width: 720px;
-
-    @media screen and (max-width: 768px) {
-      height: auto;
-      width: 11.875rem;
-      flex-direction: column;
-      display: flex;
-      align-self: auto !important;
-
-      .action {
-        display: flex;
-        align-items: center;
-        justify-content: space-around;
-        width: 100%;
-      }
-
-      .bar {
-        height: 1px;
-        width: 100%;
-        margin-top: 11px;
-      }
-    }
   }
 }
 </style>
diff --git a/components/Navbar.vue b/components/Navbar.vue
@@ -6,7 +6,9 @@
     :class="{
       'is-active': isMobileNavbarOpen,
     }">
-    <div class="container items-center" :class="{ 'is-fluid': !isTouch }">
+    <div
+      class="container items-center max-lg:!px-0"
+      :class="{ 'is-fluid': !isTouch }">
       <!-- BRAND -->
       <div class="navbar-brand">
         <nuxt-link
@@ -43,7 +45,7 @@
         <!-- BURGER MENU -->
         <a
           role="button"
-          class="navbar-burger sm:hidden"
+          class="navbar-burger lg:hidden"
           :class="{ 'is-active': isMobileNavbarOpen }"
           aria-label="menu"
           aria-expanded="false"
@@ -60,7 +62,7 @@
       <!-- MENU -->
       <div
         id="MainNavbar"
-        class="navbar-menu"
+        class="navbar-menu py-0"
         :class="{ 'is-active': isMobileNavbarOpen }">
         <!-- NAV START -->
         <div class="navbar-start">

diff --git a/components/TheFooter.vue b/components/TheFooter.vue
@@ -83,55 +83,21 @@
           </ul>
         </div>
       </section>
-      <section class="footer-container-socials flex flex-col">
-        <h2 class="subtitle is-5">
-          {{ $t('footer.join') }}
-        </h2>
-        <ul class="footer-container-socials-list flex mb-6">
-          <li
-            v-for="item in socials"
-            :key="item.url"
-            class="footer-container-socials-list-item flex items-center justify-center">
-            <NeoTooltip :label="item.name" position="top">
-              <a
-                v-safe-href="item.url"
-                class="flex items-center justify-center hover:text-text-color"
-                rel="nofollow noopener noreferrer"
-                target="_blank"
-                role="link"
-                :aria-label="item.name">
-                <!-- substack doesnt have a font awesome icon -->
-                <svg
-                  v-if="item.icon === 'substack'"
-                  width="16"
-                  height="16"
-                  viewBox="0 0 448 512"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg">
-                  <g clip-path="url(#clip0_6104_83750)">
-                    <path
-                      fill-rule="evenodd"
-                      clip-rule="evenodd"
-                      d="M0 0H448V62.804H0V0ZM0 229.083H448V511.471L223.954 385.808L0 511.471V229.083ZM0 114.541H448V177.345H0V114.541Z"
-                      fill="currentColor" />
-                  </g>
-                  <defs>
-                    <clipPath id="clip0_6104_83750">
-                      <rect width="448" height="511.471" fill="currentColor" />
-                    </clipPath>
-                  </defs>
-                </svg>
-                <!-- farcaster doesnt have a font awesome icon -->
-                <FarcasterIcon
-                  v-else-if="item.icon === 'farcaster'"
-                  width="20"
-                  height="20" />
-                <NeoIcon
-                  v-else
-                  :pack="item.pack || item.name == 'Swag' ? 'fasr' : 'fab'"
-                  :icon="item.icon" />
-              </a>
-            </NeoTooltip>
+      <section class="footer-container-info flex flex-col">
+        <h2 class="subtitle is-5">{{ $t('footer.join') }}</h2>
+        <ul
+          class="footer-container-list columns-1"
+          data-testid="footer-social-list">
+          <li v-for="item in socials" :key="item.url">
+            <a
+              v-if="item.url"
+              v-safe-href="item.url"
+              target="_blank"
+              rel="nofollow noopener noreferrer"
+              class="flex items-center">
+              {{ item.name }}
+              <NeoIcon icon="arrow-up-right" class="ml-1 text-k-grey" />
+            </a>
           </li>
         </ul>
       </section>
@@ -146,11 +112,7 @@
 </template>
 
 <script lang="ts" setup>
-import { NeoIcon, NeoTooltip } from '@kodadot1/brick'
-
-const FarcasterIcon = defineAsyncComponent(
-  () => import('@/assets/icons/farcaster-icon.svg?component'),
-)
+import { NeoIcon } from '@kodadot1/brick'
 
 interface Menu {
   name: string
@@ -240,49 +202,30 @@ const socials = [
   {
     name: 'Twitter',
     url: 'https://twitter.com/KodaDot',
-    icon: 'x-twitter',
   },
   {
     name: 'Farcaster',
     url: 'https://warpcast.com/~/channel/koda',
-    icon: 'farcaster',
   },
   {
     name: 'Telegram',
     url: 'https://t.me/koda_eco',
-    icon: 'telegram',
   },
   {
     name: 'Beehiiv',
     url: 'https://kodadotweeklyroundup.beehiiv.com',
-    icon: 'newspaper',
-    pack: 'fal',
   },
   {
     name: 'Linkedin',
     url: 'https://www.linkedin.com/company/kodadot',
-    icon: 'linkedin',
   },
   {
     name: 'Medium',
     url: 'https://medium.com/kodadot',
-    icon: 'medium',
   },
   {
     name: 'Youtube',
     url: 'https://www.youtube.com/channel/UCEULduld5NrqOL49k1KVjoA/',
-    icon: 'youtube',
-  },
-
-  {
-    name: 'Instagram',
-    url: 'https://instagram.com/kodadot.xyz',
-    icon: 'instagram',
-  },
-  {
-    name: 'Reddit',
-    url: 'https://www.reddit.com/r/KodaDot',
-    icon: 'reddit-alien',
   },
 ]
 </script>
diff --git a/components/carousel/CarouselTypeDrops.vue b/components/carousel/CarouselTypeDrops.vue
@@ -28,8 +28,7 @@ let queries = {
 
 if (!isProduction) {
   queries = {
-    limit: 12,
-    active: [true, false],
+    ...queries,
     chain: ['ahp', 'ahk'],
   }
 }

diff --git a/components/codeChecker/PreviewCard.vue b/components/codeChecker/PreviewCard.vue
@@ -1,33 +1,48 @@
 <template>
   <div
     class="border bg-background-color shadow-primary p-5 pb-6 w-full lg:max-w-[490px] flex flex-col gap-5">
-    <div>
+    <div ref="fullscreenRef" class="overflow-y-scroll">
+      <NeoButton
+        v-if="isFullscreen"
+        class="fixed top-[3rem] left-[3rem] z-[1]"
+        icon-left="chevron-left"
+        @click="toggleFullscreen">
+        <div class="mr-2">{{ $t('massmint.goBack') }}</div>
+      </NeoButton>
+
       <CodeCheckerSandboxIFrame
         v-if="render"
         v-model:count="count"
+        :is-fullscreen="isFullscreen"
+        :custom-class="isFullscreen ? 'h-fit aspect-square' : ''"
         :hash="hash"
         :assets="assets" />
-
       <BaseMediaItem v-else preview is-detail class="border" />
     </div>
-    <div
-      class="flex pb-5 justify-between w-full gap-4 border-b border-neutral-5">
+    <div class="pb-5 flex w-full gap-3 border-b border-neutral-5">
       <NeoButton
         rounded
         no-shadow
-        class="w-full px-5 border-k-grey hover:!bg-transparent"
-        icon="arrow-rotate-left"
+        class="px-5 flex-1 border-k-grey hover:!bg-transparent"
+        icon-right="arrow-rotate-left"
         @click="newHash"
         >{{ $t('codeChecker.newHash') }}</NeoButton
       >
       <NeoButton
         rounded
         no-shadow
-        class="w-full px-5 border-k-grey hover:!bg-transparent"
+        class="flex-1 border-k-grey hover:!bg-transparent"
         :disabled="!selectedFile"
         @click="replay"
         >{{ $t('codeChecker.replayAnimation') }}</NeoButton
       >
+      <NeoButton
+        rounded
+        no-shadow
+        :disabled="!render"
+        class="border-k-grey px-4 hover:!bg-transparent"
+        icon="arrow-up-right-and-arrow-down-left-from-center"
+        @click="toggleFullscreen"></NeoButton>
     </div>
     <div>
       <span>{{ $t('codeChecker.currentHash') }}</span>
@@ -74,6 +89,8 @@ import {
   NeoDropdownItem,
   NeoInput,
 } from '@kodadot1/brick'
+import { useFullscreen } from '@vueuse/core'
+
 import { generateRandomHash } from './utils'
 import config from './codechecker.config'
 import { AssetMessage, Passed } from './types'
@@ -86,6 +103,10 @@ const props = defineProps<{
   kodaRendererUsed: Passed
 }>()
 
+const fullscreenRef = ref<HTMLElement | null>(null)
+
+const { toggle: toggleFullscreen, isFullscreen } = useFullscreen(fullscreenRef)
+
 const emit = defineEmits(['reload'])
 const variationOptions = config.varaitionsOptions
 

diff --git a/components/codeChecker/SandboxIFrame.vue b/components/codeChecker/SandboxIFrame.vue
@@ -3,7 +3,7 @@
     :id="config.iframeId"
     :key="count"
     title="render-preview"
-    class="sandbox-iframe w-full h-[440px] border"
+    :class="['sandbox-iframe w-full h-[440px] border', customClass]"
     sandbox="allow-scripts allow-same-origin"
     :src="iframeSrc"
     @load="onIframeLoad">
@@ -19,6 +19,7 @@ const props = defineProps<{
   hash: string
   assets: Array<AssetMessage>
   count: number
+  customClass?: string
 }>()
 
 const emit = defineEmits(['update:count'])