CSS + Début organisation index.html

components/line-graph.riot

@@ -1,6 +1,6 @@
 <line-graph>
 
-    <div style="height: inherit;">
+    <div style="height: inherit; width: inherit; padding: inherit; margin: inherit;">
         <canvas style="height: 100%; width: 100%;">
         </canvas>
     </div>

components/school-info.riot

@@ -1,16 +1,24 @@
-<school-info style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: #000000DD;">
-    <div style="position: absolute; top: 10%; left: 25%; width: 50%; height: 80%; background: #FFFFFF">
-        <button onclick={closeWindow}></button>
+<school-info>
+    <div if={state.enabled} style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: #000000DD;">
+        <div style="position: absolute; top: 10%; left: 10%; width: 80%; height: 80%; background: #FFFFFF">
+            <button onclick={closeWindow}>X</button>
+            <p>
+                <h2></h2>
+            </p>
+            <line-graph style="height: 90px; margin: 10px;"></line-graph>
+        </div>
     </div>
 
     <script>
         export default {
             onMounted() {
-                console.log("Test!")
+                this.state.enabled = true
+                this.update()
             },
 
             closeWindow() {
-                
+                this.state.enabled = false
+                this.update()
             }
         }
     </script>

components/search.riot

@@ -1,16 +1,21 @@
 <search>
-    <label>
-	    <input onkeydown={searchF} type="input" placeholder= {state.placeholder}>
-        <button onclick={back}><</button>
+    <div class="box p-1 m-2">
+	    <div class="columns m-1">
+            <input onkeydown={searchF} class="input" type="input" placeholder={state.placeholder}>
+            <button class="button ml-1" onclick={back}>&lt;</button>
+        </div>
 		<div id="list-formations">
             <ul>
-	            <li each={item in this.state.items}>
-		           <span onclick={()=>filter(item.name)}>{item.name}</span>
-                   <span>{item.count}</span>
+	            <li class="m-1" each={item in this.state.items}>
+		            <button class="button is-fullwidth" onclick={()=>filter(item.name)}>
+                        <span><strong>{item.name}</strong></span>
+                        <div style="margin-left: auto;"></div>
+                        <span class="tag is-primary">{item.count}</span>
+                    </button>
 	            </li>
             </ul>
 		</div>
-    </label>
+    </div>
     <script>
         import PAPI from '../javascript/parcoursup-link.js'