137 lines
2.8 KiB
SCSS
137 lines
2.8 KiB
SCSS
@import "../_base.scss";
|
|
@import "../components/_panel.scss";
|
|
|
|
.conversations-view-head {
|
|
height: 100%;
|
|
width: 1px;
|
|
|
|
flex-shrink: 0;
|
|
scroll-snap-align: end;
|
|
}
|
|
|
|
.conversations-view-tail {
|
|
height: 100%;
|
|
width: 1px;
|
|
|
|
flex-shrink: 0;
|
|
scroll-snap-align: start;
|
|
}
|
|
|
|
.conversations-view {
|
|
$height: 100vh;
|
|
$width: 100vw;
|
|
$conversations-panel-height: calc($height * 0.95);
|
|
$conversations-panel-width: calc($conversations-panel-height * $panel-aspect-ratio);
|
|
$gap: 1%;
|
|
$content-height: 95%;
|
|
$ratio: 2;
|
|
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
position: relative;
|
|
top: -100vh;
|
|
margin-bottom: -100vh;
|
|
|
|
&__small {
|
|
scroll-snap-type: x mandatory;
|
|
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: $gap;
|
|
|
|
justify-content: safe center;
|
|
align-items: safe center;
|
|
|
|
overflow-x: scroll;
|
|
|
|
&__conversations-panel {
|
|
height: $content-height;
|
|
width: 100%;
|
|
|
|
flex-shrink: 0;
|
|
scroll-snap-align: center;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
&__inner {
|
|
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) {
|
|
width: 100%;
|
|
}
|
|
@media (min-aspect-ratio: $panel-aspect-ratio) {
|
|
aspect-ratio: $panel-aspect-ratio;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__panel {
|
|
flex-shrink: 0;
|
|
|
|
height: $content-height;
|
|
width: 100%;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
scroll-snap-align: center;
|
|
|
|
&__inner {
|
|
height: 100%;
|
|
width: calc(100% - (2 * $gap));
|
|
}
|
|
}
|
|
}
|
|
|
|
&__big {
|
|
height: 100%;
|
|
width: 100%;
|
|
width: calc(100% - (2 * $gap));
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: safe center;
|
|
gap: $gap;
|
|
|
|
margin: 0 $gap;
|
|
|
|
&__conversations-panel {
|
|
height: $content-height;
|
|
aspect-ratio: $panel-aspect-ratio;
|
|
}
|
|
|
|
&__conversation-panels {
|
|
height: $content-height;
|
|
|
|
flex-grow: 1;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
overflow-x: scroll;
|
|
|
|
justify-content: safe center;
|
|
align-items: safe center;
|
|
scroll-snap-type: x mandatory;
|
|
|
|
gap: $gap;
|
|
|
|
&__panel {
|
|
flex-shrink: 0;
|
|
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
scroll-snap-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|