diff --git a/client/less/map.less b/client/less/map.less index 0dcef5c7c0..02e21d35e4 100644 --- a/client/less/map.less +++ b/client/less/map.less @@ -2,116 +2,6 @@ * based off of https://github.com/gitterHQ/sidecar * license: MIT */ - -.map-aside { - width:500px; - - z-index: 20000; - position: fixed; - top: 0; - bottom: 0; - right: 0; - - display: -webkit-flex; - display: flex; - -webkit-flex-direction: row; - flex-direction: row; - background-color: @body-bg; - border-left: 1px solid #ddd; - box-shadow: -12px 0 18px 0 rgba(50, 50, 50, 0.1); - - transition: transform 0.3s cubic-bezier(0.16, 0.22, 0.22, 1.7); - - &.is-collapsed:not(.is-loading) { - -webkit-transform: translateX(110%); - transform: translateX(110%); - } - - /* Add some "extension" so that there isn't a gap - * when we translate(via animation) more than 100% */ - &:after { - content: ''; - - z-index: -1; - position: absolute; - top: 0; - left: 100%; - bottom: 0; - right: -100%; - - background-color: @body-bg; - } - iframe { - width: 100%; - height: 100%; - } -} - -.map-aside-action-bar { - position: absolute; - top: 0; - right: 0; - - display: -webkit-flex; - display: flex; - justify-content: flex-end; - - padding-bottom: 5px; - padding-right:10px; - padding-top:5px; - z-index: 100; -} - -.map-fixed-header { - position: absolute; - background: white; - padding-top: 5px; - width: 100%; - z-index: 1; - left: 0; - top: 0; - @media (max-width: 720px) { - padding-top:30px; - } - p { - 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; - margin: 0 auto; - z-index: 2; - top: 160px; - left: 0px; - width: 100%; - } - } - .map-buttons { margin-top: -10px; & button, @@ -164,31 +54,44 @@ } +.drawer .map-fixed-header { + padding-top: 30px; +} + .map-accordion { width: 700px; - margin: 180px auto 0; - position: relative; + overflow-y: auto; + + .map-accordion-panel-title { + padding-bottom: 0px; + } .map-accordion-panel-collapse { transition: height 0.001s; } - .map-accordion-panel-nested { - margin: 0 20px; - @media (max-width: 400px) { - margin:0; - } - .map-accordion-panel-nested-body { - padding-left: 36px; - } - } - .map-accordion-panel-nested-collapse { transition: height 0.001s; } - .map-accordion-panel-title { - padding-bottom: 0px + .map-accordion-panel-nested { + margin: 0 20px; + } + + .map-accordion-panel-nested-body { + padding-left: 36px; + } + + @media (max-width: 400px) { + .map-accordion-panel-nested { + margin: 0; + } + .map-accordion-panel-nested-title { + padding-left: 9px; + } + .map-accordion-panel-nested-body { + padding-left: 18px; + } } a:focus { @@ -199,6 +102,7 @@ text-decoration: underline; color:#001800; } + h2 > a { width:100%; display:block; @@ -238,6 +142,40 @@ } } + @media (max-width: 720px) { + left: 0; + right: 0; + width: 100%; + top: 195px; + bottom: 0; + margin: 0; + // position:absolute; + overflow-x: hidden; + overflow-y: auto; + -webkit-overflow-scrolling: touch; + h2 { + margin:15px 0; + padding:0; + &:first-of-type { + margin-top:0; + } + > a { + padding: 10px 0; + padding-left: 50px; + padding-right: 20px; + font-size: 20px; + } + } + a { + margin: 10px 0; + padding: 0; + > h3 { + clear:both; + font-size:20px; + } + } + } + .challenge-block-description { margin:0; margin-top:-10px; @@ -245,7 +183,6 @@ } span.no-link-underline { - position:absolute; margin-left:-30px; color: #666; } @@ -253,6 +190,7 @@ margin-bottom:30px } } + .challenge-block-time { font-size: 18px; color: #BBBBBB; @@ -264,174 +202,18 @@ } } -@media (max-width: 720px) { - .map-accordion { - left:0; - right:0; - width:100%; - top:195px; - bottom:0; - margin:0; - position:absolute; - overflow-x: hidden; - overflow-y: auto; - -webkit-overflow-scrolling: touch; - h2 { - margin:15px 0; - padding:0; - &:first-of-type { - margin-top:0; - } - > a { - padding:10px 0; - padding-left:50px; - padding-right:20px; - font-size:20px; - } - } - h3 { - margin:10px 0; - padding:0; - > a { - clear:both; - font-size:20px; - } - } - } -} - -@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; - /* main axis */ - justify-content: center; - /* cross axis */ - align-items: center; - - width: 40px; - height: 40px; - - padding-left: 0; - padding-right: 0; - - opacity: 0.65; - background: none; - background-position: center center; - background-repeat: no-repeat; - background-size: 22px 22px; - border: 0; - outline: none; - - cursor: pointer; - cursor: hand; - - transition: all 0.2s ease; - - &:hover, - &:focus { - opacity: 1; - } - - &:active { - filter: hue-rotate(80deg) saturate(150); - } -} - #noneFound { - display:none; - margin:60px 30px 0; - font-size:30px; - text-align: center; - color:darkgreen; - .fa { - display:block; - font-size:300px; - } + display:none; + margin:60px 30px 0; + font-size:30px; + text-align: center; + color:darkgreen; + .fa { + display:block; + font-size:300px; + } } -.map-aside-action-pop-out { - margin-right: -4px; - background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMTcxLjQyOSIgZmlsbD0iIzNhMzEzMyI+PHBhdGggZD0iTTE1Ny4xNDMsMTAzLjU3MXYzNS43MTRjMCw4Ljg1NC0zLjE0NCwxNi40MjYtOS40MzEsMjIuNzEzcy0xMy44NTgsOS40MzEtMjIuNzEyLDkuNDMxSDMyLjE0MyBjLTguODU0LDAtMTYuNDI1LTMuMTQ0LTIyLjcxMi05LjQzMVMwLDE0OC4xNCwwLDEzOS4yODVWNDYuNDI5YzAtOC44NTQsMy4xNDQtMTYuNDI1LDkuNDMxLTIyLjcxMiBjNi4yODctNi4yODcsMTMuODU4LTkuNDMxLDIyLjcxMi05LjQzMWg3OC41NzJjMS4wNDEsMCwxLjg5NiwwLjMzNSwyLjU2NiwxLjAwNGMwLjY3LDAuNjcsMS4wMDQsMS41MjUsMS4wMDQsMi41NjdWMjUgYzAsMS4wNDItMC4zMzQsMS44OTctMS4wMDQsMi41NjdjLTAuNjcsMC42Ny0xLjUyNSwxLjAwNC0yLjU2NiwxLjAwNEgzMi4xNDNjLTQuOTExLDAtOS4xMTUsMS43NDktMTIuNjEyLDUuMjQ2IHMtNS4yNDYsNy43MDEtNS4yNDYsMTIuNjEydjkyLjg1NmMwLDQuOTExLDEuNzQ5LDkuMTE1LDUuMjQ2LDEyLjYxMnM3LjcwMSw1LjI0NSwxMi42MTIsNS4yNDVIMTI1YzQuOTEsMCw5LjExNS0xLjc0OCwxMi42MTEtNS4yNDUgYzMuNDk3LTMuNDk3LDUuMjQ2LTcuNzAxLDUuMjQ2LTEyLjYxMnYtMzUuNzE0YzAtMS4wNDIsMC4zMzQtMS44OTcsMS4wMDQtMi41NjdjMC42Ny0wLjY2OSwxLjUyNS0xLjAwNCwyLjU2Ny0xLjAwNGg3LjE0MyBjMS4wNDIsMCwxLjg5NywwLjMzNSwyLjU2NywxLjAwNEMxNTYuODA5LDEwMS42NzQsMTU3LjE0MywxMDIuNTI5LDE1Ny4xNDMsMTAzLjU3MXogTTIwMCw3LjE0M3Y1Ny4xNDMgYzAsMS45MzUtMC43MDcsMy42MDktMi4xMjEsNS4wMjJjLTEuNDEzLDEuNDE0LTMuMDg4LDIuMTIxLTUuMDIxLDIuMTIxYy0xLjkzNSwwLTMuNjA5LTAuNzA3LTUuMDIyLTIuMTIxbC0xOS42NDQtMTkuNjQzIGwtNzIuNzY3LDcyLjc2OWMtMC43NDQsMC43NDQtMS42LDEuMTE1LTIuNTY3LDEuMTE1cy0xLjgyMy0wLjM3MS0yLjU2Ny0xLjExNUw3Ny41NjcsMTA5LjcxYy0wLjc0NC0wLjc0NC0xLjExNi0xLjYtMS4xMTYtMi41NjcgYzAtMC45NjcsMC4zNzItMS44MjIsMS4xMTYtMi41NjZsNzIuNzY4LTcyLjc2OGwtMTkuNjQ0LTE5LjY0M2MtMS40MTMtMS40MTQtMi4xMi0zLjA4OC0yLjEyLTUuMDIyYzAtMS45MzUsMC43MDctMy42MDksMi4xMi01LjAyMiBDMTMyLjEwNSwwLjcwNywxMzMuNzc5LDAsMTM1LjcxNSwwaDU3LjE0M2MxLjkzNCwwLDMuNjA4LDAuNzA3LDUuMDIxLDIuMTIxQzE5OS4yOTMsMy41MzQsMjAwLDUuMjA4LDIwMCw3LjE0M3oiLz48L3N2Zz4=) -} - -.map-aside-action-collapse { - background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNzEuNDI5IDE3MS40MjkiIGZpbGw9IiMzYTMxMzMiPjxwYXRoIGQ9Ik0xMjIuNDMzLDEwNi4xMzhsLTE2LjI5NSwxNi4yOTVjLTAuNzQ0LDAuNzQ0LTEuNiwxLjExNi0yLjU2NiwxLjExNmMtMC45NjgsMC0xLjgyMy0wLjM3Mi0yLjU2Ny0xLjExNmwtMTUuMjktMTUuMjkgbC0xNS4yOSwxNS4yOWMtMC43NDQsMC43NDQtMS42LDEuMTE2LTIuNTY3LDEuMTE2cy0xLjgyMy0wLjM3Mi0yLjU2Ny0xLjExNmwtMTYuMjk0LTE2LjI5NWMtMC43NDQtMC43NDQtMS4xMTYtMS42LTEuMTE2LTIuNTY2IGMwLTAuOTY4LDAuMzcyLTEuODIzLDEuMTE2LTIuNTY3bDE1LjI5LTE1LjI5bC0xNS4yOS0xNS4yOWMtMC43NDQtMC43NDQtMS4xMTYtMS42LTEuMTE2LTIuNTY3czAuMzcyLTEuODIzLDEuMTE2LTIuNTY3IEw2NS4yOSw0OC45OTZjMC43NDQtMC43NDQsMS42LTEuMTE2LDIuNTY3LTEuMTE2czEuODIzLDAuMzcyLDIuNTY3LDEuMTE2bDE1LjI5LDE1LjI5bDE1LjI5LTE1LjI5IGMwLjc0NC0wLjc0NCwxLjYtMS4xMTYsMi41NjctMS4xMTZjMC45NjcsMCwxLjgyMiwwLjM3MiwyLjU2NiwxLjExNmwxNi4yOTUsMTYuMjk0YzAuNzQ0LDAuNzQ0LDEuMTE2LDEuNiwxLjExNiwyLjU2NyBzLTAuMzcyLDEuODIzLTEuMTE2LDIuNTY3bC0xNS4yOSwxNS4yOWwxNS4yOSwxNS4yOWMwLjc0NCwwLjc0NCwxLjExNiwxLjYsMS4xMTYsMi41NjcgQzEyMy41NDksMTA0LjUzOSwxMjMuMTc3LDEwNS4zOTQsMTIyLjQzMywxMDYuMTM4eiBNMTQ2LjQyOSw4NS43MTRjMC0xMS4wMTItMi43MTctMjEuMTY4LTguMTQ4LTMwLjQ2OSBzLTEyLjc5Ny0xNi42NjctMjIuMDk4LTIyLjA5OFM5Ni43MjYsMjUsODUuNzE0LDI1cy0yMS4xNjgsMi43MTYtMzAuNDY5LDguMTQ3UzM4LjU3OSw0NS45NDUsMzMuMTQ3LDU1LjI0NlMyNSw3NC43MDMsMjUsODUuNzE0IHMyLjcxNiwyMS4xNjgsOC4xNDcsMzAuNDY5czEyLjc5NywxNi42NjYsMjIuMDk4LDIyLjA5OHMxOS40NTcsOC4xNDgsMzAuNDY5LDguMTQ4czIxLjE2OC0yLjcxNywzMC40NjktOC4xNDggczE2LjY2Ni0xMi43OTcsMjIuMDk4LTIyLjA5OFMxNDYuNDI5LDk2LjcyNiwxNDYuNDI5LDg1LjcxNHogTTE3MS40MjksODUuNzE0YzAsMTUuNTUxLTMuODMyLDI5Ljg5My0xMS40OTYsNDMuMDI0IGMtNy42NjQsMTMuMTMzLTE4LjA2MiwyMy41My0zMS4xOTQsMzEuMTk0Yy0xMy4xMzIsNy42NjQtMjcuNDc0LDExLjQ5Ni00My4wMjQsMTEuNDk2cy0yOS44OTItMy44MzItNDMuMDI0LTExLjQ5NiBjLTEzLjEzMy03LjY2NC0yMy41MzEtMTguMDYyLTMxLjE5NC0zMS4xOTRDMy44MzIsMTE1LjYwNywwLDEwMS4yNjUsMCw4NS43MTRTMy44MzIsNTUuODIyLDExLjQ5Niw0Mi42OSBjNy42NjQtMTMuMTMzLDE4LjA2Mi0yMy41MzEsMzEuMTk0LTMxLjE5NEM1NS44MjIsMy44MzIsNzAuMTY0LDAsODUuNzE0LDBzMjkuODkzLDMuODMyLDQzLjAyNCwxMS40OTYgYzEzLjEzMyw3LjY2NCwyMy41MywxOC4wNjIsMzEuMTk0LDMxLjE5NEMxNjcuNTk3LDU1LjgyMiwxNzEuNDI5LDcwLjE2NCwxNzEuNDI5LDg1LjcxNHoiLz48L3N2Zz4=) -} .map-aside-body { .map-fixed-header { @@ -464,7 +246,7 @@ padding: 10px 0; padding-left: 50px; padding-right: 20px; - font-size: 20px; + font-size: 20px; } } h3 > a { diff --git a/common/app/routes/challenges/components/map/Header.jsx b/common/app/routes/challenges/components/map/Header.jsx index 41e81c8782..ab8b4bbe63 100644 --- a/common/app/routes/challenges/components/map/Header.jsx +++ b/common/app/routes/challenges/components/map/Header.jsx @@ -72,7 +72,7 @@ export class Header extends PureComponent { 'Expand all challenges' : 'Collapse all challenges'; return ( -