Skip to content

Commit 54eb6b3

Browse files
finomfinom
committed
feat: Expandable options
1 parent a350075 commit 54eb6b3

File tree

4 files changed

+62
-45
lines changed

4 files changed

+62
-45
lines changed

‎index.html‎

Lines changed: 29 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -2,32 +2,15 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5-
<title></title>
6-
<style>
7-
/*textarea {
8-
width: 100%;
9-
height: 400px;
10-
}
11-
12-
.rules-list label {
13-
display: inline-block;
14-
width: 33%;
15-
}
16-
17-
.results:empty::before {
18-
content: 'No errors';
19-
}
20-
21-
code {
22-
white-space: pre;
23-
}*/
24-
</style>
5+
<title>ECMAScript Lint</title>
256
</head>
267
<body>
8+
279
<form class="container">
10+
<h1>ECMAScript Lint</h1>
2811
<div class="row">
2912
<div class="col-md-12">
30-
<textarea class="code"></textarea>
13+
<textarea class="code form-control"></textarea>
3114
<button type="submit" class="btn btn-primary">Submit</button>
3215
</div>
3316
</div>
@@ -44,42 +27,44 @@
4427
<div class="row">
4528
<div class="col-md-12">
4629
<fieldset>
47-
<legend>Settings</legend>
48-
<div class="form-group">
49-
<label>Config:</label>
50-
<select class="config-name form-control">
51-
<option value="">Custom</option>
52-
</select>
53-
</div>
54-
<div class="form-group">
55-
<label> Parser:</label>
56-
<select class="parser-name form-control">
57-
<option value="espree">Espree</option>
58-
<option value="babel">Babel</option>
59-
</select>
60-
</div>
61-
<div class="form-group">
62-
<label>
63-
<input type="checkbox" class="use-recommended">
64-
Use recommended values if available
65-
</label>
30+
<legend class="expand-fieldset-content">Settings</legend>
31+
<div class="expandable-fieldset-content">
32+
<div class="form-group">
33+
<label>Config:</label>
34+
<select class="config-name form-control">
35+
<option value="">Custom</option>
36+
</select>
37+
</div>
38+
<div class="form-group">
39+
<label> Parser:</label>
40+
<select class="parser-name form-control">
41+
<option value="espree">Espree</option>
42+
<option value="babel">Babel</option>
43+
</select>
44+
</div>
45+
<div class="form-group">
46+
<label>
47+
<input type="checkbox" class="use-recommended">
48+
Use recommended values if available
49+
</label>
50+
</div>
6651
</div>
6752
</fieldset>
6853
</div>
6954
</div>
7055
<div class="row">
7156
<div class="col-md-12">
7257
<fieldset>
73-
<legend>Environments</legend>
74-
<div class="environments"></div>
58+
<legend class="expand-fieldset-content">Environments</legend>
59+
<div class="environments expandable-fieldset-content"></div>
7560
</fieldset>
7661
</div>
7762
</div>
7863
<div class="row">
7964
<div class="col-md-12">
8065
<fieldset>
81-
<legend>Rules</legend>
82-
<div class="rules"></div>
66+
<legend class="expand-fieldset-content">Rules</legend>
67+
<div class="rules expandable-fieldset-content"></div>
8368
</fieldset>
8469
</div>
8570
</div>

‎src/css/style.css‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,3 +15,29 @@ button[type="submit"] {
1515
.results:empty::before {
1616
content: 'No errors';
1717
}
18+
19+
.code, .CodeMirror {
20+
height: 350px;
21+
}
22+
23+
.expandable-fieldset-content {
24+
-padding: 0;
25+
max-height: 0;
26+
overflow: hidden;
27+
transition: max-height .2s ease-out 0s;
28+
29+
&.expanded {
30+
max-height: 1000px;
31+
}
32+
}
33+
34+
.expand-fieldset-content {
35+
display: inline-block;
36+
color: #0275d8;
37+
border-bottom: 1px dashed currentColor;
38+
cursor: pointer;
39+
width: auto;
40+
&:hover {
41+
color: #014c8c;
42+
}
43+
}

‎src/index.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,12 @@ module.exports = new class Application extends MatreshkaObject {
7474
'change:parserName': () => setParser(this.parserName),
7575
'rules@rulechange': () => {
7676
this.set('configName', '', { silent: true });
77+
},
78+
'click::(legend)': ({ target }) => {
79+
const expandable = target.parentNode.querySelector('.expandable-fieldset-content');
80+
if(expandable) {
81+
expandable.classList.toggle('expanded');
82+
}
7783
}
7884
});
7985
}

‎src/rules/rule.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import MatreshkaObject from 'matreshka/object';
22
//import prop from 'matreshka/binders/prop';
33

44
export default class Rule extends MatreshkaObject {
5-
renderer = `<label title="{{ dynamicValueJSON }}" class="col-md-4">
5+
renderer = `<label title="{{ dynamicValueJSON }}" class="col-md-4 col-sm-6 form-check-label">
66
<input type="checkbox" checked="{{ isOn }}"> {{ ruleName }}
77
</label>`;
88
constructor(data) {

0 commit comments

Comments
 (0)