From 50a09f248df8bd4c20d43238d38efc8c177830c3 Mon Sep 17 00:00:00 2001
From: Jonathan Tatum <jdtatum@google.com>
Date: Thu, 26 Oct 2023 03:26:18 +0000
Subject: [PATCH] Apply style changes from feedback.

---
 repl/appengine/README.md                      |  4 +--
 repl/appengine/web/src/app/app-component.html | 30 +++++++++++--------
 repl/appengine/web/src/app/app-component.scss | 11 +++----
 .../reference-panel-component.html            | 10 +++----
 .../repl_console/repl-console-component.scss  |  2 +-
 5 files changed, 31 insertions(+), 26 deletions(-)

diff --git a/repl/appengine/README.md b/repl/appengine/README.md
index 10a93e620..ad6f5066c 100644
--- a/repl/appengine/README.md
+++ b/repl/appengine/README.md
@@ -17,7 +17,7 @@ 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
@@ -25,7 +25,7 @@ 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
index a8ffff0f4..e8cf7c553 100644
--- 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
index dfa60a7da..acd69e2b3 100644
--- 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
index 054640a1b..19bd7a425 100644
--- 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,7 +26,7 @@ <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
@@ -34,8 +34,8 @@ <h1>References</h1>
         </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
index 1ed4d752c..0836e109c 100644
--- 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;
   }
\ No newline at end of file