Update app layout

Signed-off-by: Jay Wang <[email protected]>
poloclub · Feb 7, 2024 · f288d32 · f288d32
1 parent b8c462c
commit f288d32
Show file tree

Hide file tree

Showing 8 changed files with 404 additions and 71 deletions.
diff --git a/examples/rag-playground/src/components/app/app.css b/examples/rag-playground/src/components/app/app.css
@@ -3,17 +3,154 @@
   height: 100%;
 
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.svg-icon {
+  display: flex;
   justify-content: center;
   align-items: center;
+  width: 1em;
+  height: 1em;
+
+  transition: transform 80ms linear;
+  transform-origin: center;
 
+  & svg {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.main-app {
+  display: grid;
+  grid-template-columns: 1fr min-content 1fr;
+  grid-template-rows: 1fr min-content 1fr;
+  height: calc(100vh - 5px);
+  max-height: 820px;
+  width: 100vw;
   box-sizing: border-box;
+  overflow-x: hidden;
+  position: relative;
+  background-color: hsl(216, 77%, 27%);
+}
+
+.text-left {
+  grid-row: 2/3;
+  grid-column: 1/2;
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 50px;
+  padding-right: 12px;
+  color: #e0e0e0;
 }
 
-.app-container {
-  width: min(1000px, 100vw - 50px);
-  height: min(650px, 100vw - 50px);
-  border-radius: 10px;
-  border: 1px solid var(--gray-400);
-  /* box-shadow: var(--shadow-border-light); */
+.app-wrapper {
+  grid-row: 2/3;
+  grid-column: 2/3;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  max-height: 950px;
+
+  & mememo-playground {
+    border-radius: 10px;
+    /* border: 1px solid var(--gray-400); */
+    background-color: white;
+
+    width: min(1050px, 100vw - 50px);
+    height: min(650px, 100vw - 50px);
+  }
+
+  .app-title {
+    color: white;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-end;
+    padding: 0 10px 8px;
+    user-select: none;
+    -webkit-user-select: none;
+    line-height: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    .title-left {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .app-title {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .app-info {
+      display: flex;
+      align-items: baseline;
+      gap: 10px;
+    }
+
+    .app-name {
+      font-size: 32px;
+      font-weight: 800;
+    }
+
+    .app-tagline {
+      font-size: 26px;
+      font-weight: 200;
+      color: #fff;
+      display: flex;
+      flex-flow: row;
+
+      & a {
+        color: unset;
+        font-style: unset;
+        text-decoration: unset;
+      }
+
+      .mememo-logo {
+        margin-left: 9px;
+        display: flex;
+        flex-flow: row;
+        gap: 5px;
+        position: relative;
+
+        &::after {
+          content: '';
+          position: absolute;
+          top: 105%;
+          left: 50%;
+          transform: translate(-50%, 0);
+          width: 105%;
+          height: 2px;
+          background-color: hsla(0, 100%, 100%, 0.5);
+        }
+      }
+    }
+  }
+}
+
+.text-right {
+  grid-row: 2/3;
+  grid-column: 3/4;
+  display: flex;
+  justify-content: flex-start;
+  padding-left: 12px;
+  margin-top: 80px;
+  color: #e0e0e0;
 }
diff --git a/examples/rag-playground/src/components/app/app.ts b/examples/rag-playground/src/components/app/app.ts
@@ -4,6 +4,7 @@ import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 
 import '../playground/playground';
 import componentCSS from './app.css?inline';
+import logoIcon from '../../images/icon-logo.svg?raw';
 
 /**
  * App element.
@@ -47,8 +48,38 @@ export class MememoRagPlayground extends LitElement {
   render() {
     return html`
       <div class="page">
-        <div class="app-container">
-          <mememo-playground></mememo-playground>
+        <div class="main-app">
+          <div class="text-left"></div>
+
+          <div class="app-wrapper">
+            <div class="app-title">
+              <div class="title-left">
+                <div class="app-icon"></div>
+                <div class="app-info">
+                  <div class="app-name">RAG Playground</div>
+                  <div class="app-tagline">
+                    <span
+                      >Prototype RAG applications in your browser! Powered
+                      by</span
+                    >
+                    <a
+                      class="mememo-logo"
+                      href="https://github.com/poloclub/mememo"
+                      target="_blank"
+                    >
+                      <span class="svg-icon">${unsafeHTML(logoIcon)}</span>
+                      <span>MeMemo</span>
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <mememo-playground></mememo-playground>
+            <div class="app-tabs"></div>
+          </div>
+
+          <div class="text-right"></div>
         </div>
       </div>
     `;