CSS Improvements for Demo_Gen (#5715)

Adjusts bootstrap and JS to allow for better scaling based on device width, as well as allowing for text wrapping.
unicode-org · Oct 19, 2024 · b78a9f2 · b78a9f2
1 parent 77f2523
commit b78a9f2
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 2 deletions.
diff --git a/tutorials/web-demo/public/index.html b/tutorials/web-demo/public/index.html
@@ -5,6 +5,7 @@
 		<title>Diplomat Demo Generation Example</title>
 		<script src="dist/index.bundle.js"></script>
 		<link rel="stylesheet" href="dist/index.css"/>
+		<meta name="viewport" content="width=device-width, initial-scale=1">
 	</head>
 	<body>
 		<div class="container">

diff --git a/tutorials/web-demo/public/template.html b/tutorials/web-demo/public/template.html
@@ -5,6 +5,7 @@
         <script src="dist/rendering.bundle.js" defer></script>
         <title>Rendering Function</title>
         <link rel="stylesheet" href="dist/index.css"/>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
     </head>
     <body>
         <div id="main" class="container">
@@ -14,7 +15,7 @@
         <template id="terminus">
             <link rel="stylesheet" href="dist/index.css"/>
             <div class="vstack gap-2">
-                <h1><slot name="func-name"></slot></h1>
+                <h1 class="text-break"><slot name="func-name"></slot></h1>
                 <slot name="parameters"></slot>
                 <button type="submit" class="btn btn-primary" data-submit>Submit</button>
                 <div class="card">

diff --git a/tutorials/web-demo/src/js/index.mjs b/tutorials/web-demo/src/js/index.mjs
@@ -3,6 +3,6 @@ import { RenderInfo } from "icu4x/demo";
 Object.values(RenderInfo.termini).forEach((t) => {
 	let a = document.createElement("a");
 	a.classList.add("list-group-item", "list-group-item-action");
-	a.innerHTML = `<a href="template.html?func=${t.funcName}">${t.funcName}</a>`;
+	a.innerHTML = `<a href="template.html?func=${t.funcName}" class="text-break">${t.funcName}</a>`;
 	document.getElementById("links").appendChild(a);
 });