change styling
also add placeholder settings page Co-authored-by: Peeentaa <Peeentaa@users.noreply.github.com>
This commit is contained in:
none
parent
9d3a272193
commit
988a648b89
2
library
2
library
@ -1 +1 @@
|
||||
Subproject commit 31b8e5bf0ab8b561ffeafb07432a382000323f7a
|
||||
Subproject commit 26aeb75bd1c6d002b9dc0af5cce3d66ac9f11204
|
||||
@ -62,7 +62,7 @@
|
||||
{
|
||||
"fullscreen": false,
|
||||
"height": 600,
|
||||
"resizable": false,
|
||||
"resizable": true,
|
||||
"title": "IPass",
|
||||
"width": 880,
|
||||
"theme": "Dark"
|
||||
|
||||
BIN
src/images/menu.png
Normal file
BIN
src/images/menu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 994 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 1.9 KiB |
BIN
src/images/settings.png
Normal file
BIN
src/images/settings.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
@ -10,9 +10,14 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>IPass</h1>
|
||||
<p id="lockLabel">Locked</p>
|
||||
<img alt="Lock" id="lockImg" src="/images/security_lock_locked.png" height=50 width=50></img>
|
||||
<h1 id="title">IPass</h1>
|
||||
<div class="select">
|
||||
<img src="/images/menu.png" width="50" height="50">
|
||||
<div>
|
||||
<div><a href="/settings"><img id="cogWImg" src="/images/settings.png" width="50" height="50" alt="Locked" title="Locked"></a></div>
|
||||
<div><img alt="Lock" id="lockImg" src="/images/security_lock_locked.png" height=50 width=50></img></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div id="table_div">
|
||||
<div id="table_entries">
|
||||
@ -32,6 +37,5 @@
|
||||
<div class="button" id="createEntry_actions"><button tabindex="1">Create</button></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
19
src/main.js
19
src/main.js
@ -15,6 +15,22 @@ window.addEventListener("DOMContentLoaded", () => {
|
||||
|
||||
async function startup() {
|
||||
|
||||
let select = document.querySelector(".select");
|
||||
select.addEventListener("click", function(){
|
||||
this.enabled = !this.enabled
|
||||
if(this.enabled) {
|
||||
this.classList.add("open")
|
||||
} else {
|
||||
this.classList.remove("open")
|
||||
}
|
||||
|
||||
for(let cont of document.querySelectorAll(".select > div")) {
|
||||
cont.style.display=(this.enabled && "block") || "none"
|
||||
}
|
||||
document.querySelector('#table_div').style.marginTop=(this.enabled && "8em") || "0px";
|
||||
});
|
||||
|
||||
|
||||
document.querySelector("#createEntry_actions > button").addEventListener("click",createEntry);
|
||||
|
||||
let entries = await invoke("get_entries");
|
||||
@ -285,7 +301,8 @@ async function toggleLock() {
|
||||
if(master_pw == "" || master_pw == null)return;
|
||||
}
|
||||
|
||||
document.getElementById("lockLabel").innerText = txt;
|
||||
document.getElementById("lockImg").title = txt;
|
||||
document.getElementById("lockImg").alt = txt;
|
||||
document.getElementById("lockImg").src = src;
|
||||
|
||||
lock_status = !lock_status;
|
||||
|
||||
14
src/settings.html
Normal file
14
src/settings.html
Normal file
@ -0,0 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Settings</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1 id="title"><a href="/" class="nostyle">IPass</a></h1>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -73,7 +73,7 @@ input:not([readonly]){
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-left: 2em;
|
||||
}
|
||||
|
||||
button {
|
||||
@ -89,18 +89,6 @@ button {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#lockImg {
|
||||
position: absolute;
|
||||
top: 1em;
|
||||
right: 1em;
|
||||
}
|
||||
|
||||
#lockLabel {
|
||||
position: absolute;
|
||||
top: 1em;
|
||||
right: 4em;
|
||||
}
|
||||
|
||||
#table_div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -140,3 +128,74 @@ input[type="password"] {
|
||||
border: 3px double var(--fg-color);
|
||||
border-radius: 5%;
|
||||
}
|
||||
|
||||
#table_actions > div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#table_actions > div > button {
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
#table_div > div > div {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
#createEntry_actions > button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#title {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.select {
|
||||
padding: 5px 10px;
|
||||
border: none;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
top: 1em;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
|
||||
/* hide the default dropdown arrow */
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
|
||||
.select > div{
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 4em;
|
||||
}
|
||||
.select > div > div{
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
a.nostyle:link {
|
||||
text-decoration: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
a.nostyle:visited {
|
||||
text-decoration: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/*
|
||||
.select{
|
||||
transform: rotate(0deg);
|
||||
transition: transform 1s linear;
|
||||
}
|
||||
|
||||
.select.open{
|
||||
transform: rotate(180deg);
|
||||
transition: transform 1s linear;
|
||||
}
|
||||
*/
|
||||
Loading…
x
Reference in New Issue
Block a user