Skip to content

Commit d1873ce

Browse files
knightedcodemonkeyknightedcodemonkey
committed
refactor: grid based layout for controls.
1 parent e4b9cfa commit d1873ce

2 files changed

Lines changed: 83 additions & 91 deletions

File tree

‎src/index.html‎

Lines changed: 62 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -25,44 +25,38 @@ <h1>
2525

2626
<main class="app-grid">
2727
<section class="panel component-panel">
28-
<div class="panel-header panel-header--stack">
29-
<div class="panel-header-row">
30-
<h2>Component</h2>
31-
</div>
32-
<div class="panel-header-row panel-header-row--quick-actions">
33-
<div class="controls controls--actions controls--quick-actions">
34-
<button
35-
class="icon-button"
36-
id="copy-component"
37-
type="button"
38-
title="Copy component source"
39-
aria-label="Copy component source"
40-
>
41-
<svg viewBox="0 0 24 24" aria-hidden="true">
42-
<rect x="9" y="9" width="10" height="10" rx="2"></rect>
43-
<path
44-
d="M6 15H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v1"
45-
></path>
46-
</svg>
47-
</button>
48-
<button
49-
class="icon-button"
50-
id="clear-component"
51-
type="button"
52-
title="Clear component source"
53-
aria-label="Clear component source"
54-
>
55-
<svg viewBox="0 0 24 24" aria-hidden="true">
56-
<path d="M4 7h16"></path>
57-
<path d="M10 11v6"></path>
58-
<path d="M14 11v6"></path>
59-
<path d="M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12"></path>
60-
<path d="M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3"></path>
61-
</svg>
62-
</button>
63-
</div>
28+
<div class="panel-header panel-header--grid">
29+
<h2>Component</h2>
30+
<div class="controls controls--quick-actions panel-header-quick-actions">
31+
<button
32+
class="icon-button"
33+
id="copy-component"
34+
type="button"
35+
title="Copy component source"
36+
aria-label="Copy component source"
37+
>
38+
<svg viewBox="0 0 24 24" aria-hidden="true">
39+
<rect x="9" y="9" width="10" height="10" rx="2"></rect>
40+
<path d="M6 15H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v1"></path>
41+
</svg>
42+
</button>
43+
<button
44+
class="icon-button"
45+
id="clear-component"
46+
type="button"
47+
title="Clear component source"
48+
aria-label="Clear component source"
49+
>
50+
<svg viewBox="0 0 24 24" aria-hidden="true">
51+
<path d="M4 7h16"></path>
52+
<path d="M10 11v6"></path>
53+
<path d="M14 11v6"></path>
54+
<path d="M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12"></path>
55+
<path d="M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3"></path>
56+
</svg>
57+
</button>
6458
</div>
65-
<div class="panel-header-row panel-header-row--actions">
59+
<div class="panel-header-main-actions">
6660
<div class="controls controls--actions">
6761
<button class="render-button" id="render-button" type="button">
6862
Render
@@ -85,44 +79,38 @@ <h2>Component</h2>
8579
</section>
8680

8781
<section class="panel styles-panel">
88-
<div class="panel-header panel-header--stack">
89-
<div class="panel-header-row">
90-
<h2>Styles</h2>
91-
</div>
92-
<div class="panel-header-row panel-header-row--quick-actions">
93-
<div class="controls controls--actions controls--quick-actions">
94-
<button
95-
class="icon-button"
96-
id="copy-styles"
97-
type="button"
98-
title="Copy styles source"
99-
aria-label="Copy styles source"
100-
>
101-
<svg viewBox="0 0 24 24" aria-hidden="true">
102-
<rect x="9" y="9" width="10" height="10" rx="2"></rect>
103-
<path
104-
d="M6 15H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v1"
105-
></path>
106-
</svg>
107-
</button>
108-
<button
109-
class="icon-button"
110-
id="clear-styles"
111-
type="button"
112-
title="Clear styles source"
113-
aria-label="Clear styles source"
114-
>
115-
<svg viewBox="0 0 24 24" aria-hidden="true">
116-
<path d="M4 7h16"></path>
117-
<path d="M10 11v6"></path>
118-
<path d="M14 11v6"></path>
119-
<path d="M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12"></path>
120-
<path d="M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3"></path>
121-
</svg>
122-
</button>
123-
</div>
82+
<div class="panel-header panel-header--grid">
83+
<h2>Styles</h2>
84+
<div class="controls controls--quick-actions panel-header-quick-actions">
85+
<button
86+
class="icon-button"
87+
id="copy-styles"
88+
type="button"
89+
title="Copy styles source"
90+
aria-label="Copy styles source"
91+
>
92+
<svg viewBox="0 0 24 24" aria-hidden="true">
93+
<rect x="9" y="9" width="10" height="10" rx="2"></rect>
94+
<path d="M6 15H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v1"></path>
95+
</svg>
96+
</button>
97+
<button
98+
class="icon-button"
99+
id="clear-styles"
100+
type="button"
101+
title="Clear styles source"
102+
aria-label="Clear styles source"
103+
>
104+
<svg viewBox="0 0 24 24" aria-hidden="true">
105+
<path d="M4 7h16"></path>
106+
<path d="M10 11v6"></path>
107+
<path d="M14 11v6"></path>
108+
<path d="M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12"></path>
109+
<path d="M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3"></path>
110+
</svg>
111+
</button>
124112
</div>
125-
<div class="panel-header-row panel-header-row--actions">
113+
<div class="panel-header-main-actions">
126114
<div class="controls controls--actions">
127115
<label>
128116
<span class="sr-only">Style mode</span>

‎src/styles.css‎

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -141,23 +141,32 @@ body {
141141
font-size: 1rem;
142142
}
143143

144-
.panel-header--stack {
145-
align-items: stretch;
146-
gap: 10px;
144+
.panel-header--grid {
145+
display: grid;
146+
grid-template-columns: minmax(0, 1fr) auto;
147+
grid-template-areas:
148+
'title quick'
149+
'actions actions';
150+
align-items: start;
151+
column-gap: 12px;
152+
row-gap: 10px;
147153
}
148154

149-
.panel-header-row {
150-
display: flex;
151-
align-items: center;
152-
justify-content: space-between;
153-
gap: 12px;
155+
.panel-header--grid h2 {
156+
grid-area: title;
154157
}
155158

156-
.panel-header-row--actions {
157-
justify-content: flex-start;
159+
.panel-header-quick-actions {
160+
grid-area: quick;
161+
justify-self: center;
162+
}
163+
164+
.panel-header-main-actions {
165+
grid-area: actions;
166+
justify-self: start;
158167
}
159168

160-
.panel-header-row--quick-actions {
169+
.panel-header-main-actions .controls {
161170
justify-content: flex-start;
162171
}
163172

@@ -469,12 +478,7 @@ textarea:focus {
469478
}
470479

471480
@media (max-width: 900px) {
472-
.panel-header-row {
473-
align-items: flex-start;
474-
flex-direction: column;
475-
}
476-
477-
.panel-header-row--actions,
481+
.panel-header-main-actions .controls,
478482
.controls--actions {
479483
justify-content: flex-start;
480484
}

0 commit comments

Comments
 (0)