Graph de famille en frontend (#820)

* Remove graphviz and use cytoscape.js instead

* Frontend generated graphs
* Make installation easier and faster
* Better user experience
* Family api and improved interface
* Fix url history when using 0, improve button selection and reset reverse with reset button
* Use klay layout
* Add js translations and apply review comments
This commit is contained in:
Bartuccio Antoine
2024-09-17 12:10:06 +02:00
committed by GitHub
parent bf96d8a10c
commit f624b7c66d
29 changed files with 1332 additions and 684 deletions

View File

@ -1,3 +1,85 @@
.graph {
width: 100%;
height: 70vh;
display: block;
}
.graph-toolbar {
margin-top: 10px;
margin-bottom: 10px;
display: flex;
flex-direction: row;
justify-content: space-around;
gap: 30px;
.toolbar-column{
display: flex;
flex-direction: column;
gap: 20px;
min-width: 30%;
}
.toolbar-input {
display: flex;
flex-direction: row;
gap: 20px;
align-items: center;
width: 100%;
label {
max-width: 70%;
text-align: left;
margin-bottom: 0;
}
.depth-choice {
white-space: nowrap;
input[type="number"] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
&::-webkit-inner-spin-button,
&::-webkit-outer-spin-button {
-webkit-appearance: none;
}
}
button {
background: none;
& > .fa {
border-radius: 50%;
font-size: 12px;
padding: 5px;
}
&:enabled > .fa {
background-color: #354a5f;
color: white;
}
&:enabled:hover > .fa {
color: white;
background-color: #35405f; // just a bit darker
}
&:disabled > .fa {
background-color: gray;
color: white;
}
}
}
input {
align-self: center;
max-width: 40px;
}
}
@media screen and (max-width: 500px) {
flex-direction: column;
gap: 20px;
.toolbar-column {
min-width: 100%;
}
}
}
.container {
display: flex;
flex-direction: column;
@ -9,6 +91,14 @@
margin: 0;
}
}
#family-tree-link {
display: inline-block;
margin-top: 10px;
text-align: center;
@media (min-width: 450px) {
margin-right: auto;
}
}
.users {
display: flex;
@ -90,7 +180,7 @@
}
}
&:last-of-type {
&.delete {
margin-top: 10px;
display: block;
text-align: center;
@ -98,7 +188,7 @@
@media (max-width: 375px) {
position: absolute;
bottom: 0%;
bottom: 0;
right: 0;
}
}