Tweak small screen scaling

This commit is contained in:
2022-01-04 15:39:29 +01:00
parent 542a1725a4
commit d4c935fd21
2 changed files with 31 additions and 23 deletions

View File

@ -142,6 +142,27 @@ pub fn view(model: &Model) -> Vec<Node<Msg>> {
],
div![
C![C.song_gizmos],
match &song.genre {
Some(genre) => div![
C![C.gizmo, C.note_icon, C.tooltip],
span![C![C.tooltiptext], genre],
],
None => empty![],
},
match &song.language {
Some(language) => div![
C![C.gizmo, C.flag_icon, C.tooltip],
span![C![C.tooltiptext], language],
],
None => empty![],
},
IF![song.video.is_some() => div![
C![C.gizmo, C.video_icon, C.tooltip],
span![
C![C.tooltiptext],
"Musikvideo",
],
]],
match (&song.duet_singer_1, &song.duet_singer_2) {
(Some(p1), Some(p2)) => div![
C![C.gizmo, C.duet_icon, C.tooltip],
@ -156,27 +177,6 @@ pub fn view(model: &Model) -> Vec<Node<Msg>> {
],
_ => empty![],
},
IF![song.video.is_some() => div![
C![C.gizmo, C.video_icon, C.tooltip],
span![
C![C.tooltiptext],
"Musikvideo",
],
]],
match &song.language {
Some(language) => div![
C![C.gizmo, C.flag_icon, C.tooltip],
span![C![C.tooltiptext], language],
],
None => empty![],
},
match &song.genre {
Some(genre) => div![
C![C.gizmo, C.note_icon, C.tooltip],
span![C![C.tooltiptext], genre],
],
None => empty![],
},
],
]
};

View File

@ -133,6 +133,7 @@ body {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
flex-basis: max-content;
margin: 1em;
}
@ -161,11 +162,18 @@ body {
.song_gizmos {
flex-grow: 0;
flex-shrink: 1;
padding-top: 1.5em;
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
padding-top: 1em;
padding-bottom: 1em;
padding-right: 0.5em;
}
.song_gizmos div {
margin-right: 1em;
margin: 0.5em;
}
.gizmo {