aljaz/pear-docs
1
0
Fork 0
mirror of https://github.com/aljazceru/pear-docs.git synced 2025-12-17 14:34:19 +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;
}
.panels-wrapper {
display: flex;
gap: 30px;
}
.panel-left {
flex: 1;
}
.panel-right {
width: 400px;
}
.hidden {
display: none;
}
@@ -80,14 +91,6 @@ customElements.define('developer-tooling', class extends HTMLElement {
border-radius: 1px;
white-space: nowrap;
}
#remote-inspect-explain {
float:left;
max-width:55%;
}
#remote-inspect {
float:right;
max-width:40%;
}
#server-message {
font-size: 0.8rem;
margin-top: 30px;
@@ -132,8 +135,8 @@ customElements.define('developer-tooling', class extends HTMLElement {
<div>
<h1>Developer Tooling</h1>
<div>
<div id="remote-inspect-explain">
<div class="panels-wrapper">
<div class="panel-left">
<h2>Remotely inspect Pear applications.</h2>
<p> Some application setup is required to enable remote debugging </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>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 id="remote-inspect">
<div class="panel-right">
<div>
<form id="add-key-form">
<input id="add-key-input" type="text" placeholder="Paste Pear Inspector Key Here"/>