Commit bca0dd70 authored by Karl Petter Aubert's avatar Karl Petter Aubert

Improve responsiveness

parent 1eec7f0e
.cluster {
display: grid;
grid-template-columns: 1fr 5fr;
}
.chooser {
position: relative;
grid-column-start: 1;
grid-column-end: 1;
grid-row-start: 3;
grid-row-end: 5;
background-color: #f3f3f3;
}
.App{
display: grid;
background-color: white;
.artworkArea {
grid-column-start: 2;
grid-column-end: 2;
grid-row-start: 3;
grid-row-end: 5;
}
.cluster{
display: grid;
grid-template-columns: 1fr 5fr;
.artworkArea .theArtwork .theImage {
max-height: 100%;
}
.App-link {
color: #61dafb;
.artworkArea .theArtwork .text {
position: relative;
grid-row-start: 2;
grid-row-end: 5;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
.artworkArea .theArtwork .text pre {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.chooser{
grid-column-start: 1;
grid-column-end: 1;
grid-row-start: 3;
grid-row-end: 5;
background-color: #f3f3f3;
.title {
grid-column-start: 2;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 2;
}
.artworkArea{
grid-column-start: 2;
grid-column-end: 2;
grid-row-start: 3;
grid-row-end: 5;
@media screen and (max-width: 960px) {
.cluster {
grid-template-columns: 1fr;
grid-template-rows: auto auto;
}
.artworkArea {
grid-column-start: 1;
grid-column-end: 1;
grid-row-start: 1;
grid-row-end: 1;
}
.artworkArea .theArtwork {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto auto;
}
.artworkArea .theArtwork .tabs {
grid-column-start: 1;
grid-column-end: 1;
grid-row-start: 1;
grid-row-end: 1;
}
.artworkArea .theArtwork .theImage {
min-width: 100%;
grid-column-start: 1;
grid-column-end: 1;
grid-row-start: 2;
grid-row-end: 2;
}
.artworkArea .theArtwork .text {
margin-top: 3%;
grid-column-start: 1;
grid-column-end: 1;
grid-row-start: 3;
grid-row-end: 3;
}
.artworkArea .theArtwork .text pre {
position: relative;
left: 0;
top: 0;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
.artworkArea .theArtwork .audio {
grid-column-start: 1;
grid-column-end: 1;
grid-row-start: 4;
grid-row-end: 4;
padding: 2%;
}
.chooser {
grid-column-start: 1;
grid-column-end: 1;
grid-row-start: 2;
grid-row-end: 2;
}
}
.title{
grid-column-start: 2;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 2;
@media screen and (max-width: 480px) {
.cluster {
grid-template-columns: 1fr;
grid-template-rows: auto auto;
}
.artworkArea {
grid-column-start: 1;
grid-column-end: 1;
grid-row-start: 1;
grid-row-end: 1;
}
.artworkArea .theArtwork {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto auto;
}
.artworkArea .theArtwork .tabs {
grid-column-start: 1;
grid-column-end: 1;
grid-row-start: 1;
grid-row-end: 1;
}
.artworkArea .theArtwork .theImage {
grid-column-start: 1;
grid-column-end: 1;
grid-row-start: 2;
grid-row-end: 2;
}
.artworkArea .theArtwork .text {
margin-top: 3%;
grid-column-start: 1;
grid-column-end: 1;
grid-row-start: 3;
grid-row-end: 3;
}
.artworkArea .theArtwork .text pre {
position: relative;
left: 0;
top: 0;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
.artworkArea .theArtwork .audio {
grid-column-start: 1;
grid-column-end: 1;
grid-row-start: 4;
grid-row-end: 4;
padding: 2%;
}
.chooser {
grid-column-start: 1;
grid-column-end: 1;
grid-row-start: 2;
grid-row-end: 2;
}
}
......@@ -179,23 +179,18 @@ class App extends React.Component {
const sessionHistory = this.state.sessionHistory;
return (
<div className="App">
<header className="App-header">
<div className="title">
<Title title={this.getImageTitle()}/>
<div className="cluster">
<div className="chooser">
<DisplayChooser categorySelections={categorySelections} handler={this}/>
</div>
<div className="cluster">
<div className="chooser">
<DisplayChooser categorySelections={categorySelections} handler={this}/>
</div>
<div className="artworkArea">
<Artwork artwork={this.state.artwork}
handler={this}
categorySelections={categorySelections}/>
</div>
<div className="artworkArea">
<Artwork artwork={this.state.artwork}
handler={this}
categorySelections={categorySelections}/>
</div>
<FavoriteSection handler={this}/>
<SessionElement sessionHistory={sessionHistory} handler={this}/>
</header>
</div>
<FavoriteSection handler={this}/>
<SessionElement sessionHistory={sessionHistory} handler={this}/>
</div>
);
}
......
......@@ -3,6 +3,7 @@ import Text from "./Text"
import Image from "./Image"
import Audio from './Audio';
import Tabs from './Tabs';
import '../style/Artwork.css';
class Artwork extends React.Component {
constructor(props) {
......@@ -22,18 +23,18 @@ class Artwork extends React.Component {
const audioCat = this.props.categorySelections.audioCat;
return (
<div className="theArtwork">
<div className="tabs">
<Tabs artwork={artwork} onArtworkChange={this.handleArtworkChange}/>
</div>
<div className="text">
<Text artwork={artwork} cat={textCat} />
</div>
<div className="theImage">
<Image id="myImage" artwork={artwork} cat={imgCat} />
</div>
<div className="audio">
<Audio artwork={artwork} cat={audioCat} />
</div>
<div className="tabs">
<Tabs artwork={artwork} onArtworkChange={this.handleArtworkChange}/>
</div>
<div className="text">
<Text artwork={artwork} cat={textCat}/>
</div>
<div className="theImage">
<Image id="myImage" artwork={artwork} cat={imgCat}/>
</div>
<div className="audio">
<Audio artwork={artwork} cat={audioCat}/>
</div>
</div>
);
}
......
.Display-chooser {
display: inline-flex;
flex-direction: column;
display: grid;
padding-top: 40%;
width: 100%;
font-family: sans-serif;
}
@media screen and (max-width: 480px){
@media screen and (max-width: 960px) {
.Display-chooser {
flex-direction: row;
width: auto;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr;
padding: 5px;
}
}
@media screen and (max-width: 480px) {
.Display-chooser {
width: auto;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr;
padding: 5px;
}
}
\ No newline at end of file
.Button-container {
margin: 5px auto;
}
.Button-container button {
margin: 10px;
padding: 5px;
border-radius: 5px;
background: greenyellow;
border: 1px solid #333333;
transition: 0.5s ease;
font-size: 1rem;
background: white;
border: none;
box-shadow: 0 0 3px goldenrod;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.Button-container button:hover {
......
.Media-component {
margin: 5px;
width: 60%;
margin: 10px auto;
border-radius: 5px;
}
.Media-component h3 {
......
Markdown is supported
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