center: update dashboard page

fuxiaohei · Oct 30, 2023 · 2a08227 · 2a08227
1 parent f520ee4
commit 2a08227
Show file tree

Hide file tree

Showing 3 changed files with 115 additions and 1 deletion.
diff --git a/binary/center/src/pages/mod.rs b/binary/center/src/pages/mod.rs
@@ -48,7 +48,11 @@ async fn render_dashboard(engine: AppEngine) -> impl IntoResponse {
 
 fn init_templates() -> Result<Handlebars<'static>> {
     let mut hbs = Handlebars::new();
+    load_template_from_assets(&mut hbs);
+    Ok(hbs)
+}
 
+fn load_template_from_assets(hbs: &mut Handlebars<'static>) {
     crate::embed::TemplatesAssets::iter().for_each(|asset| {
         let asset_path = asset.to_string();
 
@@ -65,5 +69,4 @@ fn init_templates() -> Result<Handlebars<'static>> {
         hbs.register_template_string(&asset_path, std::str::from_utf8(&content).unwrap())
             .unwrap();
     });
-    Ok(hbs)
 }
diff --git a/binary/center/templates/css/input.css b/binary/center/templates/css/input.css
@@ -40,3 +40,56 @@
 #top-nav-user-dropdown .item {
   @apply block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white;
 }
+#main {
+  @apply max-w-4xl mx-auto my-6;
+}
+#project-top h1 {
+  @apply text-3xl font-semibold;
+}
+#project-top .count {
+  @apply text-gray-500 leading-8;
+}
+#project-searchbar {
+  @apply flex justify-between items-center my-4;
+}
+#project-search-input {
+  @apply block w-80 p-2 pl-10 text-sm text-gray-300 border border-gray-100 rounded-lg bg-gray-50 focus:ring-0 focus:border-gray-400 focus:bg-white focus:shadow-none duration-100;
+}
+#project-searchbar form label {
+  @apply mb-2 text-sm font-medium text-gray-600 sr-only;
+}
+#project-searchbar form .search-icon {
+  @apply absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none;
+}
+
+#project-createbar .new-project-button {
+  @apply text-white bg-primary rounded-lg px-3 py-2.5 hover:border hover:border-primary hover:bg-white hover:text-primary duration-100;
+}
+
+.project-card {
+  @apply border border-gray-200 rounded-lg p-5 flex justify-between w-1/2 mb-6 hover:border-gray-400 duration-200 hover:shadow;
+}
+
+.project-card .card-title {
+  @apply text-lg font-semibold;
+}
+
+.project-card .card-metadata {
+  @apply text-gray-500 pt-3;
+}
+
+.project-card .card-link {
+  @apply text-gray-500 hover:text-primary pt-3;
+}
+
+.project-card .card-metadata .item {
+  @apply border-r border-gray-200 pr-2 mr-1;
+}
+
+.project-card .card-metadata .item:last-child {
+  @apply border-0;
+}
+
+.project-card .action-button {
+  @apply px-3 py-2 rounded-lg text-white bg-emerald-600 hover:bg-emerald-700 duration-200;
+}
diff --git a/binary/center/templates/dashboard.hbs b/binary/center/templates/dashboard.hbs
@@ -7,6 +7,64 @@
 
 <body>
     {{> partials/navbar.hbs}}
+    <main id="main">
+        <div id="project-top">
+            <h1>Projects</h1>
+            <span class="count">13 projects</span>
+        </div>
+        <div id="project-searchbar">
+            <form>
+                <label for="project-search-input">Search</label>
+                <div class="relative">
+                    <div class="search-icon">
+                        <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true"
+                            xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
+                        </svg>
+                    </div>
+                    <input type="search" id="project-search-input" placeholder="Project name" required>
+                </div>
+            </form>
+            <div id="project-createbar">
+                <a href="#" class="new-project-button">+ New Project</a>
+            </div>
+        </div>
+        <div id="projects-list" class="mt-6">
+            <div class="flex space-x-4">
+                <div class="project-card flex justify-between w-1/2">
+                    <div class="card-left">
+                        <div class="card-title">spryest-pyknoses-242</div>
+                        <div class="card-metadata">
+                            <span class="item">Rust</span>
+                            <span class="item">1 Deploys</span>
+                            <span class="item">30 Days ago</span>
+                        </div>
+                        <div class="card-link">
+                            <a href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
+                                    class="w-5 h-5 inline-block mr-1">
+                                    <path fill-rule="evenodd"
+                                        d="M4.25 5.5a.75.75 0 00-.75.75v8.5c0 .414.336.75.75.75h8.5a.75.75 0 00.75-.75v-4a.75.75 0 011.5 0v4A2.25 2.25 0 0112.75 17h-8.5A2.25 2.25 0 012 14.75v-8.5A2.25 2.25 0 014.25 4h5a.75.75 0 010 1.5h-5z"
+                                        clip-rule="evenodd" />
+                                    <path fill-rule="evenodd"
+                                        d="M6.194 12.753a.75.75 0 001.06.053L16.5 4.44v2.81a.75.75 0 001.5 0v-4.5a.75.75 0 00-.75-.75h-4.5a.75.75 0 000 1.5h2.553l-9.056 8.194a.75.75 0 00-.053 1.06z"
+                                        clip-rule="evenodd" />
+                                </svg>
+                                spryest-pyknoses-242.binary.com</a>
+                        </div>
+                    </div>
+                    <div class="card-right">
+                        <a href="#" class="action-button">Running</a>
+                    </div>
+                </div>
+                <div class="project-card w-1/2">w-1/2</div>
+            </div>
+            <div class="flex">
+                <div class="project-card w-1/2">w-1/2</div>
+                <div class="project-card w-1/2">w-1/2</div>
+            </div>
+        </div>
+    </main>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.0.0/flowbite.min.js"></script>
 </body>