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'
onSelect={moveToTab}
>
<TabPane eventKey={1} title='Instructions'>
<TabPane eventKey={1} title='Info'>
{instructions}
</TabPane>
<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 {
padding: 5px 10px;
text-decoration: none;
font-size: 0.8em;
}
#challenge-page-tabs .tab-content {
@ -34,9 +36,8 @@
height: 100%;
overflow: hidden;
}
#challenge-page-tabs a {
text-decoration: none;
}
#challenge-page-tabs a:hover {
color: var(--secondary-background);
#challenge-page-tabs .nav-tabs > li.active > a {
color: var(--quaternary-color);
background-color: var(--quaternary-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 a {
font-size: 16px;
font-size: 0.8rem;
}
.tool-panel-group-mobile {
@ -16,4 +16,6 @@
.tool-panel-group-mobile .btn-block + .btn-block {
margin: 0 2px 0 0;
padding-left: 8px;
padding-right: 8px;
}