Skip to content

Commit aa70c63

Browse files
authored
💄 style(html): improve table responsiveness in class-options (#2913)
- replace table layout with responsive div-based layout - use Bootstrap classes for consistent styling across devices - enhance readability on smaller screens with contextual labels
2 parents 31562ac + 6e5ed42 commit aa70c63

File tree

1 file changed

+40
-26
lines changed

1 file changed

+40
-26
lines changed

docs/layouts/_shortcodes/class-options.html

Lines changed: 40 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -31,32 +31,46 @@
3131

3232
{{ if and $data $data.options }}
3333
<div class="class-options">
34-
<table class="table table-striped">
35-
<thead>
36-
<tr>
37-
<th>Parameter</th>
38-
<th>Type</th>
39-
<th>Description</th>
40-
<th>Default Value</th>
41-
</tr>
42-
</thead>
43-
<tbody>
44-
{{ range $data.options }}
45-
<tr>
46-
<td><code>{{ .parameterName }}</code></td>
47-
<td><code>{{ .type }}</code></td>
48-
<td>{{ .description | markdownify }}</td>
49-
<td>
50-
{{ if .defaultValue }}
51-
<code>{{ .defaultValue }}</code>
52-
{{ else }}
53-
<em>Not specified</em>
54-
{{ end }}
55-
</td>
56-
</tr>
57-
{{ end }}
58-
</tbody>
59-
</table>
34+
<!-- Header row for larger screens -->
35+
<div class="row d-none d-md-flex bg-light border-bottom border-2 fw-bold py-2 mb-2">
36+
<div class="col-md-3">Parameter</div>
37+
<div class="col-md-2">Type</div>
38+
<div class="col-md-5">Description</div>
39+
<div class="col-md-2">Default Value</div>
40+
</div>
41+
42+
<!-- Options rows -->
43+
{{ range $data.options }}
44+
<div class="row border-bottom py-3 mb-2">
45+
<!-- Parameter -->
46+
<div class="col-12 col-md-3 mb-2 mb-md-0">
47+
<div class="d-md-none fw-bold text-muted small">Parameter:</div>
48+
<code class="text-primary">{{ .parameterName }}</code>
49+
</div>
50+
51+
<!-- Type -->
52+
<div class="col-12 col-md-2 mb-2 mb-md-0">
53+
<div class="d-md-none fw-bold text-muted small">Type:</div>
54+
<code class="text-info">{{ .type }}</code>
55+
</div>
56+
57+
<!-- Description -->
58+
<div class="col-12 col-md-5 mb-2 mb-md-0">
59+
<div class="d-md-none fw-bold text-muted small">Description:</div>
60+
<div>{{ .description | markdownify }}</div>
61+
</div>
62+
63+
<!-- Default Value -->
64+
<div class="col-12 col-md-2">
65+
<div class="d-md-none fw-bold text-muted small">Default Value:</div>
66+
{{ if .defaultValue }}
67+
<code class="text-success">{{ .defaultValue }}</code>
68+
{{ else }}
69+
<em class="text-muted">Not specified</em>
70+
{{ end }}
71+
</div>
72+
</div>
73+
{{ end }}
6074
</div>
6175
{{ else if not $dataFile }}
6276
<div class="alert alert-warning">

0 commit comments

Comments
 (0)