tauri base layout

getspacetime · Sep 27, 2023 · 09f2cc0 · 09f2cc0
1 parent be3625f
commit 09f2cc0
Show file tree

Hide file tree

Showing 19 changed files with 1,341 additions and 362 deletions.
diff --git a/src/Client/src/Client.csproj b/src/Client/src/Client.csproj
@@ -5,5 +5,34 @@
     <Nullable>enable</Nullable>
     <ImplicitUsings>enable</ImplicitUsings>
   </PropertyGroup>
+	<PropertyGroup Condition="$([MSBuild]::IsOSPlatform('Windows'))">
+		<TailwindInstallUrl>https://github.com/tailwindlabs/tailwindcss/releases/download/v3.3.3/tailwindcss-windows-x64.exe</TailwindInstallUrl>
+		<TailwindCliName>tailwindcss.exe</TailwindCliName>
+	</PropertyGroup>
+	<PropertyGroup Condition="$([MSBuild]::IsOSPlatform('Linux'))">
+		<TailwindInstallUrl>https://github.com/tailwindlabs/tailwindcss/releases/download/v3.3.3/tailwindcss-linux-x64</TailwindInstallUrl>
+		<TailwindCliName>tailwindcss</TailwindCliName>
+	</PropertyGroup>
+	<PropertyGroup Condition="$([MSBuild]::IsOSPlatform('OSX'))">
+		<TailwindInstallUrl>https://github.com/tailwindlabs/tailwindcss/releases/download/v3.3.3/tailwindcss-macos-x64</TailwindInstallUrl>
+		<TailwindCliName>tailwindcss</TailwindCliName>
+	</PropertyGroup>
 
+<ItemGroup>
+	<ProjectReference Include="..\..\Spacetime.Core.Shared\Spacetime.Core.Shared.csproj" />
+	<ProjectReference Include="..\..\..\..\..\BlazorMonaco\BlazorMonaco\BlazorMonaco.csproj" />
+</ItemGroup>
+
+<ItemGroup>
+  <!-- <PackageReference Include="BlazorMonaco" Version="3.1.0" /> -->
+</ItemGroup>
+
+  <Target Name="InstallTailwind" AfterTargets="AfterBuild">
+		<Message Importance="high" Text="Installing Tailwind CLI..." />
+		<DownloadFile SkipUnchangedFiles="true" SourceUrl="$(TailwindInstallUrl)" DestinationFileName="$(TailwindCliName)" DestinationFolder="$(MSBuildProjectDirectory)" />
+	</Target>
+	<Target Name="Tailwind" AfterTargets="AfterBuild" DependsOnTargets="InstallTailwind">
+		<Message Importance="high" Text="Building css with Tailwind..." />
+		<Exec Command=".\tailwindcss -i .\app.css -o .\wwwroot\css\site.css" />
+	</Target>
 </Project>
diff --git a/src/Client/src/Components/App.razor b/src/Client/src/Components/App.razor
@@ -1,20 +1,24 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="bg-gray-50 h-screen">
 
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <base href="/" />
-    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
+    <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
     <link rel="stylesheet" href="app.css" />
+    <link rel="stylesheet" href="css/site.css" />
     <link rel="stylesheet" href="Client.styles.css" />
     <link rel="icon" type="image/png" href="favicon.png" />
     <HeadOutlet />
 </head>
 
-<body>
+<body class="h-screen">
     <Routes />
     <script src="_framework/blazor.web.js"></script>
+    <script src="_content/BlazorMonaco/jsInterop.js"></script>
+    <script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/loader.js"></script>
+    <script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.js"></script>
 </body>
 
 </html>
diff --git a/src/Client/src/Components/Layout/MainLayout.razor b/src/Client/src/Components/Layout/MainLayout.razor
@@ -1,18 +1,32 @@
 @inherits LayoutComponentBase
 
-<div class="page">
-    <div class="sidebar">
-        <NavMenu />
-    </div>
-
-    <main>
-        <div class="top-row px-4">
-            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
+<div class="flex h-screen flex-col antialiased">
+    <header class="shrink-0 border-b border-gray-200 bg-white">
+        <div class="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
+            <div class="flex items-center gap-x-8">
+                <h1 class="text-xl font-semibold">Spacetime</h1>
+                <a href="#" class=" text-gray-500 hover:text-gray-600">Requests</a>
+            </div>
+            <div class="flex items-center gap-x-8">
+                <button type="button" class="-m-2.5 p-2.5 text-gray-400 hover:text-gray-300">
+                    <span class="sr-only">View notifications</span>
+                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+                        aria-hidden="true">
+                        <path stroke-linecap="round" stroke-linejoin="round"
+                            d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
+                    </svg>
+                </button>
+                <a href="#" class="-m-1.5 p-1.5">
+                    <span class="sr-only">Your profile</span>
+                    <img class="h-8 w-8 rounded-full bg-gray-800"
+                        src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                        alt="">
+                </a>
+            </div>
         </div>
-
-        <article class="content px-4">
-            @Body
-        </article>
+    </header>
+    <main class="mx-auto flex h-screen w-full max-w-7xl items-start gap-x-8 px-1 pt-1 sm:px-2 lg:px-4">
+        @Body
     </main>
 </div>
 

diff --git a/src/Client/src/Components/Layout/MainLayout.razor.css b/src/Client/src/Components/Layout/MainLayout.razor.css
@@ -1,85 +1,3 @@
-.page {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-}
-
-main {
-    flex: 1;
-}
-
-.sidebar {
-    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
-}
-
-.top-row {
-    background-color: #f7f7f7;
-    border-bottom: 1px solid #d6d5d5;
-    justify-content: flex-end;
-    height: 3.5rem;
-    display: flex;
-    align-items: center;
-}
-
-    .top-row ::deep a, .top-row ::deep .btn-link {
-        white-space: nowrap;
-        margin-left: 1.5rem;
-        text-decoration: none;
-    }
-
-    .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
-        text-decoration: underline;
-    }
-
-    .top-row ::deep a:first-child {
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-@media (max-width: 640.98px) {
-    .top-row:not(.auth) {
-        display: none;
-    }
-
-    .top-row.auth {
-        justify-content: space-between;
-    }
-
-    .top-row ::deep a, .top-row ::deep .btn-link {
-        margin-left: 0;
-    }
-}
-
-@media (min-width: 641px) {
-    .page {
-        flex-direction: row;
-    }
-
-    .sidebar {
-        width: 250px;
-        height: 100vh;
-        position: sticky;
-        top: 0;
-    }
-
-    .top-row {
-        position: sticky;
-        top: 0;
-        z-index: 1;
-    }
-
-    .top-row.auth ::deep a:first-child {
-        flex: 1;
-        text-align: right;
-        width: 0;
-    }
-
-    .top-row, article {
-        padding-left: 2rem !important;
-        padding-right: 1.5rem !important;
-    }
-}
-
 #blazor-error-ui {
     background: lightyellow;
     bottom: 0;

diff --git a/src/Client/src/Components/Layout/NavMenu.razor b/src/Client/src/Components/Layout/NavMenu.razor
diff --git a/src/Client/src/Components/Layout/NavMenu.razor.css b/src/Client/src/Components/Layout/NavMenu.razor.css
diff --git a/src/Client/src/Components/Pages/Counter.razor b/src/Client/src/Components/Pages/Counter.razor