Skip to content

Commit 9160b88

Browse files
deltorkdeltork
committed
fix: minor ui adjustment to styling editor
1 parent b87540d commit 9160b88

File tree

4 files changed

+134
-107
lines changed

4 files changed

+134
-107
lines changed

‎packages/studio-web/src/app/editor/editor.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ <h2 i18n="Title for upload box" class="title">
6969
<div id="readalongContainer" #readalongContainer></div>
7070
<div [class.d-none]="!hasFile" [class.d-lg-flex]="hasFile" class="flex-row">
7171
<div
72-
class="handle me-2 d-none d-lg-block"
72+
class="m-0 p-0 handle me-xl-2 d-none d-xl-block"
7373
#handle
7474
draggable="true"
7575
id="handle"

‎packages/studio-web/src/app/editor/editor.component.sass‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,11 @@
88
--bs-gutter-x: 0
99

1010
#readalongContainer
11-
margin: 0 2.5vw
11+
margin: 0 auto
12+
13+
#styleWindow
14+
justify-content: start
15+
margin: 0 auto
1216

1317
@media screen and (min-width:1200px)
1418
div > #handle
@@ -23,7 +27,8 @@
2327
margin-top: 1em
2428
cursor: col-resize
2529
z-index: 1000
26-
30+
display: block
31+
#styleWindow
32+
margin: 0
2733
app-wc-styling:has(#style-section.collapsed)
2834
width: 100px
29-

‎packages/studio-web/src/app/shared/wc-styling/wc-styling.component.html‎

Lines changed: 121 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -2,49 +2,69 @@
22
#styleSection
33
id="style-section"
44
[class]="
5-
'col p-3 bg-light' + ((collapsed$ | async) ? ' collapsed' : ' ms-xl-5')
5+
'p-xl-3 pt-3 bg-light' + ((collapsed$ | async) ? ' collapsed' : ' ms-xl-5')
66
"
77
>
8-
<div class="d-flex flex-column flex-md-row justify-content-between header">
8+
<div
9+
*ngIf="collapsed$ | async"
10+
class="d-flex flex-row justify-content-start header"
11+
>
912
<div class="p-0 order-0 order-md-0">
1013
<button
1114
mat-icon-button
1215
(click)="toggleCollapse()"
1316
data-test-id="toggle-css-box"
1417
>
1518
<span class="d-none d-xl-inline">
16-
<mat-icon *ngIf="collapsed$ | async">code</mat-icon>
17-
<mat-icon *ngIf="!(collapsed$ | async)">chevron_right</mat-icon>
19+
<mat-icon>code</mat-icon>
1820
</span>
1921
<span class="d-xl-none">
20-
<mat-icon *ngIf="collapsed$ | async">keyboard_arrow_down</mat-icon>
21-
<mat-icon *ngIf="!(collapsed$ | async)">keyboard_arrow_up</mat-icon>
22+
<mat-icon>keyboard_arrow_down</mat-icon>
2223
</span>
2324
</button>
2425
</div>
2526
<div
26-
*ngIf="collapsed$ | async"
2727
class="p-0 order-1 order-md-1 helper-text"
2828
(click)="collapsed$.next(false)"
2929
>
30-
<h1 i18n="Advanced styling" class="title">Advanced styling</h1>
30+
<h1 i18n="Advanced styling" class="title pt-2">Advanced styling</h1>
3131
</div>
32-
<div class="ms-5 ms-md-0 p-0 order-1 order-md-1">
33-
<h1 class="title">
34-
<a
35-
rel="noopener"
36-
href="https://github.com/ReadAlongs/Studio-Web/tree/main/packages/web-component#css-customization"
37-
target="_blank"
38-
>
39-
<span i18n="Advanced styling">Advanced Styling</span></a
32+
</div>
33+
<div
34+
*ngIf="!(collapsed$ | async)"
35+
class="d-flex flex-column flex-md-row justify-content-between header"
36+
>
37+
<div class="p-0 order-0 order-md-0">
38+
<div class="d-flex flex-row">
39+
<button
40+
mat-icon-button
41+
(click)="toggleCollapse()"
42+
data-test-id="toggle-css-box"
4043
>
41-
<button class="nav__button" mat-button (click)="openHelpDialog()">
42-
<mat-icon>help</mat-icon>
43-
<span i18n="Help">Help</span>
44+
<span class="d-none d-xl-inline">
45+
<mat-icon>chevron_right</mat-icon>
46+
</span>
47+
<span class="d-xl-none">
48+
<mat-icon>keyboard_arrow_up</mat-icon>
49+
</span>
4450
</button>
45-
</h1>
51+
<h1 class="title pt-2">
52+
<a
53+
rel="noopener"
54+
href="https://github.com/ReadAlongs/Studio-Web/tree/main/packages/web-component#css-customization"
55+
target="_blank"
56+
>
57+
<span i18n="Advanced styling">Advanced Styling</span></a
58+
>
59+
<button class="nav__button" mat-button (click)="openHelpDialog()">
60+
<mat-icon>help</mat-icon>
61+
<span i18n="Help">Help</span>
62+
</button>
63+
</h1>
64+
</div>
4665
</div>
47-
<div class="ms-5 ms-md-0 p-0 order-2 order-md-2">
66+
67+
<div class="ms-5 ms-md-0 p-0 pt-2 order-2 order-md-2">
4868
<mat-button-toggle-group
4969
appearance="legacy"
5070
(change)="toggleStyleInput($event)"
@@ -61,88 +81,66 @@ <h1 class="title">
6181
</mat-button-toggle-group>
6282
</div>
6383
</div>
64-
<div *ngIf="inputType === 'upload'">
65-
<div class="row">
66-
<div class="mt-4 mb-3">
67-
<!-- <div class="container"> -->
68-
<label
69-
i18n="Instructions for uploading style"
70-
for="updateStyle"
71-
class="form-label"
72-
>Select a style sheet file (.css)</label
73-
>
74-
<input
75-
#styleInputElement
76-
(change)="onFileSelected($event)"
77-
class="form-control"
78-
name="text"
79-
type="file"
80-
id="updateStyle"
81-
accept=".css"
82-
/>
83-
<!-- </div> -->
84+
<div *ngIf="!(collapsed$ | async)">
85+
<div *ngIf="inputType === 'upload'">
86+
<div class="row">
87+
<div class="mt-4 mb-3">
88+
<!-- <div class="container"> -->
89+
<label
90+
i18n="Instructions for uploading style"
91+
for="updateStyle"
92+
class="form-label"
93+
>Select a style sheet file (.css)</label
94+
>
95+
<input
96+
#styleInputElement
97+
(change)="onFileSelected($event)"
98+
class="form-control"
99+
name="text"
100+
type="file"
101+
id="updateStyle"
102+
accept=".css"
103+
/>
104+
<!-- </div> -->
105+
</div>
84106
</div>
85107
</div>
86-
</div>
87-
<div *ngIf="inputType === 'edit'">
88-
<div class="d-flex flex-column flex-md-row justify-content-between p-0">
89-
<span class="ms-5 ms-md-0 p-0">
90-
<h2
91-
i18n="Title for style writing box"
92-
class="subtitle mt-3 text-center"
93-
>
94-
Write or paste your style sheet here
95-
</h2>
96-
</span>
108+
<div *ngIf="inputType === 'edit'">
109+
<div class="d-flex flex-column flex-md-row justify-content-between p-0">
110+
<span class="ms-5 p-0">
111+
<h2
112+
i18n="Title for style writing box"
113+
class="subtitle mt-3 text-center"
114+
>
115+
Write or paste your style sheet here
116+
</h2>
117+
</span>
97118

98-
<span
99-
class="ms-5 ms-md-0 p-0 d-flex justify-content-between flex-row flex-lg-column"
100-
>
101-
<button
102-
i18n="Style download button"
103-
mat-button
104-
[disabled]="!(styleText$ | async)"
105-
(click)="downloadStyle()"
106-
aria-label="Style download button"
107-
class="pr-0"
108-
>
109-
<mat-icon class="mat-icon-lg">save</mat-icon> Save a copy</button
110-
><button mat-button (click)="updateStyle()">
111-
<mat-icon class="mat-icon-lg">sync</mat-icon>
112-
Apply
113-
</button>
114-
</span>
115-
</div>
116-
<div class="row">
117-
<div class="mt-4 mb-3 ms-5 ms-md-0">
118-
<!-- <div class="container"> -->
119-
<label
120-
i18n="Instructions for uploading font"
121-
for="defaultFont"
122-
class="form-label"
123-
>Optional: use a custom font (.woff2)</label
124-
>
125-
<input
126-
#fontInputElement
127-
(change)="onFontSelected($event)"
128-
class="form-control"
129-
name="text"
130-
type="file"
131-
id="defaultFont"
132-
accept=".woff2,.woff,.ttf"
133-
/>
134-
<!-- </div> -->
119+
<span class="ms-5 ms-md-0 p-0 pt-3 d-flex justify-content-end">
120+
<button
121+
i18n="Style download button"
122+
mat-button
123+
[disabled]="!(styleText$ | async)"
124+
(click)="downloadStyle()"
125+
aria-label="Style download button"
126+
class="pr-0"
127+
>
128+
<mat-icon class="mat-icon-lg">save</mat-icon> Save a copy</button
129+
><button mat-button (click)="updateStyle()">
130+
<mat-icon class="mat-icon-lg">sync</mat-icon>
131+
Apply
132+
</button>
133+
</span>
135134
</div>
136-
</div>
137-
<div class="row">
138-
<mat-form-field class="col-12 p-0 b-0 ms-5 ms-md-0">
139-
<textarea
140-
[ngModel]="styleText$ | async"
141-
(ngModelChange)="styleText$.next($event)"
142-
id="styleInput"
143-
class="border rounded b-0 p-0 bg-light"
144-
matInput
145-
placeholder="
135+
<div class="row">
136+
<mat-form-field class="col-12 p-0 b-0 ms-5 ms-md-0">
137+
<textarea
138+
[ngModel]="styleText$ | async"
139+
(ngModelChange)="styleText$.next($event)"
140+
id="styleInput"
141+
class="border rounded b-0 p-0 bg-light"
142+
matInput
143+
placeholder="
146144
Click on the (?) help button above to see a sample stylesheet you can use:
147145
148146
:root,
@@ -177,8 +175,30 @@ <h1 class="title">
177175
178176
179177
"
180-
></textarea>
181-
</mat-form-field>
178+
></textarea>
179+
</mat-form-field>
180+
</div>
181+
<div class="row">
182+
<div class="mt-4 mb-3 ms-5 ms-md-0">
183+
<!-- <div class="container"> -->
184+
<label
185+
i18n="Instructions for uploading font"
186+
for="defaultFont"
187+
class="form-label"
188+
>Optional: use a custom font (.woff2)</label
189+
>
190+
<input
191+
#fontInputElement
192+
(change)="onFontSelected($event)"
193+
class="form-control"
194+
name="text"
195+
type="file"
196+
id="defaultFont"
197+
accept=".woff2,.woff,.ttf"
198+
/>
199+
<!-- </div> -->
200+
</div>
201+
</div>
182202
</div>
183203
</div>
184204
</div>

‎packages/studio-web/src/app/shared/wc-styling/wc-styling.component.sass‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
2+
13
#styleInput
24
border: 1px solid #222
35
font-family: 'Noto Sans', 'Verdana', 'Arial', 'sans-serif'
@@ -40,10 +42,10 @@ h2
4042
@media only screen and (max-width:1200px)
4143
#style-section
4244
width: 95vw
43-
margin-left: 2.5vw
45+
margin: auto
4446

4547
div.header > div.helper-text
46-
display: none !important
48+
text-align: left
4749

4850
@media only screen and (min-width:1200px)
4951
#style-section

0 commit comments

Comments
 (0)