Шаблон мопса рендерирует страницу с различным масштабом или размером ⇐ Html

[Anonymous]

ВСЕ. Проблема в том, что, вероятно, масштаб страниц отличается. Например, тело HTML -страницы составляет 1536px, а мопс - 1920px. Кроме того, у меня также есть разные размеры шрифтов и относительный размер элементов. Если я сохраняю свою страницу мопса как HTML, она выглядит так же, как оригинальная. Вероятно, что -то происходит, когда PUG пытается отобразить шаблон < /p>
Код оригинальной HTML -страницы - < /p>

Код: Выделить всё

Safka Topics


function closeSendMsg() {
document.getElementById('overlay').style.display = 'none'
document.getElementById('send-msg').style.display = 'none'
}

function openSendMsg() {
document.getElementById('overlay').style.display = 'block'
document.getElementById('send-msg').style.display = 'flex'
}


#send-msg {
display: none;
flex-direction: column;
justify-content: center;
position: absolute;
width: 75%;
height: 75%;
background-color: var(--msg-details-bg-color);
align-self: center;
z-index: 5;
border-radius: 10px;
align-items: center;
justify-content: center;
}

#send-msg>label {
margin: 15px 10px 5px 5px;
}

#send-msg > #key-area {
height: 10%;
}

#send-msg > #message-area {
height: 30%;
}

#send-msg > textarea {
background-color: white;
margin: 5px 0;
overflow-y: auto;
box-sizing: content-box;
width: 95%;
resize: none;
}

#send-msg > button {
border-radius: 10px;
margin-top: 10px;
}






Topics
Brokers
Consumers
Send message



Topic name




Topic1



Topic2



Topic3






Topic

Topic1
Topic2
Topic3

Message key

Message

Send








1
2
3
4
5










< /code>
fug file выглядит так: < /p>
doctype html
html(lang='en')
head
meta(charset="UTF-8")
meta(name="viewport" content="width=device-width, initial-scale=1.0")
link(rel="stylesheet" href="/style.css")
title Topics Page
style.
#send-msg {
display: none;
flex-direction: column;
justify-content: center;
position: absolute;
width: 75%;
height: 75%;
background-color: var(--msg-details-bg-color);
align-self: center;
z-index: 5;
border-radius: 10px;
align-items: center;
justify-content: center;
}

#send-msg>label {
margin: 15px 10px 5px 5px;
}

#send-msg>#key-area {
height: 10%;
}

#send-msg>#message-area {
height: 30%;
}

#send-msg>textarea {
background-color: white;
margin: 5px 0;
overflow-y: auto;
box-sizing: content-box;
width: 95%;
resize: none;
}

#send-msg>button {
border-radius: 10px;
margin-top: 10px;
}

body


Topics
Brokers
Consumers
Send message



Topic name




Topic1



Topic2



Topic3






Topic

Topic1
Topic2
Topic3

Message key

Message

Send








1
2
3
4
5








script.
const popup = document.getElementById('produceMsgPopup');
const popupClose = document.querySelector('.popup-close');
const produceMsgBtn = document.querySelector('.produceMsgBtn');
function handleTopicClick(topic) {
// Send request to backend here
// Example using fetch API (replace with your actual backend endpoint)
fetch('/getTopic/' + topic) // Send topic as query parameter
.then(response => {
if (response.redirected) {
window.location.href = response.url;
}
})
}
function sendMsg() {
const selectDropdown = document.getElementById("topic-name");
const selectedTopic = selectDropdown.options[selectDropdown.selectedIndex].text;
fetch('/api/postMessage',
{
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
"topic": selectedTopic,
"message": document.querySelector(".message-area").value
})
}).then(response =>  {
popup.style.display = 'none';
document.querySelector(".msgContent").value = "";
})
}
function closeSendMsg() {
document.getElementById('overlay').style.display = 'none'
document.getElementById('send-msg').style.display = 'none'
}
function openSendMsg() {
document.getElementById('overlay').style.display = 'block'
document.getElementById('send-msg').style.display = 'flex'
}
< /code>
css ниже: < /p>
head, body {
margin: 0;
padding: 0;
font: caption;
}

:root {
--main-bg-color: rgb(255, 232, 205);
--table-head-bg-color: rgb(228, 203, 171);
--table-body-bg-color: rgb(253, 250, 246);
--menu-body-bg-color: rgb(179, 179, 179);
--msg-details-bg-color: rgb(203, 203, 203);
--menu-btn-bg-color-hover: rgb(58, 58, 58);
}

body {
background-color: var(--main-bg-color);
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
margin: 0;
padding: 0;
}

.page-body {
display: grid;
grid-template-columns: auto 1200px;
overflow-y: auto;
overflow-x: hidden;
max-height: 100vh;
}

.content-table {
z-index: 2;
background-color: var(--list-bg-color);
display: grid;
grid-template-rows: auto;
box-shadow: 7px 1px 19px 0px rgba(66, 68, 91, 1);
overflow-y: auto;
}

#t-head, #t-body {
width: 100%;
box-sizing: border-box;
}

#t-head {
background-color: var(--table-head-bg-color);
border-bottom: 1px solid #735e39;
}

#t-body {
background-color: var(--table-body-bg-color);
overflow-y: auto;
max-height: 100%;
}

.row {
grid-template-columns: 1fr 1fr 2fr;
display: grid;
text-align: left;
box-sizing: border-box;
overflow-y: hidden;
padding-left: 10px;
}

.row > * {
height: 25px;
}

#t-body > .row:hover {
background-color: rgb(176, 176, 176);
transition: 500ms ease;
}

.menu {
z-index: 1;
top: 0;
position: sticky;
align-self: start;
display: inline-block;
display: grid;
grid-template-columns: auto;
background-color: var(--menu-body-bg-color);
align-self: stretch;
border-radius: 0 0 10px 10px;
box-shadow: 0px 5px 10px 1px rgba(66, 68, 91, 0.546);
}

.menu > button {
background-image: linear-gradient(to right, rgb(239, 239, 239) 65%, rgb(197, 197, 197) 100%, black 180%);
text-align: left;
border: 0;
transition: 500ms ease;
}

.menu > .active-btn {
color: rgb(255, 241, 204);
background-image: linear-gradient(to right, rgb(72, 72, 72) 65%, rgb(197, 197, 197) 100%, rgb(239, 239, 239) 180%);
text-align: left;
border: 0;
transition: 500ms ease;
}

.menu > :not(.active-btn):hover {
text-align: left;
border: 0;
background-color: var(--menu-btn-bg-color-hover);
background-image: none;
color: rgb(255, 241, 204);
transition: 500ms ease;
}

.menu > button:last-child {
border-radius: 0 0 10px 10px;
}

#msg-details {
display: none;
flex-direction: column;
justify-content: center;
position: absolute;
width: 75%;
height: 75%;
background-color: var(--msg-details-bg-color);
align-self: center;
z-index: 5;
border-radius: 10px;
}

#msg-details > label {
margin: 20px 10px 5px 5px;
}

#msg-details > div {
background-color: white;
padding: 5px;
margin: 5px 0;
max-height: 20%;
overflow-y: auto;
}

#overlay {
display: none;
position: absolute;
opacity: 50%;
width: 100%;
height: 100%;
background-color: black;
align-self: center;
z-index: 4;
}

button {
font: caption;
}

footer {
background-color: rgb(56, 103, 154);
display: flex;
align-items: center;
justify-content: center;
align-content: center;
flex-wrap: wrap;
width: 100%;
margin-top: auto;
}

.active-page-num {
color: white;
font-size: 1.5rem;
}

footer >  p {
margin: 0 10px;
transition: 500ms ease;
text-align: center;
vertical-align: middle;
box-sizing: border-box;
}

footer > p:not(.active-page-num):hover {
font-size: 1.2rem;
color:rgb(255, 216, 148);
transition: 500ms ease;
}
< /code>
Кроме того, так как я использую приложение Express Backend, которое использует NPM -диспетчер, я также добавил поддержку для «публичной» зависимости, чтобы сделать мой мопс рендеринг в style.css < /p>
app.use(express.static('public', {
setHeaders: (res, path) => {
if (path.endsWith('.css')) {
res.setHeader('Content-Type', 'text/css');
}
}
}));

Спасибо за помощь


Подробнее здесь: https://stackoverflow.com/questions/797 ... le-or-size