Commit 932dca1f authored by Turid Cecilie Dahl's avatar Turid Cecilie Dahl
Browse files

Merge remote-tracking branch 'origin/layout' into turid_sandbox

parents 80e386fa a3cf8e7c
[
{"id":1,
"text":"En mørbanket man ifra Voss \n Var stor i kjeften og begynte å sloss \n Han slo ut en tann \n Kun brød og vann \n Hans siste dag ble på Hønefoss",
"text":"En mørbanket man ifra Voss. Var stor i kjeften og begynte å sloss. Han slo ut en tann. Kun brød og vann. Hans siste dag ble på Hønefoss",
"author":"HG"
},
{"id":2,
"text":"Vi er alle røren i verdens vaffeljern \n Sakte druknende i samfunnets tjern \n Livet er dritt \n Lyden av kritt \n Frihet er kun en annen form for jern",
"text":"Vi er alle røren i verdens vaffeljern. Sakte druknende i samfunnets tjern. Livet er dritt. Lyden av kritt. Frihet er kun en annen form for jern",
"author":"HG"
},
{"id":3,
"text":"Tro, håp og bittelitt kjærlighet \n Er symboler på vår herres herlighet \n Gud er kun god \n Født i en bod \n Men er det egentlig noe vi vet?",
"text":"Tro, håp og bittelitt kjærlighet. Er symboler på vår herres herlighet. Gud er kun god. Født i en bod. Men er det egentlig noe vi vet?",
"author":"HG"
},
{"id":4,
"text":"En ung kvinne på nesten tretti \n Feiret sitt bryllup med konfetti \n Men ingen kom \n Kun lille Tom \n Til slutt ble det kun spaghetti",
"text":"En ung kvinne på nesten tretti. Feiret sitt bryllup med konfetti. Men ingen kom. Kun lille Tom. Til slutt ble det kun spaghetti",
"author":"HG"
}
]
......@@ -40,6 +40,10 @@ q{
text-align: center;
}
.activeDot{
background-color: rgba(100,100,100,0.8) !important;
}
.box{
margin: 1vw;
display: flex;
......@@ -203,8 +207,8 @@ q{
}
}
/* Small devices (portrait tablets and large phones, between 600px and 768px) */
@media only screen and (max-width: 768px) {
/* Small devices with portrait-orientation (portrait tablets and large phones, between 600px and 768px) */
@media only screen and (orientation: portrait) and (max-width: 768px) {
body{
overflow-y: unset;
}
......@@ -290,15 +294,15 @@ q{
}
}
/* Extra small devices (phones, between 410px and 600px) */
@media only screen and (max-width: 600px) {
/* Extra small devices with portrait-orientation (phones, between 410px and 600px) */
@media only screen and (orientation: portrait) and (max-width: 600px) {
button{
width: 25vw;
}
}
/* Even smaller devices (phones, 410px and down) */
@media only screen and (max-width: 410px) {
/* Even smaller devices with portrait-orientation (phones, 410px and down) */
@media only screen and (orientation: portrait) and (max-width: 410px) {
button{
font-size: 12px;
}
......@@ -321,8 +325,141 @@ q{
}
}
/* Medium devices (portrait tablets, between 600px and 900px in width and between 800px and 1300px in height) */
@media only screen and (orientation: portrait) and (min-width: 600px) and (min-height: 800px){
/* Small devices with landscape-orientation (small tablets and large phones, between 600px and 768px) */
@media only screen and (orientation: landscape) and (max-width: 768px) {
body{
overflow-y: unset;
}
button{
font-size: 13px;
width: 20vw;
margin-bottom: 1vw;
}
input[type=radio]{
width: 11px;
height: 11px;
margin-bottom: 1.5vw;
margin-top: 1.5vw;
}
.dot{
width: 23px;
height: 23px;
margin: 5px;
}
.header{
font-size: 26px;
}
.image{
width: 50vw;
height: auto;
max-height: 60vh;
margin-bottom: 43px;
}
.main{
width: 92vw;
margin-top: 0;
padding-top: 0;
padding-bottom: 0;
border: none;
border-top: solid;
}
.navDots{
width: 100vw;
justify-content: space-evenly;
}
.prevBtn, .nextBtn{
width: auto;
padding: 2vw 1.5vw;
}
.radio{
width: 28vw;
padding-right: 2vw;
}
.screenBox{
padding: 0;
}
.sidebar{
display: flex;
padding-top: 50px;
}
.sidebarButtons{
flex-direction: row;
justify-content: center;
}
.slideButtonContainer{
height: 50vh;
}
.sound{
width: 30vw;
margin-bottom: 43px;
}
.text{
width: 30vw;
font-size: 15px;
}
}
/* Extra small devices with landscape-orientation (phones, between 410px and 600px) */
@media only screen and (orientation: landscape) and (max-width: 600px) {
button{
width: 25vw;
}
}
/* Even smaller devices with landscape-orientation (phones, 410px and down) */
@media only screen and (orientation: landscape) and (max-width: 410px) {
button{
font-size: 10px;
}
.dot{
width: 13px;
height: 13px;
}
.header{
font-size: 15px;
}
.radio{
width: 30vw;
padding: 0;
}
.sidebar{
padding-top: 30px;
}
.sidebarCollection{
font-size: 11px;
}
.sound{
margin-bottom: 30px;
}
.text{
font-size: 12px;
}
}
/* Medium devices with portrait-orientation (portrait tablets, between 600px and 900px in width) */
@media only screen and (orientation: portrait) and (min-width: 600px){
body{
overflow-y: unset;
}
......@@ -413,7 +550,7 @@ q{
}
}
/* Medium devices (portrait tablets, 900px and up in width and 1300px and up in height) */
/* Larger devices with portrait-orientation (portrait tablets, 900px and up in width and 1300px and up in height) */
@media only screen and (orientation: portrait) and (min-width: 900px) and (min-height: 1300px){
button{
font-size: 27px;
......
import React from 'react';
import MiddlePart from './components/MiddlePart';
import Header from './components/header';
import Header from './components/Header';
import './App.css';
function App() {
......
[
{"id":1,
"text":"En mørbanket man ifra Voss \n Var stor i kjeften og begynte å sloss \n Han slo ut en tann \n Kun brød og vann \n Hans siste dag ble på Hønefoss",
"text":"En mørbanket man ifra Voss. Var stor i kjeften og begynte å sloss. Han slo ut en tann. Kun brød og vann. Hans siste dag ble på Hønefoss",
"author":"HG"
},
{"id":2,
"text":"Vi er alle røren i verdens vaffeljern \n Sakte druknende i samfunnets tjern \n Livet er dritt \n Lyden av kritt \n Frihet er kun en annen form for jern",
"text":"Vi er alle røren i verdens vaffeljern. Sakte druknende i samfunnets tjern. Livet er dritt. Lyden av kritt. Frihet er kun en annen form for jern",
"author":"HG"
},
{"id":3,
"text":"Tro, håp og bittelitt kjærlighet \n Er symboler på vår herres herlighet \n Gud er kun god \n Født i en bod \n Men er det egentlig noe vi vet?",
"text":"Tro, håp og bittelitt kjærlighet. Er symboler på vår herres herlighet. Gud er kun god. Født i en bod. Men er det egentlig noe vi vet?",
"author":"HG"
},
{"id":4,
"text":"En ung kvinne på nesten tretti \n Feiret sitt bryllup med konfetti \n Men ingen kom \n Kun lille Tom \n Til slutt ble det kun spaghetti",
"text":"En ung kvinne på nesten tretti. Feiret sitt bryllup med konfetti. Men ingen kom. Kun lille Tom. Til slutt ble det kun spaghetti",
"author":"HG"
}
]
......@@ -5,13 +5,22 @@ import NavigationDots from './NavigationDots';
Creates a footer with navigation-dots. Is used for small screens.
*/
class Footer extends Component {
/*
Calls the function toggleClasses in NavigationDots to update the dot-buttons.
*/
updateNavDots(){
this.refs.NavigationDots.toggleClasses();
}
render() {
return (
<div className="footer" id="footer">
<NavigationDots goToFirstSlide={this.props.goToFirstSlide}
goToSecondSlide={this.props.goToSecondSlide}
goToThirdSlide={this.props.goToThirdSlide}
goToFourthSlide={this.props.goToFourthSlide} />
<NavigationDots ref="NavigationDots"
currentIndex={this.props.currentIndex}
goToFirstSlide={this.props.goToFirstSlide}
goToSecondSlide={this.props.goToSecondSlide}
goToThirdSlide={this.props.goToThirdSlide}
goToFourthSlide={this.props.goToFourthSlide} />
</div>
)
}
......
import React from 'react';
function Header(){
return (
<div className="header" id="header">
Awesome art collections!
</div>
)
}
export default Header;
......@@ -5,6 +5,7 @@ import Viewport from './Viewport';
import NavigationDots from './NavigationDots';
import Sidebar from './Sidebar';
import Footer from './Footer';
import SmallLandscapeBox from './SmallLandscapeBox';
class MiddlePart extends React.Component{
......@@ -65,12 +66,18 @@ class MiddlePart extends React.Component{
changeContent = () => {
let width = window.innerWidth;
let height = window.innerHeight;
if (width < 768 || (width < height)) {
if (width < 768 && (width > height)) {
this.refs.SmallLandscapeBox.changeContentPB();
this.refs.Footer.updateNavDots();
}
else if (width < 768 || (width < height)) {
this.refs.SmallScreenBox.changeContentPB();
this.refs.Footer.updateNavDots();
}
else{
this.refs.LargeScreenBox.changeContentPB();
this.refs.NavigationDots.toggleClasses();
}
}
......@@ -182,9 +189,40 @@ class MiddlePart extends React.Component{
let width = window.innerWidth;
let height = window.innerHeight;
/*
Either shows layout for smaller or larger screens based on width of window on screen.
Either shows layout for smaller or larger screens based on width of window on screen and orientation.
*/
if (width < 768 || (width < height)) {
if (width < 768 && (width > height)) {
return (
<div>
<Sidebar soundIndex={this.state.soundIndex}
imageIndex={this.state.imageIndex}
textIndex={this.state.textIndex}
handleOptionChangeSound={this.handleOptionChangeSound}
handleOptionChangeImage={this.handleOptionChangeImage}
handleOptionChangeText={this.handleOptionChangeText}
getSessionCheckedRadioButtons={this.getSessionCheckedRadioButtons}
handleGetFav={this.handleGetFav}
changeContent={this.changeContent}/>
<div className="container main">
<Viewport/>
<SmallLandscapeBox ref="SmallLandscapeBox"
currentIndex={this.state.currentIndex}
imageIndex={this.state.imageIndex}
soundIndex={this.state.soundIndex}
textIndex={this.state.textIndex}
goToPrevSlide={this.goToPrevSlide}
goToNextSlide={this.goToNextSlide}/>
</div>
<Footer ref="Footer"
currentIndex={this.state.currentIndex}
goToFirstSlide={this.goToFirstSlide}
goToSecondSlide={this.goToSecondSlide}
goToThirdSlide={this.goToThirdSlide}
goToFourthSlide={this.goToFourthSlide}/>
</div>
);
}
else if (width < 768 || (width < height)) {
return (
<div>
<Sidebar
......@@ -214,12 +252,14 @@ class MiddlePart extends React.Component{
goToPrevSlide={this.goToPrevSlide}
goToNextSlide={this.goToNextSlide}/>
</div>
<Footer goToFirstSlide={this.goToFirstSlide}
goToSecondSlide={this.goToSecondSlide}
goToThirdSlide={this.goToThirdSlide}
goToFourthSlide={this.goToFourthSlide}/>
<Footer ref="Footer"
currentIndex={this.state.currentIndex}
goToFirstSlide={this.goToFirstSlide}
goToSecondSlide={this.goToSecondSlide}
goToThirdSlide={this.goToThirdSlide}
goToFourthSlide={this.goToFourthSlide}/>
</div>
);
);
}
else{
return (
......@@ -235,7 +275,9 @@ class MiddlePart extends React.Component{
goToPrevSlide={this.goToPrevSlide}
goToNextSlide={this.goToNextSlide} />
</div>
<NavigationDots goToFirstSlide={this.goToFirstSlide}
<NavigationDots ref="NavigationDots"
currentIndex={this.state.currentIndex}
goToFirstSlide={this.goToFirstSlide}
goToSecondSlide={this.goToSecondSlide}
goToThirdSlide={this.goToThirdSlide}
goToFourthSlide={this.goToFourthSlide} />
......
import React from 'react';
function NavigationDots(props){
return (
<div className="navDots">
<button className = "dot" onClick={props.goToFirstSlide}></button>
<button className = "dot" onClick={props.goToSecondSlide}></button>
<button className = "dot" onClick={props.goToThirdSlide}></button>
<button className = "dot" onClick={props.goToFourthSlide}></button>
</div>
);
/*
Creates round buttons for navigating between the different compositions in a combination.
*/
class NavigationDots extends React.Component{
constructor(props){
super(props)
this.toggleClasses = this.toggleClasses.bind(this)
}
/*
Updates the classes of the dot-buttons.
*/
toggleClasses = () => {
for (let i=0; i<4; i++){
if (this.props.currentIndex===i){
document.getElementById('dot_'+i).classList += [" activeDot"]
}
else{
document.getElementById('dot_'+i).classList = ["dot"]
}
}
}
componentDidMount(){
this.toggleClasses()
}
render(){
return (
<div className="navDots">
<button id="dot_0" className = "dot" onClick={this.props.goToFirstSlide}></button>
<button id="dot_1" className = "dot" onClick={this.props.goToSecondSlide}></button>
<button id="dot_2" className = "dot" onClick={this.props.goToThirdSlide}></button>
<button id="dot_3" className = "dot" onClick={this.props.goToFourthSlide}></button>
</div>
);
}
}
export default NavigationDots;
......
import React from 'react';
import ImageBox from "./ImageBox";
import TextBox from './TextBox';
import SoundBox from "./SoundBox";
import NextButton from './NextButton';
import PrevButton from './PrevButton';
/*
Creates a component with layout of svg-image, text and audio for smaller screens in landsscape orientation.
*/
class SmallLandscapeBox extends React.Component{
/*
Updates the content in SoundBox, ImageBox and TextBox.
*/
changeContentPB = () => {
this.refs.SoundBox.changeSoundContentSB();
this.refs.ImageBox.getSVG();
this.refs.TextBox.getText();
}
render(){
let currentIndex = this.props.currentIndex;
let imageIndex = this.props.imageIndex;
let soundIndex = this.props.soundIndex;
let textIndex = this.props.textIndex;
return (
<div className="container">
<PrevButton goToPrevSlide={this.props.goToPrevSlide}/>
<ImageBox ref="ImageBox" currentIndex={currentIndex} imageIndex={imageIndex} />
<div className="col">
<TextBox ref="TextBox" currentIndex={currentIndex} textIndex={textIndex} />
<SoundBox ref="SoundBox" currentIndex={currentIndex} soundIndex={soundIndex} />
</div>
<NextButton goToNextSlide={this.props.goToNextSlide}/>
</div>
);
}
}
export default SmallLandscapeBox;
\ No newline at end of file
import React, {Component} from 'react';
class Header extends Component {
render() {
return (
<div className="header" id="header"
ref={a => this._acc = a} >
Awesome art collections!
</div>
)
}
}
export default Header;
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