starred/qb-core-qbcore-fivem
1
0
Fork 0
mirror of https://github.com/qbcore-fivem/qb-core.git synced 2026-08-29 01:01:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix Styling (#758)

Browse Source 
* style: ensure consistent indentation

* style: add spacing

* style: add newlines

* style: simplify html

* fix: update javascript indent size in contribution guidelines
This commit is contained in:
David Malchin
2022-07-18 23:45:46 +03:00
committed by GitHub
parent 657f55b599
commit 7fab401ed2
13 changed files with 197 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files
html/css/drawtext.css
+8 -1
View File
@@ -1,4 +1,5 @@
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap");
:root {
--primary-bg: rgba(23, 23, 23, 90%);
--active-bg: #dc143c;
@@ -15,6 +16,7 @@
font-family: "Poppins", sans-serif !important;
font-weight: 300;
}
.text {
position: absolute;
background: var(--primary-bg);
@@ -47,11 +49,13 @@
left: 45vw;
top: -100px;
}
.top.show {
transition: 0.5s;
top: 10px;
opacity: 1;
}
.top.hide {
transition: 0.5s;
top: -100px;
@@ -62,11 +66,13 @@
top: 50%;
right: -100px;
}
.right.show {
transition: 0.5s;
right: 10px;
opacity: 1;
}
.right.hide {
transition: 0.5s;
right: -100px;
@@ -83,8 +89,9 @@
left: 10px;
opacity: 1;
}
.left.hide {
transition: 0.5s;
left: -100px;
opacity: 0;
}
}
html/css/style.css
+6 -6
View File
@@ -10,7 +10,7 @@ html::-webkit-scrollbar {
border-left: 0.5rem solid #20bb44;
font-size: 1.5vh;
}
.primary {
background-color: rgba(23, 23, 23, 90%);
border-radius: 10px;
@@ -18,7 +18,7 @@ html::-webkit-scrollbar {
border-left: 5px solid #1c75d2;
font-size: 1.5vh;
}
.error {
background-color: rgba(23, 23, 23, 90%);
border-radius: 10px;
@@ -26,7 +26,7 @@ html::-webkit-scrollbar {
border-left: 5px solid #c10114;
font-size: 1.5vh;
}
.police {
background-color: rgba(23, 23, 23, 90%);
border-radius: 10px;
@@ -34,7 +34,7 @@ html::-webkit-scrollbar {
border-left: 5px solid #2197f2;
font-size: 1.5vh;
}
.ambulance {
background-color: rgba(23, 23, 23, 90%);
border-radius: 10px;
@@ -42,7 +42,7 @@ html::-webkit-scrollbar {
border-left: 5px solid #f44236;
font-size: 1.5vh;
}
}
.success {
@@ -78,4 +78,4 @@ html::-webkit-scrollbar {
border-radius: 10px;
box-shadow: 0rem 0rem 0.1rem 0.05rem #000000;
border-left: 5px solid #f44236;
}
}
html/index.html
+9 -35
View File
@@ -1,46 +1,20 @@
<html>
<head>
<link
href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
rel="stylesheet"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@2.1.0/dist/quasar.prod.css"
rel="stylesheet"
type="text/css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="css/style.css"
rel="stylesheet"
/>
<script
src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"
defer
></script>
<script
src="https://cdn.jsdelivr.net/npm/quasar@2.1.0/dist/quasar.umd.prod.js"
defer
></script>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/quasar@2.1.0/dist/quasar.prod.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@2.1.0/dist/quasar.umd.prod.js" defer></script>
<script type="module" src="js/app.js"></script>
<script src="js/drawtext.js"></script>
<link rel="stylesheet" href="css/drawtext.css">
</head>
<body style="font-family: 'Poppins', sans-serif">
<div
id="q-app"
style="min-height: 100vh"
></div>
<div id="q-app" style="min-height: 100vh"></div>
<div id="drawtext-container">
<div id="text" class="text"></div>
</div>
</body>
</html>
</html>
html/js/drawtext.js
+93 -93
View File
@@ -1,124 +1,124 @@
let direction = null;
const drawText = async (textData) => {
const text = document.getElementById("text");
let {position} = textData;
switch (textData.position) {
case "left":
addClass(text, position);
direction = "left";
break;
case "top":
addClass(text, position);
direction = "top";
break;
case "right":
addClass(text, position);
direction = "right";
break;
default:
addClass(text, "left");
direction = "left";
break;
}
const text = document.getElementById("text");
let {position} = textData;
switch (textData.position) {
case "left":
addClass(text, position);
direction = "left";
break;
case "top":
addClass(text, position);
direction = "top";
break;
case "right":
addClass(text, position);
direction = "right";
break;
default:
addClass(text, "left");
direction = "left";
break;
}
text.innerHTML = textData.text;
document.getElementById("drawtext-container").style.display = "block";
await sleep(100);
addClass(text, "show");
text.innerHTML = textData.text;
document.getElementById("drawtext-container").style.display = "block";
await sleep(100);
addClass(text, "show");
};
const changeText = async (textData) => {
const text = document.getElementById("text");
let {position} = textData;
const text = document.getElementById("text");
let {position} = textData;
removeClass(text, "show");
addClass(text, "pressed");
addClass(text, "hide");
removeClass(text, "show");
addClass(text, "pressed");
addClass(text, "hide");
await sleep(500);
await sleep(500);
removeClass(text, "left");
removeClass(text, "right");
removeClass(text, "top");
removeClass(text, "bottom");
removeClass(text, "hide");
removeClass(text, "pressed");
switch (textData.position) {
case "left":
addClass(text, position);
direction = "left";
break;
case "top":
addClass(text, position);
direction = "top";
break;
case "right":
addClass(text, position);
direction = "right";
break;
default:
addClass(text, "left");
direction = "left";
break;
}
text.innerHTML = textData.text;
await sleep(100);
text.classList.add("show");
};
const hideText = async () => {
const text = document.getElementById("text");
removeClass(text, "show");
addClass(text, "hide");
setTimeout(() => {
removeClass(text, "left");
removeClass(text, "right");
removeClass(text, "top");
removeClass(text, "bottom");
removeClass(text, "hide");
removeClass(text, "pressed");
switch (textData.position) {
case "left":
addClass(text, position);
direction = "left";
break;
case "top":
addClass(text, position);
direction = "top";
break;
case "right":
addClass(text, position);
direction = "right";
break;
default:
addClass(text, "left");
direction = "left";
break;
}
text.innerHTML = textData.text;
await sleep(100);
text.classList.add("show");
};
const hideText = async () => {
const text = document.getElementById("text");
removeClass(text, "show");
addClass(text, "hide");
setTimeout(() => {
removeClass(text, "left");
removeClass(text, "right");
removeClass(text, "top");
removeClass(text, "bottom");
removeClass(text, "hide");
removeClass(text, "pressed");
document.getElementById("drawtext-container").style.display = "none";
}, 1000);
document.getElementById("drawtext-container").style.display = "none";
}, 1000);
};
const keyPressed = () => {
const text = document.getElementById("text");
addClass(text, "pressed");
const text = document.getElementById("text");
addClass(text, "pressed");
};
window.addEventListener("message", (event) => {
const data = event.data;
const action = data.action;
const textData = data.data;
switch (action) {
case "DRAW_TEXT":
return drawText(textData);
case "CHANGE_TEXT":
return changeText(textData);
case "HIDE_TEXT":
return hideText();
case "KEY_PRESSED":
return keyPressed();
default:
return;
}
const data = event.data;
const action = data.action;
const textData = data.data;
switch (action) {
case "DRAW_TEXT":
return drawText(textData);
case "CHANGE_TEXT":
return changeText(textData);
case "HIDE_TEXT":
return hideText();
case "KEY_PRESSED":
return keyPressed();
default:
return;
}
});
const sleep = (ms) => {
return new Promise((resolve) => setTimeout(resolve, ms));
return new Promise((resolve) => setTimeout(resolve, ms));
};
const removeClass = (element, name) => {
if (element.classList.contains(name)) {
element.classList.remove(name);
}
if (element.classList.contains(name)) {
element.classList.remove(name);
}
};
const addClass = (element, name) => {
if (!element.classList.contains(name)) {
element.classList.add(name);
}
if (!element.classList.contains(name)) {
element.classList.add(name);
}
};