Matrix/element-call-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-call.git synced 2026-05-01 09:54:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move settings button out of the button bar.

Browse Source 
User overflow button instead: at the top for mobile, bottom left for
web.
This commit is contained in:
Timo K
2026-04-08 16:05:46 +02:00
parent efd1b42da0
commit cf642aa670
5 changed files with 89 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/room/InCallView.module.css
View File

@@ -36,13 +36,11 @@ Please see LICENSE in the repository root for full details.
inset-block-end: 0;
z-index: var(--call-view-header-footer-layer);
display: grid;
grid-template-columns:
minmax(0, var(--inline-content-inset))
1fr auto 1fr minmax(0, var(--inline-content-inset));
grid-template-areas: ". logo buttons layout .";
grid-template-columns: 1fr auto 1fr;
grid-template-areas: ". buttons layout";
align-items: center;
gap: var(--cpd-space-3x);
padding-block: var(--cpd-space-10x);
padding: var(--cpd-space-10x) var(--cpd-space-6x);
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0%,
@@ -73,8 +71,13 @@ Please see LICENSE in the repository root for full details.
pointer-events: initial;
}
.settingsLogoContainer {
display: flex;
gap: var(--cpd-space-4x);
flex-direction: row;
}
.logo {
grid-area: logo;
justify-self: start;
display: flex;
align-items: center;
@@ -94,12 +97,23 @@ Please see LICENSE in the repository root for full details.
justify-self: end;
}
/*First hide the logo*/
@media (max-width: 660px) {
.logo {
display: none;
}
}
/*
With the logo hidden >500px is enough space to show overflow, buttons, layout.
Once we exceed 500 we hide everything except the buttons.
*/
@media (max-width: 500px) {
.footer {
grid-template-areas: ". buttons buttons buttons .";
grid-template-areas: "buttons buttons buttons";
}
.logo {
.settingsLogoContainer {
display: none;
}