style: dropdown changes

dfinity · Mar 27, 2024 · 772e1e4 · 772e1e4
1 parent 83427c8
commit 772e1e4
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 4 deletions.
diff --git a/frontend/src/lib/components/layout/UniverseSplitContent.svelte b/frontend/src/lib/components/layout/UniverseSplitContent.svelte
@@ -3,9 +3,10 @@
   import Title from "$lib/components/header/Title.svelte";
   import SelectUniverseNav from "$lib/components/universe/SelectUniverseNav.svelte";
   import HeaderToolbar from "$lib/components/header/HeaderToolbar.svelte";
+  import { ENABLE_VOTING_INDICATION } from "$lib/stores/feature-flags.store";
 </script>
 
-<SplitContent>
+<SplitContent perceivedOnMobile={!$ENABLE_VOTING_INDICATION}>
   <SelectUniverseNav slot="start" />
 
   <Title slot="title" />

diff --git a/frontend/src/lib/components/universe/SelectUniverseCard.svelte b/frontend/src/lib/components/universe/SelectUniverseCard.svelte
@@ -50,6 +50,9 @@
   $: actionableProposalSupported = $ENABLE_VOTING_INDICATION
     ? $actionableProposalSupportedStore[universe.canisterId]
     : undefined;
+
+  let compactView = false;
+  $: compactView = $ENABLE_VOTING_INDICATION;
 </script>
 
 <Card
@@ -60,8 +63,9 @@
   {icon}
   testId="select-universe-card"
   noPadding
+  noMarginBottom
 >
-  <div class="container" class:selected>
+  <div class="container" class:selected class:compactView>
     <UniverseLogo size="big" {universe} framed={true} />
 
     <div
@@ -97,6 +101,13 @@
     // Same as Card padding
     // We want to padding in the container to use the hover effect on ALL the card surface.
     padding: calc(var(--padding-2x) - var(--card-border-size));
+    &.compactView {
+      padding: calc(var(--padding) - var(--card-border-size));
+
+      @include media.min-width(large) {
+        padding: calc(var(--padding-2x) - var(--card-border-size));
+      }
+    }
 
     --value-color: var(--text-color);
 

diff --git a/frontend/src/lib/components/universe/SelectUniverseNav.svelte b/frontend/src/lib/components/universe/SelectUniverseNav.svelte
@@ -12,7 +12,9 @@
   let innerWidth = 0;
   let list = false;
 
-  $: list = innerWidth > BREAKPOINT_LARGE;
+  let largeScreen = false;
+  $: largeScreen = innerWidth > BREAKPOINT_LARGE;
+  $: list = largeScreen;
   $: if (
     $ENABLE_VOTING_INDICATION &&
     $actionableProposalIndicationEnabledStore
@@ -27,11 +29,14 @@
   ) {
     loadActionableSnsProposals();
   }
+
+  let hideTitle = false;
+  $: hideTitle = $ENABLE_VOTING_INDICATION && !largeScreen;
 </script>
 
 <svelte:window bind:innerWidth />
 
-<Nav>
+<Nav {hideTitle}>
   <p class="title" slot="title" data-tid="select-universe-nav-title">
     {$titleTokenSelectorStore}
   </p>