+const NAVBAR_HEIGHT = 96;
+
+class Navbar extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ hidden: false,
+ transparent: true,
+ lastY: 0,
+ };
+ }
+
+ componentDidMount() {
+ window.addEventListener('scroll', this.handleScroll, { passive: true });
+ }
+
+ componentWillUnmount() {
+ window.removeEventListener('scroll', this.handleScroll);
+ }
+
+ handleScroll = () => {
+ // Calculate scroll direction
+ const { lastY } = this.state;
+ const scrollingDown = (window.scrollY - lastY) >= 0;
+
+ // Calculate position
+ const offset = window.pageYOffset || document.documentElement.scrollTop;
+ const atTop = offset < NAVBAR_HEIGHT;
+
+ // Calculate transparency - turn navbar transparent if some distance under
+ // the navbar
+ const transparent = offset < (NAVBAR_HEIGHT * 3);
+
+ // Update state
+ this.setState({
+ transparent,
+ hidden: (!atTop && scrollingDown),
+ lastY: window.scrollY,
+ });
+ }
+
+ render() {
+ const { hidden, transparent } = this.state;
+ const { displayType, buttonType } = this.props;
+ const button = getButton(buttonType);
+ const navbarRightElements = [
+
,
+ button,
+ ];
+
+ let navbarRight;
+ let key = 0;
+ switch (displayType) {
+ case DISPLAY_TYPE.ONLY_LOGO:
+ break;
+ case DISPLAY_TYPE.LOGO_AND_BUTTON:
+ navbarRight =
;
+ break;
+ default:
+ navbarRight = navbarRightElements.map(l => (
+
-
About
-
FAQ
-
Sponsors
-
2018
-
{getButton(buttonType)}
+ ));
+ }
+
+ return (
+
+ );
}
+}
+
+Navbar.propTypes = {
+ displayType: PropTypes.symbol,
+ buttonType: PropTypes.symbol,
};
export default Navbar;
diff --git a/web/components/navbar/navbar.component.test.js b/web/components/navbar/navbar.component.test.js
index 65f1a396..da19e36b 100644
--- a/web/components/navbar/navbar.component.test.js
+++ b/web/components/navbar/navbar.component.test.js
@@ -27,8 +27,8 @@ describe('Navbar component', () => {
wrapper = getWrapper();
});
- test('there are six Links', () => {
- expect(wrapper.find(Link)).toHaveProperty('length', 6);
+ test('there are seven Links', () => {
+ expect(wrapper.find(Link)).toHaveProperty('length', 7);
});
test('the first link is to home page', () => {
@@ -50,8 +50,8 @@ describe('Navbar component', () => {
wrapper = getWrapper();
});
- test('there are six Links', () => {
- expect(wrapper.find(Link)).toHaveProperty('length', 6);
+ test('there are seven Links', () => {
+ expect(wrapper.find(Link)).toHaveProperty('length', 7);
});
test('the first link is to home page', () => {
diff --git a/web/containers/navbar/index.js b/web/containers/navbar/index.js
index 1216ec74..389dd593 100644
--- a/web/containers/navbar/index.js
+++ b/web/containers/navbar/index.js
@@ -16,6 +16,9 @@ const getDisplayType = (location) => {
let displayType = DISPLAY_TYPE.ONLY_LOGO;
+ // For demo only - todo: remove
+ if (pathname === '/ui_demo') return DISPLAY_TYPE.LOGO_BUTTON_AND_LINKS;
+
if (isHomePage) {
displayType = DISPLAY_TYPE.LOGO_BUTTON_AND_LINKS;
} else if (isDashBoardPage) {
diff --git a/web/styles/animations.sass b/web/styles/animations.sass
index 9cd1262f..594d3e71 100644
--- a/web/styles/animations.sass
+++ b/web/styles/animations.sass
@@ -1,4 +1,13 @@
+/////////////////////////
+// TRANSITIONS //
+/////////////////////////
+
$transition-time: .2s
+$transition-time-long: 1.5s
+
+/////////////////////////
+// MIXINS //
+/////////////////////////
// This is a hack to allow transitions of linear-gradient backgrounds.
// https://medium.com/@dave_lunny/animating-css-gradients-using-only-css-d2fd7671e759
diff --git a/web/styles/breakpoints.sass b/web/styles/breakpoints.sass
index 0fc06557..40bf55e2 100644
--- a/web/styles/breakpoints.sass
+++ b/web/styles/breakpoints.sass
@@ -1,3 +1,7 @@
+/////////////////////////
+// BREAKPOINTS //
+/////////////////////////
+
$desktop: 1300px;
$laptop: 1080px;
$tablet: 900px;
diff --git a/web/styles/colors.sass b/web/styles/colors.sass
index 4725513c..f92f86ab 100644
--- a/web/styles/colors.sass
+++ b/web/styles/colors.sass
@@ -1,10 +1,16 @@
-/* colors */
+/////////////////////////
+// BASE COLORS //
+/////////////////////////
+
$white: #FFFFFF
$grey-dark: #363131
$grey-light: #BDBDBD
$grey-slate: #9195A5
-/* classes */
+/////////////////////////
+// COLOR CLASSES //
+/////////////////////////
+
$error: #EB5757 // figma "red"
$error-dark: #D41818 // figma "dark red"
$primary: #21258A // figma "body text"
@@ -13,11 +19,17 @@ $secondary: #00BCBC // figma "link text"
$secondary-highlight: #00D5D5 // figma "link text/hover"
$background: #F2F7FE
-/* gradients */
+/////////////////////////
+// GRADIENTS //
+/////////////////////////
+
$gradient-primary: linear-gradient(180deg, #4DE8C2 0%, #19CBCB 100%, #18CDCD 100%)
$gradient-primary-highlight: linear-gradient(180deg, #92F1DA 0%, #43DEDE 100%)
$gradient-primary-subdued: linear-gradient(180deg, #4DE8C2 0%, #18CDCD 100%, #19CBCB 100%);
$gradient-secondary: linear-gradient(180deg, #FFFFFF 0%, #EDFFFC 100%)
-/* misc */
+/////////////////////////
+// MISC //
+/////////////////////////
+
$shadow: rgba(0, 82, 174, 0.15)
diff --git a/web/styles/decoration.sass b/web/styles/decoration.sass
index c71be32c..a627819e 100644
--- a/web/styles/decoration.sass
+++ b/web/styles/decoration.sass
@@ -1,3 +1,7 @@
+/////////////////////////
+// ELEMENT DECORATIONS //
+/////////////////////////
+
.shadow
box-shadow: 0px 4px 6px $shadow
diff --git a/web/styles/index.sass b/web/styles/index.sass
index 36a476ab..f392165b 100644
--- a/web/styles/index.sass
+++ b/web/styles/index.sass
@@ -1,4 +1,8 @@
-/* core */
+/////////////////////////
+// ALL STYLESHEETS //
+/////////////////////////
+
+// core
@import ./spacing
@import ./colors
@import ./typography
@@ -7,12 +11,16 @@
@import ./breakpoints
@import ./decoration
-/* components */
+// components
@import ../components/index
-/* containers */
+// containers
@import ../containers/index
+/////////////////////////
+// DEFAULTS //
+/////////////////////////
+
// Remove from here once definitions are set up
html, body, div, span, applet, object, iframe,
h1, h3, h4, h5, h6, blockquote, pre,
diff --git a/web/styles/spacing.sass b/web/styles/spacing.sass
index bebb4655..d5a6fc52 100644
--- a/web/styles/spacing.sass
+++ b/web/styles/spacing.sass
@@ -1,3 +1,7 @@
+/////////////////////////
+// SPACING DEFINITIONS //
+/////////////////////////
+
$spacing-xxs: 4px;
$spacing-xs: 8px;
$spacing-s: 16px;
@@ -5,7 +9,70 @@ $spacing-m: 24px;
$spacing-l: 32px;
$spacing-xl: 40px;
$spacing-xxl: 48px;
-
-// for extra large spaces...
$spacing-mega: 56px;
$spacing-giga: 64px;
+$navbar: $spacing-giga
+
+/////////////////////////
+// SPACING CLASSES //
+/////////////////////////
+
+.pad
+ // navbar
+ &-nav
+ padding-top: $navbar
+
+ // sides
+ &-left, &-sides
+ &-xxl
+ padding-left: $spacing-xxl
+ &-right, &-sides
+ &-xxl
+ padding-right: $spacing-xxl
+
+ // ends
+ &-top, &-ends
+ &-xxl
+ padding-top: $spacing-xxl
+ &-mega
+ padding-top: $spacing-mega
+ &-bottom, &-ends
+ &-xxl
+ padding-bottom: $spacing-xxl
+ &-mega
+ padding-bottom: $spacing-mega
+
+.margin
+ // sides
+ &-left, &-sides
+ &-xs
+ padding-left: $spacing-xs
+ &-m
+ padding-left: $spacing-s
+ &-l
+ padding-left: $spacing-l
+ &-right, &-sides
+ &-s
+ padding-right: $spacing-xs
+ &-m
+ padding-right: $spacing-s
+ &-l
+ padding-right: $spacing-l
+
+ // repeating vertical elements
+ &-vertical
+ &-text-inputs
+ > .text-input
+ &:first-of-type
+ margin-bottom: $spacing-xl
+ &:last-of-type
+ margin-bottom: $spacing-mega
+
+ // repeating horizontal elements
+ &-horizontal
+ &-divs
+ > div
+ &:first-of-type
+ margin-left: $spacing-m
+ &:last-of-type
+ margin-right: $spacing-m
diff --git a/web/styles/typography.sass b/web/styles/typography.sass
index c14288b9..f1680f71 100644
--- a/web/styles/typography.sass
+++ b/web/styles/typography.sass
@@ -1,3 +1,7 @@
+/////////////////////////
+// FONTS //
+/////////////////////////
+
@font-face
font-family: 'Apercu Pro'
font-weight: bold
@@ -16,6 +20,10 @@
font-style: normal
src: url(./fonts/apercu_regular_pro.otf) format('opentype')
+/////////////////////////
+// TEXT CLASSES //
+/////////////////////////
+
a
&:visited
color: $primary
diff --git a/web/styles/utils.sass b/web/styles/utils.sass
index 06eda738..6abfa434 100644
--- a/web/styles/utils.sass
+++ b/web/styles/utils.sass
@@ -1,3 +1,7 @@
+//////////////////////////
+// WIDTH/HEIGHT CLASSES //
+//////////////////////////
+
.fill
&-width
width: 100%
@@ -9,51 +13,16 @@
> *
width: 50%
-// padding declarations
-.pad
- // sides
- &-left, &-sides
- &-xxl
- padding-left: $spacing-xxl
- &-right, &-sides
- &-xxl
- padding-right: $spacing-xxl
-
- // ends
- &-top, &-ends
- &-xxl
- padding-top: $spacing-xxl
- &-mega
- padding-top: $spacing-mega
- &-bottom, &-ends
- &-xxl
- padding-bottom: $spacing-xxl
- &-mega
- padding-bottom: $spacing-mega
-
-// margin declarations
-.margin
- &-left, &-sides
- &-xs
- padding-left: $spacing-xs
- &-m
- padding-left: $spacing-s
- &-right, &-sides
- &-s
- padding-right: $spacing-xs
- &-m
- padding-right: $spacing-s
- &-text-inputs
- > .text-input
- &:first-of-type
- margin-bottom: 40px
- &:last-of-type
- margin-bottom: 56px
+//////////////////////////
+// FLEXBOX CLASSES //
+//////////////////////////
-// flexbox utility classes
.flex
display: flex
+ &-inline
+ display: inline-flex
+
// flex-directions
&.dir
&-col
@@ -61,6 +30,12 @@
// justify-content
&.jc
+ &-start
+ justify-content: flex-start
+
+ &-end
+ justify-content: flex-end
+
&-center
justify-content: center