Skip to content

Commit eee53ed

Browse files
finomfinom
committed
feat: Better style
1 parent 4896cdf commit eee53ed

File tree

6 files changed

+76
-40
lines changed

6 files changed

+76
-40
lines changed

‎index.html

Lines changed: 60 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="utf-8">
55
<title></title>
66
<style>
7-
textarea {
7+
/*textarea {
88
width: 100%;
99
height: 400px;
1010
}
@@ -20,44 +20,68 @@
2020
2121
code {
2222
white-space: pre;
23-
}
23+
}*/
2424
</style>
2525
</head>
2626
<body>
27-
<form>
28-
<textarea class="code"></textarea>
29-
<button type="submit">Submit</button>
30-
<fieldset>
31-
<legend>Results</legend>
32-
<div class="results"></div>
33-
</fieldset>
34-
<div class="settings">
35-
<fieldset>
36-
<legend>Settings</legend>
37-
<label> Config:
38-
<select class="config-name">
39-
<option value="">Custom</option>
40-
</select>
41-
</label>
42-
<label> Parser:
43-
<select class="parser-name">
44-
<option value="espree">Espree</option>
45-
<option value="babel">Babel</option>
46-
</select>
47-
</label>
48-
<label>
49-
<input type="checkbox" class="use-recommended">
50-
Use recommended values if available
51-
</label>
52-
</fieldset>
53-
<fieldset>
54-
<legend>Environments</legend>
55-
<div class="environments"></div>
56-
</fieldset>
57-
<fieldset>
58-
<legend>Rules</legend>
59-
<div class="rules"></div>
60-
</fieldset>
27+
<form class="container">
28+
<div class="row">
29+
<div class="col-md-12">
30+
<textarea class="code"></textarea>
31+
<button type="submit" class="btn btn-primary">Submit</button>
32+
</div>
33+
</div>
34+
35+
<div class="row">
36+
<div class="col-md-12">
37+
<fieldset class="form-group">
38+
<legend>Results</legend>
39+
<div class="results"></div>
40+
</fieldset>
41+
</div>
42+
</div>
43+
44+
<div class="row">
45+
<div class="col-md-12">
46+
<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>
66+
</div>
67+
</fieldset>
68+
</div>
69+
</div>
70+
<div class="row">
71+
<div class="col-md-12">
72+
<fieldset>
73+
<legend>Environments</legend>
74+
<div class="environments"></div>
75+
</fieldset>
76+
</div>
77+
</div>
78+
<div class="row">
79+
<div class="col-md-12">
80+
<fieldset>
81+
<legend>Rules</legend>
82+
<div class="rules"></div>
83+
</fieldset>
84+
</div>
6185
</div>
6286
</form>
6387
</body>

‎src/css/style.css

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,14 @@
11
@import '~bootstrap/dist/css/bootstrap.css';
22
@import '~codemirror/lib/codemirror.css';
3+
4+
.CodeMirror {
5+
border: 1px solid rgba(0, 0, 0, 0.15);
6+
}
7+
8+
button[type="submit"] {
9+
margin-top: 1rem;
10+
}
11+
12+
.results:empty::before {
13+
content: 'No errors';
14+
}

‎src/environments.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import environments from './lint/environments';
44
export default class Environments extends MatreshkaArray {
55

66
itemRenderer = `
7-
<label title="{{description}}">
7+
<label title="{{description}}" class="form-check-label">
88
<input type="checkbox" checked="{{checked}}"> {{environment}}
99
</label>
1010
`;

‎src/results.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import MatreshkaArray from 'matreshka/array';
22
import plugins from './lint/plugins';
33

44
export default class Results extends MatreshkaArray {
5-
itemRenderer = `<div>
5+
itemRenderer = `<div class="alert alert-danger">
66
{{ message }}
77
({{ ruleId }})
88
</div>`;

‎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 }}">
5+
renderer = `<label title="{{ dynamicValueJSON }}" class="col-md-4">
66
<input type="checkbox" checked="{{ isOn }}"> {{ ruleName }}
77
</label>`;
88
constructor(data) {

‎src/rules/rules-group.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import Rule from './rule';
44
export default class RulesGroup extends MatreshkaArray {
55
Model = Rule;
66

7-
renderer = `<fieldset>
7+
renderer = `<fieldset class="row-fluid">
88
<legend>{{ name }}</legend>
99
<div class="rules-list"></div>
1010
</fieldset>`;

0 commit comments

Comments
 (0)