Introducing footer #108
Introducing footer #108
Conversation
Add arrow icons Back-button
Includes Social/Language/Copyline
|
Can be accessed here: |
| <a class="footer-link " href="#" data-footer="${this.$element.selector}"> | ||
| <svg class="footer-back-icon" viewBox="0 0 24 24"> | ||
| <path fill-rule="evenodd" clip-rule="evenodd" d="M5.39 1.478L6.86-.025l10.3 10.522.004-.004 1.467 1.497-.003.005.004.004-1.472 1.503-.004-.005L6.9 23.975 5.434 22.48 15.688 12" data-reactid="37"></path> | ||
| </svg> |
There was a problem hiding this comment.
I'd prefer if we rendered this markup in our templates already and then just switched classes (like .in, ``.is-visible) to hide or show.
| import $ from 'jquery' | ||
| import registerPlugin from './register-plugin' | ||
|
|
||
| class Footer { |
There was a problem hiding this comment.
Let's try to make this obsolete. We have such menu components in several places (ex. in the main menu, in the mobile burger menu) and could write a menu plugin that works in all different scenarios. I'll have a look if I can find some already existing code.
There was a problem hiding this comment.
Would be great. I was inspired by the modal plugin :)
| $footer-bottom-border: $color-indigo; | ||
| $footer-sides-offset: 50px; | ||
|
|
||
| .clear-gutter { |
There was a problem hiding this comment.
Watch out, this would be a utility and would need to go into the utilities folder. However, I'd add the margin reset to the correspnding classes directly, so the developer doesn't have to take care about the implementation specifics.
|
|
||
| .footer-bottom-social-light { | ||
| @media (min-width: $screen-md-min) { | ||
| height: 50px |
There was a problem hiding this comment.
There's a semicolon missing.
| {{#code-snippet "html"}}{{#get snippets "/components/footer/snippets/footer-light-lang-social"}}{{{.}}}{{/get}}{{/code-snippet}} | ||
|
|
||
| {{/inline}} | ||
| {{/page}} |
There was a problem hiding this comment.
It would be great to have a similar documentation approach on the footer page as we have on the header page.
- Tell shortly what the footer is supposed to do and why it's important
- Show a full blown example
- List all the possible elements that can go into the footer
There was a problem hiding this comment.
Totally agree, I was in the hurry to finish for the demo. But definitely need more comments.
+ Adjusting the padding
Use DOM & CSS instead of pure jQuery DOM injection
Refactor all the use of .clear-gutter
#38