Matrix/element-call-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-call.git synced 2026-03-31 07:00:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add indicators to spotlight tile and make spotlight layout responsive

Browse Source
This commit is contained in:
Robin
2024-05-30 13:06:24 -04:00
parent 54c22f4ab2
commit ec1b020d4e
11 changed files with 495 additions and 356 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/grid/SpotlightLayout.module.css
View File

@@ -14,18 +14,20 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.fixed,
.scrolling {
.layer {
margin-inline: var(--inline-content-inset);
display: grid;
--grid-slot-width: 180px;
--grid-gap: 20px;
gap: 30px;
}
.layer[data-orientation="landscape"] {
--grid-slot-width: 180px;
grid-template-columns: 1fr calc(
var(--grid-columns) * var(--grid-slot-width) + (var(--grid-columns) - 1) *
var(--grid-gap)
);
grid-template-rows: minmax(1fr, auto);
gap: 30px;
}
.scrolling {
@@ -41,7 +43,7 @@ limitations under the License.
/* CSS makes us put a condition here, even though all we want to do is
unconditionally select the container so we can use cq units */
@container spotlight (width > 0) {
.spotlight > .slot {
.layer[data-orientation="landscape"] > .spotlight > .slot {
inline-size: min(100cqi, 100cqb * (17 / 9));
block-size: min(100cqb, 100cqi / (4 / 3));
}
@@ -52,38 +54,48 @@ unconditionally select the container so we can use cq units */
flex-wrap: wrap;
gap: var(--grid-gap);
justify-content: center;
}
.layer[data-orientation="landscape"] > .grid {
align-content: center;
}
.grid > .slot {
.layer > .grid > .slot {
inline-size: var(--grid-slot-width);
}
.layer[data-orientation="landscape"] > .grid > .slot {
block-size: 135px;
}
@media (max-width: 600px) {
.fixed,
.scrolling {
margin-inline: 0;
display: block;
}
.spotlight {
inline-size: 100%;
aspect-ratio: 16 / 9;
margin-block-end: var(--cpd-space-4x);
}
.grid {
margin-inline: var(--inline-content-inset);
align-content: start;
}
.grid > .slot {
--grid-columns: 2;
--grid-slot-width: calc(
(100% - (var(--grid-columns) - 1) * var(--grid-gap)) / var(--grid-columns)
);
block-size: unset;
aspect-ratio: 4 / 3;
}
.layer[data-orientation="portrait"] {
margin-inline: 0;
display: block;
}
.layer[data-orientation="portrait"] > .spotlight {
inline-size: 100%;
aspect-ratio: 16 / 9;
margin-block-end: var(--cpd-space-4x);
}
.layer[data-orientation="portrait"] > .spotlight.withIndicators {
margin-block-end: calc(2 * var(--cpd-space-4x) + 2px);
}
.layer[data-orientation="portrait"] > .spotlight > .slot {
inline-size: 100%;
block-size: 100%;
}
.layer[data-orientation="portrait"] > .grid {
margin-inline: var(--inline-content-inset);
align-content: start;
}
.layer[data-orientation="portrait"] > .grid > .slot {
--grid-slot-width: calc(
(100% - (var(--grid-columns) - 1) * var(--grid-gap)) / var(--grid-columns)
);
aspect-ratio: 4 / 3;
}