adapt to new frontend classes

datawrapper · Sep 6, 2021 · a69140f · a69140f
1 parent ddf332c
commit a69140f
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 19 deletions.
diff --git a/src/routes/edit.js b/src/routes/edit.js
@@ -38,6 +38,7 @@ module.exports = {
                     const data = await api(`/charts/${chart.id}/data`, { json: false });
 
                     return h.view('edit/Index.svelte', {
+                        htmlClass: 'has-background-white-ter',
                         props: {
                             rawChart: chart,
                             rawData: data,

diff --git a/src/views/edit/Index.svelte b/src/views/edit/Index.svelte
@@ -101,18 +101,20 @@
 />
 
 <MainLayout title="{$chart.title} - [{$chart.id}] - {activeStep.title}">
-    <!-- step nav -->
-    <Header
-        {steps}
-        {bcPath}
-        bind:activeStep
-        bind:lastActiveStep
-        on:navigate={evt => navigateTo(evt.detail)}
-    />
-    <!-- step content -->
-    <div class="block">
-        {#if activeStep}
-            <svelte:component this={activeStep.ui} {chart} {visualizations} {data} />
-        {/if}
-    </div>
+    <section class="section">
+        <!-- step nav -->
+        <Header
+            {steps}
+            {bcPath}
+            bind:activeStep
+            bind:lastActiveStep
+            on:navigate={evt => navigateTo(evt.detail)}
+        />
+        <!-- step content -->
+        <div class="block">
+            {#if activeStep}
+                <svelte:component this={activeStep.ui} {chart} {visualizations} {data} />
+            {/if}
+        </div>
+    </section>
 </MainLayout>
diff --git a/src/views/edit/nav/Step.svelte b/src/views/edit/nav/Step.svelte
@@ -28,26 +28,27 @@
     on:click|preventDefault={() => !active && dispatch('navigate', step)}
     bind:offsetHeight={height}
     bind:offsetWidth={width}
-    class="px-4 py-2 is-size-5"
+    class="px-4 py-3 is-size-5"
     class:active
     class:visited
     style="clip-path: path('{clipPath}');"
 >
-    <span class="step ml-1 mr-3">{step.index}</span>{@html step.title}
+    <span class="step ml-1 mr-3 is-size-2">{step.index}</span>{@html step.title}
     {#if !active && visited}
         <i class="fa fa-check" />
     {/if}
 </a>
 
 <style lang="less">
     a {
-        background: var(--color-dw-grey-light);
+        background: var(--color-dw-grey-lighter);
         border-radius: 4px;
         display: inline-block;
         width: 100%;
+        line-height: 2rem;
 
         &.active {
-            background: var(--color-dw-red);
+            background: var(--color-dw-firebrick);
             color: white;
             cursor: default;
 
@@ -60,7 +61,6 @@
         display: inline-block;
         font-weight: bold;
         color: white;
-        font-size: 2rem;
         vertical-align: -0.2rem;
         text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.1);
     }