Merge branch 'previewtilesize' into 'master'

fix videopreview tile sizing

See merge request lukas/openmediacenter!12

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>
 

src/App.module.css

@@ -1,3 +1,7 @@
+.app {
+    user-select: none;
+}
+
 .navitem {
     cursor: pointer;
     float: left;

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 {

src/elements/Tag/Tag.module.css

@@ -3,8 +3,8 @@
     border: none;
     border-radius: 10px;
     color: white;
-    display: block;
+    margin-left: 10px;
-    margin: 10px;
+    margin-top: 15px;
     /*font-weight: bold;*/
     padding: 5px 15px 5px 15px;
 }

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() {

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', () => {