Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit f7c1342

Browse files
committed
Revamp selection controls labels
1 parent 6d2f311 commit f7c1342

File tree

7 files changed

+47
-51
lines changed

7 files changed

+47
-51
lines changed

‎src/ErrorMessages.elm‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -35,15 +35,12 @@ stringifyError e =
3535
String.fromFloat actual ++ " is not more than exclusive minimum " ++ String.fromFloat min
3636

3737
MaxLength expected actual ->
38-
"Not longer than "
38+
"Longer than "
3939
++ pluralize expected "character"
40-
++ " but actual length is "
41-
++ pluralize actual "character"
4240

4341
MinLength expected actual ->
44-
"Less than "
42+
"Shorter than "
4543
++ pluralize expected "character"
46-
++ " long"
4744

4845
Pattern pattern string ->
4946
"Does not match pattern " ++ pattern

‎src/Json/Form/TextField.elm‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -158,7 +158,11 @@ view model schema isJson isRequired isDisabled path =
158158
[]
159159
in
160160
div
161-
[ classList [ ( "jf-element", True ), ( "jf-element--hidden", hidden ) ]
161+
[ classList
162+
[ ( "jf-element", True )
163+
, ( "jf-element--hidden", hidden )
164+
, ( "jf-element--invalid", hasError )
165+
]
162166
]
163167
[ div
164168
[ classList
@@ -219,7 +223,11 @@ viewNumeric model schema isRequired isDisabled path =
219223
isDisabled || disabled
220224
in
221225
div
222-
[ classList [ ( "jf-element", True ), ( "jf-element--hidden", hidden ) ]
226+
[ classList
227+
[ ( "jf-element", True )
228+
, ( "jf-element--hidden", hidden )
229+
, ( "jf-element--invalid", hasError )
230+
]
223231
]
224232
[ div
225233
[ classList

‎stylesheets/app.css‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,7 @@
2525

2626
.example-section__heading {
2727
font-size: 24px;
28-
margin-bottom: 20px;
29-
margin-top: 20px;
28+
margin: 30px 0;
3029
text-align: center;
3130
}
3231

‎stylesheets/checkbox.css‎

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
display: inline-block;
88
box-sizing: border-box;
99
margin: 0;
10-
height: 75px;
1110
padding: 20px 0;
1211
font-size: 16px;
1312
vertical-align: top;
@@ -25,9 +24,6 @@
2524
}
2625

2726
.jf-checkbox__label {
28-
top: calc(50% - 8px);
29-
position: absolute;
30-
left: 0px;
3127
cursor: pointer;
3228
}
3329

@@ -36,7 +32,7 @@
3632
height: 16px;
3733
position: absolute;
3834
top: calc(50% - 8px);
39-
right: 0px;
35+
right: 2px;
4036
border-radius: 2px;
4137
border: 2px solid #0000008a;
4238
cursor: pointer;
@@ -67,15 +63,8 @@
6763

6864

6965
.jf-checkbox__helper-text {
70-
white-space: nowrap;
71-
overflow: hidden;
72-
text-overflow: ellipsis;
73-
max-width: 100%;
74-
position: absolute;
75-
bottom: 0;
7666
font-size: 12px;
77-
padding-left: 12px;
78-
padding-right: 12px;
67+
padding-right: 32px;
7968
color: rgba(0, 0, 0, 0.54);
8069
}
8170

‎stylesheets/json-form-element.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,4 +12,9 @@
1212
.jf-helper-text {
1313
margin-top: 8px;
1414
margin-left: 12px;
15+
color: rgba(0, 0, 0, 0.54);
16+
}
17+
18+
.jf-element--invalid .jf-helper-text {
19+
color: var(--color-invalid);
1520
}

‎stylesheets/switch.css‎

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
display: inline-block;
88
box-sizing: border-box;
99
margin: 0;
10-
height: 75px;
1110
padding: 20px 0;
1211
font-size: 16px;
1312
vertical-align: top;
@@ -25,9 +24,6 @@
2524
}
2625

2726
.jf-switch__label {
28-
top: calc(50% - 8px);
29-
position: absolute;
30-
left: 0px;
3127
cursor: pointer;
3228
}
3329

@@ -100,15 +96,8 @@
10096
}
10197

10298
.jf-switch__helper-text {
103-
white-space: nowrap;
104-
overflow: hidden;
105-
text-overflow: ellipsis;
106-
max-width: 100%;
107-
position: absolute;
108-
bottom: 0;
99+
max-width: calc(100% - 44px);
109100
font-size: 12px;
110-
padding-left: 12px;
111-
padding-right: 12px;
112101
color: rgba(0, 0, 0, 0.54);
113102
}
114103

‎stylesheets/textfield.css‎

Lines changed: 26 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@
139139
}
140140

141141
.jf-textfield--focused.jf-textfield--outlined .jf-textfield__label {
142-
top: -6px;
142+
top: -7px;
143143
font-size: 12px;
144144
}
145145

@@ -149,7 +149,7 @@
149149
}
150150

151151
.jf-textfield--outlined .jf-textfield__label {
152-
top: -6px;
152+
top: -7px;
153153
}
154154

155155
.jf-textfield--outlined .jf-textfield__input {
@@ -276,28 +276,22 @@
276276

277277

278278
.jf-textfield__helper-text {
279-
white-space: nowrap;
280-
overflow: hidden;
281-
text-overflow: ellipsis;
282-
max-width: 100%;
283-
position: absolute;
284-
bottom: -16px;
285-
font-size: 12px;
286-
padding-left: var(--side-padding);
287-
padding-right: var(--side-padding);
288-
color: rgba(0, 0, 0, 0.54);
289279
}
290280

291281
.jf-textfield svg {
292282
position: absolute;
293-
top: calc(50%-12px);
283+
top: 10px;
294284
right: var(--side-padding);
295285
}
296286

297287
.jf-textfield--invalid svg {
298288
color: var(--color-invalid);
299289
}
300290

291+
.jf-textfield--invalid .jf-textfield__input {
292+
padding-right: 40px;
293+
}
294+
301295

302296
/*
303297
.jf-textfield--outlined .jf-textfield__helper-text {
@@ -317,12 +311,9 @@
317311
background-color: var(--color-invalid);
318312
}
319313

320-
.jf-textfield--invalid .jf-textfield__helper-text {
321-
color: var(--color-invalid);
322-
}
323-
324314
.jf-textfield--invalid .jf-textfield__label {
325315
color: var(--color-invalid);
316+
animation: shake .5s linear;
326317
}
327318

328319
.jf-textfield--invalid:after {
@@ -371,3 +362,21 @@
371362
background-color: var(--form-background);
372363
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
373364
}
365+
366+
@keyframes shake {
367+
8%, 41% {
368+
transform: translateX(-4px);
369+
}
370+
25%, 58% {
371+
transform: translateX(4px);
372+
}
373+
75% {
374+
transform: translateX(-1px);
375+
}
376+
92% {
377+
transform: translateX(1px);
378+
}
379+
0%, 100% {
380+
transform: translateX(0);
381+
}
382+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /