Sith/core/static/user/user_godfathers.scss
Bartuccio Antoine f624b7c66d
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
2024-09-17 12:10:06 +02:00

201 lines
3.6 KiB
SCSS

.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;
gap: 10px;
padding: 10px;
box-sizing: border-box;
> form {
margin: 0;
}
}
#family-tree-link {
display: inline-block;
margin-top: 10px;
text-align: center;
@media (min-width: 450px) {
margin-right: auto;
}
}
.users {
display: flex;
flex-direction: row;
flex-wrap: wrap;
list-style-type: none;
margin: 0;
gap: 10px
}
.users-card {
display: flex;
flex-direction: column;
gap: 10px;
width: 150px;
padding: 10px;
background-color: rgba(0, 0, 0, .05);
border-radius: 10px;
@media (max-width: 375px) {
width: 100%;
}
> div.mini_profile_link {
position: relative;
> a {
&.mini_profile_link {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
@media (max-width: 375px) {
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
max-height: 65px;
}
> span {
height: 150px;
width: 100%;
@media (max-width: 375px) {
height: 80px;
width: 80px;
}
> img {
width: 100%;
max-width: 100%;
max-height: 100%;
height: auto;
object-fit: contain;
@media (max-width: 375px) {
max-width: 100%;
max-height: 65px;
}
}
}
> em {
box-sizing: border-box;
padding: 0 5px;
text-align: center;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
@media (max-width: 375px) {
margin-top: 10px;
text-align: left;
max-width: none;
width: 100%;
}
}
}
&.delete {
margin-top: 10px;
display: block;
text-align: center;
color: orangered;
@media (max-width: 375px) {
position: absolute;
bottom: 0;
right: 0;
}
}
}
}
> a.mini_profile_link {
display: none;
}
}