Implement footer block #248
Conversation
data/hoverboard.config.json
Outdated
| "url": "https://gdg.us11.list-manage.com/subscribe/post?u=b7e853a79164ddfdbda3ed77b&id=7993e39fbe", | ||
| "name": "b_b7e853a79164ddfdbda3ed77b_7993e39fbe" | ||
| }, | ||
| "gdgLvivUrl": "http://lviv.gdg.org.ua/", |
There was a problem hiding this comment.
It should not be hardcoded to GDG Lviv. Try something like gdgChapterUrl or extend organizer object:
"organizer": {
"name": "GDG Lviv",
"twitter": "gdglviv",
"url": "..."
}
data/hoverboard.config.json
Outdated
| "name": "b_b7e853a79164ddfdbda3ed77b_7993e39fbe" | ||
| }, | ||
| "gdgLvivUrl": "http://lviv.gdg.org.ua/", | ||
| "codUrl": "https://devfest.gdg.org.ua/cod/", |
There was a problem hiding this comment.
I know, will be improved since we haven't this page implemented yet
There was a problem hiding this comment.
in this case we don't need this info
data/hoverboard.config.json
Outdated
| "url": "https://www.youtube.com/playlist?list=PLt8lEzcLNl31AouwDkbLbLARlQFwNS2en" | ||
| } | ||
| ], | ||
| "gplusShareLink": "https://plus.google.com/share?url=https://devfest.gdg.org.ua/", |
There was a problem hiding this comment.
Why only G+ no one is using it right now :)
Create a generic behavior that includes functions to share with all social networks and is extendable. See https://github.com/gdg-x/hoverboard/blob/master/src/behaviors/share-behavior.html
Also, don't forget about new features that would be nice to include https://developers.google.com/web/updates/2016/10/navigator-share
There was a problem hiding this comment.
Let's create separate story on this
data/hoverboard.config.json
Outdated
| } | ||
| ], | ||
| "gplusShareLink": "https://plus.google.com/share?url=https://devfest.gdg.org.ua/", | ||
| "blogLink": "https://medium.com/gdg-lviv", |
data/hoverboard.config.json
Outdated
| }, | ||
| "gdgLvivUrl": "http://lviv.gdg.org.ua/", | ||
| "codUrl": "https://devfest.gdg.org.ua/cod/", | ||
| "gdgName": "GDG Lviv" |
There was a problem hiding this comment.
It's organizer + it's not a generic solution. Don't limit application only to GDGs
data/resources.json
Outdated
| "followOur": "Follow our", | ||
| "followUs": "Follow us", | ||
| "emailUs": "Email us", | ||
| "blog": "blog", |
There was a problem hiding this comment.
does not matter, since it styled with css to be uppercase
data/resources.json
Outdated
| "eventResources": "Event Resources", | ||
| "footerRelBlock": [ | ||
| { | ||
| "headTitle": "About", |
There was a problem hiding this comment.
maybe just title, it's not a head
There was a problem hiding this comment.
in meaning of that element - yes, it's head - head of column. But ok, can be title
data/resources.json
Outdated
| "blog": "blog", | ||
| "partnershipResources": "Partnership Resources", | ||
| "eventResources": "Event Resources", | ||
| "footerRelBlock": [ |
There was a problem hiding this comment.
relations - there is footer-rel.html element
There was a problem hiding this comment.
No, cause it's related to footer-rel.html element. Can be footerRelationsBlock, but I would leave it as it is.
There was a problem hiding this comment.
I would rather rename footer-rel.html file. It confuses me :)
src/elements/footer-block.html
Outdated
|
|
||
| static get is() { return 'footer-block' } | ||
|
|
||
| constructor() { |
src/elements/footer-nav.html
Outdated
| padding: 0; | ||
| } | ||
|
|
||
| .gdg-logo { |
src/elements/footer-nav.html
Outdated
| } | ||
|
|
||
| a { | ||
| -moz-osx-font-smoothing: grayscale; |
src/elements/footer-nav.html
Outdated
|
|
||
| static get is() { return 'footer-nav' } | ||
|
|
||
| constructor() { |
src/elements/footer-nav.html
Outdated
| color: #616161; | ||
| padding-bottom: 2px; | ||
| text-decoration: none; | ||
| transition: border-color .3s ease-out; |
There was a problem hiding this comment.
Can we move animation global config to variables to make it the same everywhere?
src/elements/footer-rel.html
Outdated
|
|
||
| </style> | ||
| {% for footerRel in footerRelBlock %} | ||
| <div class="col" layout vertical flex wrap flex-auto> |
There was a problem hiding this comment.
We don't have any definition of .col. Do we need both flex and flex-auto attributes?
There was a problem hiding this comment.
what do you mean there is no definition of col?
There was a problem hiding this comment.
flex-auto is enough, will remove flex
src/elements/footer-rel.html
Outdated
|
|
||
| static get is() { return 'footer-rel' } | ||
|
|
||
| constructor() { |
src/elements/footer-social.html
Outdated
| :host { | ||
| padding-left: 4px; | ||
| position: relative; | ||
| color: var(--footer-text-color);; |
src/elements/footer-social.html
Outdated
| } | ||
|
|
||
| .share-gplus paper-icon-button { | ||
| color: var(--red-gplus-color); |
There was a problem hiding this comment.
Just gplus-color. Because if they change color we don't need to update variable name.
src/elements/footer-social.html
Outdated
| } | ||
|
|
||
| .blog h4 { | ||
| padding-right: 55px; |
src/elements/footer-social.html
Outdated
| } | ||
|
|
||
| .fab paper-fab { | ||
| transform: scale(1); |
src/elements/footer-social.html
Outdated
| transform: scale(1); | ||
| background: #fff; | ||
| color: inherit; | ||
| transition: transform 200ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 200ms cubic-bezier(0, 0, 0.2, 1); |
There was a problem hiding this comment.
A new animation, can we use the previous one?
Write in a canonical way, we are going to use autoprefixer then
src/elements/footer-social.html
Outdated
| transition: transform 200ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 200ms cubic-bezier(0, 0, 0.2, 1); | ||
| will-change: transform; | ||
| pointer-events: all; | ||
| box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.12), 0px 8px 8px 0px rgba(0,0,0,0.24); |
src/elements/footer-social.html
Outdated
| } | ||
|
|
||
| .fab { | ||
| transform: translateY(-130px); |
There was a problem hiding this comment.
If we add position: relative to :host only after min-width: 812px, we don't need to specify this value + if previous block is taller, this number will not work
src/elements/footer-social.html
Outdated
| } | ||
|
|
||
| .social-group.blog, | ||
| .social-group.social-networks { |
There was a problem hiding this comment.
Do we need such specific selector? Maybe just .blog, .social-networks?
src/elements/footer-social.html
Outdated
| backToTop(e) { | ||
| var scrollDuration = 500; | ||
| var scrollStep = -window.scrollY / (scrollDuration / 15), | ||
| scrollInterval = setInterval(function(){ |
There was a problem hiding this comment.
setInterval is not good for performance use requestAnimationFrame instead. Some info:
https://hacks.mozilla.org/2011/08/animating-with-javascript-from-setinterval-to-requestanimationframe/
|
|
||
| static get is() { return 'mailchimp-subscribe' } | ||
|
|
||
| constructor() { |
src/elements/shared-styles.html
Outdated
| @@ -44,6 +48,10 @@ | |||
| text-decoration: none; | |||
| } | |||
|
|
|||
| .roboto-font { | |||
There was a problem hiding this comment.
This font-family is a default for this app
https://github.com/gdg-x/hoverboard/blob/hoverboard-v2/index.html#L78
src/hoverboard-app.html
Outdated
| @@ -34,7 +35,7 @@ | |||
| :host { | |||
| display: block; | |||
| position: relative; | |||
| min-height: 100vh; | |||
| min-height: 200vh; | |||
There was a problem hiding this comment.
2 times viewport height? Why do we need this?
There was a problem hiding this comment.
It's temporary since there is no any content's static height. As footer has, it will take mostly all space for now.
There was a problem hiding this comment.
We can add such values to test on local environments but never push to the repository
| "url": "https://www.youtube.com/playlist?list=PLt8lEzcLNl31AouwDkbLbLARlQFwNS2en" | ||
| } | ||
| ], | ||
| "share" : [ |
There was a problem hiding this comment.
Does it make sense to keep this values here? Most probably users will not change them
There was a problem hiding this comment.
Probably yes, but better to have one point to configure the conference website for your needs, then looking for places to change in code
data/hoverboard.config.json
Outdated
| "name": "b_b7e853a79164ddfdbda3ed77b_7993e39fbe" | ||
| }, | ||
| "codUrl": "https://devfest.gdg.org.ua/cod/", | ||
| "chapterName": "GDG Lviv" |
There was a problem hiding this comment.
Can we use organizer.name instead?
| "footerRelBlock": [ | ||
| { | ||
| "title": "About", | ||
| "links": [ |
There was a problem hiding this comment.
All these links will be opened in a new tab? can we configure this?
There was a problem hiding this comment.
what is a goal of configuring that? I put target="_blank" for each link.
src/elements/footer-block.html
Outdated
|
|
||
| :host { | ||
| display: block; | ||
| position: absolute; |
There was a problem hiding this comment.
Why position absolute? this block should be at the bottom
There was a problem hiding this comment.
I was googling on different cases, and this is how people usually do that :) if you want the element to put at the bottom, you make position absolute + bottom: 0;
src/elements/footer-block.html
Outdated
| left: 0; | ||
| right: 0; | ||
| margin: 20px 0 0 0; | ||
| box-sizing: border-box; |
There was a problem hiding this comment.
This behavior should default for all elements, move to shared-styles.
* {
box-sizing: border-box;
}
| <paper-fab class="back-to-top" icon="hoverboard:up" on-click="backToTop"></paper-fab> | ||
| </div> | ||
| <footer-social layout flex flex-auto horizontal wrap></footer-social> | ||
| <footer-rel layout flex horizontal wrap></footer-rel> |
There was a problem hiding this comment.
footer-relations, the same as footer-nav is navigation
src/elements/footer-nav.html
Outdated
| text-decoration: underline; | ||
| } | ||
|
|
||
| @media (max-width: 811px) { |
There was a problem hiding this comment.
We have mobile first development. So @media should be used with (min-width: ...)
src/elements/footer-nav.html
Outdated
| <a href="{$ organizer.url $}" target="_blank" rel="noopener noreferrer"> | ||
| <iron-image | ||
| class="footer-logo" | ||
| src="../../images/gdg-logo.svg" |
There was a problem hiding this comment.
rename to organizer-logo.svg, please
src/elements/shared-styles.html
Outdated
| @@ -42,6 +48,10 @@ | |||
| a { | |||
| color: var(--default-primary-color); | |||
| text-decoration: none; | |||
| -moz-osx-font-smoothing: grayscale; | |||
There was a problem hiding this comment.
Move to global styles * { ... } in shared-styles
src/mixins/animation-frame.html
Outdated
| }; | ||
| })(); | ||
|
|
||
| const AnimationFrame = subclass => class extends subclass { |
There was a problem hiding this comment.
Class name does not describe the content. Maybe would be better ScrollFunctions or something like that
There was a problem hiding this comment.
Initially, I wanted to have one mixin with all functions requesting animation frame
src/mixins/animation-frame.html
Outdated
| let time = Math.max(.1, Math.min(Math.abs(scrollY - scrollTargetY) / speed, .8)); | ||
|
|
||
| // easing equations from https://github.com/danro/easing-js/blob/master/easing.js | ||
| let PI_D2 = Math.PI / 2, |
src/mixins/animation-frame.html
Outdated
| @@ -0,0 +1,64 @@ | |||
| <script> | |||
| window.requestAnimFrame = (function(){ | |||
There was a problem hiding this comment.
We can use standard - window.requestAnimationFrame
http://caniuse.com/#search=requestAnimationFrame
data/hoverboard.config.json
Outdated
| "name": "b_b7e853a79164ddfdbda3ed77b_7993e39fbe" | ||
| }, | ||
| "codUrl": "https://devfest.gdg.org.ua/cod/", | ||
| "organizerName": "GDG Lviv" |
data/hoverboard.config.json
Outdated
| "url": "https://gdg.us11.list-manage.com/subscribe/post?u=b7e853a79164ddfdbda3ed77b&id=7993e39fbe", | ||
| "name": "b_b7e853a79164ddfdbda3ed77b_7993e39fbe" | ||
| }, | ||
| "codUrl": "https://devfest.gdg.org.ua/cod/", |
data/resources.json
Outdated
| @@ -3,5 +3,77 @@ | |||
| "description": "The biggest Google tech conference in Ukraine carefully crafted for you by GDG community! All about Android, Web and Cloud from the world experts", | |||
| "keywords": "event, gdg, gde, devfest, google, programming, android, chrome, polymer, developers, web, cloud, androiddev", | |||
| "dates": "October 13-14, 2017", | |||
| "locationAddressShort": "Lviv, Ukraine" | |||
| "locationAddressShort": "Lviv, Ukraine", | |||
src/elements/footer-block.html
Outdated
| background: var(--footer-background-color); | ||
| font-size: 14px; | ||
| line-height: 1.5; | ||
| text-rendering: optimizeLegibility; |
There was a problem hiding this comment.
Move to global styles for body
src/elements/hoverboard-icons.html
Outdated
| <g id="up"> | ||
| <path d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"></path> | ||
| </g> | ||
| <g id="gplus-share"> |
There was a problem hiding this comment.
let's be more generic and name such icons -alt instead of -share
Implement footer block
No description provided.