From 0083383e90a1ec8f49ab835b15436a5bb62a09b7 Mon Sep 17 00:00:00 2001
From: Joni Laukka <joni.laukka.overflow@gmail.com>
Date: Tue, 16 Jul 2019 12:29:47 +0300
Subject: [PATCH] gamelist scroll
---
src/App.css | 6 +++++-
src/components/GameList.js | 25 +++++++++++++------------
2 files changed, 18 insertions(+), 13 deletions(-)
diff --git a/src/App.css b/src/App.css
index b3004ac..c22f442 100644
--- a/src/App.css
+++ b/src/App.css
@@ -212,8 +212,12 @@ div.login button:hover {
}
.gamelist {
+ border: 2px solid white;
+ max-width: 800px;
+}
+
+.gamelist-item {
background-color: #1d1d1b;
- max-width: 500px;
padding: 10px;
}
diff --git a/src/components/GameList.js b/src/components/GameList.js
index fcb3091..4796e8a 100644
--- a/src/components/GameList.js
+++ b/src/components/GameList.js
@@ -80,20 +80,21 @@ class GameList extends React.Component {
};
render() {
- let gamelistItems = this.props.games.map(game => {
- return (
- <GameCard
- key={game.id}
- gameId={game.id}
- onEditSave={this.props.onEditSave}
- />
- );
- });
+ let gamelistItems = this.props.games.map(game => (
+ <GameCard
+ key={game.id}
+ gameId={game.id}
+ onEditSave={this.props.onEditSave}
+ />
+ ));
return (
- <Fragment>
- <div className="gamelist">{gamelistItems}</div>
- </Fragment>
+ <div
+ className="gamelist"
+ style={{ maxHeight: "500px", overflow: "scroll" }}
+ >
+ <div className="gamelist-item">{gamelistItems}</div>
+ </div>
);
}
}
--
GitLab