From e5ef1f94a4b1446110d3c1db7a1c36d73cd461ce Mon Sep 17 00:00:00 2001
From: Lukas Heiligenbrunner <lukas.heiligenbrunner@gmail.com>
Date: Sun, 30 Aug 2020 22:01:54 +0000
Subject: [PATCH] non selectable text tags side by side load 16 videopreviews
 instead of 12 for huge monitor sizes

---
 src/App.js                                         | 2 +-
 src/App.module.css                                 | 4 ++++
 src/elements/Preview/Preview.module.css            | 2 --
 src/elements/Tag/Tag.module.css                    | 4 ++--
 src/elements/VideoContainer/VideoContainer.js      | 2 +-
 src/elements/VideoContainer/VideoContainer.test.js | 6 +++---
 6 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/App.js b/src/App.js
index fa8ecd6..17e3546 100644
--- a/src/App.js
+++ b/src/App.js
@@ -98,7 +98,7 @@ class App extends React.Component {
         // add the main theme to the page body
         document.body.className = themeStyle.backgroundcolor;
         return (
-            <div className="App">
+            <div className={style.app}>
                 <div className={[style.navcontainer, themeStyle.backgroundcolor, themeStyle.textcolor, themeStyle.hrcolor].join(' ')}>
                     <div className={style.navbrand}>{this.state.mediacentername}</div>
 
diff --git a/src/App.module.css b/src/App.module.css
index c4af91d..b3e63ec 100644
--- a/src/App.module.css
+++ b/src/App.module.css
@@ -1,3 +1,7 @@
+.app {
+    user-select: none;
+}
+
 .navitem {
     cursor: pointer;
     float: left;
diff --git a/src/elements/Preview/Preview.module.css b/src/elements/Preview/Preview.module.css
index 756327d..1fd5289 100644
--- a/src/elements/Preview/Preview.module.css
+++ b/src/elements/Preview/Preview.module.css
@@ -2,10 +2,8 @@
     font-size: smaller;
     font-weight: bold;
     height: 20px;
-    height: 20px;
     max-width: 266px;
     text-align: center;
-    text-align: center;
 }
 
 .previewpic {
diff --git a/src/elements/Tag/Tag.module.css b/src/elements/Tag/Tag.module.css
index e8ac9dc..4e5ef59 100644
--- a/src/elements/Tag/Tag.module.css
+++ b/src/elements/Tag/Tag.module.css
@@ -3,8 +3,8 @@
     border: none;
     border-radius: 10px;
     color: white;
-    display: block;
-    margin: 10px;
+    margin-left: 10px;
+    margin-top: 15px;
     /*font-weight: bold;*/
     padding: 5px 15px 5px 15px;
 }
diff --git a/src/elements/VideoContainer/VideoContainer.js b/src/elements/VideoContainer/VideoContainer.js
index 7c7ae96..73d9459 100644
--- a/src/elements/VideoContainer/VideoContainer.js
+++ b/src/elements/VideoContainer/VideoContainer.js
@@ -24,7 +24,7 @@ class VideoContainer extends React.Component {
     componentDidMount() {
         document.addEventListener('scroll', this.trackScrolling);
 
-        this.loadPreviewBlock(12);
+        this.loadPreviewBlock(16);
     }
 
     render() {
diff --git a/src/elements/VideoContainer/VideoContainer.test.js b/src/elements/VideoContainer/VideoContainer.test.js
index 885f31d..642e2e8 100644
--- a/src/elements/VideoContainer/VideoContainer.test.js
+++ b/src/elements/VideoContainer/VideoContainer.test.js
@@ -8,11 +8,11 @@ describe('<VideoContainer/>', function () {
         wrapper.unmount();
     });
 
-    it('inserts tiles correctly', () => {
+    it('inserts tiles correctly if enough available', () => {
         const wrapper = shallow(<VideoContainer data={[
-            {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}
+            {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}
         ]}/>);
-        expect(wrapper.find('Preview')).toHaveLength(12);
+        expect(wrapper.find('Preview')).toHaveLength(16);
     });
 
     it('inserts tiles correctly if not enough available', () => {