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

Improved mobile layouts to map page

Browse Source 
Made adjustments to accomodate iphone

Made buttons responsive instead of hard coded widths

Ajusted media query widths

Changed order of buttons so input is on left

Added padding before collapse button when that row is collapsed

Map aside styled as originally was
This commit is contained in:
Daniel L. Weber
2016-06-17 16:11:30 -04:00
parent 25e6d4293b
commit b2f9c9f47c
1 changed files with 150 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

169
client/less/map.less
View File

@ -74,16 +74,33 @@
padding-top:30px;
}
p {
margin: 5px 0 20px;
margin: 5px 0 20px;
@media (max-width: 720px) {
margin-bottom:10px;
}
@media only screen and (min-width: 480px) and (max-width: 670px) {
margin-top: -30px;
margin-bottom: 10px;
font-size: 14px;
}
@media only screen and (min-width: 200px) and (max-width: 479px) {
margin-top: -30px;
margin-bottom: 10px;
font-size: 12px;
}
}
hr {
margin:30px 0;
@media (max-width: 720px) {
margin:25px 0;
}
@media only screen and (min-width: 480px) and (max-width: 670px) {
margin: 15px 0;
}
@media only screen and (min-width: 200px) and (max-width: 479px) {
margin: 10px 0;
}
}
.flashMessage {
position:fixed;
@ -145,25 +162,25 @@
#nested {
margin:0 10px;
@media (max-width: 400px) {
margin:0;
margin:0;
}
}
a:focus {
text-decoration: none;
color:darkgreen;
text-decoration: none;
color:darkgreen;
}
a:focus:hover {
text-decoration: underline;
color:#001800;
text-decoration: underline;
color:#001800;
}
h2 > a {
width:100%;
display:block;
background:#efefef;
padding:10px 0;
padding-left:50px;
padding-right:20px;
}
width:100%;
display:block;
background:#efefef;
padding:10px 0;
padding-left:50px;
padding-right:20px;
}
h3 {
margin:15px 0;
@ -194,20 +211,19 @@
}
.challengeBlockDescription {
margin:0;
margin-top:-10px;
padding:0 15px 23px 30px;
}
margin:0;
margin-top:-10px;
padding:0 15px 23px 30px;
}
span.no-link-underline {
position:absolute;
margin-left:-30px;
color: #666;
}
div > div:last-child {
margin-bottom:30px
}
}
}
.challengeBlockTime {
font-size: 18px;
@ -258,6 +274,81 @@
}
}
@media only screen and (min-width: 480px) and (max-width: 670px) {
.map-fixed-header {
.row.map-buttons {
width: 50%;
float: left;
padding-bottom: 10px;
margin-left: 0px;
margin-right: 0px;
button, button.map-buttons {
width: 100%;
}
.input-group {
margin-top: 0;
width: 100%;
}
}
.map-buttons:first-of-type {
float: right;
padding-left: 10px;
}
hr {
clear: both;
margin: 9px 0;
}
}
.map-accordion {
top: 136px;
h2 {
margin: 5px 0;
a {
font-size: 16px;
}
}
h3 > a {
font-size: 15px;
}
h3:first-child {
margin-top: 10px;
}
}
}
@media only screen and (min-width: 200px) and (max-width: 479px) {
.map-fixed-header {
.row.map-buttons {
width: 100%;
padding-bottom: 10px;
margin-left: 0px;
margin-right: 0px;
button, button.map-buttons {
width: 100%;
}
.input-group {
margin-top: 0;
width: 100%;
}
}
}
.map-accordion {
top: 172px;
h2 {
margin: 10px 0;
a {
font-size: 18px;
}
}
h3 > a {
font-size: 17px;
}
h3:first-child {
margin-top: 10px;
}
}
}
.map-aside-action-item {
display: -webkit-flex;
display: flex;
@ -316,6 +407,46 @@
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNzEuNDI5IDE3MS40MjkiIGZpbGw9IiMzYTMxMzMiPjxwYXRoIGQ9Ik0xMjIuNDMzLDEwNi4xMzhsLTE2LjI5NSwxNi4yOTVjLTAuNzQ0LDAuNzQ0LTEuNiwxLjExNi0yLjU2NiwxLjExNmMtMC45NjgsMC0xLjgyMy0wLjM3Mi0yLjU2Ny0xLjExNmwtMTUuMjktMTUuMjkgbC0xNS4yOSwxNS4yOWMtMC43NDQsMC43NDQtMS42LDEuMTE2LTIuNTY3LDEuMTE2cy0xLjgyMy0wLjM3Mi0yLjU2Ny0xLjExNmwtMTYuMjk0LTE2LjI5NWMtMC43NDQtMC43NDQtMS4xMTYtMS42LTEuMTE2LTIuNTY2IGMwLTAuOTY4LDAuMzcyLTEuODIzLDEuMTE2LTIuNTY3bDE1LjI5LTE1LjI5bC0xNS4yOS0xNS4yOWMtMC43NDQtMC43NDQtMS4xMTYtMS42LTEuMTE2LTIuNTY3czAuMzcyLTEuODIzLDEuMTE2LTIuNTY3IEw2NS4yOSw0OC45OTZjMC43NDQtMC43NDQsMS42LTEuMTE2LDIuNTY3LTEuMTE2czEuODIzLDAuMzcyLDIuNTY3LDEuMTE2bDE1LjI5LDE1LjI5bDE1LjI5LTE1LjI5IGMwLjc0NC0wLjc0NCwxLjYtMS4xMTYsMi41NjctMS4xMTZjMC45NjcsMCwxLjgyMiwwLjM3MiwyLjU2NiwxLjExNmwxNi4yOTUsMTYuMjk0YzAuNzQ0LDAuNzQ0LDEuMTE2LDEuNiwxLjExNiwyLjU2NyBzLTAuMzcyLDEuODIzLTEuMTE2LDIuNTY3bC0xNS4yOSwxNS4yOWwxNS4yOSwxNS4yOWMwLjc0NCwwLjc0NCwxLjExNiwxLjYsMS4xMTYsMi41NjcgQzEyMy41NDksMTA0LjUzOSwxMjMuMTc3LDEwNS4zOTQsMTIyLjQzMywxMDYuMTM4eiBNMTQ2LjQyOSw4NS43MTRjMC0xMS4wMTItMi43MTctMjEuMTY4LTguMTQ4LTMwLjQ2OSBzLTEyLjc5Ny0xNi42NjctMjIuMDk4LTIyLjA5OFM5Ni43MjYsMjUsODUuNzE0LDI1cy0yMS4xNjgsMi43MTYtMzAuNDY5LDguMTQ3UzM4LjU3OSw0NS45NDUsMzMuMTQ3LDU1LjI0NlMyNSw3NC43MDMsMjUsODUuNzE0IHMyLjcxNiwyMS4xNjgsOC4xNDcsMzAuNDY5czEyLjc5NywxNi42NjYsMjIuMDk4LDIyLjA5OHMxOS40NTcsOC4xNDgsMzAuNDY5LDguMTQ4czIxLjE2OC0yLjcxNywzMC40NjktOC4xNDggczE2LjY2Ni0xMi43OTcsMjIuMDk4LTIyLjA5OFMxNDYuNDI5LDk2LjcyNiwxNDYuNDI5LDg1LjcxNHogTTE3MS40MjksODUuNzE0YzAsMTUuNTUxLTMuODMyLDI5Ljg5My0xMS40OTYsNDMuMDI0IGMtNy42NjQsMTMuMTMzLTE4LjA2MiwyMy41My0zMS4xOTQsMzEuMTk0Yy0xMy4xMzIsNy42NjQtMjcuNDc0LDExLjQ5Ni00My4wMjQsMTEuNDk2cy0yOS44OTItMy44MzItNDMuMDI0LTExLjQ5NiBjLTEzLjEzMy03LjY2NC0yMy41MzEtMTguMDYyLTMxLjE5NC0zMS4xOTRDMy44MzIsMTE1LjYwNywwLDEwMS4yNjUsMCw4NS43MTRTMy44MzIsNTUuODIyLDExLjQ5Niw0Mi42OSBjNy42NjQtMTMuMTMzLDE4LjA2Mi0yMy41MzEsMzEuMTk0LTMxLjE5NEM1NS44MjIsMy44MzIsNzAuMTY0LDAsODUuNzE0LDBzMjkuODkzLDMuODMyLDQzLjAyNCwxMS40OTYgYzEzLjEzMyw3LjY2NCwyMy41MywxOC4wNjIsMzEuMTk0LDMxLjE5NEMxNjcuNTk3LDU1LjgyMiwxNzEuNDI5LDcwLjE2NCwxNzEuNDI5LDg1LjcxNHoiLz48L3N2Zz4=)
}
.map-aside-body {
.map-fixed-header {
p {
margin-top: 0;
font-size: 16px;
}
.row.map-buttons {
float: none;
width: 100%;
text-align: center;
button {
width: 300px;
}
.input-group {
width: 300px;
padding-top: 5px;
}
}
}
.map-buttons:first-of-type {
float: none;
padding-left: 0;
}
.map-accordion {
top: 180px;
h2 {
margin: 15px 0;
a {
padding: 10px 0;
padding-left: 50px;
padding-right: 20px;
font-size: 20px;
}
}
h3 > a {
font-size: 20px;
}
}
}
.night {
.map-fixed-header {
background-color: @night-body-bg;