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

fix: improve challenge layout on mobile (#37029)

Browse Source
This commit is contained in:
Oliver Eyton-Williams
2019-10-07 16:39:54 +02:00
committed by mrugesh
parent a68345ae56
commit cd27e73917
3 changed files with 10 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/templates/Challenges/classic/MobileLayout.js
View File

@ -59,7 +59,7 @@ class MobileLayout extends Component {
id='challenge-page-tabs' id='challenge-page-tabs'
onSelect={moveToTab} onSelect={moveToTab}
> >
<TabPane eventKey={1} title='Instructions'> <TabPane eventKey={1} title='Info'>
{instructions} {instructions}
</TabPane> </TabPane>
<TabPane eventKey={2} title='Code' {...editorTabPaneProps}> <TabPane eventKey={2} title='Code' {...editorTabPaneProps}>

11
client/src/templates/Challenges/classic/classic.css
View File

@ -23,6 +23,8 @@
#challenge-page-tabs .nav-tabs > li > a { #challenge-page-tabs .nav-tabs > li > a {
padding: 5px 10px; padding: 5px 10px;
text-decoration: none;
font-size: 0.8em;
} }
#challenge-page-tabs .tab-content { #challenge-page-tabs .tab-content {
@ -34,9 +36,8 @@
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
} }
#challenge-page-tabs a {
text-decoration: none; #challenge-page-tabs .nav-tabs > li.active > a {
} color: var(--quaternary-color);
#challenge-page-tabs a:hover { background-color: var(--quaternary-background);
color: var(--secondary-background);
} }

4
client/src/templates/Challenges/components/tool-panel.css
View File

@ -5,7 +5,7 @@
.tool-panel-group-mobile button, .tool-panel-group-mobile button,
.tool-panel-group-mobile a { .tool-panel-group-mobile a {
font-size: 16px; font-size: 0.8rem;
} }
.tool-panel-group-mobile { .tool-panel-group-mobile {
@ -16,4 +16,6 @@
.tool-panel-group-mobile .btn-block + .btn-block { .tool-panel-group-mobile .btn-block + .btn-block {
margin: 0 2px 0 0; margin: 0 2px 0 0;
padding-left: 8px;
padding-right: 8px;
} }