Skip to content

Commit

Permalink
NNS1-3094: Remove extra padding from staking island (dfinity#5234)
Browse files Browse the repository at this point in the history
# Motivation

The staking table is currently narrower than the tokens table which is
not intended.
Both are inside an element with `width: var(--island-width)` but the
staking table uses this style on a `main` element which gets additional
padding from a global style.

While testing this, I also noticed that when the window gets narrow, the
tokens table gets double padding. Once from the padding on the `main`
element and once from the subtraction on the `--island-max-width` style
[which is set
to](https://github.com/dfinity/gix-components/blob/4b072e97fda2c0866bd6a355661cfda5fe44ac18/src/lib/styles/global/variables.scss#L45)
`calc(100% - 6 * var(--padding))`. This doesn't seem to be intended
either.

# Changes

1. Remove `max-width` style on the `MainWrapper` component.
2. Rename `MainWrapper` to `IslandWidthMain` and move it from
`components/tokens` to `components/layout`.
3. Reuse the `IslandWidthMain` in the `Staking` component to guarantee
consistency.

# Tests

Manually at
https://qsgjb-riaaa-aaaaa-aaaga-cai.dskloet-ingress.devenv.dfinity.network/

# Todos

- [ ] Add entry to changelog (if necessary).
not yet
  • Loading branch information
dskloetd authored Jul 23, 2024
1 parent 5915aad commit e250bec
Show file tree
Hide file tree
Showing 5 changed files with 24 additions and 28 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@
overflow-x: hidden;
@include media.min-width(large) {
width: var(--island-width);
max-width: var(--island-max-width);
}
}
}
Expand Down
33 changes: 15 additions & 18 deletions frontend/src/lib/routes/Staking.svelte
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<script lang="ts">
import SignInGuard from "$lib/components/common/SignInGuard.svelte";
import IslandWidthMain from "$lib/components/layout/IslandWidthMain.svelte";
import ProjectsTable from "$lib/components/staking/ProjectsTable.svelte";
import { OWN_CANISTER_ID_TEXT } from "$lib/constants/canister-ids.constants";
import { authSignedInStore } from "$lib/derived/auth.derived";
Expand Down Expand Up @@ -51,29 +52,25 @@
});
</script>

<main data-tid="staking-component">
{#if showStakingBanner}
<PageBanner testId="staking-page-banner">
<IconNeuronsPage slot="image" />
<svelte:fragment slot="title">{$i18n.staking.title}</svelte:fragment>
<p class="description" slot="description">{$i18n.staking.text}</p>
<SignInGuard slot="actions" />
</PageBanner>
{/if}
<IslandWidthMain testId="staking-component">
<div class="content">
{#if showStakingBanner}
<PageBanner testId="staking-page-banner">
<IconNeuronsPage slot="image" />
<svelte:fragment slot="title">{$i18n.staking.title}</svelte:fragment>
<p class="description" slot="description">{$i18n.staking.text}</p>
<SignInGuard slot="actions" />
</PageBanner>
{/if}

<ProjectsTable />
</main>
<ProjectsTable />
</div>
</IslandWidthMain>

<style lang="scss">
@use "@dfinity/gix-components/dist/styles/mixins/media";
main {
.content {
display: flex;
flex-direction: column;
gap: var(--padding-2x);
@include media.min-width(large) {
width: var(--island-width);
}
}
</style>
6 changes: 3 additions & 3 deletions frontend/src/routes/(app)/(home)/+layout.svelte
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
<script lang="ts">
import Content from "$lib/components/layout/Content.svelte";
import IslandWidthMain from "$lib/components/layout/IslandWidthMain.svelte";
import Layout from "$lib/components/layout/Layout.svelte";
import LayoutList from "$lib/components/layout/LayoutList.svelte";
import MainWrapper from "$lib/components/tokens/MainWrapper.svelte";
import { i18n } from "$lib/stores/i18n";
</script>

<LayoutList title={$i18n.navigation.tokens}>
<Layout>
<Content>
<MainWrapper>
<IslandWidthMain>
<slot />
</MainWrapper>
</IslandWidthMain>
</Content>
</Layout>
</LayoutList>
6 changes: 3 additions & 3 deletions frontend/src/routes/(app)/(nns)/tokens/+layout.svelte
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
<script lang="ts">
import Content from "$lib/components/layout/Content.svelte";
import IslandWidthMain from "$lib/components/layout/IslandWidthMain.svelte";
import Layout from "$lib/components/layout/Layout.svelte";
import LayoutList from "$lib/components/layout/LayoutList.svelte";
import MainWrapper from "$lib/components/tokens/MainWrapper.svelte";
import { i18n } from "$lib/stores/i18n";
</script>

<LayoutList title={$i18n.navigation.tokens}>
<Layout>
<Content>
<MainWrapper>
<IslandWidthMain>
<slot />
</MainWrapper>
</IslandWidthMain>
</Content>
</Layout>
</LayoutList>
6 changes: 3 additions & 3 deletions frontend/src/routes/(app)/(u)/(list)/accounts/+layout.svelte
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<script lang="ts">
import { goto } from "$app/navigation";
import Content from "$lib/components/layout/Content.svelte";
import IslandWidthMain from "$lib/components/layout/IslandWidthMain.svelte";
import Layout from "$lib/components/layout/Layout.svelte";
import LayoutList from "$lib/components/layout/LayoutList.svelte";
import MainWrapper from "$lib/components/tokens/MainWrapper.svelte";
import { AppPath } from "$lib/constants/routes.constants";
import { accountsTitleStore } from "$lib/derived/accounts-title.derived";
Expand All @@ -13,9 +13,9 @@
<LayoutList title={$accountsTitleStore}>
<Layout>
<Content {back}>
<MainWrapper>
<IslandWidthMain>
<slot />
</MainWrapper>
</IslandWidthMain>
</Content>
</Layout>
</LayoutList>

0 comments on commit e250bec

Please sign in to comment.