Add expander / some responsive CSS for smaller screens.

Author: dlongley

index.html

@@ -12,6 +12,10 @@
         display: flex;
         /* Optional: Adds space between the items */
         gap: 20px;
+
+        @media (width <= 1080px) {
+          flex-direction: column;
+        }
       }
 
       .column-item {
@@ -22,31 +26,63 @@
         background-color: #f0f0f0;
         border: 1px solid #ccc;
       }
+
+      .show {
+        display: block !important;
+      }
+
+      @media (width >= 1080px) {
+        .expander {
+          display: none;
+        }
+        .expand-content {
+          display: block;
+        }
+      }
+
+      @media (width <= 1080px) {
+        .expander {
+          display: block;
+        }
+        .expand-content {
+          display: none;
+        }
+      }
     </style>
     <script type="module">
       import {render} from './render.js';
 
       let useButton = false;
 
       document.addEventListener('DOMContentLoaded', () => {
-        const button = document.querySelector('#load');
+        // expand interface for raw/complete VC
+        const expandButton = document.querySelector('#expand-button');
+        expandButton.addEventListener('click', () => {
+          const content = document.querySelector('.expand-content');
+          if(content.classList.contains('show')) {
+            content.classList.remove('show');
+            expandButton.textContent = 'Show';
+          } else {
+            content.classList.add('show');
+            expandButton.textContent = 'Hide';
+          }
+        });
 
-        // skip button if specified
+        const renderButton = document.querySelector('#render');
+        const loading = document.querySelector('#loading');
+        renderButton.addEventListener('click', () => {
+          renderButton.style.display = 'none';
+          loading.style.display = 'block';
+          doRender().catch(() => {});
+        });
+
+        // render immediately if button=false is specified
         const searchParams = new URLSearchParams(window.location.search);
         useButton = searchParams.get('button') !== 'false';
         if(!useButton) {
-          button.style.display = 'none';
+          renderButton.style.display = 'none';
           doRender().catch(() => {});
-          return;
         }
-
-        // use button interface
-        const loading = document.querySelector('#loading');
-        button.addEventListener('click', () => {
-          button.style.display = 'none';
-          loading.style.display = 'block';
-          doRender().catch(() => {});
-        });
       });
 
       const credential = {
@@ -184,11 +220,16 @@ <h1>HTML Render Method Test</h1>
     <div class="flex-container">
       <div class="column-item">
         <h2>Raw/Complete Verifiable Credential</h2>
-        <p>
-          Below is the "raw" Credential data prior to being selectively disclosed
-          and rendered by the iframe (to the right):
-        </p>
-        <textarea id="fullCredential"></textarea>
+        <div class="expander">
+          <button id="expand-button">Show</button>
+        </div>
+        <div class="expand-content">
+          <p>
+            Below is the "raw" Credential data prior to being selectively disclosed
+            and rendered by the iframe (to the right):
+          </p>
+          <textarea id="fullCredential"></textarea>
+        </div>
       </div>
       <div class="column-item">
         <h2>Rendered Credential (in a restricted <code>iframe</code>)</h2>
@@ -199,7 +240,7 @@ <h2>Rendered Credential (in a restricted <code>iframe</code>)</h2>
         </p>
 
         <div id="display">
-          <button id="load">
+          <button id="render">
             Render
           </button>
           <div id="loading" style="display: none">