lukas/OpenMediaCenter
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases Wiki Activity

moved all css files to module files to seperate into namespaces and prevent name overlaps

Browse Source
This commit is contained in:
Lukas Heiligenbrunner
2020-07-08 00:14:08 +02:00
parent afae31618c
commit 720c218a11
18 changed files with 72 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/pages/CategoryPage/CategoryPage.js
View File

@ -1,6 +1,7 @@
import React from "react";
import SideBar from "../../elements/SideBar/SideBar";
import SideBar, {SideBarTitle} from "../../elements/SideBar/SideBar";
import Tag from "../../elements/Tag/Tag";
import videocontainerstyle from "../../elements/VideoContainer/VideoContainer.module.css"
import {TagPreview} from "../../elements/Preview/Preview";
import NewTagPopup from "../../elements/NewTagPopup/NewTagPopup";
@ -34,7 +35,7 @@ class CategoryPage extends React.Component {
subtitle={!this.state.selected ? this.state.loadedtags.length + " different Tags" : this.state.selected}/>
<SideBar>
<div className='sidebartitle'>Default Tags:</div>
<SideBarTitle>Default Tags:</SideBarTitle>
<Tag viewbinding={{
changeRootElement: (e) => {
this.loadTag(e.props.category)
@ -72,7 +73,7 @@ class CategoryPage extends React.Component {
onClick={this.loadCategoryPageDefault}>Back
</button>
</> :
<div className='maincontent'>
<div className={videocontainerstyle.maincontent}>
{this.state.loadedtags ?
this.state.loadedtags.map((m) => (
<TagPreview

26
src/pages/HomePage/HomePage.js
View File

@ -1,9 +1,9 @@
import React from "react";
import SideBar from "../../elements/SideBar/SideBar";
import SideBar, {SideBarTitle, SideBarItem} from "../../elements/SideBar/SideBar";
import Tag from "../../elements/Tag/Tag";
import VideoContainer from "../../elements/VideoContainer/VideoContainer";
import "./HomePage.css"
import style from "./HomePage.module.css"
import PageTitle from "../../elements/PageTitle/PageTitle";
class HomePage extends React.Component {
@ -120,11 +120,11 @@ class HomePage extends React.Component {
render() {
return (
<div>
<>
<PageTitle
title='Home Page'
subtitle={this.state.tag + " Videos - " + this.state.selectionnr}>
<form className="form-inline searchform" onSubmit={(e) => {
<form className={"form-inline " + style.searchform} onSubmit={(e) => {
e.preventDefault();
this.searchVideos(this.keyword);
}}>
@ -137,15 +137,15 @@ class HomePage extends React.Component {
</form>
</PageTitle>
<SideBar>
<div className='sidebartitle'>Infos:</div>
<SideBarTitle>Infos:</SideBarTitle>
<hr/>
<div className='sidebarinfo'><b>{this.state.sideinfo.videonr}</b> Videos Total!</div>
<div className='sidebarinfo'><b>{this.state.sideinfo.fullhdvideonr}</b> FULL-HD Videos!</div>
<div className='sidebarinfo'><b>{this.state.sideinfo.hdvideonr}</b> HD Videos!</div>
<div className='sidebarinfo'><b>{this.state.sideinfo.sdvideonr}</b> SD Videos!</div>
<div className='sidebarinfo'><b>{this.state.sideinfo.tagnr}</b> different Tags!</div>
<SideBarItem><b>{this.state.sideinfo.videonr}</b> Videos Total!</SideBarItem>
<SideBarItem><b>{this.state.sideinfo.fullhdvideonr}</b> FULL-HD Videos!</SideBarItem>
<SideBarItem><b>{this.state.sideinfo.hdvideonr}</b> HD Videos!</SideBarItem>
<SideBarItem><b>{this.state.sideinfo.sdvideonr}</b> SD Videos!</SideBarItem>
<SideBarItem><b>{this.state.sideinfo.tagnr}</b> different Tags!</SideBarItem>
<hr/>
<div className='sidebartitle'>Default Tags:</div>
<SideBarTitle>Default Tags:</SideBarTitle>
<Tag viewbinding={this.props.viewbinding}>All</Tag>
<Tag viewbinding={this.props.viewbinding}>FullHd</Tag>
<Tag viewbinding={this.props.viewbinding}>LowQuality</Tag>
@ -156,11 +156,11 @@ class HomePage extends React.Component {
data={this.state.data}
viewbinding={this.props.viewbinding}/> :
<div>No Data found!</div>}
<div className='rightinfo'>
<div className={style.rightinfo}>
</div>
</div>
</>
);
}
}

5
src/pages/HomePage/HomePage.css → src/pages/HomePage/HomePage.module.css
View File

@ -1,8 +1,3 @@
.maincontent {
float: left;
width: 70%;
}
.rightinfo {
float: left;
width: 10%;

22
src/pages/Player/Player.js
View File

@ -1,7 +1,7 @@
import React from "react";
import "./Player.css"
import style from "./Player.module.css"
import {PlyrComponent} from 'plyr-react';
import SideBar from "../../elements/SideBar/SideBar";
import SideBar, {SideBarTitle, SideBarItem} from "../../elements/SideBar/SideBar";
import Tag from "../../elements/Tag/Tag";
import AddTagPopup from "../../elements/AddTagPopup/AddTagPopup";
import PageTitle from "../../elements/PageTitle/PageTitle";
@ -52,17 +52,15 @@ class Player extends React.Component {
subtitle={this.state.movie_name}/>
<SideBar>
<div className='sidebartitle'>Infos:</div>
<SideBarTitle>Infos:</SideBarTitle>
<hr/>
<div className='sidebarinfo'><b>{this.state.likes}</b> Likes!</div>
<SideBarItem><b>{this.state.likes}</b> Likes!</SideBarItem>
{this.state.quality !== 0 ?
<div className='sidebarinfo'><b>{this.state.quality}p</b> Quality!
</div> : null}
<SideBarItem><b>{this.state.quality}p</b> Quality!</SideBarItem> : null}
{this.state.length !== 0 ?
<div className='sidebarinfo'><b>{Math.round(this.state.length / 60)}</b> Minutes of length!
</div> : null}
<SideBarItem><b>{Math.round(this.state.length / 60)}</b> Minutes of length!</SideBarItem>: null}
<hr/>
<div className='sidebartitle'>Tags:</div>
<SideBarTitle>Tags:</SideBarTitle>
{this.state.tags.map((m) => (
<Tag
key={m.tag_name}
@ -70,14 +68,14 @@ class Player extends React.Component {
))}
</SideBar>
<div className="videowrapper">
<div className={style.videowrapper}>
{/* video component is added here */}
{this.state.sources ? <PlyrComponent
className='myvideo'
sources={this.state.sources}
options={this.options}/> :
<div>not loaded yet</div>}
<div className='videoactions'>
<div className={style.videoactions}>
<button className='btn btn-primary' onClick={() => this.likebtn()}>Like this Video!</button>
<button className='btn btn-info' onClick={() => this.setState({popupvisible: true})}>Give this
Video a Tag
@ -94,7 +92,7 @@ class Player extends React.Component {
</div>
</div>
<button className="closebutton" onClick={() => this.closebtn()}>Close</button>
<button className={style.closebutton} onClick={() => this.closebtn()}>Close</button>
</div>
);
}

11
src/pages/Player/Player.css → src/pages/Player/Player.module.css
View File

@ -8,17 +8,6 @@
margin-left: 25px;
}
.likefield {
margin-top: 15px;
margin-left: 15px;
margin-right: 15px;
height: 30px;
background-color: #9e5353;
border-radius: 10px;
text-align: center;
color: white;
}
.videowrapper {
margin-left: 20px;
display: block;

10
src/pages/RandomPage/RandomPage.js
View File

@ -1,7 +1,7 @@
import React from "react";
import Preview from "../../elements/Preview/Preview";
import "./RandomPage.css"
import SideBar from "../../elements/SideBar/SideBar";
import style from "./RandomPage.module.css"
import SideBar, {SideBarTitle} from "../../elements/SideBar/SideBar";
import Tag from "../../elements/Tag/Tag";
import PageTitle from "../../elements/PageTitle/PageTitle";
@ -27,7 +27,7 @@ class RandomPage extends React.Component {
subtitle='4pc'/>
<SideBar>
<div className='sidebartitle'>Visible Tags:</div>
<SideBarTitle>Visible Tags:</SideBarTitle>
{this.state.tags.map((m) => (
<Tag
key={m.tag_name}
@ -43,8 +43,8 @@ class RandomPage extends React.Component {
movie_id={elem.movie_id}
viewbinding={this.props.viewbinding}/>
))}
<div className='Shufflebutton'>
<button onClick={() => this.shuffleclick()} className='btnshuffle'>Shuffle</button>
<div className={style.Shufflebutton}>
<button onClick={() => this.shuffleclick()} className={style.btnshuffle}>Shuffle</button>
</div>
</div>
</div>

0
src/pages/RandomPage/RandomPage.css → src/pages/RandomPage/RandomPage.module.css
View File