Skip to content

Commit fcdae9d

Browse files
MattiasBuelensMattiasBuelens
committed
Use regular <table> inside menus
1 parent 1efaaee commit fcdae9d

4 files changed

Lines changed: 113 additions & 57 deletions

File tree

‎rollup.config.mjs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,7 @@ function jsPlugins({ es5 = false, node = false, module = false, production = fal
149149
plugins: [
150150
postcssPresetEnv({
151151
browsers: browserslist,
152-
autoprefixer: { grid: 'no-autoplace' },
152+
autoprefixer: { grid: false },
153153
enableClientSidePolyfills: false
154154
}),
155155
postcssMixins()

‎src/components/MenuTable.css‎

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,29 @@
1-
/* autoprefixer grid: autoplace */
21
.theoplayer-menu-table {
3-
display: grid;
4-
grid-template-columns: max-content 1fr;
5-
grid-template-rows: auto auto;
2+
table-layout: auto;
3+
border-collapse: collapse;
64
}
75

8-
.theoplayer-menu-table > * {
9-
align-self: center;
6+
.theoplayer-menu-table,
7+
.theoplayer-menu-table tr,
8+
.theoplayer-menu-table td {
9+
margin: 0;
10+
padding: 0;
11+
}
12+
13+
.theoplayer-menu-table td > * {
14+
width: 100%;
15+
height: 100%;
1016
font-size: var(--theoplayer-text-font-size, 14px);
1117
line-height: var(--theoplayer-text-content-height, var(--theoplayer-control-height, 24px));
1218
padding: var(--theoplayer-control-padding, 10px);
1319
}
1420

15-
.theoplayer-menu-table > span {
16-
display: block;
21+
.theoplayer-menu-table td:first-child {
22+
width: 0;
23+
white-space: nowrap;
24+
}
25+
26+
.theoplayer-menu-table td:last-child {
27+
width: 100%;
28+
text-align: center;
1729
}

‎src/components/SettingsMenu.ts‎

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -24,16 +24,24 @@ export class SettingsMenu extends MenuGroup {
2424
return html`
2525
<theoplayer-menu>
2626
<span slot="heading"><slot name="heading">Settings</slot></span>
27-
<div class="theoplayer-menu-table">
28-
<span>Quality</span>
29-
<theoplayer-menu-button menu="quality-menu">
30-
<theoplayer-active-quality-display></theoplayer-active-quality-display>
31-
</theoplayer-menu-button>
32-
<span>Playback speed</span>
33-
<theoplayer-menu-button menu="playback-rate-menu">
34-
<theoplayer-playback-rate-display></theoplayer-playback-rate-display>
35-
</theoplayer-menu-button>
36-
</div>
27+
<table class="theoplayer-menu-table">
28+
<tr>
29+
<td><span>Quality</span></td>
30+
<td>
31+
<theoplayer-menu-button menu="quality-menu">
32+
<theoplayer-active-quality-display></theoplayer-active-quality-display>
33+
</theoplayer-menu-button>
34+
</td>
35+
</tr>
36+
<tr>
37+
<td><span>Playback speed</span></td>
38+
<td>
39+
<theoplayer-menu-button menu="playback-rate-menu">
40+
<theoplayer-playback-rate-display></theoplayer-playback-rate-display>
41+
</theoplayer-menu-button>
42+
</td>
43+
</tr>
44+
</table>
3745
</theoplayer-menu>
3846
<theoplayer-menu id="quality-menu" menu-close-on-input hidden>
3947
<span slot="heading">Quality</span>

‎src/components/TextTrackStyleMenu.ts‎

Lines changed: 74 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -70,44 +70,80 @@ export class TextTrackStyleMenu extends MenuGroup {
7070
class="theoplayer-menu-heading-button"
7171
slot="heading"
7272
></theoplayer-text-track-style-reset-button>
73-
<div class="theoplayer-menu-table">
74-
<span>Font family</span>
75-
<theoplayer-menu-button menu="font-family-menu">
76-
<theoplayer-text-track-style-display property="fontFamily"></theoplayer-text-track-style-display>
77-
</theoplayer-menu-button>
78-
<span>Font color</span>
79-
<theoplayer-menu-button menu="font-color-menu">
80-
<theoplayer-text-track-style-display property="fontColor"></theoplayer-text-track-style-display>
81-
</theoplayer-menu-button>
82-
<span>Font opacity</span>
83-
<theoplayer-menu-button menu="font-opacity-menu">
84-
<theoplayer-text-track-style-display property="fontOpacity"></theoplayer-text-track-style-display>
85-
</theoplayer-menu-button>
86-
<span>Font size</span>
87-
<theoplayer-menu-button menu="font-size-menu">
88-
<theoplayer-text-track-style-display property="fontSize"></theoplayer-text-track-style-display>
89-
</theoplayer-menu-button>
90-
<span>Background color</span>
91-
<theoplayer-menu-button menu="background-color-menu">
92-
<theoplayer-text-track-style-display property="backgroundColor"></theoplayer-text-track-style-display>
93-
</theoplayer-menu-button>
94-
<span>Background opacity</span>
95-
<theoplayer-menu-button menu="background-opacity-menu">
96-
<theoplayer-text-track-style-display property="backgroundOpacity"></theoplayer-text-track-style-display>
97-
</theoplayer-menu-button>
98-
<span>Window color</span>
99-
<theoplayer-menu-button menu="window-color-menu">
100-
<theoplayer-text-track-style-display property="windowColor"></theoplayer-text-track-style-display>
101-
</theoplayer-menu-button>
102-
<span>Window opacity</span>
103-
<theoplayer-menu-button menu="window-opacity-menu">
104-
<theoplayer-text-track-style-display property="windowOpacity"></theoplayer-text-track-style-display>
105-
</theoplayer-menu-button>
106-
<span>Character edge style</span>
107-
<theoplayer-menu-button menu="edge-style-menu">
108-
<theoplayer-text-track-style-display property="edgeStyle"></theoplayer-text-track-style-display>
109-
</theoplayer-menu-button>
110-
</div>
73+
<table class="theoplayer-menu-table">
74+
<tr>
75+
<td><span>Font family</span></td>
76+
<td>
77+
<theoplayer-menu-button menu="font-family-menu">
78+
<theoplayer-text-track-style-display property="fontFamily"></theoplayer-text-track-style-display>
79+
</theoplayer-menu-button>
80+
</td>
81+
</tr>
82+
<tr>
83+
<td><span>Font color</span></td>
84+
<td>
85+
<theoplayer-menu-button menu="font-color-menu">
86+
<theoplayer-text-track-style-display property="fontColor"></theoplayer-text-track-style-display>
87+
</theoplayer-menu-button>
88+
</td>
89+
</tr>
90+
<tr>
91+
<td><span>Font opacity</span></td>
92+
<td>
93+
<theoplayer-menu-button menu="font-opacity-menu">
94+
<theoplayer-text-track-style-display property="fontOpacity"></theoplayer-text-track-style-display>
95+
</theoplayer-menu-button>
96+
</td>
97+
</tr>
98+
<tr>
99+
<td><span>Font size</span></td>
100+
<td>
101+
<theoplayer-menu-button menu="font-size-menu">
102+
<theoplayer-text-track-style-display property="fontSize"></theoplayer-text-track-style-display>
103+
</theoplayer-menu-button>
104+
</td>
105+
</tr>
106+
<tr>
107+
<td><span>Background color</span></td>
108+
<td>
109+
<theoplayer-menu-button menu="background-color-menu">
110+
<theoplayer-text-track-style-display property="backgroundColor"></theoplayer-text-track-style-display>
111+
</theoplayer-menu-button>
112+
</td>
113+
</tr>
114+
<tr>
115+
<td><span>Background opacity</span></td>
116+
<td>
117+
<theoplayer-menu-button menu="background-opacity-menu">
118+
<theoplayer-text-track-style-display property="backgroundOpacity"></theoplayer-text-track-style-display>
119+
</theoplayer-menu-button>
120+
</td>
121+
</tr>
122+
<tr>
123+
<td><span>Window color</span></td>
124+
<td>
125+
<theoplayer-menu-button menu="window-color-menu">
126+
<theoplayer-text-track-style-display property="windowColor"></theoplayer-text-track-style-display>
127+
</theoplayer-menu-button>
128+
</td>
129+
</tr>
130+
<tr>
131+
<td><span>Window opacity</span></td>
132+
<td>
133+
<theoplayer-menu-button menu="window-opacity-menu">
134+
<theoplayer-text-track-style-display property="windowOpacity"></theoplayer-text-track-style-display>
135+
</theoplayer-menu-button>
136+
</td>
137+
</tr>
138+
<tr>
139+
<td><span>Character edge style</span></td>
140+
<td>
141+
<theoplayer-menu-button menu="edge-style-menu">
142+
<theoplayer-text-track-style-display property="edgeStyle"></theoplayer-text-track-style-display>
143+
</theoplayer-menu-button>
144+
</td>
145+
</tr>
146+
</table>
111147
</theoplayer-menu>
112148
<theoplayer-menu id="font-family-menu" menu-close-on-input hidden>
113149
<span slot="heading">Font family</span>

0 commit comments

Comments
 (0)