Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

style: replace .container.is-fluid (again) #9535

Closed
wants to merge 4 commits into from
Closed

style: replace .container.is-fluid (again) #9535

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
08df3b0
chore: remove bulma variable
pbkompasz Feb 23, 2024
ee954bc
style: refactor .container.is-fluid
pbkompasz Feb 23, 2024
710617f
style: container center default
pbkompasz Feb 23, 2024
505da9e
style: dynamic container
pbkompasz Feb 23, 2024
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
9 changes: 0 additions & 9 deletions assets/styles/global.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,21 +103,12 @@ 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 */
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 @@ -6,10 +6,10 @@
:class="{
'is-active': isMobileNavbarOpen,
}">
<div class="container items-center" :class="{ 'is-fluid': !isTouch }">
<div class="w-full block lg:flex items-center px-0">
<!-- BRAND -->
<div class="navbar-brand">
<nuxt-link to="/" class="navbar-item logo nuxt-link-active">
<nuxt-link to="/" class="navbar-item logo nuxt-link-active px-0">
<img
:src="logoSrc"
alt="First NFT market explorer on Kusama and Polkadot" />
Expand Down Expand Up @@ -38,7 +38,7 @@
<!-- BURGER MENU -->
<a
role="button"
class="navbar-burger"
class="navbar-burger px-0"
:class="{ 'is-active': isMobileNavbarOpen }"
aria-label="menu"
aria-expanded="false"
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 @@ -5,7 +5,7 @@
<div class="collection-banner-shadow"></div>

<section class="h-full py-8">
<div class="container is-fluid collection-banner-content">
<div class="w-full px-[1.25rem] md:px-[2.5rem] collection-banner-content">
<div class="lg:flex-1">
<div class="flex flex-col items-start">
<div class="collection-banner-avatar">
Expand Down
2 changes: 1 addition & 1 deletion components/collection/drop/DropContainer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
@model-value="isLoading = false" />
<CountdownTimer />
<hr class="text-color my-0" />
<div class="container is-fluid">
<div class="w-full px-[1.25rem] md:px-[2.5rem]">
<div class="columns is-desktop">
<div class="column is-half-desktop mobile-padding">
<UnlockableCollectionInfo
Expand Down
2 changes: 1 addition & 1 deletion components/collection/unlockable/UnlockableContainer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
@model-value="isLoading = false" />
<CountdownTimer />
<hr class="text-color my-0" />
<div class="container is-fluid">
<div class="w-full px-[1.25rem] md:px-[2.5rem]">
<div class="columns is-desktop">
<div class="column is-half-desktop mobile-padding">
<UnlockableCollectionInfo
Expand Down
2 changes: 1 addition & 1 deletion components/collection/unlockable/UnlockableLandingMobileBanner.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 flex border-t justify-between items-center py-3 mt-7">
class="w-full px-5 md:px-10 flex border-t justify-between items-center py-3 mt-7">
<div class="flex items-center">
<img
width="42"
Expand Down
2 changes: 1 addition & 1 deletion components/collection/voteDrop/DropContainer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
@model-value="isLoading = false" />
<CountdownTimer />
<hr class="text-color my-0" />
<div class="container is-fluid pb-4">
<div class="w-full px-[1.25rem] md:px-[2.5rem] pb-4">
<div class="columns is-desktop">
<div class="column is-half-desktop mobile-padding">
<UnlockableCollectionInfo
Expand Down
2 changes: 1 addition & 1 deletion components/landing/HeroBanner.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
</div>
</div>

<div class="container is-fluid mt-6 md:mt-8 mb-16">
<div class="w-full px-[1.25rem] md:px-[2.5rem] mt-6 md:mt-8 mb-16">
<CarouselTypeDrops />
</div>
</section>
Expand Down
10 changes: 5 additions & 5 deletions components/landing/LandingPage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,13 @@
<template v-if="showCarousel">
<!-- top collections -->
<section v-if="showTopCollections" class="py-8 instance">
<div class="container is-fluid">
<div class="w-full px-[1.25rem] md:px-[2.5rem]">
<LandingTopCollections class="my-5" />
</div>
</section>

<section class="py-8 instance">
<div class="container is-fluid">
<div class="w-full px-[1.25rem] md:px-[2.5rem]">
<!-- generative -->
<LazyCarouselTypeGenerative />
</div>
Expand All @@ -22,14 +22,14 @@
<!-- email signup banner -->
<transition name="slide">
<section v-if="showSignupBanner" class="py-5 instance">
<div class="container is-fluid">
<div class="w-full px-[1.25rem] md:px-[2.5rem]">
<LandingSignupBanner class="my-4" />
</div>
</section>
</transition>

<section class="py-8 instance">
<div class="container is-fluid">
<div class="w-full px-[1.25rem] md:px-[2.5rem]">
<!-- latest sales -->
<LazyCarouselTypeLatestSales />

Expand All @@ -40,7 +40,7 @@
</template>

<section class="py-8 instance instance-accent">
<div class="container is-fluid footer-landing-container">
<div class="w-full px-[1.25rem] md:px-[2.5rem]">
<LazyLandingFeaturedArticles />
</div>
</section>
Expand Down
4 changes: 2 additions & 2 deletions components/profile/ProfileDetail.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
</div>
</div>
</NeoModal>
<div class="container is-fluid py-7 border-b">
<div class="w-full px-5 md:px-10 py-7 border-b">
<div class="columns is-centered">
<div class="column is-half text-center">
<div class="container image is-64x64 mb-2">
Expand Down Expand Up @@ -133,7 +133,7 @@
</div>
</div>

<div class="container is-fluid pb-6">
<div class="w-full px-5 md:px-10 pb-6">
<div
v-if="[ProfileTab.OWNED, ProfileTab.CREATED].includes(activeTab)"
class="flex-grow">
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 is-clipped">
<Navbar />
<main class="flex-grow py-8">
<div class="container is-fluid">
<div class="w-full px-[1.25rem] md:px-[2.5rem]">
<Error
v-if="$nuxt.isOffline"
:has-img="false"
Expand Down
4 changes: 2 additions & 2 deletions layouts/explore-layout.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,14 @@
<div v-if="isCollection">
<CollectionBanner />
<section class="pt-5">
<div class="container is-fluid">
<div class="w-full px-5 md:px-10">
<CollectionInfo />
<hr class="!bg-k-grey mb-0" />
</div>
</section>
</div>
<section class="py-7 px-0">
<div class="container is-fluid">
<div class="w-full px-5 md:px-10">
<h1 v-if="isExplore" class="title">{{ getExploreTitle }}</h1>
<ExploreTabsFilterSort />
</div>
Expand Down
5 changes: 1 addition & 4 deletions layouts/gallery-item-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 is-clipped">
<Navbar />
<main class="flex-grow py-8">
<div class="container" :class="{ 'is-fluid': !isFullHD }">
<div class="container px-[1.25rem] md:px-[2.5rem] lg:full-width lg:px-0">
<Error
v-if="$nuxt.isOffline"
:has-img="false"
Expand Down Expand Up @@ -30,7 +30,4 @@ useHead({
},
],
})

const { width } = useWindowSize()
const isFullHD = computed(() => width.value >= 1440)
</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 is-clipped">
<Navbar />
<main class="flex-grow py-8">
<div class="container is-fluid">
<div class="w-full px-[1.25rem] md:px-[2.5rem]">
<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 is-clipped">
<Navbar />
<main class="flex-grow">
<div class="container is-fluid">
<div class="w-full px-5 md:px-10">
<Error
v-if="$nuxt.isOffline"
:has-img="false"
Expand Down
3 changes: 3 additions & 0 deletions libs/ui/tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,9 @@ module.exports = {
fontSize: {
'3xl': '2rem',
},
container: {
center: true,
},
},
},
plugins: [],
Expand Down
2 changes: 1 addition & 1 deletion pages/[prefix]/collection/[id]/activity.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="w-full px-[1.25rem] md:px-[2.5rem]"
:class="{ 'sidebar-padding-left': isSidebarOpen }">
<CollectionActivity />
</div>
Expand Down
2 changes: 1 addition & 1 deletion pages/[prefix]/collection/[id]/index.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="w-full px-[1.25rem] md:px-[2.5rem]"
:class="{ 'sidebar-padding-left': isSidebarOpen }">
<Items :key="collectionid" />
</div>
Expand Down
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="w-full px-[1.25rem] md:px-[2.5rem]">
<CollectionGridWithBreadcrumbs />
</div>
</template>
Expand Down
2 changes: 1 addition & 1 deletion pages/[prefix]/explore/items.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="w-full px-[1.25rem] md:px-[2.5rem]"
:class="{ 'sidebar-padding-left': isSidebarOpen }">
<Items />
</div>
Expand Down
Loading