Commit 5918fd13 authored by Hauk Olaussen's avatar Hauk Olaussen
Browse files

Merge branch "11-make-an-appropriate-design-for-the-webapp" into "master"

This finishes making themes and styling for the webpage. There are two themes to chose from, and the buttons are self explaining :)
The dropdown makes it easy to change between the different templates one have used.

Closes #5 #6 #11 #15
parent 8605c091
......@@ -28,7 +28,7 @@
<title>React App</title>
</head>
<body>
<body id="body">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
......
......@@ -32,8 +32,21 @@ header>h1 {
font-size: 5.05rem;
}
#lightfavouritebutton {
background: white;
select {
background-color: #602080;
color: white;
padding: 14px;
border: none;
cursor: pointer;
margin-top: 2%;
margin-bottom: 3%;
width: 20%;
font-size: 1.1rem;
}
.select-container {
justify-content: center;
width: 100%;
}
h2 {
......@@ -66,6 +79,8 @@ button {
margin-bottom: 3%;
padding: 1%;
width: 20%;
cursor: pointer;
font-size: 1.3rem;
}
button:hover {
......@@ -185,7 +200,7 @@ canvas {
/*Example width: ipad 768 width*/
@media only screen and (max-width: 770px) and (min-width: 550px) {
@media only screen and (max-width: 800px) and (min-width: 550px) {
html {
height: 100vh;
width: 100vw;
......@@ -197,8 +212,14 @@ canvas {
width: 100vw;
height: 100vh;
}
.select-container {
width: 50%;
}
#sessiondropdown {
width: 100%;
}
button {
transition: 0.5s ease-in-out;
transition: 0.3s ease-in-out;
width: 100%;
border-radius: 12px;
}
......@@ -240,7 +261,7 @@ canvas {
}
}
@media only screen and (max-width: 500px) {
@media only screen and (max-width: 550px) {
html {
height: 100vh;
width: 100vw;
......@@ -252,8 +273,14 @@ canvas {
width: 100vw;
height: 100vh;
}
.select-container {
width: 50%;
}
#sessiondropdown {
width: auto;
}
button {
transition: 0.5s ease-in-out;
transition: 0.3s ease-in-out;
width: 100%;
border-radius: 12px;
}
......@@ -276,6 +303,8 @@ canvas {
#lines {
margin-top: 5%;
width: unset;
margin-right: 10%;
margin-left: 10%;
}
canvas {
width: 100%;
......@@ -296,4 +325,40 @@ canvas {
line-height: 1.2;
font-size: 1.3rem;
}
}
/* Light theme */
.light-theme-body {
background-color: #d3d3d3;
color: #000000;
}
.light-theme-header {
background-color: #c0c0c0;
}
.light-theme-button {
background: #ebebeb;
color: #000000;
border: 1px solid black;
}
.light-theme-button:hover {
background-color: #829cd0;
}
.light-theme-wrapper {
background-color: #c0c0c0;
color: #000000;
}
.light-theme-canvas {
border: 7px double #3d3d3d;
}
.light-theme-dropdown {
color: black;
background: #ebebeb;
}
\ No newline at end of file
......@@ -60,6 +60,9 @@ const App: React.FC = () => {
const [errorDisplay, setErrorDisplay] = useState<boolean>(false);
const [sessionStack, setSessionStack] = useState<SessionConfig[]>([]);
// Setting the theme of the body
document.getElementById("body")!.className = theme === Theme.DARK ? " " : "light-theme-body";
/**
* Calls the loadPoetry method one time when the page is loaded.
*/
......@@ -255,22 +258,11 @@ const App: React.FC = () => {
return (
<>
<Header />
<select
id="sessiondropdown"
onChange={(e) => {
loadSession(e.target.selectedIndex);
}}
<Header theme={theme}/>
<div
id="wrapperdiv"
className={theme === Theme.DARK ? " " : "light-theme-wrapper"}
>
{sessionStack !== undefined
? sessionStack.map((e: SessionConfig) => (
<option key={sessionStack.indexOf(e)}>
{"Template: " + Number(sessionStack.indexOf(e) + 1)}
</option>
))
: null}
</select>
<div id="wrapperdiv">
{loading && (
<div>
<div className="lds-ring">
......@@ -287,9 +279,32 @@ const App: React.FC = () => {
<div>
{!loading && installation !== undefined && (
<div>
<div id="select-container">
<select
id="sessiondropdown"
className={
theme === Theme.DARK ? " " : "light-theme-dropdown"
}
onChange={(e) => {
loadSession(e.target.selectedIndex);
}}
>
{sessionStack !== undefined
? sessionStack.map((e: SessionConfig) => (
<option key={sessionStack.indexOf(e)}>
{"Template: " + Number(sessionStack.indexOf(e) + 1)}
</option>
))
: null}
</select>
</div>
<div className="buttons">
<button
className="navigation"
className={
theme === Theme.DARK
? " "
: "navigation light-theme-button"
}
onClick={() => {
changePoetry(false);
}}
......@@ -298,16 +313,23 @@ const App: React.FC = () => {
</button>
<button
id="themebutton"
className={
theme === Theme.DARK ? " " : "light-theme-button"
}
onClick={() => {
changeTheme(
theme === Theme.DARK ? Theme.LIGHT : Theme.DARK
);
}}
>
{theme === 0 ? "Theme 1" : "Theme 2"}
{theme === Theme.DARK ? "Theme 1" : "Theme 2"}
</button>
<button
className="navigation"
className={
theme === Theme.DARK
? " "
: "navigation light-theme-button"
}
onClick={() => {
changePoetry(true);
}}
......@@ -315,6 +337,9 @@ const App: React.FC = () => {
Next poetry
</button>
<button
className={
theme === Theme.DARK ? " " : "light-theme-button"
}
onClick={() => {
changeFont(
font === Font.ESTEBAN ? Font.LOBSTER : Font.ESTEBAN,
......
import React, { Component } from "react";
import { Theme } from "../utils/Enums";
// Displays usage of the context api
const AudioPlayerContext: React.Context<AudioPlayerState> = React.createContext<
......@@ -63,7 +64,10 @@ class AudioPlayer extends Component<AudioPlayerProps, AudioPlayerState> {
render() {
return (
<AudioPlayerContext.Provider value={{ ...this.state }}>
<button onClick={this.mute}>
<button
onClick={this.mute}
className={this.props.theme === Theme.DARK ? " " : "light-theme-button"}
>
{this.state.muted ? "Unmute" : "Mute"}
</button>
</AudioPlayerContext.Provider>
......
import React, { useEffect } from "react";
import { Color } from "../utils/Enums";
import { Color, Theme } from "../utils/Enums";
import AudioPlayer from "./AudioPlayer";
/**
......@@ -34,7 +34,7 @@ const Exhibition: React.FC<Installation> = ({
return (
<div>
<AudioPlayer source={audiosource} currentIndex={currentIndex} />
<AudioPlayer source={audiosource} currentIndex={currentIndex} theme={theme} />
<h2>
[{currentIndex}] {title}
</h2>
......@@ -43,7 +43,7 @@ const Exhibition: React.FC<Installation> = ({
</h3>
<div className="buttons2">
<button
id={theme === 0 ? "favouritebutton" : "lightfavouritebutton"}
className={theme === Theme.DARK ? " " : "light-theme-button"}
onClick={() => {
toggleFavourite(currentIndex - 1);
}}
......
import React, { Component } from "react";
import { Theme } from "../utils/Enums";
export class Header extends Component {
export class Header extends Component<{theme: Theme}, {}> {
render() {
return (
<header>
<header className={this.props.theme === Theme.DARK ? " " : "light-theme-header"}>
<h1>The Art of Seduction</h1>
</header>
);
......
......@@ -33,6 +33,7 @@ type SessionConfig = {
type AudioPlayerProps = {
source: HTMLAudioElement;
currentIndex: number;
theme: Theme;
};
type Box = {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment