mirror of
https://github.com/ae-utbm/sith.git
synced 2025-07-10 20:09:25 +00:00
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:
committed by
GitHub
parent
bf96d8a10c
commit
f624b7c66d
@ -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;
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user