Skip to content

Commit

Permalink
chore: update navbar
Browse files Browse the repository at this point in the history
  • Loading branch information
@ivanzavisic
ivanzavisic committed Oct 8, 2024
1 parent 5d1eebc commit fca3503
Showing 1 changed file with 150 additions and 9 deletions.
159 changes: 150 additions & 9 deletions packages/demo/src/App.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,19 +38,44 @@
let stuff4 = false;
let stuff5 = false;
function navbar(id: string) {
stuff1 = false;
stuff2 = false;
stuff3 = false;
stuff4 = false;
stuff5 = false;
switch (id) {
case 'stuff1':
stuff1 = true;
break;
case 'stuff2':
stuff2 = true;
break;
case 'stuff3':
stuff3 = true;
break;
case 'stuff4':
stuff4 = true;
break;
case 'stuff5':
stuff5 = true;
break;
}
}
onMount(() => {
window.GaReportService = new MockService();
});
</script>

<div style="width: 100%; height: 120px; display: flex; flex-direction: column; gap: 0.3rem; border-bottom: 3px solid #E76538; position: fixed; overflow: hidden; top: 0; z-index: 1000; background-color: #ffefe7;">
<div style="display: flex;">
<div on:click={() => {stuff1 = true; stuff2 = false;}} role="button" style="width: 140px; height: 25px; border-radius: 10px; border: 2px solid #E76538; color: {stuff1 ? 'white' : '#E76538'}; display: flex; align-items: center; justify-content: center; background-color: {stuff1 ? '#E76538' : ''};">b2b v1.4</div>
<div on:click={() => {stuff1 = false; stuff2 = true;}} role="button" style="width: 140px; height: 25px; border-radius: 10px; border: 2px solid #E76538; color: {stuff2 ? 'white' : '#E76538'}; display: flex; align-items: center; justify-content: center; background-color: {stuff2 ? '#E76538' : ''};">b2b v2.0</div>
<div on:click={() => navbar('stuff1')} role="button" style="width: 140px; height: 25px; border-radius: 10px; border: 2px solid #E76538; color: {stuff1 ? 'white' : '#E76538'}; display: flex; align-items: center; justify-content: center; background-color: {stuff1 ? '#E76538' : ''};">b2b v1.4</div>
<div on:click={() => navbar('stuff2')} role="button" style="width: 140px; height: 25px; border-radius: 10px; border: 2px solid #E76538; color: {stuff2 ? 'white' : '#E76538'}; display: flex; align-items: center; justify-content: center; background-color: {stuff2 ? '#E76538' : ''};">b2b v2.0</div>
</div>
<div role="button" style="width: 140px; height: 25px; border-radius: 10px; border: 2px solid #E76538; color: {stuff3 ? 'white' : '#E76538'}; display: flex; align-items: center; justify-content: center; background-color: {stuff3 ? '#E76538' : ''};">b2b2c v1.2</div>
<div role="button" style="width: 140px; height: 25px; border-radius: 10px; border: 2px solid #E76538; color: {stuff4 ? 'white' : '#E76538'}; display: flex; align-items: center; justify-content: center; background-color: {stuff4 ? '#E76538' : ''};">b2c v1.2</div>
<div role="button" style="width: 140px; height: 25px; border-radius: 10px; border: 2px solid #E76538; color: {stuff5 ? 'white' : '#E76538'}; display: flex; align-items: center; justify-content: center; background-color: {stuff5 ? '#E76538' : ''};">SLE v1.0</div>
<div on:click={() => navbar('stuff3')} role="button" style="width: 140px; height: 25px; border-radius: 10px; border: 2px solid #E76538; color: {stuff3 ? 'white' : '#E76538'}; display: flex; align-items: center; justify-content: center; background-color: {stuff3 ? '#E76538' : ''};">b2b2c v1.2</div>
<div on:click={() => navbar('stuff4')} role="button" style="width: 140px; height: 25px; border-radius: 10px; border: 2px solid #E76538; color: {stuff4 ? 'white' : '#E76538'}; display: flex; align-items: center; justify-content: center; background-color: {stuff4 ? '#E76538' : ''};">b2c v1.2</div>
<div on:click={() => navbar('stuff5')} role="button" style="width: 140px; height: 25px; border-radius: 10px; border: 2px solid #E76538; color: {stuff5 ? 'white' : '#E76538'}; display: flex; align-items: center; justify-content: center; background-color: {stuff5 ? '#E76538' : ''};">SLE v1.0</div>
</div>

{#if stuff1}
Expand Down Expand Up @@ -397,11 +422,11 @@
</div>
</div>
<div class="flex flex-col items-center" style="padding: 2rem 0 2rem 0; width: 80%; border-bottom: 2px dashed black;">
<b>1. main-result.wc.svelte</b>
<b>1. main-result.wc.svelte (also used in b2b2c(v1.2) , b2c(v1.2))</b>
<div style="border: 1px dashed lightcoral; width: 550px; height: 30rem;">
<ga-main-result lang="english"></ga-main-result>
</div>
</div>
</div>
<div style="border-bottom: 2px dashed black; display: flex; flex-direction: column; align-items: center; width: 80%; padding: 2rem 0 2rem 0;">
<b>2. overlap-title.wc.svelte</b>
<div style="width: 71.3ch;height: 11ch; border: 1px dashed lightcoral;">
Expand All @@ -417,7 +442,7 @@
</div>
</div>
<div class="flex flex-col items-center" style="padding: 2rem 0 2rem 0; width: 80%; border-bottom: 2px dashed black;">
<b>3. results-overview.wc.svelte</b>
<b>3. results-overview.wc.svelte (also used in b2b2c(v1.2) , b2c(v1.2))</b>
<div style="display: flex; flex-direction: column; height: 588px; width: 550px; border: 1px dashed lightcoral;">
<div style="width: 100%; height: 98px;">
<ga-results-overview type="age" lang="english"></ga-results-overview>
Expand Down Expand Up @@ -446,7 +471,7 @@
</div>
</div>
<div class="flex flex-col items-center" style="padding: 2rem 0 2rem 0; width: 80%; border-bottom: 2px dashed black;">
<b>5. single-overview.wc.svelte</b>
<b>5. single-overview.wc.svelte (also used in b2b2c(v1.2) , b2c(v1.2))</b>
<div style="width: 550px; height: 200px; border: 1px dashed lightcoral;">
<ga-single-overview type="shield" lang="english"></ga-single-overview>
</div>
Expand Down Expand Up @@ -493,4 +518,120 @@
</div>
{/if}

{#if stuff3}
<div style="width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 120px;">
<div class="flex flex-col items-center" style="padding: 2rem 0 2rem 0; width: 80%; border-bottom: 2px dashed black;">
<b>1. main-result.wc.svelte (also used in b2b(v2.0) , b2c(v1.2))</b>
<div style="border: 1px dashed lightcoral; width: 550px; height: 30rem;">
<ga-main-result lang="english"></ga-main-result>
</div>
</div>

<div class="flex flex-col items-center" style="padding: 2rem 0 2rem 0; width: 80%; border-bottom: 2px dashed black;">
<b>2. results-overview.wc.svelte (also used in b2b(v2.0) , b2c(v1.2))</b>
<div style="display: flex; flex-direction: column; height: 588px; width: 550px; border: 1px dashed lightcoral;">
<div style="width: 100%; height: 98px;">
<ga-results-overview type="age" lang="english"></ga-results-overview>
</div>
<div style="width: 100%; height: 98px; border-top: 2px solid #09341F33;">
<ga-results-overview type="shield" lang="english"></ga-results-overview>
</div>
<div style="width: 100%; height: 98px; border-top: 2px solid #09341F33;">
<ga-results-overview type="youth" lang="english"></ga-results-overview>
</div>
<div style="width: 100%; height: 98px; border-top: 2px solid #09341F33;">
<ga-results-overview type="mature" lang="english"></ga-results-overview>
</div>
<div style="width: 100%; height: 98px; border-top: 2px solid #09341F33;">
<ga-results-overview type="median" lang="english"></ga-results-overview>
</div>
<div style="width: 100%; height: 98px; border-top: 2px solid #09341F33;">
<ga-results-overview type="lifestyle" lang="english"></ga-results-overview>
</div>
</div>
</div>

<div class="flex flex-col items-center" style="padding: 2rem 0 2rem 0; width: 80%; border-bottom: 2px dashed black;">
<b>3. single-overview.wc.svelte (also used in b2b(v2.0) , b2c(v1.2))</b>
<div style="width: 550px; height: 200px; border: 1px dashed lightcoral;">
<ga-single-overview type="shield" lang="english"></ga-single-overview>
</div>
<div style="margin: 5px;"></div>
<div style="width: 550px; height: 200px; border: 1px dashed lightcoral;">
<ga-single-overview type="youth" lang="english"></ga-single-overview>
</div>
<div style="margin: 5px;"></div>
<div style="width: 550px; height: 200px; border: 1px dashed lightcoral;">
<ga-single-overview type="mature" lang="english"></ga-single-overview>
</div>
<div style="margin: 5px;"></div>
<div style="width: 550px; height: 200px; border: 1px dashed lightcoral;">
<ga-single-overview type="median" lang="english"></ga-single-overview>
</div>
<div style="margin: 5px;"></div>
<div style="width: 550px; height: 200px; border: 1px dashed lightcoral;">
<ga-single-overview type="lifestyle" lang="english"></ga-single-overview>
</div>
</div>
</div>
{/if}

{#if stuff4}
<div style="width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 120px;">
<div class="flex flex-col items-center" style="padding: 2rem 0 2rem 0; width: 80%; border-bottom: 2px dashed black;">
<b>1. main-result.wc.svelte (also used in b2b(v2.0) , b2b2c(v1.2))</b>
<div style="border: 1px dashed lightcoral; width: 550px; height: 30rem;">
<ga-main-result lang="english"></ga-main-result>
</div>
</div>

<div class="flex flex-col items-center" style="padding: 2rem 0 2rem 0; width: 80%; border-bottom: 2px dashed black;">
<b>2. results-overview.wc.svelte (also used in b2b(v2.0) , b2b2c(v1.2))</b>
<div style="display: flex; flex-direction: column; height: 588px; width: 550px; border: 1px dashed lightcoral;">
<div style="width: 100%; height: 98px;">
<ga-results-overview type="age" lang="english"></ga-results-overview>
</div>
<div style="width: 100%; height: 98px; border-top: 2px solid #09341F33;">
<ga-results-overview type="shield" lang="english"></ga-results-overview>
</div>
<div style="width: 100%; height: 98px; border-top: 2px solid #09341F33;">
<ga-results-overview type="youth" lang="english"></ga-results-overview>
</div>
<div style="width: 100%; height: 98px; border-top: 2px solid #09341F33;">
<ga-results-overview type="mature" lang="english"></ga-results-overview>
</div>
<div style="width: 100%; height: 98px; border-top: 2px solid #09341F33;">
<ga-results-overview type="median" lang="english"></ga-results-overview>
</div>
<div style="width: 100%; height: 98px; border-top: 2px solid #09341F33;">
<ga-results-overview type="lifestyle" lang="english"></ga-results-overview>
</div>
</div>
</div>

<div class="flex flex-col items-center" style="padding: 2rem 0 2rem 0; width: 80%; border-bottom: 2px dashed black;">
<b>3. single-overview.wc.svelte (also used in b2b(v2.0) , b2b2c(v1.2))</b>
<div style="width: 550px; height: 200px; border: 1px dashed lightcoral;">
<ga-single-overview type="shield" lang="english"></ga-single-overview>
</div>
<div style="margin: 5px;"></div>
<div style="width: 550px; height: 200px; border: 1px dashed lightcoral;">
<ga-single-overview type="youth" lang="english"></ga-single-overview>
</div>
<div style="margin: 5px;"></div>
<div style="width: 550px; height: 200px; border: 1px dashed lightcoral;">
<ga-single-overview type="mature" lang="english"></ga-single-overview>
</div>
<div style="margin: 5px;"></div>
<div style="width: 550px; height: 200px; border: 1px dashed lightcoral;">
<ga-single-overview type="median" lang="english"></ga-single-overview>
</div>
<div style="margin: 5px;"></div>
<div style="width: 550px; height: 200px; border: 1px dashed lightcoral;">
<ga-single-overview type="lifestyle" lang="english"></ga-single-overview>
</div>
</div>
</div>
{/if}


0 comments on commit fca3503

Please sign in to comment.