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

Merge pull request #30 from holepunchto/style-fixes

Browse Source 
Style fixes
This commit is contained in:
David Mark Clements
2024-02-12 16:44:35 +01:00
committed by GitHub
parent 7b59cbc467 8001e75fdf
commit 913eb8ffdb
1 changed files with 31 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
lib/devtools.js
View File

@@ -30,6 +30,27 @@ customElements.define('developer-tooling', class extends HTMLElement {
#change-port-show {
display: none;
}
#change-port-input {
width: 80px;
}
/* hide up/down arrow for input type=number */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.panels-wrapper {
display: flex;
gap: 30px;
}
.panel-left {
flex: 1;
}
.panel-right {
width: 400px;
}
.hidden {
display: none;
@@ -70,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;
@@ -122,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>
@@ -141,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"/>
@@ -160,7 +173,13 @@ customElements.define('developer-tooling', class extends HTMLElement {
</span>
<div>
<form id="change-port-form" class="hidden">
<input id="change-port-input" type="number" placeholder="New port" />
<input
id="change-port-input"
type="number"
placeholder="New port"
min="1024"
max="65535"
/>
</form>
<p id="change-port-error"></p>
</div>