style RoomDetail component
This commit is contained in:
parent
0dbf0ed844
commit
176c087599
3 changed files with 41 additions and 1 deletions
|
@ -1 +1,32 @@
|
||||||
@import '../../../../public/stylesheets/partials/mixins';
|
@import '../../../../public/stylesheets/partials/mixins';
|
||||||
|
@import '../../../../public/stylesheets/partials/variables';
|
||||||
|
|
||||||
|
div.RoomDetail {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: [left] 1fr [right];
|
||||||
|
grid-template-rows: [top] 1fr [middle] 9fr [bottom];
|
||||||
|
height: 20vh;
|
||||||
|
padding: 1vw;
|
||||||
|
width: 20vh;
|
||||||
|
|
||||||
|
div.RoomDetail__arrow {
|
||||||
|
border-top: map-get($colors, 'home') solid 2vh;
|
||||||
|
border-left: white solid 1.5vh;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.RoomDetail__data {
|
||||||
|
background-color: white;
|
||||||
|
height: 90%;
|
||||||
|
width: 100%;
|
||||||
|
padding: 1vh;
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: 2fr 3fr;
|
||||||
|
|
||||||
|
.RoomDetail__heading {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -46,6 +46,15 @@ code {
|
||||||
monospace;
|
monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 140%;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-size: 110%;
|
||||||
|
}
|
||||||
|
|
||||||
a:hover, a:active {
|
a:hover, a:active {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
|
@ -8,7 +8,7 @@ import Loading from '../../components/Display/Loading/Loading';
|
||||||
const Home = props => {
|
const Home = props => {
|
||||||
const state = props.state || {};
|
const state = props.state || {};
|
||||||
const dispatch = props.dispatch;
|
const dispatch = props.dispatch;
|
||||||
const [ roomDetail, setRoomDetail ] = useState(0);
|
const [ roomDetail, setRoomDetail ] = useState(1);
|
||||||
|
|
||||||
const showRoomDetail = id => roomDetail === id ? setRoomDetail(0) : setRoomDetail(id);
|
const showRoomDetail = id => roomDetail === id ? setRoomDetail(0) : setRoomDetail(id);
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue