release update

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) ;

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;
+ }
  }
  }
 }

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>

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">

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>

components/carousel/CarouselTypeDrops.vue

@@ -28,8 +28,7 @@ let queries = {
 
 if (!isProduction) {
  queries = {
- limit: 12,
- active: [true, false],
+ ...queries,
  chain: ['ahp', 'ahk'],
  }
 }

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
 

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'])