From 2f5674284c045dce177bbf1e80bf9db7fdc9fd81 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matt=C3=A9o=20Delabre?= <contact@matteodelabre.me>
Date: Mon, 2 Dec 2019 00:19:07 -0500
Subject: [PATCH] =?UTF-8?q?app:=20Recherche=20=E2=A9=BE=201=20ligne=20&=20?=
 =?UTF-8?q?graphe=20vide?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/Graph.js    |  4 ++++
 app/style/style.css | 24 +++++++++++++++++++++---
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/app/src/Graph.js b/app/src/Graph.js
index 40b2def..1da434d 100644
--- a/app/src/Graph.js
+++ b/app/src/Graph.js
@@ -273,6 +273,10 @@ const Graph = ({nodes, edges, render}) =>
                     className="Graph_node"
                 >{render(id)}</span>
             ))}
+
+            {nodes.length === 0
+                ? <span className="Graph_empty">Aucun résultat</span>
+                : null}
         </div>
     );
 };
diff --git a/app/style/style.css b/app/style/style.css
index 020aca0..b840ded 100644
--- a/app/style/style.css
+++ b/app/style/style.css
@@ -81,6 +81,7 @@ input
 .TermInput
 {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
 
     border: 2px solid var(--color-dark);
@@ -102,12 +103,17 @@ input
 .TermInput_term
 {
     display: inline-block;
-    background: var(--color-secondary);
-    color: var(--color-light);
 
     border-radius: 2px;
     padding: calc(.25 * var(--base-size)) calc(.5 * var(--base-size));
-    margin-left: calc(.3 * var(--base-size));
+    margin:
+        calc(.25 * var(--base-size))
+        0
+        calc(.25 * var(--base-size))
+        calc(.25 * var(--base-size));
+
+    background: var(--color-secondary);
+    color: var(--color-light);
     cursor: pointer;
 
     transition: background var(--animation-short) var(--animation-ease-out);
@@ -164,6 +170,18 @@ input
     transform: translate(-50%, -50%);
 }
 
+.Graph_empty
+{
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+
+    font-size: var(--font-size-larger);
+    font-style: italic;
+    color: var(--color-dark-lighter);
+}
+
 /**
  * SearchResults
  */