Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

🔧 .container.is-fluid to tailwind #11391

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

🔧 .container.is-fluid to tailwind #11391

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
6fdb672
🔧 .container.is-fluid to tailwind
roiLeo Feb 4, 2025
2ce2c22
Merge branch 'main' into chore/bulma/container.is-fluid
roiLeo Feb 11, 2025
f997f23
Merge branch 'main' into chore/bulma/container.is-fluid
hassnian Feb 15, 2025
10b4705
Merge branch 'main' into chore/bulma/container.is-fluid
roiLeo Feb 17, 2025
afb162e
🔧 reinvent the wheel
roiLeo Feb 17, 2025
abc79c9
Merge branch 'main' into chore/bulma/container.is-fluid
roiLeo Feb 18, 2025
b43a339
Merge branch 'main' into chore/bulma/container.is-fluid
preschian Feb 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 1 addition & 18 deletions assets/styles/global.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,23 +92,6 @@ body {
}
}

.container.is-fluid {
padding-left: $fluid-container-padding;
padding-right: $fluid-container-padding;
}

@include mobile {
.column-padding {
padding-left: 10px !important;
padding-right: 10px !important;
margin: 0 -12px !important;
}
.container.is-fluid {
padding-left: $fluid-container-padding-mobile;
padding-right: $fluid-container-padding-mobile;
}
}

/* move to global */
.is-ellipsis {
@apply overflow-hidden whitespace-nowrap text-ellipsis;
Expand Down Expand Up @@ -217,4 +200,4 @@ table th {
-1px 0px 0 rgb(var(--text-color)),
0px -1px 0 rgb(var(--text-color)),
4px 4px rgb(var(--text-color));
}
}
2 changes: 1 addition & 1 deletion components/ExploreLayoutWithSidebar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div
class="container is-fluid"
class="container-fluid"
:class="{ '!pl-0': isSidebarOpen }"
>
<slot />
Expand Down
6 changes: 3 additions & 3 deletions components/Navbar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,11 @@
}"
>
<div
class="container items-center max-lg:!px-0"
:class="{ 'is-fluid': !isTouch }"
class="grow relative mx-auto my-0 max-lg:!px-0 items-stretch flex min-h-[3.25rem] w-full"
:class="{ 'w-full max-w-none md:!px-10 !px-5': !isTouch }"
>
<!-- BRAND -->
<div class="navbar-brand">
<div class="navbar-brand ml-[-0.75rem]">
<nuxt-link
v-if="!isMobile || !openMobileSearchBar"
to="/"
Expand Down
2 changes: 1 addition & 1 deletion components/collection/CollectionHeader.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
:collection="collection"
/>
<section class="pt-5">
<div class="container is-fluid">
<div class="container-fluid">
<CollectionInfo
ref="collectionInfo"
:collection-id="collectionId"
Expand Down
2 changes: 1 addition & 1 deletion components/collection/CollectionHeader/CollectionBanner.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@

<section class="h-full py-8">
<div
class="container is-fluid collection-banner-content flex flex-col md:flex-row items-start md:items-end md:justify-between h-full"
class="container-fluid collection-banner-content flex flex-col md:flex-row items-start md:items-end md:justify-between h-full"
>
<div class="lg:flex-1">
<div class="flex flex-col items-start">
Expand Down
4 changes: 2 additions & 2 deletions components/landing/HeroBanner.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<section class="!pt-8 md:!pt-[3rem]">
<div class="container is-fluid flex max-md:flex-col max-md:gap-8 justify-center md:justify-between items-center">
<div class="container-fluid flex max-md:flex-col max-md:gap-8 justify-center md:justify-between items-center">
<h1
class="text-3xl md:text-[39px] md:leading-9 font-bold flex max-md:flex-col max-md:text-center md:gap-3 md:flex-wrap"
>
Expand All @@ -24,7 +24,7 @@

<div
:key="usePrefix().urlPrefix.value"
class="container is-fluid !mt-8 md:!mt-[3rem] mb-16"
class="container-fluid !mt-8 md:!mt-[3rem] mb-16"
>
<CarouselTypeDrops />
</div>
Expand Down
6 changes: 3 additions & 3 deletions components/landing/LandingPage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,20 +10,20 @@
v-if="showTopCollections"
class="py-8 instance"
>
<div class="container is-fluid">
<div class="container-fluid">
<LandingTopCollections class="my-5" />
</div>
</section>

<section class="py-8 instance">
<div class="container is-fluid">
<div class="container-fluid">
<!-- generative -->
<LazyCarouselTypeGenerative />
</div>
</section>

<section class="py-8 instance">
<div class="container is-fluid">
<div class="container-fluid">
<!-- latest sales -->
<LazyCarouselTypeLatestSales />

Expand Down
2 changes: 1 addition & 1 deletion components/swap/layout/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<section class="container is-fluid flex flex-col">
<section class="container-fluid flex flex-col">
<div class="flex my-14 flex-wrap gap-10 justify-between">
<slot name="title" />

Expand Down
2 changes: 1 addition & 1 deletion components/swap/review.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@
<hr class="m-0">

<div
class="container is-fluid flex flex-col gap-6 justify-between items-center !my-6 md:flex-row md:my-[3.5rem]"
class="container-fluid flex flex-col gap-6 justify-between items-center !my-6 md:flex-row md:my-[3.5rem]"
>
<div class="w-[300px]">
<TradeExpirationSelector
Expand Down
2 changes: 1 addition & 1 deletion layouts/default.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div class="min-h-full flex flex-col overflow-hidden">
<Navbar />
<main class="flex-grow py-8">
<div class="container is-fluid">
<div class="container-fluid">
<Error
v-if="$nuxt.isOffline"
:has-img="false"
Expand Down
2 changes: 1 addition & 1 deletion layouts/explore-layout.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<div v-else>
<CollectionHeader v-if="isCollection" />
<section class="py-7 px-0">
<div class="container is-fluid">
<div class="container-fluid">
<h1
v-if="isExplore"
class="title"
Expand Down
7 changes: 3 additions & 4 deletions layouts/gallery-item-layout.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
<Navbar />
<main class="flex-grow py-8">
<div
class="container"
:class="{ 'is-fluid': !isFullHD }"
class="grow relative mx-auto my-0 max-lg:!px-0 items-stretch flex min-h-[3.25rem] w-full"
:class="{ 'w-full max-w-none md:!px-10 !px-5': !isTouch }"
>
<Error
v-if="$nuxt.isOffline"
Expand Down Expand Up @@ -36,6 +36,5 @@ useHead({
],
})

const { width } = useWindowSize()
const isFullHD = computed(() => width.value >= 1440)
const { isMobileOrTablet: isTouch } = useDevice()
</script>
2 changes: 1 addition & 1 deletion layouts/no-footer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div class="min-h-full flex flex-col overflow-hidden">
<Navbar />
<main class="flex-grow py-8">
<div class="container is-fluid">
<div class="container-fluid">
<Error
v-if="$nuxt.isOffline"
:has-img="false"
Expand Down
2 changes: 1 addition & 1 deletion layouts/teleport-layout.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div class="min-h-full flex flex-col overflow-hidden">
<Navbar />
<main class="flex-grow">
<div class="container is-fluid">
<div class="container-fluid">
<Error
v-if="$nuxt.isOffline"
:has-img="false"
Expand Down
4 changes: 4 additions & 0 deletions libs/ui/src/scss/tailwind.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,4 +147,8 @@
0px -1px 0 rgb(var(--text-color)),
4px 4px rgb(var(--text-color));
}

.container-fluid {
@apply grow relative w-full max-w-none mx-auto my-0 md:px-10 px-5 #{!important};
}
}
2 changes: 1 addition & 1 deletion pages/[prefix]/explore/collectibles.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="container is-fluid">
<div class="container-fluid">
<CollectionGridWithBreadcrumbs />
</div>
</template>
Expand Down