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

limit table scrolling and prevent overflow

Browse Source
This commit is contained in:
lindsaym-fa
2024-06-18 19:23:25 -04:00
parent 5181377820
commit ae9ff38fa0
3 changed files with 28 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
docs/_layouts/component.njk
View File

@@ -69,41 +69,35 @@
<thead>
<tr>
<th class="table-name">Name</th>
<th class="table-attribute">Attribute</th>
<th class="table-description">Description</th>
<th class="table-reflects">Reflects</th>
<th class="table-type">Type</th>
<th class="table-default">Default</th>
</tr>
</thead>
<tbody>
{% for prop in component.properties %}
<tr>
<td class="table-name">
<code>{{ prop.name }}</code>
</td>
<td class="table-attribute">
<code>{{ prop.name }}</code><br>
{% if prop.attribute %}
<code>{{ prop.attribute }}</code>
<div><small><code>{{ prop.attribute }}</code></small></div>
{% endif %}
</td>
<td class="table-description">
{{ prop.description | inlineMarkdown | safe }}
<div>{{ prop.description | inlineMarkdown | safe }}</div>
{% if prop.type.text %}
<div><small><strong>Type</strong>&nbsp;<code>{{ prop.type.text | trimPipes | inlineMarkdown | safe }}</code></small></div>
{% endif %}
{% if prop.default %}
<div><small><strong>Default</strong>&nbsp;<code>{{ prop.default | inlineMarkdown | safe }}</code></small></div>
{% endif %}
</td>
<td class="table-checkmark">
{% if prop.reflects %}
<wa-icon name="check"></wa-icon>
{% endif %}
</td>
<td class="table-type">
{% if prop.type.text %}
<code>{{ prop.type.text | trimPipes | inlineMarkdown | safe }}</code>
{% endif %}
</td>
<td class="table-default">
{% if prop.default %}
<code>{{ prop.default | inlineMarkdown | safe }}</code>
{% endif %}
</td>
</tr>
{% endfor %}
@@ -206,17 +200,18 @@
<tr>
<th class="table-name">Name</th>
<th class="table-description">Description</th>
<th>Default</th>
</tr>
</thead>
<tbody>
{% for cssProperty in component.cssProperties %}
<tr>
<td class="table-name"><code>{{ cssProperty.name }}</code></td>
<td class="table-description">{{ cssProperty.description | inlineMarkdown | safe }}</td>
<td class="table-default">
<td class="table-description">
<div>{{ cssProperty.description | inlineMarkdown | safe }}</div>
{% if cssProperty.default %}
<code>{{ cssProperty.default }}</code>
<div>
<small><strong>Default</strong>&nbsp;<code>{{ cssProperty.default }}</code></small>
</div>
{% endif %}
</td>
</tr>
@@ -236,7 +231,6 @@
<tr>
<th class="table-name">Name</th>
<th class="table-description">Description</th>
<th class="table-selector">CSS selector</th>
</tr>
</thead>
<tbody>
@@ -244,7 +238,6 @@
<tr>
<td class="table-name"><code>{{ cssPart.name }}</code></td>
<td class="table-description">{{ cssPart.description | inlineMarkdown | safe }}</td>
<td class="table-selector"><code>::part({{ cssPart.name }})</code></td>
</tr>
{% endfor %}
</tbody>

11
docs/assets/styles/docs.css
View File

@@ -105,6 +105,11 @@ wa-page[view='desktop'] > #sidebar {
max-height: 100%;
}
wa-page[view='desktop'] > #outline {
min-width: 240px;
max-width: 240px;
}
#sidebar,
#outline {
h2 {
@@ -191,7 +196,7 @@ wa-page > main {
.callout {
display: flex;
gap: 1rem;
border: var(--wa-border-style) var(--wa-border-width-m);
border: var(--wa-border-style) var(--wa-border-width-s);
border-radius: var(--wa-border-radius-m);
padding: 1rem;
margin-block-end: var(--wa-flow-spacing);
@@ -258,3 +263,7 @@ wa-page > main {
columns: 2;
gap: 1rem;
}
.component-table td > * + * {
margin-block-start: var(--wa-space-s);
}

5
src/themes/applied.css
View File

@@ -191,7 +191,7 @@ var {
}
code {
white-space: pre;
white-space: normal;
}
pre {
@@ -355,7 +355,8 @@ th {
td,
th {
text-align: start;
padding: var(--wa-space-s);
padding: var(--wa-space-l) var(--wa-space-s);
vertical-align: top;
}
/* Definition lists */