gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix(css): react-layout and editor area

Browse Source
This commit is contained in:
Mrugesh Mohapatra
2016-07-30 01:04:40 +05:30
parent 421622dfc4
commit 3d8ec49520
8 changed files with 95 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
client/less/challenge.less
View File

@ -1,6 +1,10 @@
.challenges-editor { .challenges-instructions-panel {
height: 100%; clear: both;
width: 99%; overflow-x: hidden;
overflow-y: auto;
padding-left: 5px;
padding-right: 5px;
margin-bottom: 10px;
} }
.challenge-step-description { .challenge-step-description {
@ -135,38 +139,6 @@
color: @alert-info-bg; 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 { .night {
.challenge-instructions blockquote { .challenge-instructions blockquote {
background-color: #242424; 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;
}
}

16
client/less/drawers.less
View File

@ -44,6 +44,22 @@
width: 100%; width: 100%;
height: 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 { .drawer-content {

18
client/less/main.less
View File

@ -69,7 +69,11 @@ body.no-top-and-bottom-margins {
body.react-layout { body.react-layout {
margin-top: 75px; margin-top: 75px;
margin-bottom: 0px; margin-bottom: 15px;
width: auto;
padding-left: 15px;
padding-right: 15px;
min-height: 650px;
} }
h1, h2 { h1, h2 {
@ -906,18 +910,6 @@ code {
padding: 1px 5px; 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 // Calculator styles
.chart rect { .chart rect {

11
client/less/map.less
View File

@ -118,20 +118,11 @@
cursor: pointer; cursor: pointer;
} }
a { a > h3 {
margin:15px 0;
padding:0;
&:first-child {
margin-top:25px
}
> h3 {
padding-left: 40px; padding-left: 40px;
padding-bottom: 10px; padding-bottom: 10px;
display: block; display: block;
} }
}
.map-accordion-block { .map-accordion-block {
:before { :before {

2
client/sagas/execute-challenge-saga.js
View File

@ -136,7 +136,7 @@ export default function executeChallengeSaga(action$, getState) {
return Observable.combineLatest(head$, frameRunner$) return Observable.combineLatest(head$, frameRunner$)
.map(([ head, frameRunner ]) => { .map(([ head, frameRunner ]) => {
const body = ` const body = `
<body> <body style='margin:8px;'>
<!-- fcc-start-source --> <!-- fcc-start-source -->
${source} ${source}
<!-- fcc-end-source --> <!-- fcc-end-source -->

4
common/app/routes/challenges/components/classic/Classic.jsx
View File

@ -86,13 +86,13 @@ export class Challenge extends PureComponent {
return ( return (
<div> <div>
<Col <Col
lg={ 3 } lg={ showPreview ? 3 : 4 }
md={ showPreview ? 3 : 4 } md={ showPreview ? 3 : 4 }
> >
<SidePanel /> <SidePanel />
</Col> </Col>
<Col <Col
lg={ showPreview ? 6 : 9 } lg={ showPreview ? 6 : 8 }
md={ showPreview ? 5 : 8 } md={ showPreview ? 5 : 8 }
> >
<Editor <Editor

4
common/app/routes/challenges/components/classic/Preview.jsx
View File

@ -7,7 +7,9 @@ export default class extends PureComponent {
render() { render() {
return ( return (
<div> <div
className='challenges-preview'
>
<div className='hidden-xs hidden-md'> <div className='hidden-xs hidden-md'>
<img <img
className='iphone-position iframe-scroll' className='iphone-position iframe-scroll'

6
common/app/routes/challenges/components/classic/Side-Panel.jsx
View File

@ -108,15 +108,13 @@ export class SidePanel extends PureComponent {
toggleHelpChat, toggleHelpChat,
openBugModal openBugModal
} = this.props; } = this.props;
const style = { const style = {};
overflowX: 'hidden',
overflowY: 'auto'
};
if (height) { if (height) {
style.height = height + 'px'; style.height = height + 'px';
} }
return ( return (
<div <div
className='challenges-instructions-panel'
ref='panel' ref='panel'
style={ style } style={ style }
> >