hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Make star rating in marketplace interactive

Browse Source 
Signed-off-by: Panu Horsmalahti <phorsmalahti@mirantis.com>
This commit is contained in:
Panu Horsmalahti 2020-12-10 16:16:16 +02:00
parent 9f77b060c8
commit caa1d31e09
2 changed files with 22 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
marketplace/index.html
View File

@ -4,6 +4,17 @@
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="marketplace.css"> <link rel="stylesheet" href="marketplace.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script>
function onRating(rating) {
Array.from(document.querySelectorAll(".fa-star")).forEach((starNode, index) => {
if (index < rating) {
starNode.classList.add("checked");
} else {
starNode.classList.remove("checked");
}
});
}
</script>
</head> </head>
<body> <body>
<h3>Lens Marketplace</h3> <h3>Lens Marketplace</h3>
@ -17,12 +28,12 @@
35 installs 35 installs
</div> </div>
<div>|</div> <div>|</div>
<div> <div class="stars">
<span class="fa fa-star checked"></span> <span class="fa fa-star checked" onclick="onRating(1)"></span>
<span class="fa fa-star checked"></span> <span class="fa fa-star checked" onclick="onRating(2)"></span>
<span class="fa fa-star checked"></span> <span class="fa fa-star checked" onclick="onRating(3)"></span>
<span class="fa fa-star checked"></span> <span class="fa fa-star checked" onclick="onRating(4)"></span>
<span class="fa fa-star"></span> <span class="fa fa-star" onclick="onRating(5)"></span>
<span>(8)</span> <span>(8)</span>
</div> </div>
<div>|</div> <div>|</div>

5
marketplace/marketplace.css
View File

@ -28,6 +28,11 @@ ul {
padding: 0; padding: 0;
} }
.stars {
user-select: none;
cursor: pointer;
}
.checked { .checked {
color: orange; color: orange;
} }