Skip to content
GitLab
Commit a3cf8e7c authored by mirree's avatar mirree
Browse files

Added new layout for smaller devices when landscape orientated

parent d21718fc
Hide whitespace changes
Inline Side-by-side
prosjekt2/src/App.css
View file @ a3cf8e7c
......@@ -207,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;
}
......@@ -294,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;
}
......@@ -325,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;
}
......@@ -417,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;
......
prosjekt2/src/components/MiddlePart.jsx
View file @ a3cf8e7c
......@@ -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{
......@@ -57,7 +58,11 @@ class MiddlePart extends React.Component{
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();
}
......@@ -162,9 +167,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 soundIndex={this.state.soundIndex}
......@@ -193,7 +229,7 @@ class MiddlePart extends React.Component{
goToThirdSlide={this.goToThirdSlide}
goToFourthSlide={this.goToFourthSlide}/>
</div>
);
);
}
else{
return (
......
prosjekt2/src/components/SmallLandscapeBox.jsx 0 → 100644
View file @ a3cf8e7c
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
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