Merge pull request #11274 from roiLeo/chore/bulma/square

🔧 is-square & is-invisible bulma to tailwind
kodadot · Dec 26, 2024 · 5d0b380 · 5d0b380
2 parents 2597537 + 65142ea
commit 5d0b380
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 18 deletions.
diff --git a/components/search/SearchBar.vue b/components/search/SearchBar.vue
@@ -60,16 +60,8 @@
     <img
       v-if="!isTouchDevice"
       class="search-bar-keyboard-icon"
-      :class="{ 'is-invisible': name || inputFocused }"
-      src="~/assets/svg/search-k-keyboard.svg"
-      alt="press k to focus search input"
-    >
-    <img
-      v-if="!isTouchDevice"
-      class="search-bar-keyboard-icon"
-      :class="{ 'is-invisible': !name && !inputFocused }"
-      src="~/assets/svg/k-search-enter.svg"
-      alt="press enter to start search"
+      :src="desktopKeyboardIcon.src"
+      :alt="desktopKeyboardIcon.alt"
     >
   </div>
 </template>
@@ -80,6 +72,8 @@ import type { PropType } from 'vue'
 import type { SearchQuery } from './types'
 import { useCollectionSearch } from '@/components/search/utils/useCollectionSearch'
 import SearchSuggestion from '@/components/search/SearchSuggestion.vue'
+import SearchKKeyboard from '@/assets/svg/search-k-keyboard.svg'
+import SearchKEnter from '@/assets/svg/k-search-enter.svg'
 
 const isTouchDevice = 'ontouchstart' in document.documentElement
 
@@ -116,6 +110,7 @@ const placeholderContent = computed(() =>
 )
 
 const showDefaultSuggestions = computed(() => isAssetHub.value)
+const desktopKeyboardIcon = computed(() => name.value || inputFocused.value ? { src: SearchKEnter, alt: 'press enter to start search' } : { src: SearchKKeyboard, alt: 'press k to focus search input' })
 
 function exitCollectionSearch() {
   if (isCollectionSearchMode.value && !name.value) {

diff --git a/components/shared/modals/ModalWrapper.vue b/components/shared/modals/ModalWrapper.vue
@@ -9,8 +9,8 @@
         :expanded="expanded"
         :class="{
           'modal-wrapper-button__right': isRight,
-          'is-invisible': isButtonHidden,
-          'is-squared': isSquared,
+          'invisible': isButtonHidden,
+          'size-9': isSquared,
         }"
         :variant="variant"
         no-shadow
@@ -77,8 +77,4 @@ const variant = computed(() => (isSquared.value ? 'border-icon' : undefined))
 .modal-wrapper-button__right {
   float: right;
 }
-.is-squared {
-  width: 36px;
-  height: 36px;
-}
 </style>
diff --git a/components/shared/nftCard/NftCard.vue b/components/shared/nftCard/NftCard.vue
@@ -65,7 +65,7 @@
 
     <template v-else>
       <div class="media-object nft-media">
-        <div class="is-square image">
+        <div class="pt-[100%] image">
           <NeoSkeleton
             :rounded="false"
             full-size

diff --git a/components/shared/nftCard/NftCardSkeleton.vue b/components/shared/nftCard/NftCardSkeleton.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="nft-card">
     <div class="media-object nft-media">
-      <div class="is-square image">
+      <div class="pt-[100%] image">
         <NeoSkeleton
           :rounded="false"
           full-size