Fix(css): react-layout and editor area
This commit is contained in:
Mrugesh Mohapatra
@ -1,6 +1,10 @@
|
||||
.challenges-editor {
|
||||
height: 100%;
|
||||
width: 99%;
|
||||
.challenges-instructions-panel {
|
||||
clear: both;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.challenge-step-description {
|
||||
@ -135,38 +139,6 @@
|
||||
color: @alert-info-bg;
|
||||
}
|
||||
|
||||
iframe.iphone {
|
||||
border: none;
|
||||
@media(min-width: 992px) {
|
||||
width: 280px;
|
||||
height: 500px;
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
right: 35px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
@media(max-width: 991px) {
|
||||
width: 100%;
|
||||
border-radius: 5px;
|
||||
overflow-y: visible;
|
||||
height: 500px;
|
||||
}
|
||||
@media (min-width: 1200px) and (max-width: 1250px){
|
||||
right: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
// To adjust right margin, negative values bring the image closer to the edge of the screen
|
||||
.iphone-position {
|
||||
position: absolute;
|
||||
top: -45px;
|
||||
z-index: -1;
|
||||
right: -195px;
|
||||
@media (min-width: 1200px) and (max-width: 1250px){
|
||||
right: -207px;
|
||||
}
|
||||
}
|
||||
|
||||
.night {
|
||||
.challenge-instructions blockquote {
|
||||
background-color: #242424;
|
||||
@ -191,3 +163,58 @@ iframe.iphone {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.challenges-editor {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.challenges-preview {
|
||||
clear: both;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 993px) {
|
||||
.iframe-scroll {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 992px) {
|
||||
.iframe-scroll {
|
||||
height: auto;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
iframe.iphone {
|
||||
border: none;
|
||||
@media(min-width: 992px) {
|
||||
width: 280px;
|
||||
height: 497px;
|
||||
position: absolute;
|
||||
top: 75px;
|
||||
right: 35px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
@media(max-width: 991px) {
|
||||
width: 100%;
|
||||
border-radius: 5px;
|
||||
overflow-y: visible;
|
||||
height: 500px;
|
||||
}
|
||||
@media (min-width: 1200px) and (max-width: 1250px){
|
||||
right: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
// To adjust right margin, negative values bring the image closer to the edge of the screen
|
||||
.iphone-position {
|
||||
position: absolute;
|
||||
top: -45px;
|
||||
z-index: -1;
|
||||
right: -195px;
|
||||
@media (min-width: 1200px) and (max-width: 1250px){
|
||||
right: -207px;
|
||||
}
|
||||
}
|
||||
@ -44,6 +44,22 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
h2 > a {
|
||||
font-size: 20px;
|
||||
}
|
||||
a > h3 {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
p {
|
||||
font-size: 16px;
|
||||
margin-left: 32px !important;
|
||||
}
|
||||
> .challenge-block-time {
|
||||
width: 100%;
|
||||
padding-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.drawer-content {
|
||||
|
||||
@ -69,7 +69,11 @@ body.no-top-and-bottom-margins {
|
||||
|
||||
body.react-layout {
|
||||
margin-top: 75px;
|
||||
margin-bottom: 0px;
|
||||
margin-bottom: 15px;
|
||||
width: auto;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
min-height: 650px;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
@ -906,18 +910,6 @@ code {
|
||||
padding: 1px 5px;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 993px) {
|
||||
.iframe-scroll {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 992px) {
|
||||
.iframe-scroll {
|
||||
height: auto;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Calculator styles
|
||||
|
||||
.chart rect {
|
||||
|
||||
@ -118,20 +118,11 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a {
|
||||
margin:15px 0;
|
||||
padding:0;
|
||||
|
||||
&:first-child {
|
||||
margin-top:25px
|
||||
}
|
||||
|
||||
> h3 {
|
||||
a > h3 {
|
||||
padding-left: 40px;
|
||||
padding-bottom: 10px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.map-accordion-block {
|
||||
:before {
|
||||
|
||||
@ -136,7 +136,7 @@ export default function executeChallengeSaga(action$, getState) {
|
||||
return Observable.combineLatest(head$, frameRunner$)
|
||||
.map(([ head, frameRunner ]) => {
|
||||
const body = `
|
||||
<body>
|
||||
<body style='margin:8px;'>
|
||||
<!-- fcc-start-source -->
|
||||
${source}
|
||||
<!-- fcc-end-source -->
|
||||
|
||||
@ -86,13 +86,13 @@ export class Challenge extends PureComponent {
|
||||
return (
|
||||
<div>
|
||||
<Col
|
||||
lg={ 3 }
|
||||
lg={ showPreview ? 3 : 4 }
|
||||
md={ showPreview ? 3 : 4 }
|
||||
>
|
||||
<SidePanel />
|
||||
</Col>
|
||||
<Col
|
||||
lg={ showPreview ? 6 : 9 }
|
||||
lg={ showPreview ? 6 : 8 }
|
||||
md={ showPreview ? 5 : 8 }
|
||||
>
|
||||
<Editor
|
||||
|
||||
@ -7,7 +7,9 @@ export default class extends PureComponent {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<div
|
||||
className='challenges-preview'
|
||||
>
|
||||
<div className='hidden-xs hidden-md'>
|
||||
<img
|
||||
className='iphone-position iframe-scroll'
|
||||
|
||||
@ -108,15 +108,13 @@ export class SidePanel extends PureComponent {
|
||||
toggleHelpChat,
|
||||
openBugModal
|
||||
} = this.props;
|
||||
const style = {
|
||||
overflowX: 'hidden',
|
||||
overflowY: 'auto'
|
||||
};
|
||||
const style = {};
|
||||
if (height) {
|
||||
style.height = height + 'px';
|
||||
}
|
||||
return (
|
||||
<div
|
||||
className='challenges-instructions-panel'
|
||||
ref='panel'
|
||||
style={ style }
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user