diff --git a/client/less/lib/bootstrap-social/bootstrap-social.less b/client/less/lib/bootstrap-social/bootstrap-social.less
index 82c91f5d2f..a2b61fae6c 100755
--- a/client/less/lib/bootstrap-social/bootstrap-social.less
+++ b/client/less/lib/bootstrap-social/bootstrap-social.less
@@ -86,7 +86,7 @@
}
}
-.btn-social(@color-bg, @color: #fff) {
+.btn-social(@color-bg, @color: @color-bg) {
background-color: @color-bg;
.button-variant(@color, @color-bg, rgba(0,0,0,.2));
}
diff --git a/client/less/lib/bootstrap/buttons.less b/client/less/lib/bootstrap/buttons.less
index 40553c6386..66a19bd066 100755
--- a/client/less/lib/bootstrap/buttons.less
+++ b/client/less/lib/bootstrap/buttons.less
@@ -32,7 +32,7 @@
&:hover,
&:focus,
&.focus {
- color: @btn-default-color;
+ color: @gray-lighter;
text-decoration: none;
}
diff --git a/client/less/lib/bootstrap/mixins/buttons.less b/client/less/lib/bootstrap/mixins/buttons.less
index 92d8a056cd..9714cc206b 100755
--- a/client/less/lib/bootstrap/mixins/buttons.less
+++ b/client/less/lib/bootstrap/mixins/buttons.less
@@ -14,8 +14,8 @@
&:active,
&.active,
.open > .dropdown-toggle& {
- color: @color;
- background-color: darken(@background, 10%);
+ color: @gray-lighter;
+ background-color: @background;
border-color: darken(@border, 12%);
}
&:active,
diff --git a/client/less/lib/bootstrap/variables.less b/client/less/lib/bootstrap/variables.less
index 8b8fefa81d..86168ec0b3 100755
--- a/client/less/lib/bootstrap/variables.less
+++ b/client/less/lib/bootstrap/variables.less
@@ -14,9 +14,9 @@
@gray-light: lighten(@gray-base, 46.7%); // #777
@gray-lighter: lighten(@gray-base, 93.5%); // #eee
-@brand-primary: #215f1e;
-@brand-success: #457E86;
-@brand-info: #4A2B0F;
+@brand-primary: forestgreen;
+@brand-success: #457e86;
+@brand-info: #2b414f;
@brand-warning: #f0ad4e;
@brand-danger: #d9534f;
@@ -26,12 +26,12 @@
//## Settings for some of the most global styles.
//** Background color for ``.
-@body-bg: #457E86;
+@body-bg: #ffffff;
//** Global text color on ``.
@text-color: @gray-dark;
//** Global textual link color.
-@link-color: #215f1e;
+@link-color: @brand-primary;
//** Link hover color set via `darken()` function.
@link-hover-color: darken(@link-color, 15%);
//** Link hover decoration.
@@ -144,27 +144,27 @@
@btn-font-weight: normal;
-@btn-default-color: #333;
-@btn-default-bg: @gray-lighter;
-@btn-default-border: #ccc;
+@btn-default-color: #000000;
+@btn-default-bg: @body-bg;
+@btn-default-border: #000000;
-@btn-primary-color: @gray-lighter;
+@btn-primary-color: @brand-primary;
@btn-primary-bg: @brand-primary;
@btn-primary-border: darken(@btn-primary-bg, 5%);
-@btn-success-color: @gray-lighter;
+@btn-success-color: @brand-success;
@btn-success-bg: @brand-success;
@btn-success-border: darken(@btn-success-bg, 5%);
-@btn-info-color: @gray-lighter;
+@btn-info-color: @brand-info;
@btn-info-bg: @brand-info;
@btn-info-border: darken(@btn-info-bg, 5%);
-@btn-warning-color: @gray-lighter;
+@btn-warning-color: @brand-warning;
@btn-warning-bg: @brand-warning;
@btn-warning-border: darken(@btn-warning-bg, 5%);
-@btn-danger-color: @gray-lighter;
+@btn-danger-color: @brand-danger;
@btn-danger-bg: @brand-danger;
@btn-danger-border: darken(@btn-danger-bg, 5%);
@@ -662,7 +662,7 @@
//##
//** Background color on `.list-group-item`
-@list-group-bg: @gray-lighter;
+@list-group-bg: @body-bg;
//** `.list-group-item` border color
@list-group-border: #ddd;
//** List group border radius
diff --git a/client/less/main.less b/client/less/main.less
index 0780dde86e..5461b43c63 100644
--- a/client/less/main.less
+++ b/client/less/main.less
@@ -6,7 +6,6 @@
html,body,div,span,a,li,td,th {
font-family: 'Lato', sans-serif;
- font-weight: 300;
}
bold {
@@ -42,17 +41,21 @@ html {
overflow-x: hidden;
}
-input[type=checkbox] {
- /* Double-sized Checkboxes */
- -ms-transform: scale(2); /* IE */
- -moz-transform: scale(2); /* FF */
- -webkit-transform: scale(2); /* Safari and Chrome */
- -o-transform: scale(2); /* Opera */
- padding: 10px;
+//input[type=checkbox] {
+// /* Double-sized Checkboxes */
+// -ms-transform: scale(2); /* IE */
+// -moz-transform: scale(2); /* FF */
+// -webkit-transform: scale(2); /* Safari and Chrome */
+// -o-transform: scale(2); /* Opera */
+// padding: 10px;
+//}
+
+.btn-group {
+ border-color: @brand-primary;
}
body.full-screen-body-background {
- background-color: @gray-lighter;
+ background-color: @body-bg;
}
@@ -69,9 +72,6 @@ h1, h2 {
font-weight: 400;
}
-.btn {
- font-weight: 400;
-}
h1, h2, h3, h4, h5, h6, p, li {
padding-top: 5px;
@@ -113,14 +113,7 @@ h1, h2, h3, h4, h5, h6, p, li {
font-size: 40px;
}
-.btn, .shadow {
- white-space: normal;
- -webkit-box-shadow: 2px 4px 1px rgba(0, 0, 0, 0.3);
- -moz-box-shadow: 2px 4px 1px rgba(0, 0, 0, 0.3);
- box-shadow: 2px 4px 1px rgba(0, 0, 0, 0.3);
-}
-
-.btn, .shadow {
+.shadow {
white-space: normal;
-webkit-box-shadow: 2px 4px 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 2px 4px 1px rgba(0, 0, 0, 0.3);
@@ -226,6 +219,10 @@ ul {
font-size: 24px;
}
+.small-p {
+ font-size: 14px;
+}
+
.map-p {
font-size: 20px;
}
@@ -242,7 +239,6 @@ ul {
@media (min-width: 767px) {
font-size: 24px;
}
-
}
.capitalize {
@@ -250,7 +246,7 @@ ul {
}
.text-success {
- color: @brand-success;
+ color: @brand-primary;
}
.fast-animation {
@@ -287,6 +283,8 @@ ul {
margin-right: 10px;
white-space: nowrap;
}
+ background-color: @brand-primary;
+ text-align: center;
}
.navbar {
white-space: nowrap;
@@ -327,13 +325,25 @@ ul {
}
.navbar {
- background-color: #4a2b0f;
+ background-color: @brand-primary;
+}
+
+a {
+ font-weight: bold;
+}
+
+p {
+ font-size: 20px;
+}
+
+.map-aside-body p {
+ line-height: 1.8;
}
.navbar-nav > li > a {
- color: @gray-lighter;
+ color: @body-bg;
&:hover {
- color: #4a2b0f;
+ color: @brand-primary;
}
}
@@ -376,6 +386,11 @@ ul {
}
.btn-big {
+ font-size: 20px;
+ border-radius: 6px;
+}
+
+.btn-bigger {
font-size: 30px;
}
@@ -384,6 +399,10 @@ ul {
height: 57px;
}
+h4 {
+ font-size: 26px;
+}
+
.btn-responsive {
@media (max-width: 768px) {
font-size: 15px;
@@ -423,26 +442,14 @@ thead {
}
}
-.signin-button-nav {
- @media (min-width: 991px) and (max-width: 1010px) {
- margin-left: -10px;
- margin-right: -5px;
- }
-}
-
.navbar-nav a {
- color: @gray-lighter;
+ color: @body-bg;
font-size: 20px;
margin-top: -5px;
margin-bottom: -5px;
}
.navbar-toggle {
- color: @gray-lighter;
-}
-
-.navbar-right {
- background-color: #4a2b0f;
- text-align: center;
+ color: @body-bg;
}
.signup-btn-nav {
@@ -450,6 +457,10 @@ thead {
padding-top: 10px !important;
padding-bottom: 10px !important;
margin-right: -12px;
+ @media (min-width: 991px) and (max-width: 1010px) {
+ margin-left: -10px;
+ margin-right: -5px;
+ }
}
.public-profile-img {
@@ -478,7 +489,7 @@ thead {
}
.points-on-top {
- color: @gray-lighter;
+ color: @body-bg;
font-size: 35px;
z-index: 2;
width: 60%;
@@ -490,7 +501,7 @@ thead {
}
.landing-skill-icon {
- color: #215f1e;
+ color: @brand-primary;
font-size: 150px;
}
@@ -567,7 +578,7 @@ thead {
}
.challenge-list-header {
- background-color: #215f1e;
+ background-color: @brand-primary;
color: @gray-lighter;
font-size: 36px;
text-align: center;
@@ -586,7 +597,7 @@ thead {
width: 100%;
height: 50px;
text-align: center;
- background-color: #4a2b0f;
+ background-color: @brand-primary;
padding: 12px;
bottom: 0;
left: 0;
@@ -601,7 +612,7 @@ thead {
padding-top: 14px;
padding-bottom: 12px;
&:hover {
- color: #4a2b0f;
+ color: @brand-primary;
background-color: @gray-lighter;
text-decoration: none;
}
@@ -727,23 +738,11 @@ iframe.iphone {
min-height: 650px;
}
-.btn-primary-ghost {
+.btn {
+ font-weight: 400;
+ white-space: normal;
background: transparent;
- color: @brand-primary;
- /* CSS Transition */
- -webkit-transition: background .2s ease-in-out, border .2s ease-in-out;
- -moz-transition: background .2s ease-in-out, border .2s ease-in-out;
- -ms-transition: background .2s ease-in-out, border .2s ease-in-out;
- -o-transition: background .2s ease-in-out, border .2s ease-in-out;
- transition: background .2s ease-in-out, border .2s ease-in-out;
-}
-
-.btn-warning-ghost {
- background: transparent;
- color: @brand-warning;
-
- /* CSS Transition */
-webkit-transition: background .2s ease-in-out, border .2s ease-in-out;
-moz-transition: background .2s ease-in-out, border .2s ease-in-out;
-ms-transition: background .2s ease-in-out, border .2s ease-in-out;
@@ -926,7 +925,7 @@ hr {
}
.cal-heatmap-container {
- background-color: @gray-lighter;
+ background-color: @body-bg;
}
.interested-camper-image {
@@ -1014,10 +1013,6 @@ code {
shape-rendering: crispEdges;
}
-#submitButton {
- font: normal normal normal 14px/1 FontAwesome !important;
-}
-
#testSuite > div >.row {
margin: 0!important;
}
@@ -1139,3 +1134,4 @@ code {
@import "jobs.less";
@import "challenge.less";
@import "toastr.less";
+@import "map.less";
diff --git a/client/less/map.less b/client/less/map.less
new file mode 100644
index 0000000000..a1eda748d0
--- /dev/null
+++ b/client/less/map.less
@@ -0,0 +1,130 @@
+/*
+ * based off of https://github.com/gitterHQ/sidecar
+ * license: MIT
+ */
+.map-aside {
+
+ z-index: 20000;
+ position: fixed;
+ top: 0;
+ left: 60%;
+ bottom: 0;
+ right: 0;
+
+ display: flex;
+ flex-direction: row;
+
+ background-color: @body-bg;
+ border-left: 1px solid #333;
+ box-shadow: -12px 0 18px 0 rgba(50, 50, 50, 0.3);
+
+ transition: transform 0.3s cubic-bezier(0.16, 0.22, 0.22, 1.7);
+
+ &.is-collapsed {
+ 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;
+ }
+
+ @media (max-width: 1150px) {
+ left: 45%;
+ }
+ @media (max-width: 944px) {
+ left: 30%;
+ }
+ @media (max-width: 600px) {
+ left: 15%;
+ }
+ @media (max-width: 500px) {
+ left: 0;
+ border-left: none;
+ }
+
+ & > iframe {
+ flex: 1;
+ width: 100%;
+ height: 100%;
+
+ border: 0;
+ overflow: auto;
+ margin-top: 40px;
+ }
+}
+
+.map-aside-action-bar {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+
+ display: flex;
+ justify-content: flex-end;
+
+ padding-bottom: 0.7em;
+
+ background: linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, rgba(255, 255, 255, 0) 100%);
+
+ z-index: 100;
+}
+
+.map-aside-action-item {
+ 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);
+ }
+}
+
+.map-aside-body {
+ margin: 0 20px 40px 60px
+}
+
+.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=)
+}
diff --git a/client/main.js b/client/main.js
index b677fc2b80..e2bfa9b476 100644
--- a/client/main.js
+++ b/client/main.js
@@ -22,14 +22,17 @@ main = (function(main) {
main.chat.GitterChat = e.detail.Chat;
main.chat.createHelpChat = function(room, helpChatBtnClass, roomTitle) {
- roomTitle = roomTitle || 'Waypoint Help';
+ // room is always in PascalCase
+ roomTitle = room
+ .replace(/([A-Z])/g, ' $1')
+ .replace('Java Script', 'JavaScript');
$('body').append(
''
);
main.chat.helpChat = new main.chat.GitterChat({
- room: room,
+ room: `freecodecamp/${room}`,
activationElement: false,
targetElement: $('#chat-embed-help')
});
@@ -259,4 +262,19 @@ $(document).ready(function() {
window.ga('send', 'event', 'FB_LINK', 'SHARE', 'Facebook map share');
window.location.href = link;
});
+
+ // map
+ $('#nav-map-btn').on('click', () => {
+ if (!main.isMapAsideLoad) {
+ var mapAside = $('