js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

finish up sport awesome

Browse Source
This commit is contained in:
konnorrogers
2023-10-18 13:49:09 -04:00
parent d4e2abe218
commit 1df6afa541
8 changed files with 264 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/_includes/layout-example.njk
View File

@@ -16,7 +16,7 @@
<meta name="turbo-cache-control" content="no-preview">
{# Favicons #}
<link rel="icon" href="{{ assetUrl('images/logo.svg') }}" type="image/x-icon" />
<link rel="icon" href="{{ assetUrl('images/favicon.svg') }}" type="image/x-icon" />
{# Twitter Cards #}
<meta name="twitter:card" content="summary" />

5
docs/_includes/layout-templates/advanced-example.css.njk
View File

@@ -1,3 +1,8 @@
html {
min-height: 100%;
height: auto;
}
body {
padding: 0;
height: auto;

3
docs/_includes/layout-templates/app.css.njk
View File

@@ -14,6 +14,9 @@ wa-layout {
color: var(--wa-color-neutral-20);
}
wa-card :is(p, h3) {
margin: 0;
}
wa-layout::part(header) {
/** Because headers are sticky, this keeps text from leaking through. */

5
docs/_includes/layout-templates/hero.css.njk
View File

@@ -1,3 +1,8 @@
html {
min-height: 100%;
height: auto;
}
body {
padding: 0;
height: auto;

3
docs/pages/layouts/index.md
View File

@@ -13,3 +13,6 @@ window.Turbo.session.drive = false
- [Hero Layout](/layouts/hero/index.html)
- [Hero Playground](/layouts/hero-playground/index.html)
- [SportAwesome Layout](/layouts/sport-awesome/index.html)
- [SportAwesome Playgroud](/layouts/sport-awesome-playground/index.html)

244
docs/pages/layouts/sport-awesome.njk
View File

@@ -3,9 +3,14 @@ layout: layout-example.njk
---
<style>
html {
min-height: 100%;
height: auto;
}
body {
padding: 0;
height: auto;
--wa-color-brand-fill-vivid: var(--wa-color-blue-20);
}
img {
@@ -41,18 +46,19 @@ layout: layout-example.njk
.header {
display: flex;
border-bottom: 1px solid var(--wa-color-blue-20);
border-bottom: 1px solid var(--wa-color-brand-fill-vivid);
background-color: var(--wa-color-white);
}
.header > * {
padding: 1rem;
padding: var(--wa-space-base);
}
.header__navigation {
display: flex;
clip-path: polygon(2rem 0,100% 0,100% 100%,0 100%);
padding-inline-start: 2.5rem;
background-color: var(--wa-color-blue-20);
background-color: var(--wa-color-brand-fill-vivid);
width: 100%;
}
@@ -104,9 +110,41 @@ layout: layout-example.njk
display: none;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: var(--wa-space-base);
grid-template-rows: 1fr;
align-items: start;
}
.stats-grid table {
border-collapse: separate;
border-spacing: 0;
border-radius: 8px;
border: 1px solid var(--wa-color-surface-outline);
}
.stats-grid table * {
font-variant-numeric: tabular-nums;
}
.stats-grid table th {
font-weight: bold;
text-align: center;
}
.stats-grid table td:nth-child(2) {
text-align: end;
}
</style>
<wa-layout main-id="main-content" class="wa-theme-light" mobile-breakpoint="925">
<wa-layout main-id="main-content" class="wa-theme-light" mobile-breakpoint="925" disable-sticky="banner">
<header style="padding: var(--wa-space-base); background-color: var(--wa-color-yellow-80);" slot="banner">
Reminder! Get your insurance paperwork in by Oct 12!
</header>
<header class="header" slot="header">
<a href="#" class="logo">
Sport <span class="logo__accent">Awesome</span>
@@ -130,6 +168,10 @@ layout: layout-example.njk
</div>
</header>
<a href="#" class="logo" slot="navigation-header">
Sport <span class="logo__accent">Awesome</span>
</a>
<wa-nav-group slot="navigation">
<wa-nav-item href="#" current="page">Home</wa-nav-item>
<wa-nav-item href="#">Schedule</wa-nav-item>
@@ -138,11 +180,11 @@ layout: layout-example.njk
<wa-nav-item href="#">Videos</wa-nav-item>
</wa-nav-group>
<main id="main-content" class="flow" style="padding: 1rem;">
<div style="display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: 16px;">
<img src="https://via.placeholder.com/1600x900" height="512" width="300" style="aspect-ratio: 16/9; width: 100%;">
<aside style="display: flex; flex-direction: column; border-radius: var(--wa-corners-1x);">
<header style="font-size: 1.4rem; font-weight: bold; color: var(--wa-color-brand-text-on-vivid); background-color: var(--wa-color-blue-20); padding: 1rem; text-align: center; border-top-left-radius: inherit; border-top-right-radius: inherit;">
<main id="main-content" class="flow" style="padding: var(--wa-space-base);">
<div style="display: flex; flex-wrap: wrap; gap: 16px;">
<img src="https://via.placeholder.com/1600x900" height="512" width="300" style="aspect-ratio: 16/9; min-width: 75%; flex-grow: 1;">
<aside style="display: flex; flex-direction: column; border-radius: var(--wa-corners-1x); flex-grow: 1; flex-shrink: 1;">
<header style="font-size: 1.4rem; font-weight: bold; color: var(--wa-color-brand-text-on-vivid); background-color: var(--wa-color-brand-fill-vivid); padding: var(--wa-space-base); text-align: center; border-top-left-radius: inherit; border-top-right-radius: inherit;">
Upcoming
</header>
@@ -150,10 +192,10 @@ layout: layout-example.njk
Tryouts!
</div>
<div style="background-color: var(--wa-color-neutral-90); padding: 1rem; border-bottom-left-radius: inherit; border-bottom-right-radius: inherit;">
<div style="background-color: var(--wa-color-neutral-90); padding: var(--wa-space-base); border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; text-align: center;">
<span style="font-weight: bold; font-size: 1.2rem;">Barclay's Center</span>
<br><br>
<br>
<time>Sat, Jul 3rd • 11:30am</time>
</div>
@@ -168,5 +210,185 @@ layout: layout-example.njk
Adipisicing beatae lorem nisi aliquid similique Voluptas doloremque pariatur tempore omnis maiores explicabo. Provident iste vel explicabo corporis quaerat! Necessitatibus minus quas iusto ducimus consequatur illo Cum eos adipisci ut!
</p>
</section>
<section>
<h2 style="text-align: center; font-weight: bold; font-size: 1.5em;">Stats</h2>
<div class="stats-grid">
<table>
<thead>
<tr>
<th colspan="2">
Serve
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Attempts</td>
<td>2936</td>
</tr>
<tr>
<td>Serve %</td>
<td>93.6%</td>
</tr>
<tr>
<td>Aces</td>
<td>268</td>
</tr>
<tr>
<td>Errors</td>
<td>189</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th colspan="2">
Serve Receive
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Attempts</td>
<td>2428</td>
</tr>
<tr>
<td>Pass Rating</td>
<td>1.72</td>
</tr>
<tr>
<td>Pass Error %</td>
<td>13.3%</td>
</tr>
<tr>
<td>3-pass %</td>
<td>28.5%</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th colspan="2">
Attack
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Attempts</td>
<td>3624</td>
</tr>
<tr>
<td>Kills</td>
<td>1431</td>
</tr>
<tr>
<td>Errors</td>
<td>268</td>
</tr>
<tr>
<td>Hitting Efficiency</td>
<td>0.254</td>
</tr>
<tr>
<td>Kill %</td>
<td>39.5%</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th colspan="2">
Dig
</th>
</tr>
<tbody>
<tr>
<td>Attempts</td>
<td>3124</td>
</tr>
<tr>
<td>Digs</td>
<td>2235</td>
</tr>
<tr>
<td>Errors</td>
<td>889</td>
</tr>
<tr>
<td>Dig %</td>
<td>71.5%</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th colspan="2">
Block
</th>
</tr>
<tbody>
<tr>
<td>Blocks</td>
<td>348</td>
</tr>
<tr>
<td>Errors</td>
<td>414</td>
</tr>
<tr>
<td>Block %</td>
<td>31.6%</td>
</tr>
<tr>
<td>Error %</td>
<td>24.6%</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th colspan="2">
Set
</th>
</tr>
<tbody>
<tr>
<td>Assists</td>
<td>1364</td>
</tr>
<tr>
<td>Errors</td>
<td>81</td>
</tr>
</tbody>
</table>
</div>
</section>
</main>
<footer slot="main-footer" style="background-color: var(--wa-color-brand-fill-vivid); color: var(--wa-color-text-inverse); padding: var(--wa-space-base); text-align: center;">
© 2023 - Sport Awesome
</footer>
</wa-layout>

16
package.json
View File

@@ -25,15 +25,8 @@
"./dist/react/*": "./dist/react/*",
"./dist/translations/*": "./dist/translations/*"
},
"files": [
"dist",
"cdn"
],
"keywords": [
"web components",
"custom elements",
"components"
],
"files": ["dist", "cdn"],
"keywords": ["web components", "custom elements", "components"],
"repository": {
"type": "git",
"url": "git+https://github.com/shoelace-style/shoelace.git"
@@ -136,9 +129,6 @@
"user-agent-data-types": "^0.3.1"
},
"lint-staged": {
"*.{ts,js}": [
"eslint --max-warnings 0 --cache --fix",
"prettier --write"
]
"*.{ts,js}": ["eslint --max-warnings 0 --cache --fix", "prettier --write"]
}
}

11
src/components/layout/layout.styles.ts
View File

@@ -18,6 +18,17 @@ export default css`
--sub-header-height: 0px;
}
:host([disable-sticky~="banner"]) {
--banner-height: 0px !important;
}
:host([disable-sticky~="header"]) {
--header-height: 0px !important;
}
:host([disable-sticky~="sub-header"]) {
--sub-header-height: 0px !important;
}
:host([disable-sticky~="banner"]) [part~="banner"],
:host([disable-sticky~="header"]) [part~="header"],
:host([disable-sticky~="sub-header"]) [part~="sub-header"],