chromium-dashboard/client-src/elements/chromedash-footer.ts

84 строки
2.1 KiB
TypeScript

import {LitElement, css, html} from 'lit';
import {customElement} from 'lit/decorators.js';
import {SHARED_STYLES} from '../css/shared-css.js';
@customElement('chromedash-footer')
export class ChromedashFooter extends LitElement {
static get styles() {
return [
...SHARED_STYLES,
css`
footer {
background: var(--page-background);
box-shadow: 0 -2px 5px var(--shadow-color);
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
align-items: center;
padding: var(--content-padding-half);
position: relative; /* Ensure the z-index has an effect so the box-shadow appears. */
z-index: 800;
}
footer div > * + * {
margin-left: var(--content-padding);
padding-left: var(--content-padding);
}
#footer-spacer {
display: none;
height: calc(28px + var(--content-padding-half));
}
@media only screen and (min-width: 601px) and (min-height: 601px) {
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
#footer-spacer {
display: block;
}
}
`,
];
}
render() {
return html`
<div id="footer-spacer"></div>
<footer>
<div>
<a
href="https://github.com/GoogleChrome/chromium-dashboard/wiki/"
target="_blank"
rel="noopener"
>Help</a
>
<a
href="https://groups.google.com/a/chromium.org/forum/#!newtopic/blink-dev"
target="_blank"
rel="noopener"
>Discuss</a
>
<a
href="https://github.com/GoogleChrome/chromium-dashboard/issues"
target="_blank"
rel="noopener"
>File an issue</a
>
<a
href="https://policies.google.com/privacy"
target="_blank"
rel="noopener"
>Privacy</a
>
</div>
</footer>
`;
}
}