aljaz/pear-docs
1
0
Fork 0
mirror of https://github.com/aljazceru/pear-docs.git synced 2025-12-18 06:54:22 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix panels jerking

Browse Source
This commit is contained in:
Tobias Baunbaek
2024-02-02 10:55:32 +01:00
parent 7977fdab34
commit 8001e75fdf
1 changed files with 14 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
lib/devtools.js
View File

@@ -41,6 +41,17 @@ customElements.define('developer-tooling', class extends HTMLElement {
margin: 0; margin: 0;
} }
.panels-wrapper {
display: flex;
gap: 30px;
}
.panel-left {
flex: 1;
}
.panel-right {
width: 400px;
}
.hidden { .hidden {
display: none; display: none;
} }
@@ -80,14 +91,6 @@ customElements.define('developer-tooling', class extends HTMLElement {
border-radius: 1px; border-radius: 1px;
white-space: nowrap; white-space: nowrap;
} }
#remote-inspect-explain {
float:left;
max-width:55%;
}
#remote-inspect {
float:right;
max-width:40%;
}
#server-message { #server-message {
font-size: 0.8rem; font-size: 0.8rem;
margin-top: 30px; margin-top: 30px;
@@ -132,8 +135,8 @@ customElements.define('developer-tooling', class extends HTMLElement {
<div> <div>
<h1>Developer Tooling</h1> <h1>Developer Tooling</h1>
<div> <div class="panels-wrapper">
<div id="remote-inspect-explain"> <div class="panel-left">
<h2>Remotely inspect Pear applications.</h2> <h2>Remotely inspect Pear applications.</h2>
<p> Some application setup is required to enable remote debugging </p> <p> Some application setup is required to enable remote debugging </p>
<p> Install the <code>pear-inspect</code> module into the application </p> <p> Install the <code>pear-inspect</code> module into the application </p>
@@ -151,7 +154,7 @@ customElements.define('developer-tooling', class extends HTMLElement {
<p>When the application is opened in development mode the inspection key will be logged.</p> <p>When the application is opened in development mode the inspection key will be logged.</p>
<p>Paste the logged key into the input to add it. Then open in Chrome or copy the URL to a compatible inspect tool to view the remote target.</p> <p>Paste the logged key into the input to add it. Then open in Chrome or copy the URL to a compatible inspect tool to view the remote target.</p>
</div> </div>
<div id="remote-inspect"> <div class="panel-right">
<div> <div>
<form id="add-key-form"> <form id="add-key-form">
<input id="add-key-input" type="text" placeholder="Paste Pear Inspector Key Here"/> <input id="add-key-input" type="text" placeholder="Paste Pear Inspector Key Here"/>