pepepper/fluxer
1
0 Fork 0
mirror of https://github.com/fluxerapp/fluxer synced 2026-10-18 05:25:40 +09:00
Code Issues Packages Projects Releases Wiki Activity

fix(app): rework composer layout and footer alignment (#1591)

Browse Source
This commit is contained in:
Hampus authored and GitHub committed 2026-08-14 19:28:22 +02:00
1 parent d56c1e5674
commit 01432bc682
76 files changed
+8772 -8759
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

fluxer_app/src/features/app/components/layout/GuildsLayout.module.css
+7 -2
View File
@@ -19,7 +19,11 @@
}
.guildsLayoutReserveSpace {
--layout-user-area-overlay-height: calc(var(--layout-user-area-height) + var(--layout-voice-connection-height, 0px));
--layout-user-area-overlay-height: calc(
var(--layout-user-area-height) +
var(--user-area-box-inset-block-end) +
var(--layout-voice-connection-height, 0px)
);
}
.guildsLayoutReserveMobileBottomNav {
@@ -181,7 +185,8 @@
width: calc(var(--layout-guild-list-width) + var(--layout-sidebar-width) + 0.0625rem);
display: flex;
align-items: flex-end;
padding: 0;
padding: 0 var(--footer-box-inset-inline) var(--user-area-box-inset-block-end);
background-color: var(--background-secondary);
pointer-events: none;
z-index: var(--z-index-elevated-1);
}
fluxer_app/src/features/app/components/layout/OutlineFrame.module.css
+1 -1
View File
@@ -4,7 +4,7 @@
position: relative;
height: 100%;
width: 100%;
border: 0.0625rem solid var(--user-area-divider-color);
border: var(--outline-frame-border-width, 0.0625rem) solid var(--user-area-divider-color);
border-top: none;
border-top-left-radius: var(--outline-radius, 0px);
background: var(--background-secondary-lighter);
fluxer_app/src/features/app/components/layout/UserArea.module.css
+9 -18
View File
@@ -6,20 +6,19 @@
gap: 0;
width: 100%;
background-color: var(--panel-control-bg);
border-radius: var(--footer-box-radius);
box-shadow: inset 0 0 0 0.0625rem var(--floating-surface-ring-color);
overflow: hidden;
position: relative;
}
.separator {
height: 0.0625rem;
background-color: var(--user-area-divider-color);
}
.userAreaContainer {
display: flex;
align-items: center;
gap: var(--spacing-3);
margin: 0;
padding: var(--user-area-padding-y) var(--user-area-padding-x);
padding-block: var(--user-area-padding-y);
padding-inline: var(--user-area-avatar-lead) var(--user-area-padding-x);
box-sizing: border-box;
background-color: transparent;
width: 100%;
@@ -30,17 +29,8 @@
--popout-radius: 0.375rem;
}
.userAreaInnerWrapperHasVoiceConnection {
min-height: var(--layout-user-area-height);
}
.userAreaInnerWrapperHasVoiceConnection .userAreaContainer {
border-top: 0;
}
.voiceConnectionWrapper {
border-bottom: 0;
border-top: 0;
border-bottom: 0.0625rem solid var(--floating-surface-ring-color-strong);
}
.userInfo {
@@ -50,11 +40,12 @@
flex: 1;
min-width: 0;
cursor: pointer;
padding: 0 var(--spacing-2);
padding: 0;
margin: 0;
border-radius: var(--radius-md);
height: var(--user-area-content-height);
position: relative;
isolation: isolate;
transition: color var(--transition-normal);
outline: none;
}
@@ -98,7 +89,7 @@
.userStatus {
font-size: 0.6875rem;
line-height: 1rem;
line-height: 0.875rem;
color: color-mix(in srgb, var(--text-primary-muted) 85%, transparent);
font-weight: 500;
overflow: hidden;
fluxer_app/src/features/app/components/layout/UserArea.tsx
+2 -10
View File
@@ -200,10 +200,7 @@ const UserAreaInner = observer(
clearHeight();
};
}, [hasVoiceConnection]);
const wrapperClassName = clsx(
styles.userAreaInnerWrapper,
hasVoiceConnection && styles.userAreaInnerWrapperHasVoiceConnection,
);
const wrapperClassName = styles.userAreaInnerWrapper;
const pushToTalkCombo = Keybind.getByAction('voice_push_to_talk').combo;
const pushToTalkHint = formatKeyCombo(pushToTalkCombo);
const isPushToTalkEffective = Keybind.isPushToTalkEffective();
@@ -251,19 +248,14 @@ const UserAreaInner = observer(
>
{hasVoiceConnection && (
<div ref={voiceConnectionRef} data-flx="app.user-area.user-area-inner.div">
<div className={styles.separator} aria-hidden data-flx="app.user-area.user-area-inner.separator" />
<div
className={styles.voiceConnectionWrapper}
data-flx="app.user-area.user-area-inner.voice-connection-wrapper"
>
<VoiceConnectionStatus data-flx="app.user-area.user-area-inner.voice-connection-status" />
</div>
<div className={styles.separator} aria-hidden data-flx="app.user-area.user-area-inner.separator--2" />
</div>
)}
{!hasVoiceConnection && (
<div className={styles.separator} aria-hidden data-flx="app.user-area.user-area-inner.separator--3" />
)}
<div className={styles.userAreaContainer} data-flx="app.user-area.user-area-inner.user-area-container">
<Popout
data-flx="app.user-area.user-area-inner.popout"
@@ -283,7 +275,7 @@ const UserAreaInner = observer(
tabIndex={0}
data-flx="app.user-area.user-area-inner.user-info"
>
<StatusAwareAvatar user={user} size={36} data-flx="app.user-area.user-area-inner.status-aware-avatar" />
<StatusAwareAvatar user={user} size={32} data-flx="app.user-area.user-area-inner.status-aware-avatar" />
<div className={styles.userInfoText} data-flx="app.user-area.user-area-inner.user-info-text">
<div className={styles.userName} data-flx="app.user-area.user-area-inner.user-name">
{displayName}