From 89cad0011b233652d176c001abd227df55a876c6 Mon Sep 17 00:00:00 2001 From: Adam Holtzman Date: Tue, 29 Oct 2019 20:34:08 -0400 Subject: [PATCH] add social links with icon componet to header (#249) * add social links with icone componet to header * clean up * stab at fixing the svgs so they render * change lit-element tag from html to svg and resize * change out the svg icons * clean up * fightig the good fight with the 200 line max * try the simple stuff first... * fix the poor octo-cat, maybe the twitter bird apears? * new twitter svg - fingers crossed this one works * fine tine the styling of the social bar & icons * clean up, add icon padding, center align nav text * indentation --- www/components/header/header.css | 12 +++++- www/components/header/header.js | 10 +---- www/components/icons/github-icon.js | 22 +++++++++++ www/components/icons/slack-icon.js | 39 ++++++++++++++++++++ www/components/icons/twitter-icon.js | 28 ++++++++++++++ www/components/social-icons/social-icons.css | 16 ++++++++ www/components/social-icons/social-icons.js | 24 ++++++++++++ 7 files changed, 142 insertions(+), 9 deletions(-) create mode 100644 www/components/icons/github-icon.js create mode 100644 www/components/icons/slack-icon.js create mode 100644 www/components/icons/twitter-icon.js create mode 100644 www/components/social-icons/social-icons.css create mode 100644 www/components/social-icons/social-icons.js diff --git a/www/components/header/header.css b/www/components/header/header.css index 513973f08..d6c659dc6 100644 --- a/www/components/header/header.css +++ b/www/components/header/header.css @@ -23,6 +23,12 @@ display: flex; align-items:center; flex-wrap:wrap; + justify-content: space-between; + + @media (max-width:768px) { + flex-direction:column; + text-align: center; + } } & nav { @@ -32,6 +38,7 @@ padding:0; margin:0; list-style: none; + text-align: center; & li { margin:0; color:white; @@ -45,6 +52,9 @@ } } } + @media (max-width: 768px) { + width:100%; + } } & .brand { justify-items: left; @@ -64,4 +74,4 @@ } } } -} +} \ No newline at end of file diff --git a/www/components/header/header.js b/www/components/header/header.js index 7ecd8381e..ef96fdef7 100644 --- a/www/components/header/header.js +++ b/www/components/header/header.js @@ -3,6 +3,7 @@ import '@evergreen-wc/eve-container'; import headerCss from './header.css'; import brand from '../../assets/brand.png'; +import '../components/social-icons/social-icons'; class HeaderComponent extends LitElement { render() { @@ -30,14 +31,7 @@ class HeaderComponent extends LitElement {
  • Plugins
    • -
    - - Greenwood GitHub Star Counter - -
    + diff --git a/www/components/icons/github-icon.js b/www/components/icons/github-icon.js new file mode 100644 index 000000000..24382e9f9 --- /dev/null +++ b/www/components/icons/github-icon.js @@ -0,0 +1,22 @@ +import { svg } from 'lit-element'; + +const githubIcon = svg``; + +export default githubIcon; diff --git a/www/components/icons/slack-icon.js b/www/components/icons/slack-icon.js new file mode 100644 index 000000000..a81e8f2b7 --- /dev/null +++ b/www/components/icons/slack-icon.js @@ -0,0 +1,39 @@ +import { svg } from 'lit-element'; + +const slackIcon = svg` + + + + + + + `; + +export default slackIcon; diff --git a/www/components/icons/twitter-icon.js b/www/components/icons/twitter-icon.js new file mode 100644 index 000000000..b3c75f5be --- /dev/null +++ b/www/components/icons/twitter-icon.js @@ -0,0 +1,28 @@ +import { svg } from 'lit-element'; + +const twitterIcon = svg` + + + + `; + +export default twitterIcon; diff --git a/www/components/social-icons/social-icons.css b/www/components/social-icons/social-icons.css new file mode 100644 index 000000000..fc3bff782 --- /dev/null +++ b/www/components/social-icons/social-icons.css @@ -0,0 +1,16 @@ +:host { + display: flex; + justify-content: space-around; + flex-direction: row; + + & .icons { + margin: auto; + } + & .slack-icon { + padding: 0 1rem 0 1.25rem; + } + + @media (max-width: 768px) { + flex-direction: row; + } +} diff --git a/www/components/social-icons/social-icons.js b/www/components/social-icons/social-icons.js new file mode 100644 index 000000000..a9e1a1813 --- /dev/null +++ b/www/components/social-icons/social-icons.js @@ -0,0 +1,24 @@ +import { html, LitElement } from 'lit-element'; +import css from './social-icons.css'; +import githubIcon from '../icons/github-icon'; +import twitterIcon from '../icons/twitter-icon'; +import slackIcon from '../icons/slack-icon'; + +class SocialIcons extends LitElement { + render() { + return html` + + ${githubIcon} + ${slackIcon} + ${twitterIcon} + `; + } +} + +customElements.define('eve-socialicons', SocialIcons);