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)} ))} + + {nodes.length === 0 + ? Aucun résultat + : null} ); }; 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 */