updated: Path to the new riot major version

riot · Aug 26, 2023 · 2a13d3a · 2a13d3a
1 parent 1682caa
commit 2a13d3a
Show file tree

Hide file tree

Showing 16 changed files with 58 additions and 25 deletions.
diff --git a/animated-list-reordering/index.html b/animated-list-reordering/index.html
@@ -8,7 +8,7 @@
     <list></list>
 
     <script src="https://unpkg.com/animore/animore.js"></script>
-    <script src="https://unpkg.com/riot@7/riot+compiler.min.js"></script>
+    <script src="https://unpkg.com/riot@9/riot+compiler.min.js"></script>
 
     <script type="riot" src="./list.riot"></script>
 

diff --git a/bug-reporter/index.html b/bug-reporter/index.html
@@ -6,7 +6,7 @@
 
     <my-tag></my-tag>
 
-    <script type="text/javascript" src="https://unpkg.com/riot@7/riot+compiler.min.js"></script>
+    <script type="text/javascript" src="https://unpkg.com/riot@9/riot+compiler.min.js"></script>
     <script type="riot" src="./my-tag.html"></script>
 
     <script type="text/javascript">

diff --git a/color-palette/index.html b/color-palette/index.html
@@ -14,7 +14,7 @@
     <script type="riot" src="app.riot"></script>
 
     <!-- scripts we need -->
-    <script src="https://unpkg.com/riot@7/riot+compiler.min.js"></script>
+    <script src="https://unpkg.com/riot@9/riot+compiler.min.js"></script>
     <script src="mixin.js"></script>
 
     <!-- mount this app -->

diff --git a/hooks/index.html b/hooks/index.html
@@ -17,7 +17,7 @@
     <my-tag count="0"></my-tag>
 
     <script type="text/javascript" src="https://unpkg.com/[email protected]/min.js"></script>
-    <script type="text/javascript" src="https://unpkg.com/riot@7/riot+compiler.min.js"></script>
+    <script type="text/javascript" src="https://unpkg.com/riot@9/riot+compiler.min.js"></script>
     <script type="text/javascript" src="./with-hooks.js"></script>
     <script type="riot" src="./my-tag.html"></script>
 

diff --git a/live-ajax-search/index.html b/live-ajax-search/index.html
@@ -7,7 +7,7 @@
 
     <search></search>
 
-    <script src="https://unpkg.com/riot@7/riot+compiler.min.js"></script>
+    <script src="https://unpkg.com/riot@9/riot+compiler.min.js"></script>
 
     <script type="riot" src="./search.riot"></script>
 

diff --git a/live-editor/index.html b/live-editor/index.html
@@ -15,7 +15,7 @@
 
     <!-- scripts we need -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.2/ace.js"></script>
-    <script src="https://unpkg.com/riot@7/riot+compiler.min.js"></script>
+    <script src="https://unpkg.com/riot@9/riot+compiler.min.js"></script>
     <script>
       riot.compile().then(() => {
         riot.mount('live-editor')

diff --git a/live-editor/stage.html b/live-editor/stage.html
@@ -10,7 +10,7 @@
   <body>
     <sample></sample>
     <!-- scripts we need -->
-    <script src="https://unpkg.com/riot@7/riot+compiler.min.js"></script>
+    <script src="https://unpkg.com/riot@9/riot+compiler.min.js"></script>
     <script>
       window.addEventListener('message', function(e) {
         const { code } = riot.compileFromString(e.data)

diff --git a/modal/cool-modal.riot b/modal/cool-modal.riot
@@ -2,10 +2,12 @@
 <cool-modal>
   <modal state={ state.modal } title="My Cool Modal" if={ state.modal.visible }>
     <p>{ state.modal.message }</p>
-    <button onclick={ sayHello }>Say hello!</button>
-    <button onclick={ closeModal }>Close modal</button>
+    <div class="btn-group">
+      <button onclick={ sayHello }>Say hello!</button>
+      <button onclick={ closeModal }>Close modal</button>
+    </div>
   </modal>
-  
+
   <script>
     export default {
       state: {
@@ -26,4 +28,18 @@
       }
     }
   </script>
+
+  <style>
+    button {
+      cursor: pointer;
+      background: white;
+      border: 1px solid #2e6eb5;
+      padding: 8px;
+    }
+
+    .btn-group {
+      display: flex;
+      gap: 12px;
+    }
+  </style>
 </cool-modal>
diff --git a/modal/index.html b/modal/index.html
@@ -5,14 +5,15 @@
     <style>
       body {
         overflow: hidden;
+        background: #d9ebff;
       }
     </style>
   </head>
   <body>
 
     <cool-modal></cool-modal>
 
-    <script type="text/javascript" src="https://unpkg.com/riot@7/riot+compiler.min.js"></script>
+    <script type="text/javascript" src="https://unpkg.com/riot@9/riot+compiler.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/@riotjs/observable@4/dist/observable.min.js"></script>
     <script type="riot" src="./modal.riot"></script>
     <script type="riot" src="./cool-modal.riot"></script>

diff --git a/modal/modal.riot b/modal/modal.riot
@@ -1,12 +1,12 @@
 <modal>
   <div class="modal animated faster { state.animation }">
-    <div class="modal-title">{ props.title }</div>
+    <h2 class="modal-title">{ props.title }</h2>
 
-    <div class="modal-body">  
+    <div class="modal-body">
       <slot />
     </div>
   </div>
-  
+
   <script>
     export default {
       state: {
@@ -25,13 +25,29 @@
       },
     }
   </script>
-  
-  
+
+
   <style>
+    :host {
+      font-family: Helvetica Neue, Helvetica, Arial, serif;
+      position: absolute;
+      display: block;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    h2 {
+      margin: 0;
+      font-size: 1.2rem;
+    }
+
     .modal {
-      padding: 16px;
-      background: #fafafa;
-      border: 1px solid #333;
+      padding: 24px;
+      background: #e3f5ff;
+      border: 4px solid #ffffff;
+      border-radius: 4px;
+      box-shadow: 0 0 4px rgba(0 0 0 / 0.2);
     }
   </style>
 </modal>
diff --git a/plunker/index.html b/plunker/index.html
@@ -13,7 +13,7 @@
     <script type="riot" src="app.riot"></script>
 
     <!-- scripts we need -->
-    <script src="https://unpkg.com/riot@7/riot+compiler.min.js"></script>
+    <script src="https://unpkg.com/riot@9/riot+compiler.min.js"></script>
 
     <!-- mount this app -->
     <script>

diff --git a/router-complex/index.html b/router-complex/index.html
@@ -15,7 +15,7 @@
     <script type="riot" src="app.riot"></script>
 
     <!-- scripts we need -->
-    <script src="https://unpkg.com/riot@7/riot+compiler.min.js"></script>
+    <script src="https://unpkg.com/riot@9/riot+compiler.min.js"></script>
     <script src="https://unpkg.com/@riotjs/route/route.js"></script>
 
     <!-- mount this app -->

diff --git a/router-history-api/index.html b/router-history-api/index.html
@@ -13,7 +13,7 @@
     <script type="riot" src="app.riot"></script>
 
     <!-- scripts we need -->
-    <script src="https://unpkg.com/riot@7/riot+compiler.min.js"></script>
+    <script src="https://unpkg.com/riot@9/riot+compiler.min.js"></script>
     <script src="https://unpkg.com/@riotjs/route/route.js"></script>
 
     <!-- mount this app -->

diff --git a/router-page-switcher/index.html b/router-page-switcher/index.html
@@ -13,7 +13,7 @@
     <script type="riot" src="app.riot"></script>
 
     <!-- scripts we need -->
-    <script src="https://unpkg.com/riot@7/riot+compiler.min.js"></script>
+    <script src="https://unpkg.com/riot@9/riot+compiler.min.js"></script>
     <script src="https://unpkg.com/@riotjs/route/route.js"></script>
 
     <!-- mount this app -->

diff --git a/timer/index.html b/timer/index.html
@@ -14,7 +14,7 @@
     <script src="timer.riot" type="riot"></script>
 
     <!-- scripts we need -->
-    <script src="https://unpkg.com/riot@7/riot+compiler.min.js"></script>
+    <script src="https://unpkg.com/riot@9/riot+compiler.min.js"></script>
 
     <!-- mount this app -->
     <script>

diff --git a/todo-app/index.html b/todo-app/index.html
@@ -12,7 +12,7 @@
     <todo></todo>
 
     <script src="todo.riot" type="riot"></script>
-    <script src="https://unpkg.com/riot@7/riot+compiler.min.js"></script>
+    <script src="https://unpkg.com/riot@9/riot+compiler.min.js"></script>
 
     <script>
       riot.compile().then(() => {