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

only two style files

Browse Source
This commit is contained in:
Lukas Heiligenbrunner
2020-07-26 18:17:29 +02:00
parent a3b63618b4
commit aa741c5a90
11 changed files with 63 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/App.js
View File

@@ -83,21 +83,23 @@ class App extends React.Component {
render() {
const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme;
// add the main theme to the page body
document.body.className += ' ' + themeStyle.backgroundcolor;
return (
<div className="App">
<div className={[style.navcontainer, themeStyle.navcontainer].join(' ')}>
<div className={[style.navcontainer, themeStyle.backgroundcolor, themeStyle.textcolor, themeStyle.hrcolor].join(' ')}>
<div className={style.navbrand}>{this.state.mediacentername}</div>
<div className={[style.navitem, this.state.page === "default" ? style.navitemselected : {}].join(' ')}
<div className={[style.navitem, themeStyle.navitem, this.state.page === "default" ? style.navitemselected : {}].join(' ')}
onClick={() => this.setState({page: "default"})}>Home
</div>
<div className={[style.navitem, this.state.page === "random" ? style.navitemselected : {}].join(' ')}
<div className={[style.navitem, themeStyle.navitem, this.state.page === "random" ? style.navitemselected : {}].join(' ')}
onClick={() => this.setState({page: "random"})}>Random Video
</div>
<div className={[style.navitem, this.state.page === "categories" ? style.navitemselected : {}].join(' ')}
<div className={[style.navitem, themeStyle.navitem, this.state.page === "categories" ? style.navitemselected : {}].join(' ')}
onClick={() => this.setState({page: "categories"})}>Categories
</div>
<div className={[style.navitem, this.state.page === "settings" ? style.navitemselected : {}].join(' ')}
<div className={[style.navitem, themeStyle.navitem, this.state.page === "settings" ? style.navitemselected : {}].join(' ')}
onClick={() => this.setState({page: "settings"})}>Settings
</div>
</div>

11
src/App.module.css
View File

@@ -20,7 +20,6 @@
display: block;
width: 0;
height: 2px;
background: #FFF;
transition: width .3s;
}
@@ -29,14 +28,18 @@
}
.navitemselected{
.navitemselected {
opacity: 0.85;
}
.navcontainer {
padding-top: 20px;
width: 100%;
padding-bottom: 30px;
padding-bottom: 40px;
border-width: 0;
border-style: dotted;
border-bottom-width: 2px;
}
.navbrand {
@@ -45,7 +48,7 @@
font-size: large;
font-weight: bold;
text-transform: capitalize;
float:left;
float: left;
}

14
src/AppDarkTheme.module.css
View File

@@ -1,8 +1,20 @@
.navcontainer{
.backgroundcolor{
background-color: #141520;
}
.textcolor{
color: white;
}
.navitem::after {
background: white;
}
.hrcolor{
border-color: rgba(255,255,255,.1);
}
.previewhover:hover{
box-shadow: rgba(255, 255, 255, 0.7) 0 0 0 5px;
}

21
src/AppLightTheme.module.css
View File

@@ -1,8 +1,19 @@
.navcontainer{
background-color: white;
color: black;
}
.navitem::after {
background: black;
}
.backgroundcolor {
background-color: white;
}
.textcolor {
color: black;
}
.hrcolor {
border-color: rgba(0, 0, 0, 0.1);
}
.previewhover:hover{
box-shadow: rgba(2, 12, 27, 0.7) 0 0 0 5px;
}

15
src/elements/PageTitle/PageTitle.js
View File

@@ -1,7 +1,7 @@
import React from "react";
import style from "./PageTitle.module.css"
import darktheme from "./PageTitleDarkTheme.module.css"
import lighttheme from "./PageTitleLightTheme.module.css"
import darktheme from "../../AppDarkTheme.module.css"
import lighttheme from "../../AppLightTheme.module.css"
import StaticInfos from "../../GlobalInfos";
class PageTitle extends React.Component {
@@ -15,16 +15,15 @@ class PageTitle extends React.Component {
render() {
const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme;
return (
<div className={style.pageheader + ' ' + themeStyle.pageheader}>
<span className={style.pageheadertitle + ' ' + themeStyle.pageheadertitle}>{this.props.title}</span>
<span className={style.pageheadersubtitle}>{this.props.subtitle}</span>
<div className={style.pageheader + ' ' + themeStyle.backgroundcolor}>
<span className={style.pageheadertitle + ' ' + themeStyle.textcolor}>{this.props.title}</span>
<span className={style.pageheadersubtitle + ' ' + themeStyle.textcolor}>{this.props.subtitle}</span>
<>
{this.props.children}
</>
<hr/>
<hr className={themeStyle.hrcolor}/>
</div>
)
;
);
}
}

5
src/elements/PageTitle/PageTitle.module.css
View File

@@ -1,8 +1,5 @@
.pageheader {
margin-top: 20px;
margin-bottom: 20px;
padding-left: 22%;
padding-right: 12%;
padding: 20px 12% 20px 22%;
}
.pageheadertitle {

11
src/elements/PageTitle/PageTitleDarkTheme.module.css
View File

@@ -1,11 +0,0 @@
.pageheader {
background-color: #141520;
}
.pageheadertitle {
color:white;
}
.pageheadersubtitle {
color:white;
}

0
src/elements/PageTitle/PageTitleLightTheme.module.css
View File

6
src/elements/Preview/Preview.js
View File

@@ -2,6 +2,9 @@ import React from "react";
import style from "./Preview.module.css";
import Player from "../../pages/Player/Player";
import {Spinner} from "react-bootstrap";
import StaticInfos from "../../GlobalInfos";
import darktheme from "../../AppDarkTheme.module.css";
import lighttheme from "../../AppLightTheme.module.css";
class Preview extends React.Component {
constructor(props, context) {
@@ -33,8 +36,9 @@ class Preview extends React.Component {
}
render() {
const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme;
return (
<div className={style.videopreview} onClick={() => this.itemClick()}>
<div className={style.videopreview + ' ' + themeStyle.previewhover} onClick={() => this.itemClick()}>
<div className={style.previewtitle}>{this.state.name}</div>
<div className={style.previewpic}>
{this.state.previewpicture != null ?

2
src/elements/Preview/Preview.module.css
View File

@@ -45,7 +45,7 @@
.videopreview:hover {
opacity: 1;
box-shadow: rgba(2, 12, 27, 0.7) 0px 0px 0px 5px;
/*box-shadow: rgba(2, 12, 27, 0.7) 0 0 0 5px;*/
transition: all 300ms;
}

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

@@ -1,10 +1,14 @@
import React from "react";
import style from "./Player.module.css"
import darktheme from "../../AppDarkTheme.module.css"
import lighttheme from "../../AppLightTheme.module.css"
import {PlyrComponent} from 'plyr-react';
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";
import StaticInfos from "../../GlobalInfos";
class Player extends React.Component {
@@ -45,6 +49,7 @@ class Player extends React.Component {
}
render() {
const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme;
return (
<div id='videocontainer'>
<PageTitle
@@ -53,7 +58,7 @@ class Player extends React.Component {
<SideBar>
<SideBarTitle>Infos:</SideBarTitle>
<hr/>
<hr className={themeStyle.hrcolor}/>
<SideBarItem><b>{this.state.likes}</b> Likes!</SideBarItem>
{this.state.quality !== 0 ?
<SideBarItem><b>{this.state.quality}p</b> Quality!</SideBarItem> : null}