Skip to content

Commit 5f94354

Browse files
zyedidiazyedidia
committed
Some UI improvements to plugin page
1 parent 491f0f5 commit 5f94354

3 files changed

Lines changed: 70 additions & 54 deletions

File tree

‎micro_files/micro.css‎

Lines changed: 54 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,99 @@
11
/* Space out content a bit */
22
body {
3-
padding-top: 20px;
4-
padding-bottom: 20px;
5-
font-size: 16px;
3+
padding-top: 20px;
4+
padding-bottom: 20px;
5+
font-size: 16px;
66
}
7+
8+
input[type="radio"] {
9+
margin-right: 5px;
10+
}
11+
12+
#searchbutton {
13+
margin-left: 5px;
14+
border-radius: 5px;
15+
}
16+
17+
#keyword {
18+
border-radius: 5px;
19+
}
20+
721
.testimonials {
8-
list-style: none;
9-
list-style-type: none;
10-
padding: 0;
22+
list-style: none;
23+
list-style-type: none;
24+
padding: 0;
1125
}
1226

1327
.micro-logo {
14-
text-indent: -9999px;
15-
width: 60px;
16-
height: 60px;
17-
background: url(micro-logo-mark.svg) #ffffff no-repeat;
18-
background-size: 60px 60px;
19-
display: inline-block;
28+
text-indent: -9999px;
29+
width: 60px;
30+
height: 60px;
31+
background: url(micro-logo-mark.svg) #ffffff no-repeat;
32+
background-size: 60px 60px;
33+
display: inline-block;
2034
}
2135

2236
/* Everything but the jumbotron gets side spacing for mobile first views */
2337
.header,
2438
.footer {
25-
padding-right: 15px;
26-
padding-left: 15px;
39+
padding-right: 15px;
40+
padding-left: 15px;
2741
}
2842

2943
/* Custom page header */
3044
.header {
31-
padding-bottom: 20px;
32-
border-bottom: 1px solid #e5e5e5;
45+
padding-bottom: 20px;
46+
border-bottom: 1px solid #e5e5e5;
3347
}
3448
/* Make the masthead heading the same height as the navigation */
3549
.header h3 {
36-
margin-top: 0;
37-
margin-bottom: 0;
38-
line-height: 40px;
50+
margin-top: 0;
51+
margin-bottom: 0;
52+
line-height: 40px;
3953
}
4054

4155
/* Custom page footer */
4256
.footer {
43-
padding-top: 19px;
44-
color: #777;
45-
border-top: 1px solid #e5e5e5;
57+
padding-top: 19px;
58+
color: #777;
59+
border-top: 1px solid #e5e5e5;
4660
}
4761

4862
/* Customize container */
4963
@media (min-width: 768px) {
50-
.container {
51-
max-width: 1100px;
52-
}
64+
.container {
65+
max-width: 1100px;
66+
}
5367
}
5468
.container-narrow > hr {
55-
margin: 10px 0;
69+
margin: 10px 0;
5670
}
5771

5872
/* Main features message and sign up button */
5973
.jumbotron {
60-
text-align: center;
61-
border-bottom: 1px solid #e5e5e5;
62-
background-color: #fff;
74+
text-align: center;
75+
border-bottom: 1px solid #e5e5e5;
76+
background-color: #fff;
6377
}
6478
p.lead {
6579
font-size: 35px;
6680
}
6781
.btn, .btn:focus {
68-
background-color: #3C92D1;
69-
border: none;
82+
background-color: #3C92D1;
83+
border: none;
7084
}
7185
.btn:active, .btn:active:focus, .btn:target, .btn-success:active, .btn-success:active:focus, .btn-lg:active {
7286
background-color: #391A80;
7387
}
7488
.btn:hover {
75-
background-color: #2F3590;
89+
background-color: #2F3590;
7690
}
7791
/* .btn:active .btn:focus { */
7892
/* background-color: #2F3590; */
7993
/* } */
8094
.jumbotron .btn {
81-
padding: 14px 24px;
82-
font-size: 21px;
95+
padding: 14px 24px;
96+
font-size: 21px;
8397
}
8498

8599
/* Supporting features content */
@@ -98,14 +112,14 @@ p.lead {
98112
margin-top: 10px;
99113
}
100114
.features p + h4 {
101-
margin-top: 28px;
115+
margin-top: 28px;
102116
}
103117
.navbar-toggle .icon-bar {
104-
display: block;
105-
width: 22px;
106-
height: 2px;
107-
background-color: #2F3590;
108-
border-radius: 1px;
118+
display: block;
119+
width: 22px;
120+
height: 2px;
121+
background-color: #2F3590;
122+
border-radius: 1px;
109123
}
110124

111125
.nav > li > a, .nav-pills > li > a:hover, .nav-pills > li > a:hover {

‎micro_files/plugin-search.js‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,44 +17,49 @@ function fetchData(){
1717
.then(json=>{
1818
pluginData.push(json[0]);
1919
console.log(json[0]);
20+
search(true)
2021
}));
2122
});
2223
})
2324
);
2425
}
2526

26-
function search(){
27+
function search(collapse){
2728
switch(document.querySelector('input[name="searchby"]:checked').value){
2829
case 'Name':
2930
console.log('Search by Name');
3031
searchResults = pluginData.filter(item=>{
3132
return item.Name.includes(document.getElementById('keyword').value);
3233
});
3334
console.log(searchResults);
34-
showResults(searchResults);
35+
showResults(searchResults, collapse);
3536
break;
3637
case 'Description':
3738
console.log('Search by Description');
3839
searchResults = pluginData.filter(item=>{
3940
return item.Description.includes(document.getElementById('keyword').value);
4041
});
4142
console.log(searchResults);
42-
showResults(searchResults);
43+
showResults(searchResults, collapse);
4344
break;
4445
case 'Tags':
4546
console.log('Search by Tags');
4647
searchResults = pluginData.filter(item=>{
4748
return item.Tags.includes(document.getElementById('keyword').value);
4849
});
4950
console.log(searchResults);
50-
showResults(searchResults);
51+
showResults(searchResults, collapse);
5152
break;
5253
}
5354
}
5455

55-
function showResults(results){
56-
let table = document.getElementById('results');
56+
function showResults(results, collapsed) {
57+
var table = document.getElementById('results');
5758
table.innerHTML = '';
59+
var collapseStr = "panel-collapse collapse";
60+
if (!collapsed) {
61+
collapseStr += " in";
62+
}
5863
results.forEach(item=>{
5964
table.innerHTML +=
6065
`<div class="panel panel-default">
@@ -66,15 +71,15 @@ function showResults(results){
6671
</a>
6772
</h4>
6873
</div>
69-
<div id="c-${item.Name}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="h-${item.Name}">
74+
<div id="c-${item.Name}" class="${collapseStr}" role="tabpanel" aria-labelledby="h-${item.Name}">
7075
<div class="panel-body">
7176
<p>${item.Description}</p>
7277
<p><span class="glyphicon glyphicon-tags" aria-hidden="true"></span> ${item.Tags.toString()}<p>
7378
<p><b>Require : </b>${JSON.stringify(item.Versions[0].Require)}</p>
7479
<p>To install this plugin, open micro from your CLI,
7580
press [Crtl + E] then run the command line below.
7681
Once you are done, restart micro.</p>
77-
<div class="well">plugin install ${item.Name}</div>
82+
<div class="well">&gt; plugin install ${item.Name}</div>
7883
</div>
7984
</div>
8085
</div>`;

‎plugins.html‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,6 @@
3232
</script>
3333
</head>
3434
<body onload="fetchData()">
35-
3635
<div class="container">
3736
<div class="header clearfix">
3837
<div class="navbar-header pull-left">
@@ -61,13 +60,11 @@ <h2>Plugins</h2>
6160
checked="true">Name</option>
6261
<input type="radio" name="searchby" value="Description">Description</option>
6362
<input type="radio" name="searchby" value="Tags">Tags</option>
64-
<br /><br />
63+
<br/><br/>
6564
<div class="input-group">
66-
<input type="text" class="form-control" placeholder="Search plugins..."
67-
onchange="search()" id="keyword">
65+
<input type="text" class="form-control" placeholder="Search plugins..." onchange="search(false)" id="keyword">
6866
<span class="input-group-btn">
69-
<button class="btn btn-default" type="button"
70-
onclick="search()">Search</button>
67+
<button id="searchbutton" class="btn btn-success" type="button" onclick="search(false)">Search</button>
7168
</span>
7269
</div><!-- /input-group -->
7370
</div>

0 commit comments

Comments
 (0)