vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-06 20:10:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

[UI] Made sidebar image just use flex (#1975)

Browse Source 
* made sidebar image just use flex

* force aspect ratio to be square

* prevent image container from expanding

---------

Co-authored-by: jeffvli <jeffvictorli@gmail.com>
This commit is contained in:
Pedro Daniel Reis
2026-05-01 20:32:18 +01:00
committed by GitHub
parent 01011a49a2
commit 304ce8b881
2 changed files with 3 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/features/sidebar/components/sidebar.module.css
+1 -2
View File
@@ -31,8 +31,7 @@
.image-container { .image-container {
position: relative; position: relative;
flex-shrink: 0; flex-shrink: 0;
width: var(--sidebar-image-height); min-height: 0;
height: var(--sidebar-image-height);
padding: var(--theme-spacing-md); padding: var(--theme-spacing-md);
cursor: pointer; cursor: pointer;
animation: fade-in 0.2s ease-in-out; animation: fade-in 0.2s ease-in-out;
src/renderer/features/sidebar/components/sidebar.tsx
+2 -7
View File
@@ -1,6 +1,6 @@
import clsx from 'clsx'; import clsx from 'clsx';
import { AnimatePresence, motion } from 'motion/react'; import { AnimatePresence, motion } from 'motion/react';
import { CSSProperties, MouseEvent, useMemo } from 'react'; import { MouseEvent, useMemo } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import styles from './sidebar.module.css'; import styles from './sidebar.module.css';
@@ -159,7 +159,6 @@ export const Sidebar = () => {
const SidebarImage = () => { const SidebarImage = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const leftWidth = useAppStore((state) => state.sidebar.leftWidth);
const { setSideBar } = useAppStoreActions(); const { setSideBar } = useAppStoreActions();
const currentSong = usePlayerSong(); const currentSong = usePlayerSong();
const isRadioActive = useIsRadioActive(); const isRadioActive = useIsRadioActive();
@@ -216,11 +215,7 @@ const SidebarImage = () => {
onClick={expandFullScreenPlayer} onClick={expandFullScreenPlayer}
onContextMenu={handleToggleContextMenu} onContextMenu={handleToggleContextMenu}
role="button" role="button"
style={ style={{ aspectRatio: 1 }}
{
'--sidebar-image-height': leftWidth,
} as CSSProperties
}
transition={{ duration: 0.3, ease: 'easeInOut' }} transition={{ duration: 0.3, ease: 'easeInOut' }}
> >
<Tooltip <Tooltip