Apply style changes from feedback.

google · Oct 26, 2023 · 50a09f2 · 50a09f2
1 parent 56760f2
commit 50a09f2
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 26 deletions.
diff --git a/repl/appengine/README.md b/repl/appengine/README.md
@@ -17,15 +17,15 @@ and run the Go server as follows:
 
 ```
 # from the `repl/appengine/web` directory:
-ng run web:build --watch
+npm run watch
 
 # from the repl/appengine directory:
 go run ./main --serve_static ./web/dist/web
 ```
 
 ## Deploy on google cloud appengine
 
-1. Build the angular application with `npm run web:build`.
+1. Build the angular application with `npm run build`.
 
 1. Follow the instructions here:
 (https://cloud.google.com/appengine/docs/standard/go/building-app). Make sure to

diff --git a/repl/appengine/web/src/app/app-component.html b/repl/appengine/web/src/app/app-component.html
@@ -23,19 +23,23 @@
     </a>
 </div>
 
-<mat-drawer-container role="main" class="content" autosize>
-  <!-- must be immediate childe of side-nav-container -->
-  <mat-drawer class="reference-panel-container" #drawer opened mode="side" position="end">
-    <app-reference-panel></app-reference-panel>
-  </mat-drawer>
-  <mat-drawer-content class="main-panel-container">
-    <div class="repl-console-container">
-      <app-repl-console></app-repl-console>
+<mat-sidenav-container role="main" class="content" autosize>
+  <!-- must be immediate child of side-nav-container -->
+  <mat-sidenav #sidenav opened mode="side" position="end">
+    <div class="reference-panel-container">
+      <app-reference-panel></app-reference-panel>
     </div>
-    <div class="control-button-bar">
-      <button mat-raised-button (click)="submitConsole()" color="primary">Evaluate</button> &nbsp;
-      <button mat-raised-button (click)="drawer.toggle()" color="primary">Show / Hide References</button>
+  </mat-sidenav>
+  <mat-sidenav-content>
+    <div class="main-panel-container">
+      <div class="repl-console-container">
+        <app-repl-console></app-repl-console>
+      </div>
+      <div class="control-button-bar">
+        <button mat-raised-button (click)="submitConsole()" color="primary">Evaluate</button> &nbsp;
+        <button mat-raised-button (click)="sidenav.toggle()" color="primary">Show / Hide References</button>
+      </div>
     </div>
-  </mat-drawer-content>
-</mat-drawer-container>
+  </mat-sidenav-content>
+</mat-sidenav-container>
 
diff --git a/repl/appengine/web/src/app/app-component.scss b/repl/appengine/web/src/app/app-component.scss
@@ -36,12 +36,14 @@
     flex: 1;
   }
 
+  $toolbar_height: 60px;
+
   .toolbar {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
-    height: 60px;
+    height: $toolbar_height;
     display: flex;
     align-items: center;
     background-color: #1976d2;
@@ -75,14 +77,13 @@
   }
 
   .content {
-    display:block;
-    margin-top: 60px;
-    width: 100%;
+    position: absolute;
+    inset: $toolbar_height 0 0 0;
   }
 
   .reference-panel-container {
     padding: 2rem;
-    max-width: 35%
+    max-width: 35vw;
   }
 
   .main-panel-container {

diff --git a/repl/appengine/web/src/app/reference_panel/reference-panel-component.html b/repl/appengine/web/src/app/reference_panel/reference-panel-component.html
@@ -16,8 +16,8 @@
 
 <h1>References</h1>
 
-<mat-accordion>
-    <mat-expansion-panel>
+<mat-accordion multi>
+    <mat-expansion-panel [expanded]="true">
         <mat-expansion-panel-header>
         <mat-panel-title>
             CEL Specification
@@ -26,16 +26,16 @@ <h1>References</h1>
         <p>See <a href="https://github.com/google/cel-spec">github.com/google/cel-spec</a> for CEL language
             overview.</p>
     </mat-expansion-panel>
-    <mat-expansion-panel>
+    <mat-expansion-panel [expanded]="true">
         <mat-expansion-panel-header>
             <mat-panel-title>
             REPL Syntax
             </mat-panel-title>
         </mat-expansion-panel-header>
         <p>See <a href="https://github.com/google/cel-go/tree/master/repl/main">github.com/google/cel-go/tree/master/repl/main</a>
             for REPL syntax guide.</p>
-    </mat-expansion-panel>
-    <mat-expansion-panel>
+    </mat-expansion-panel >
+    <mat-expansion-panel [expanded]="true">
         <mat-expansion-panel-header>
             <mat-panel-title>
             Examples

diff --git a/repl/appengine/web/src/app/repl_console/repl-console-component.scss b/repl/appengine/web/src/app/repl_console/repl-console-component.scss
@@ -37,5 +37,5 @@
 .reset-wrapper {
     position: absolute;
     right: 2rem;
-    top: 6rem;
+    top: 4rem;
   }