Improve manage ui

This commit is contained in:
Folyd 2021-07-10 12:09:31 +08:00
parent 3a3975b7bd
commit 63a76571a1
5 changed files with 47 additions and 4 deletions

View file

@ -8,6 +8,7 @@
<link rel="stylesheet" href="../generic.css"> <link rel="stylesheet" href="../generic.css">
<link rel="stylesheet" href="index.css"> <link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="text.css">
<link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,500,600&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,500,600&display=swap" rel="stylesheet">
</head> </head>

View file

@ -10,16 +10,18 @@ function buildRemoveButton(name) {
function buildCrateItem(crate) { function buildCrateItem(crate) {
let li = document.createElement("li"); let li = document.createElement("li");
li.classList.add("text");
li.style.padding = "10px";
li.innerHTML = ` li.innerHTML = `
<div> <div>
${crate.name} <b class="title-text">${crate.name}</b>
<span>${crate.version}</span> <span class="subtitle-text">${crate.version}</span>
<a href="https://crates.io/crates/${crate.name}" target="_blank">crates.io</a> <a href="https://crates.io/crates/${crate.name}" target="_blank">crates.io</a>
<a href="https://docs.rs/${crate.name}" target="_blank">docs.rs</a> <a href="https://docs.rs/${crate.name}" target="_blank">docs.rs</a>
</div> </div>
<div> <div>
<span>${crate.doc}</span> <span>${crate.doc}</span>
<span>${crate.time}</span> <span>${crate.time}</span>
</div> </div>
`; `;
li.appendChild(buildRemoveButton(crate.name)); li.appendChild(buildRemoveButton(crate.name));

View file

@ -11,6 +11,10 @@ a:visited {
color: initial; color: initial;
} }
ul {
list-style: none;
}
h3 { h3 {
padding: 10px 0; padding: 10px 0;
font-size: 18px; font-size: 18px;

View file

@ -7,6 +7,7 @@
<title>Rust Search Statistics</title> <title>Rust Search Statistics</title>
<link rel="stylesheet" href="../generic.css"> <link rel="stylesheet" href="../generic.css">
<link rel="stylesheet" href="index.css"> <link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="text.css">
<link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,500,600&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,500,600&display=swap" rel="stylesheet">
</head> </head>

35
extension/manage/text.css Normal file
View file

@ -0,0 +1,35 @@
.heading-text {
font-family: "Fira Sans", sans-serif;
font-size: 32px;
font-weight: 600;
padding: 10px 0 25px 0;
}
.title-text {
font-family: "Fira Sans", sans-serif;
font-size: 25px;
font-weight: 500;
border-left: #F9BB2D 8px solid;
padding-left: 10px;
}
.subtitle-text {
font-family: "Fira Sans", sans-serif;
font-size: 20px;
font-weight: 500;
}
.text {
font-family: "Fira Sans", sans-serif;
font-size: 18px;
font-weight: 400;
line-height: 26px;
letter-spacing: 0.2px;
}
.subtext {
font-family: "Fira Sans", sans-serif;
font-size: 16px;
font-weight: 400;
letter-spacing: 0.1px;
}