Adrien/beau-gosse-du-92
1
0
Fork 0
Code Issues 2 Pull Requests 1 Packages Projects Releases Wiki Activity

♻️ Use of the SCSS variables to compute the width of the inner panels

Browse Source
This commit is contained in:
Adrien
2024-06-08 13:04:17 +02:00
parent 1ad4d444fb
commit d566a4927f
8 changed files with 132 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/ui/layouts/conversations.scss
View File

@@ -17,11 +17,13 @@
scroll-snap-align: start;
}
$inner-panel-height-ratio: 0.95;
.conversations-view {
$height: 100vh;
$width: 100vw;
$conversations-panel-height: calc($height * 0.95);
$conversations-panel-width: calc($conversations-panel-height * $panel-aspect-ratio);
$conversations-panel-height: calc($height * $inner-panel-height-ratio);
$conversations-panel-width: calc($conversations-panel-height * $aspect-ratio);
$gap: 1%;
$content-height: 95%;
$ratio: 2;
@@ -63,11 +65,11 @@
height: 100%;
// TODO: Is aspect-ratio the best criteria to defined that inner shall take all the available space ?
@media (max-aspect-ratio: $panel-aspect-ratio) {
@media (max-aspect-ratio: $aspect-ratio) {
width: 100%;
}
@media (min-aspect-ratio: $panel-aspect-ratio) {
aspect-ratio: $panel-aspect-ratio;
@media (min-aspect-ratio: $aspect-ratio) {
aspect-ratio: $aspect-ratio;
}
}
}
@@ -105,7 +107,7 @@
&__conversations-panel {
height: $content-height;
aspect-ratio: $panel-aspect-ratio;
aspect-ratio: $aspect-ratio;
}
&__conversation-panels {