From f2058ff43402ecc1fcc4ccb3a828bfa0597c800e Mon Sep 17 00:00:00 2001
From: Carlos Lopez Soto <carlitoslopezs@hotmail.com>
Date: Tue, 29 Sep 2020 20:42:01 -0300
Subject: [PATCH] =?UTF-8?q?Modify=20the=20welcome=20page=20in=20samples=20?=
 =?UTF-8?q?with=20chart=C2=B4s=20buttons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Pages/WelcomePage.razor                   | 59 +++++++++++++++-
 .../Shared/NavMenu.razor                      | 67 +------------------
 .../Pages/WelcomePage.razor                   | 61 ++++++++++++++++-
 .../Shared/NavMenu.razor                      | 67 +------------------
 .../Components/Welcome.razor                  | 14 ++--
 5 files changed, 127 insertions(+), 141 deletions(-)

diff --git a/samples/ClientSide/ChartJs.Blazor.Sample.ClientSide/Pages/WelcomePage.razor b/samples/ClientSide/ChartJs.Blazor.Sample.ClientSide/Pages/WelcomePage.razor
index 6680c18e..46cb4fd6 100644
--- a/samples/ClientSide/ChartJs.Blazor.Sample.ClientSide/Pages/WelcomePage.razor
+++ b/samples/ClientSide/ChartJs.Blazor.Sample.ClientSide/Pages/WelcomePage.razor
@@ -1,3 +1,60 @@
 @page "/welcome"
 
-<Welcome />
\ No newline at end of file
+<style>
+    .bg-1 {
+        color: #4465A1; /* Green */
+        /*color: #ffffff;*/
+    }
+</style>
+    <div class="container-fluid bg-1 text-center">
+        <h1>
+            Welcome to the ChartJs.Blazor Samples.
+        </h1>
+    </div>
+    <div class="row align-items-center">
+        <div class="col-12">
+            <h2 class="text-center">Charts</h2>
+        </div>
+        <div class="col-12 col-sm-6  col-xl-3 justify-content-center">
+            <a class="btn btn-block btn-primary " href="SimpleBarChart"><span class="oi oi-bar-chart" aria-hidden="true"></span> Simple BarChart</a>
+        </div>
+        <div class="col-12 col-sm-6  col-xl-3 mt-2">
+            <a class="btn btn-block btn-primary" href="HorizontalBarChart"><span class="oi oi-bar-chart" aria-hidden="true"></span> Horizontal BarChart</a>
+        </div>
+        <div class="col-12 col-sm-6  col-xl-3 mt-2">
+            <a class="btn btn-block btn-primary" href="StackedBarChart"><span class="oi oi-bar-chart" aria-hidden="true"></span> Stacked BarChart</a>
+        </div>
+        <div class="col-12 col-sm-6  col-xl-3 mt-2">
+            <a class="btn btn-block btn-primary" href="TimeBarChart"><span class="oi oi-bar-chart" aria-hidden="true"></span> Time BarChart</a>
+        </div>
+        <div class="col-12 col-sm-6  col-xl-3 mt-2">
+            <a class="btn btn-block btn-primary" href="LinearLineChart"><span class="oi oi-graph" aria-hidden="true"></span> Linear LineChart</a>
+        </div>
+        <div class="col-12 col-sm-6  col-xl-3 mt-2">
+            <a class="btn btn-block btn-primary" href="LogarithmicLineChart"><span class="oi oi-bar-chart" aria-hidden="true"></span> Logarithmic LineChart</a>
+        </div>
+        <div class="col-12 col-sm-6  col-xl-3 mt-2">
+            <a class="btn btn-block btn-primary" href="TimeLineChart"><span class="oi oi-graph" aria-hidden="true"></span> Time LineChart</a>
+        </div>
+        <div class="col-12 col-sm-6  col-xl-3 mt-2">
+            <a class="btn btn-block btn-primary" href="DoughnutChart"><span class="oi oi-graph" aria-hidden="true"></span> DoughnutChart</a>
+        </div>
+        <div class="col-12 col-sm-6  col-xl-3 mt-2">
+            <a class="btn btn-block btn-primary" href="PieChart"><span class="oi oi-pie-chart" aria-hidden="true"></span> PieChart</a>
+        </div>
+        <div class="col-12 col-sm-6  col-xl-3 mt-2">
+            <a class="btn btn-block btn-primary" href="PolarAreaChart"><span class="oi oi-graph" aria-hidden="true"></span> PolarAreaChart</a>
+        </div>
+        <div class="col-12 col-sm-6  col-xl-3 mt-2">
+            <a class="btn btn-block btn-primary" href="BubbleChart"><span class="oi oi-graph" aria-hidden="true"></span> Bubble Chart</a>
+        </div>
+        <div class="col-12 col-sm-6  col-xl-3 mt-2">
+            <a class="btn btn-block btn-primary" href="ScatterChart"><span class="oi oi-graph" aria-hidden="true"></span> Scatter Chart</a>
+        </div>
+        <div class="col-12 col-sm-6  col-xl-3 mt-2">
+            <a class="btn btn-block btn-primary" href="RadarChart"><span class="oi oi-graph" aria-hidden="true"></span> Radar Chart</a>
+        </div>
+    </div>
+
+
+    <Welcome />
diff --git a/samples/ClientSide/ChartJs.Blazor.Sample.ClientSide/Shared/NavMenu.razor b/samples/ClientSide/ChartJs.Blazor.Sample.ClientSide/Shared/NavMenu.razor
index 24085b74..dd1e3fd0 100644
--- a/samples/ClientSide/ChartJs.Blazor.Sample.ClientSide/Shared/NavMenu.razor
+++ b/samples/ClientSide/ChartJs.Blazor.Sample.ClientSide/Shared/NavMenu.razor
@@ -12,71 +12,6 @@
                 <span class="oi oi-home" aria-hidden="true"></span>Welcome
             </NavLink>
         </li>
-        <li class="nav-item px-3">
-            <NavLink class="nav-link" href="SimpleBarChart">
-                <span class="oi oi-bar-chart" aria-hidden="true"></span>Simple BarChart
-            </NavLink>
-        </li>
-        <li class="nav-item px-3">
-            <NavLink class="nav-link" href="HorizontalBarChart">
-                <span class="oi oi-bar-chart" aria-hidden="true"></span>Horizontal BarChart
-            </NavLink>
-        </li>
-        <li class="nav-item px-3">
-            <NavLink class="nav-link" href="StackedBarChart">
-                <span class="oi oi-bar-chart" aria-hidden="true"></span>Stacked BarChart
-            </NavLink>
-        </li>
-        <li class="nav-item px-3">
-            <NavLink class="nav-link" href="TimeBarChart">
-                <span class="oi oi-bar-chart" aria-hidden="true"></span>Time BarChart
-            </NavLink>
-        </li>
-        <li class="nav-item px-3">
-            <NavLink class="nav-link" href="LinearLineChart">
-                <span class="oi oi-graph" aria-hidden="true"></span>Linear LineChart
-            </NavLink>
-        </li>
-        <li class="nav-item px-3">
-            <NavLink class="nav-link" href="LogarithmicLineChart">
-                <span class="oi oi-graph" aria-hidden="true"></span>Logarithmic LineChart
-            </NavLink>
-        </li>
-        <li class="nav-item px-3">
-            <NavLink class="nav-link" href="TimeLineChart">
-                <span class="oi oi-graph" aria-hidden="true"></span>Time LineChart
-            </NavLink>
-        </li>
-        <li class="nav-item px-3">
-            <NavLink class="nav-link" href="DoughnutChart">
-                <span class="oi oi-graph" aria-hidden="true"></span>DoughChart
-            </NavLink>
-        </li>
-        <li class="nav-item px-3">
-            <NavLink class="nav-link" href="PieChart">
-                <span class="oi oi-pie-chart" aria-hidden="true"></span>PieChart
-            </NavLink>
-        </li>
-        <li class="nav-item px-3">
-            <NavLink class="nav-link" href="PolarAreaChart">
-                <span class="oi oi-graph" aria-hidden="true"></span>PolarAreaChart
-            </NavLink>
-        </li>
-        <li class="nav-item px-3">
-            <NavLink class="nav-link" href="BubbleChart">
-                <span class="oi oi-graph" aria-hidden="true"></span>Bubble Chart
-            </NavLink>
-        </li>
-        <li class="nav-item px-3">
-            <NavLink class="nav-link" href="ScatterChart">
-                <span class="oi oi-graph" aria-hidden="true"></span>Scatter Chart
-            </NavLink>
-        </li>
-        <li class="nav-item px-3">
-            <NavLink class="nav-link" href="RadarChart">
-                <span class="oi oi-graph" aria-hidden="true"></span>Radar Chart
-            </NavLink>
-        </li>
         <li class="nav-item px-3">
             <NavLink class="nav-link" href="OnClickHandler">
                 <span class="oi oi-info" aria-hidden="true"></span>Click and Hover handler
@@ -110,4 +45,4 @@
         collapseNavMenu = !collapseNavMenu;
     }
 
-}
\ No newline at end of file
+}
diff --git a/samples/ServerSide/ChartJs.Blazor.Sample.ServerSide/Pages/WelcomePage.razor b/samples/ServerSide/ChartJs.Blazor.Sample.ServerSide/Pages/WelcomePage.razor
index 6680c18e..d9d3ffbf 100644
--- a/samples/ServerSide/ChartJs.Blazor.Sample.ServerSide/Pages/WelcomePage.razor
+++ b/samples/ServerSide/ChartJs.Blazor.Sample.ServerSide/Pages/WelcomePage.razor
@@ -1,3 +1,62 @@
 @page "/welcome"
 
-<Welcome />
\ No newline at end of file
+    <style>
+        .bg-1 {
+            color: #4465A1; /* Green */
+            /*color: #ffffff;*/
+        }
+    </style>
+
+    <div class="container-fluid bg-1 text-center">
+        <h1>
+            Welcome to the ChartJs.Blazor Samples.
+        </h1>
+    </div>
+    <div class="row align-items-center">
+        <div class="col-12">
+            <h2 class="text-center">Charts</h2>
+        </div>
+        <div class="col-12 col-sm-6  col-xl-3 justify-content-center">
+            <a class="btn btn-block btn-primary " href="SimpleBarChart"><span class="oi oi-bar-chart" aria-hidden="true"></span> Simple BarChart</a>
+        </div>
+        <div class="col-12 col-sm-6  col-xl-3 mt-2">
+            <a class="btn btn-block btn-primary" href="HorizontalBarChart"><span class="oi oi-bar-chart" aria-hidden="true"></span> Horizontal BarChart</a>
+        </div>
+        <div class="col-12 col-sm-6  col-xl-3 mt-2">
+            <a class="btn btn-block btn-primary" href="StackedBarChart"><span class="oi oi-bar-chart" aria-hidden="true"></span> Stacked BarChart</a>
+        </div>
+        <div class="col-12 col-sm-6  col-xl-3 mt-2">
+            <a class="btn btn-block btn-primary" href="TimeBarChart"><span class="oi oi-bar-chart" aria-hidden="true"></span> Time BarChart</a>
+        </div>
+        <div class="col-12 col-sm-6  col-xl-3 mt-2">
+            <a class="btn btn-block btn-primary" href="LinearLineChart"><span class="oi oi-graph" aria-hidden="true"></span> Linear LineChart</a>
+        </div>
+        <div class="col-12 col-sm-6  col-xl-3 mt-2">
+            <a class="btn btn-block btn-primary" href="LogarithmicLineChart"><span class="oi oi-bar-chart" aria-hidden="true"></span> Logarithmic LineChart</a>
+        </div>
+        <div class="col-12 col-sm-6  col-xl-3 mt-2">
+            <a class="btn btn-block btn-primary" href="TimeLineChart"><span class="oi oi-graph" aria-hidden="true"></span> Time LineChart</a>
+        </div>
+        <div class="col-12 col-sm-6  col-xl-3 mt-2">
+            <a class="btn btn-block btn-primary" href="DoughnutChart"><span class="oi oi-graph" aria-hidden="true"></span> DoughnutChart</a>
+        </div>
+        <div class="col-12 col-sm-6  col-xl-3 mt-2">
+            <a class="btn btn-block btn-primary" href="PieChart"><span class="oi oi-pie-chart" aria-hidden="true"></span> PieChart</a>
+        </div>
+        <div class="col-12 col-sm-6  col-xl-3 mt-2">
+            <a class="btn btn-block btn-primary" href="PolarAreaChart"><span class="oi oi-graph" aria-hidden="true"></span> PolarAreaChart</a>
+        </div>
+        <div class="col-12 col-sm-6  col-xl-3 mt-2">
+            <a class="btn btn-block btn-primary" href="BubbleChart"><span class="oi oi-graph" aria-hidden="true"></span> Bubble Chart</a>
+        </div>
+        <div class="col-12 col-sm-6  col-xl-3 mt-2">
+            <a class="btn btn-block btn-primary" href="ScatterChart"><span class="oi oi-graph" aria-hidden="true"></span> Scatter Chart</a>
+        </div>
+        <div class="col-12 col-sm-6  col-xl-3 mt-2">
+            <a class="btn btn-block btn-primary" href="RadarChart"><span class="oi oi-graph" aria-hidden="true"></span> Radar Chart</a>
+        </div>
+    </div>
+
+    <Welcome />
+
+
diff --git a/samples/ServerSide/ChartJs.Blazor.Sample.ServerSide/Shared/NavMenu.razor b/samples/ServerSide/ChartJs.Blazor.Sample.ServerSide/Shared/NavMenu.razor
index a8515c02..78b2acd5 100644
--- a/samples/ServerSide/ChartJs.Blazor.Sample.ServerSide/Shared/NavMenu.razor
+++ b/samples/ServerSide/ChartJs.Blazor.Sample.ServerSide/Shared/NavMenu.razor
@@ -12,71 +12,6 @@
                 <span class="oi oi-home" aria-hidden="true"></span>Welcome
             </NavLink>
         </li>
-        <li class="nav-item px-3">
-            <NavLink class="nav-link" href="SimpleBarChart">
-                <span class="oi oi-bar-chart" aria-hidden="true"></span>Simple BarChart
-            </NavLink>
-        </li>
-        <li class="nav-item px-3">
-            <NavLink class="nav-link" href="HorizontalBarChart">
-                <span class="oi oi-bar-chart" aria-hidden="true"></span>Horizontal BarChart
-            </NavLink>
-        </li>
-        <li class="nav-item px-3">
-            <NavLink class="nav-link" href="StackedBarChart">
-                <span class="oi oi-bar-chart" aria-hidden="true"></span>Stacked BarChart
-            </NavLink>
-        </li>
-        <li class="nav-item px-3">
-            <NavLink class="nav-link" href="TimeBarChart">
-                <span class="oi oi-bar-chart" aria-hidden="true"></span>Time BarChart
-            </NavLink>
-        </li>
-        <li class="nav-item px-3">
-            <NavLink class="nav-link" href="LinearLineChart">
-                <span class="oi oi-graph" aria-hidden="true"></span>Linear LineChart
-            </NavLink>
-        </li>
-        <li class="nav-item px-3">
-            <NavLink class="nav-link" href="LogarithmicLineChart">
-                <span class="oi oi-graph" aria-hidden="true"></span>Logarithmic LineChart
-            </NavLink>
-        </li>
-        <li class="nav-item px-3">
-            <NavLink class="nav-link" href="TimeLineChart">
-                <span class="oi oi-graph" aria-hidden="true"></span>Time LineChart
-            </NavLink>
-        </li>
-        <li class="nav-item px-3">
-            <NavLink class="nav-link" href="DoughnutChart">
-                <span class="oi oi-graph" aria-hidden="true"></span>DoughnutChart
-            </NavLink>
-        </li>
-        <li class="nav-item px-3">
-            <NavLink class="nav-link" href="PieChart">
-                <span class="oi oi-pie-chart" aria-hidden="true"></span>PieChart
-            </NavLink>
-        </li>
-        <li class="nav-item px-3">
-            <NavLink class="nav-link" href="PolarAreaChart">
-                <span class="oi oi-graph" aria-hidden="true"></span>PolarAreaChart
-            </NavLink>
-        </li>
-        <li class="nav-item px-3">
-            <NavLink class="nav-link" href="BubbleChart">
-                <span class="oi oi-graph" aria-hidden="true"></span>Bubble Chart
-            </NavLink>
-        </li>
-        <li class="nav-item px-3">
-            <NavLink class="nav-link" href="ScatterChart">
-                <span class="oi oi-graph" aria-hidden="true"></span>Scatter Chart
-            </NavLink>
-        </li>
-        <li class="nav-item px-3">
-            <NavLink class="nav-link" href="RadarChart">
-                <span class="oi oi-graph" aria-hidden="true"></span>Radar Chart
-            </NavLink>
-        </li>
         <li class="nav-item px-3">
             <NavLink class="nav-link" href="OnClickHandler">
                 <span class="oi oi-info" aria-hidden="true"></span>Click and Hover handler
@@ -110,4 +45,4 @@
         _collapseNavMenu = !_collapseNavMenu;
     }
 
-}
\ No newline at end of file
+}
diff --git a/samples/Shared/ChartJs.Blazor.Sample.Shared/Components/Welcome.razor b/samples/Shared/ChartJs.Blazor.Sample.Shared/Components/Welcome.razor
index 00ac7641..a1ea21ae 100644
--- a/samples/Shared/ChartJs.Blazor.Sample.Shared/Components/Welcome.razor
+++ b/samples/Shared/ChartJs.Blazor.Sample.Shared/Components/Welcome.razor
@@ -1,4 +1,4 @@
-<style>
+@*<style>
     .bg-1 {
         background-color: #1abc9c; /* Green */
         color: #ffffff;
@@ -9,16 +9,16 @@
     <h2>
         Welcome to the ChartJs.Blazor Samples.
     </h2>
-</div>
+</div>*@
 
-<div class="container-fluid bg-1 text-left">
+@*<div class="container-fluid bg-1 text-left">
 
     <p>
         <br />Use the navbar on the left (or the hamburger menu if you're on mobile) to switch between the samples.
         <br />
     </p>
     <h3></h3>
-</div>
+</div>*@
 
 <div class="container-fluid bg-2 text-center">
     <h3>Where are the goodies?</h3>
@@ -26,7 +26,7 @@
 <div class="container-fluid bg-2 text-center">
     <p>
         Nuget Package:
-        <a style="color: #00cc00"
+        <a 
            href="https://www.nuget.org/packages/ChartJs.Blazor"
            target="_blank">
             https://www.nuget.org/packages/ChartJs.Blazor
@@ -35,7 +35,7 @@
 
     <p>
         Source code:
-        <a style="color: #00cc00"
+        <a
            href="https://github.com/mariusmuntean/ChartJs.Blazor"
            target="_blank">
             https://github.com/mariusmuntean/ChartJs.Blazor
@@ -58,4 +58,4 @@
 </div>
 
 @functions{
-}
\ No newline at end of file
+}