g2.7
This commit is contained in:
Turtle committed
1 parent
a595b33006
commit
903111e958
7 files changed
+399
-25
No files matched your search
+74
-3
@@ -1,11 +1,14 @@
|
||||
:root {
|
||||
--accent_color_fg: #007bff;
|
||||
--accent_color_fg: rgba(0, 123, 255, 1);
|
||||
--accent_color_fg_o: rgba(0, 123, 255, 0.5);
|
||||
--accent_color_bg: rgba(137, 197, 221, 1);
|
||||
--accent_color_bg_o: rgba(137, 197, 221, 0.5);
|
||||
--accent_color_bg_o2: rgba(137, 197, 221, 0.25);
|
||||
--main_color_fg: white;
|
||||
--main_color_bg: black;
|
||||
--border-radius: 10px;
|
||||
--def-shadow: 10px 20px 20px rgb(128, 128, 128, 0.5);
|
||||
--reversed_def_shadow: inset 1px 2.5px 2.5px rgb(128, 128, 128, 0.5);
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
@@ -24,10 +27,10 @@ body, html {
|
||||
font-size: 20px;
|
||||
}
|
||||
::selection {
|
||||
background-color: var(--accent_color_fg);
|
||||
background-color: var(--accent_color_fg_o);
|
||||
color: black;
|
||||
}
|
||||
selectable {
|
||||
.selectable {
|
||||
-webkit-user-select: text;
|
||||
-moz-user-select: text;
|
||||
-ms-user-select: text;
|
||||
@@ -42,6 +45,14 @@ selectable {
|
||||
border-radius: 50%;
|
||||
background: var(--accent_color_bg);
|
||||
border: none;
|
||||
background-size: 58px 58px;
|
||||
}
|
||||
input {
|
||||
font-size: 18px;
|
||||
background: none;
|
||||
border: 1px solid black;
|
||||
border-radius: var(--border-radius);
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
/* ----------- overlay ----------- */
|
||||
@@ -188,4 +199,64 @@ content {
|
||||
.add_button:hover {
|
||||
border: 2px solid grey;
|
||||
background-color: lightgray;
|
||||
}
|
||||
|
||||
|
||||
|
||||
dropdown {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: none;
|
||||
z-index: 300;
|
||||
}
|
||||
dropdown > div:first-child {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: none;
|
||||
}
|
||||
dropdown > div:last-child {
|
||||
position: absolute;
|
||||
background: var(--accent_color_bg_o);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: var(--border-radius);
|
||||
transform: translate(calc(-100% + 50px), 5px);
|
||||
width: 200px;
|
||||
display: flex;
|
||||
flex-direction:column;
|
||||
box-shadow: var(--def-shadow);
|
||||
}
|
||||
dropdown > div:last-child label {
|
||||
background: none;
|
||||
font-size: 20px;
|
||||
border: none;
|
||||
border-bottom: 1px solid black;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
}
|
||||
dropdown > div:last-child button {
|
||||
background: none;
|
||||
font-size: 20px;
|
||||
border: none;
|
||||
border-bottom: 1px solid black;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
}
|
||||
dropdown > div:last-child button:hover {
|
||||
background: var(--accent_color_fg_o);
|
||||
}
|
||||
dropdown > div:last-child button:first-child {
|
||||
border-top-left-radius: var(--border-radius);
|
||||
border-top-right-radius: var(--border-radius);
|
||||
}
|
||||
dropdown > div:last-child button:last-child {
|
||||
border-bottom: none;
|
||||
border-bottom-left-radius: var(--border-radius);
|
||||
border-bottom-right-radius: var(--border-radius);
|
||||
}
|
||||
+102
-2
@@ -331,9 +331,22 @@ function getURLArgsMap() {
|
||||
return res;
|
||||
}
|
||||
|
||||
|
||||
function form1(string) {
|
||||
if (!string) return string;
|
||||
return string.charAt(0).toUpperCase() + string.slice(1);
|
||||
}
|
||||
|
||||
|
||||
async function getUserData(couchDB) {
|
||||
const username = getURLArgsMap()["user"];
|
||||
if (!username) return null;
|
||||
let username = getURLArgsMap()["user"];
|
||||
if (!username) {
|
||||
if (typeof (debug_username) == "string") {
|
||||
username = debug_username;
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
const res = await couchDB.get("users");
|
||||
if (!res) return null;
|
||||
const data = res[username];
|
||||
@@ -351,5 +364,92 @@ async function setUserData(couchDB) {
|
||||
return false;
|
||||
}
|
||||
userData = res;
|
||||
updateAllProfiles(res);
|
||||
return true;
|
||||
}
|
||||
|
||||
function updateAllProfiles(user) {
|
||||
const profiles = document.getElementsByClassName("profile");
|
||||
for (var i of profiles) {
|
||||
i.style.backgroundImage = `url("${user.avatar}")`;
|
||||
i.onclick = _onProfileClick;
|
||||
}
|
||||
}
|
||||
function _onProfileClick(event) {
|
||||
var buttonRect = this.getBoundingClientRect();
|
||||
|
||||
var dropdown = document.createElement("dropdown");
|
||||
dropdown.addEventListener("click", dropdown.remove);
|
||||
|
||||
var bg = document.createElement("div");
|
||||
dropdown.appendChild(bg);
|
||||
|
||||
var div = document.createElement("div");
|
||||
|
||||
const _1 = window.innerHeight - buttonRect.y - 200;
|
||||
if (_1 < 0) {
|
||||
div.style.transform = "translate(calc(-100% + 58px), calc(-100% - 30px))";
|
||||
}
|
||||
|
||||
div.style.top = (buttonRect.bottom) + 'px';
|
||||
div.style.left = (buttonRect.left) + 'px';
|
||||
div.innerHTML = `
|
||||
<label><b>${form1(userData.name)}</b></label>
|
||||
<button onclick='_onProfilClickOnProfil()'>Profil</button>
|
||||
<button onclick='location.href = "../login.html";'>Abmelden</button>
|
||||
`;
|
||||
dropdown.appendChild(div);
|
||||
|
||||
document.body.appendChild(dropdown);
|
||||
}
|
||||
function _onProfilClickOnProfil() {
|
||||
if (typeof(showProfile) == "function") {
|
||||
showProfile(userData);
|
||||
} else {
|
||||
_showProfile(userData);
|
||||
}
|
||||
}
|
||||
function _showProfile(user) {
|
||||
let elm = getId("profile_overlay");
|
||||
if (!elm) {
|
||||
elm = document.createElement("overlay");
|
||||
elm.setAttribute("id", "profile_overlay");
|
||||
document.body.appendChild(elm);
|
||||
}
|
||||
elm.innerHTML = `
|
||||
<div style="height: 40px; margin-top: 5px; margin-right: 50px;"><b>Profil-Übersicht</b></div>
|
||||
<span style="display: inline-block; width: 100%; text-align: center;">
|
||||
<div style="border-radius: 50%; width: 80px; height: 80px; display: inline-block; margin-bottom: 10px; background-color: var(--accent_color_bg); background-size: 80px 80px; background-image: url('${user.avatar}');"></div>
|
||||
<br>
|
||||
<u>${!user.title ? "": user.title+" "}${form1(user.name)}</u>
|
||||
<br><br>
|
||||
</span>
|
||||
<span class="selectable">
|
||||
Level: ${user.level ?? 0}<br>
|
||||
Rolle: ${form1(user.role ?? "Student")}
|
||||
</span><br>
|
||||
Avatar: <input style="" value="${user.avatar}"><br><br>
|
||||
<button style="font-size: 18px; width: 100%; border-radius: var(--border-radius); font-weight: normal;" onclick="_showProfileSave(this);">Speichern</button>
|
||||
`;
|
||||
showOverlay("profile_overlay");
|
||||
}
|
||||
async function _showProfileSave(elm) {
|
||||
if (!userData) return;
|
||||
|
||||
let couchDB = new CouchDB();
|
||||
const res = await couchDB.get("users");
|
||||
|
||||
const avatar = elm.parentElement.querySelector("input");
|
||||
|
||||
userData.avatar = avatar.value;
|
||||
|
||||
const user = {...userData};
|
||||
delete user["name"];
|
||||
res[userData.name] = user;
|
||||
|
||||
await couchDB.set("users", res);
|
||||
|
||||
updateAllProfiles(userData);
|
||||
|
||||
hideOverlay("profile_overlay");
|
||||
}
|
||||
Reference in new issue
Block a user