#22 Grid

AlexHedley · Jun 26, 2023 · 995a1ed · 995a1ed
1 parent bde48db
commit 995a1ed
Show file tree

Hide file tree

Showing 11 changed files with 107 additions and 22 deletions.
diff --git a/README.md b/README.md
@@ -40,4 +40,4 @@ Add widgets for:
 
 - [docs](docs/README.md)
 
-![Original Screenshot](docs/images/progress/Original_screenshot.png "Original Screenshot")
+![Original Screenshot](docs/images/progress/original_screenshot.png "Original Screenshot")
diff --git a/docs/images/README.md b/docs/images/README.md
@@ -10,3 +10,11 @@
 
 - [bowtie](http://dashing.io/images/bowtie.png)
 - [Blazor](https://en.wikipedia.org/wiki/Blazor#/media/File:Blazor.png)
+
+## Demo
+
+![Demo](progress/demo.png "Demo")
+
+![Progress](progress/progress.png "progress")
+
+![Original Screenshot](progress/original_screenshot.png "Original Screenshot")
diff --git a/docs/images/progress/demo.png b/docs/images/progress/demo.png
diff --git a/src/Blashing.Client/Pages/Demo.razor b/src/Blashing.Client/Pages/Demo.razor
@@ -0,0 +1,34 @@
+@page "/demo"
+<PageTitle>Demo</PageTitle>
+
+<h3>Demo</h3>
+
+<div class="container">
+    <div class="row">
+        <div class="col-md-9">
+            <div class="row">
+                    <div class="col-md-9">
+                        <TextWidget Title="Hello" Text="This is your shiny new dashboard" MoreInfo="Protio: You can drag the widgets around!" UpdatedAtMessage=""/>
+                    </div>
+                    <div class="col-md-3">
+                        <MeterWidget Title="Synergy" MoreInfo="" UpdatedAtMessage="Last updated at 0:00" />
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-md-3">
+                        <NumberWidget Title="Current Valuation" Current="$27" Difference="⬇️ 46%" MoreInfo="in billions" UpdatedAtMessage="Last updated at 0:00"/>
+                    </div>
+                    <div class="col-md-9">
+                        <GraphWidget Title="Convergence" MoreInfo=""/>
+                    </div>
+                </div>
+        </div>
+        <div class="col-md-3">
+            <ListWidget Title="Buzzwords" MoreInfo="# of times said around the office" UpdatedAtMessage="Last updated at 0:00" Items="@Items" />
+        </div>
+    </div>
+</div>
+
+@code {
+    List<(string label, string value)>? Items = new() { ("Turn-key", "0"), ("Synergy", "4"), ("Exit strategy", "11"), ("Paridigm shift", "3"), ("Enterprise", "20"), ("Pivoting", "7"), ("Web 2.0", "16"), ("Leverage", "25"), ("Streamlininess", "9") };
+}
diff --git a/src/Blashing.Client/Pages/Index.razor b/src/Blashing.Client/Pages/Index.razor
@@ -1,15 +1,5 @@
 @page "/"
 
-@using Blashing.Core.Components.Clock;
-@using Blashing.Core.Components.Comments;
-@using Blashing.Core.Components.Graph;
-@using Blashing.Core.Components.IFrame;
-@using Blashing.Core.Components.Image;
-@using Blashing.Core.Components.List;
-@using Blashing.Core.Components.Meter;
-@using Blashing.Core.Components.Number;
-@using Blashing.Core.Components.Text;
-
 <PageTitle>Index</PageTitle>
 
 <h1>Hello, world!</h1>

diff --git a/src/Blashing.Client/Shared/NavMenu.razor b/src/Blashing.Client/Shared/NavMenu.razor
@@ -24,6 +24,11 @@
                 <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
             </NavLink>
         </div>
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="demo">
+                <span class="oi oi-grid-three-up" aria-hidden="true"></span> Demo
+            </NavLink>
+        </div>
     </nav>
 </div>
 

diff --git a/src/Blashing.Client/_Imports.razor b/src/Blashing.Client/_Imports.razor
@@ -9,3 +9,12 @@
 @using Blashing.Client
 @using Blashing.Client.Shared
 
+@using Blashing.Core.Components.Clock;
+@using Blashing.Core.Components.Comments;
+@using Blashing.Core.Components.Graph;
+@using Blashing.Core.Components.IFrame;
+@using Blashing.Core.Components.Image;
+@using Blashing.Core.Components.List;
+@using Blashing.Core.Components.Meter;
+@using Blashing.Core.Components.Number;
+@using Blashing.Core.Components.Text;
diff --git a/src/Blashing.Server/Pages/Demo.razor b/src/Blashing.Server/Pages/Demo.razor
@@ -0,0 +1,34 @@
+@page "/demo"
+<PageTitle>Demo</PageTitle>
+
+<h3>Demo</h3>
+
+<div class="container">
+    <div class="row">
+        <div class="col-md-9">
+            <div class="row">
+                    <div class="col-md-9">
+                        <TextWidget Title="Hello" Text="This is your shiny new dashboard" MoreInfo="Protio: You can drag the widgets around!" UpdatedAtMessage=""/>
+                    </div>
+                    <div class="col-md-3">
+                        <MeterWidget Title="Synergy" MoreInfo="" UpdatedAtMessage="Last updated at 0:00" />
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-md-3">
+                        <NumberWidget Title="Current Valuation" Current="$27" Difference="⬇️ 46%" MoreInfo="in billions" UpdatedAtMessage="Last updated at 0:00"/>
+                    </div>
+                    <div class="col-md-9">
+                        <GraphWidget Title="Convergence" MoreInfo=""/>
+                    </div>
+                </div>
+        </div>
+        <div class="col-md-3">
+            <ListWidget Title="Buzzwords" MoreInfo="# of times said around the office" UpdatedAtMessage="Last updated at 0:00" Items="@Items" />
+        </div>
+    </div>
+</div>
+
+@code {
+    List<(string label, string value)>? Items = new() { ("Turn-key", "0"), ("Synergy", "4"), ("Exit strategy", "11"), ("Paridigm shift", "3"), ("Enterprise", "20"), ("Pivoting", "7"), ("Web 2.0", "16"), ("Leverage", "25"), ("Streamlininess", "9") };
+}
diff --git a/src/Blashing.Server/Pages/Index.razor b/src/Blashing.Server/Pages/Index.razor
@@ -1,15 +1,5 @@
 @page "/"
 
-@using Blashing.Core.Components.Clock;
-@using Blashing.Core.Components.Comments;
-@using Blashing.Core.Components.Graph;
-@using Blashing.Core.Components.IFrame;
-@using Blashing.Core.Components.Image;
-@using Blashing.Core.Components.List;
-@using Blashing.Core.Components.Meter;
-@using Blashing.Core.Components.Number;
-@using Blashing.Core.Components.Text;
-
 <PageTitle>Index</PageTitle>
 
 <h1>Hello, world!</h1>

diff --git a/src/Blashing.Server/Shared/NavMenu.razor b/src/Blashing.Server/Shared/NavMenu.razor
@@ -24,6 +24,11 @@
                 <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
             </NavLink>
         </div>
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="demo">
+                <span class="oi oi-grid-three-up" aria-hidden="true"></span> Demo
+            </NavLink>
+        </div>
     </nav>
 </div>
 

diff --git a/src/Blashing.Server/_Imports.razor b/src/Blashing.Server/_Imports.razor
@@ -7,4 +7,14 @@
 @using Microsoft.AspNetCore.Components.Web.Virtualization
 @using Microsoft.JSInterop
 @using Blashing.Server
-@using Blashing.Server.Shared
+@using Blashing.Server.Shared
+
+@using Blashing.Core.Components.Clock;
+@using Blashing.Core.Components.Comments;
+@using Blashing.Core.Components.Graph;
+@using Blashing.Core.Components.IFrame;
+@using Blashing.Core.Components.Image;
+@using Blashing.Core.Components.List;
+@using Blashing.Core.Components.Meter;
+@using Blashing.Core.Components.Number;
+@using Blashing.Core.Components.Text;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -40,4 +40,4 @@ Add widgets for:

		- [docs](docs/README.md)

		![Original Screenshot](docs/images/progress/Original_screenshot.png "Original Screenshot")
		![Original Screenshot](docs/images/progress/original_screenshot.png "Original Screenshot")