feat(Beatmaps): Grid columns count depending on window width (#461)

src/App/modules/Beatmaps/index.js

@@ -39,10 +39,12 @@ const Beatmaps = ({ searchResults, classes, setHeaderContent, window }) => {
     lastSearch.current = search;
     if (gridContainer.current) gridContainer.current.childNodes[0].scrollTop = lastScrollPosition.current;
   }
-  const gridWidth = window.width - config.display.sidePanelCompactedLength - 1;
-  const gridHeight = window.height - 1;
+  const minItemWidth = 500;
+  const gridWidth = window.width - config.display.sidePanelCompactedLength;
+  const gridHeight = window.height;
   const displayGrid = gridWidth >= 1000;
-  const rowCount = (displayGrid ? Math.ceil(beatmaps.length / 2) : beatmaps.length) + 1; // Add one for the invisible top placeholder
+  const columnCount = Math.floor(window.width / minItemWidth);
+  const rowCount = (displayGrid ? Math.ceil(beatmaps.length / columnCount) : beatmaps.length) + 1; // Add one for the invisible top placeholder
   const canLoadMore = hideDownloaded ? !lastPage : beatmaps.length % 50 === 0;
   const onScroll = ({ scrollTop }) => {
     lastScrollPosition.current = scrollTop;
@@ -64,18 +66,16 @@ const Beatmaps = ({ searchResults, classes, setHeaderContent, window }) => {
     return () => setHeaderContent(null);
   }, [setHeaderContent, theme]);
 
-  useEffect(() => {
-    return () => saveLastScrollPosition(lastScrollPosition.current);
-  }, []);
+  useEffect(() => saveLastScrollPosition(lastScrollPosition.current), []);
 
-  const getColumnWidth = useCallback(() => (displayGrid ? gridWidth / 2 - 9 : gridWidth - 18), [
+  const getColumnWidth = useCallback(() => (displayGrid ? gridWidth / columnCount - 9 : gridWidth - 18), [
     displayGrid,
     gridWidth,
   ]);
 
   const renderBeatmaps = ({ columnIndex, rowIndex, style }) => {
     if (rowIndex === 0) return <div style={{ height: `${config.display.topBarHeight}px` }} />;
-    const beatmap = displayGrid ? beatmaps[rowIndex * 2 + columnIndex - 2] : beatmaps[rowIndex - 1];
+    const beatmap = displayGrid ? beatmaps[rowIndex * columnCount + columnIndex - columnCount] : beatmaps[rowIndex - 1];
     if (beatmap === 0) return <BeatmapSkeleton style={style} rowIndex={rowIndex} />;
     if (!beatmap) return <div style={style} className="NoBeatmap" />;
     return (
@@ -100,7 +100,7 @@ const Beatmaps = ({ searchResults, classes, setHeaderContent, window }) => {
       ref={gridContainer}
     >
       <VariableSizeGrid
-        columnCount={displayGrid ? 2 : 1}
+        columnCount={displayGrid ? columnCount : 1}
         columnWidth={getColumnWidth}
         estimatedColumnWidth={getColumnWidth()}
         estimatedRowHeight={250}
@@ -124,7 +124,4 @@ const mapStateToProps = ({ app, beatmaps }) => ({
   searchResults: beatmaps.searchResults,
   window: app.window,
 });
-export default compose(
-  connect(mapStateToProps),
-  injectSheet(styles),
-)(Beatmaps);
+export default compose(connect(mapStateToProps), injectSheet(styles))(Beatmaps);

src/App/modules/common/Badge.re

@@ -8,6 +8,7 @@ let makeBaseStyle = () =>
     padding3(~top=rem(0.1), ~h=rem(0.45), ~bottom=rem(0.2)),
     display(inlineFlex),
     alignItems(center),
+    whiteSpace(nowrap),
   ]);
 
 let makeStatusStyle = (status, difficulty) =>

src/App/modules/common/Beatmap/BeatmapDetails.jsx

@@ -60,6 +60,12 @@ const useStyle = createUseStyles({
     fontSize: 'medium',
     opacity: ({ noDiffSelectd }) => (noDiffSelectd ? 0 : 1),
   },
+  textElipsis: {
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    maxWidth: '100%',
+  },
   details: {
     display: 'inline-flex',
     alignItems: 'center',
@@ -132,7 +138,12 @@ const BeatmapDetails = ({ beatmapSet, cardRef }) => {
           difficulty={selectedDiff.difficulty}
           difficultyText={selectedDiff.difficulty && `☆ ${selectedDiff.difficulty}`}
         />
-        <p className={`${classes.versionTitle} ${classes.two}`}>{selectedDiff.version ?? 'Version'}</p>
+        <p
+          className={`${classes.versionTitle} ${classes.two} ${classes.textElipsis}`}
+          title={selectedDiff.version ?? 'Version'}
+        >
+          {selectedDiff.version ?? 'Version'}
+        </p>
         <p style={{ flexGrow: 1 }} />
 
         <p className={`${classes.details} ${classes.foor}`} title="Circle count">

src/App/modules/common/Beatmap/index.js

@@ -108,12 +108,14 @@ const Beatmap = ({ beatmap, noFade, autoDl, width, ...otherProps }) => {
             beatmapSet={beatmap}
             parentRef={ref}
           />
-          <div className="leftContainer" style={{ position: 'absolute', left: '2%', bottom: '3%' }}>
-            <p className={classes.Row}>
+          <div className="leftContainer" style={{ position: 'absolute', left: '2%', bottom: '3%', maxWidth: '25%' }}>
+            <p className={classes.Row} title={creator}>
               {renderIcons({ name: 'Creator', color: 'white' })}
-              <span style={{ marginLeft: '2px' }}>{creator}</span>
+              <span style={{ marginLeft: '2px' }} className={classes.TextElipsis}>
+                {creator}
+              </span>
             </p>
-            <p className={classes.Row} style={{ marginLeft: '-2px' }}>
+            <p className={classes.Row} style={{ marginLeft: '-2px' }} title={bpm}>
               {renderIcons({ name: 'Metronome', color: 'white' })}
               <span color="white" style={{ marginLeft: '3px' }}>
                 {bpm}