mirror of
https://github.com/esphome/esphome.git
synced 2024-11-30 02:34:12 +01:00
Remove duplicate scrollbar & move scrollbar (#443)
* Remove duplicate scrollbar * Move scrolling from modal-content to log-container * Replace css autoscroll with stable js autoscroll
This commit is contained in:
Florian Gareis
Otto Winter
parent
0bdcce609f
commit
c1b8107aaf
3 changed files with 32 additions and 46 deletions
|
|
@ -46,17 +46,8 @@ i.very-large {
|
|||
font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
|
||||
}
|
||||
|
||||
.autoscroll {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
flex-basis: auto;
|
||||
}
|
||||
|
||||
.autoscroll div {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
.log {
|
||||
max-height: calc(100% - 56px);
|
||||
background-color: #1c1c1c;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
|
|
@ -161,6 +152,10 @@ ul.stepper:not(.horizontal) .step.active::before, ul.stepper:not(.horizontal) .s
|
|||
height: auto !important;
|
||||
}
|
||||
|
||||
.tap-target-wrapper {
|
||||
position: fixed !important;
|
||||
}
|
||||
|
||||
/* https://github.com/tnhu/status-indicator/blob/master/styles.css */
|
||||
.status-indicator .status-indicator-icon {
|
||||
display: inline-block;
|
||||
|
|
@ -223,9 +218,8 @@ ul.stepper:not(.horizontal) .step.active::before, ul.stepper:not(.horizontal) .s
|
|||
#editor {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding: 16px;
|
||||
border-radius: 3px;
|
||||
height: 100%
|
||||
height: calc(100% - 56px);
|
||||
}
|
||||
|
||||
.update-available i {
|
||||
|
|
|
|||
|
|
@ -168,6 +168,7 @@ const colorReplace = (pre, state, text) => {
|
|||
}
|
||||
}
|
||||
addSpan(text.substring(i));
|
||||
scrollToBottomOfElement(pre);
|
||||
};
|
||||
|
||||
const removeUpdateAvailable = (filename) => {
|
||||
|
|
@ -700,4 +701,15 @@ const startWizard = () => {
|
|||
});
|
||||
};
|
||||
|
||||
const scrollToBottomOfElement = (element) => {
|
||||
var atBottom = false;
|
||||
if (element.scrollTop + 30 >= (element.scrollHeight - element.offsetHeight)) {
|
||||
atBottom = true;
|
||||
}
|
||||
|
||||
if (atBottom) {
|
||||
element.scrollTop = element.scrollHeight;
|
||||
}
|
||||
}
|
||||
|
||||
setupWizardStart.addEventListener('click', startWizard);
|
||||
|
|
@ -93,30 +93,20 @@
|
|||
</div>
|
||||
|
||||
<div id="modal-logs" class="modal modal-fixed-footer">
|
||||
<div class="modal-content autoscroll">
|
||||
<div>
|
||||
<div class="modal-content">
|
||||
<h4>Show Logs <code class="inlinecode filename"></code></h4>
|
||||
<div>
|
||||
<div class="log-container">
|
||||
<pre class="log"></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a class="modal-close waves-effect waves-green btn-flat stop-logs">Close</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="modal-upload" class="modal modal-fixed-footer">
|
||||
<div class="modal-content autoscroll">
|
||||
<div>
|
||||
<div class="modal-content">
|
||||
<h4>Compile And Upload <code class="inlinecode filename"></code></h4>
|
||||
<div class="log-container">
|
||||
<pre class="log"></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="https://esphome.io/guides/faq.html#i-can-t-get-flashing-over-usb-to-work" target="_blank"
|
||||
class="tooltipped" data-position="left" data-tooltip="Flash using esphomeflasher" rel="noreferrer">
|
||||
|
|
@ -127,14 +117,10 @@
|
|||
</div>
|
||||
|
||||
<div id="modal-compile" class="modal modal-fixed-footer">
|
||||
<div class="modal-content autoscroll">
|
||||
<div>
|
||||
<div class="modal-content">
|
||||
<h4>Compile <code class="inlinecode filename"></code></h4>
|
||||
<div class="log-container">
|
||||
<pre class="log"></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="https://esphome.io/guides/faq.html#i-can-t-get-flashing-over-usb-to-work"
|
||||
target="_blank"
|
||||
|
|
@ -400,28 +386,24 @@
|
|||
</div>
|
||||
|
||||
<div id="modal-clean-mqtt" class="modal modal-fixed-footer">
|
||||
<div class="modal-content autoscroll">
|
||||
<div class="modal-content">
|
||||
<div>
|
||||
<h4>Clean MQTT discovery <code class="inlinecode filename"></code></h4>
|
||||
<div class="log-container">
|
||||
<pre class="log"></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a class="modal-close waves-effect waves-green btn-flat stop-logs">Close</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="modal-clean" class="modal modal-fixed-footer">
|
||||
<div class="modal-content autoscroll">
|
||||
<div class="modal-content">
|
||||
<div>
|
||||
<h4>Clean Build Files <code class="inlinecode filename"></code></h4>
|
||||
<div class="log-container">
|
||||
<pre class="log"></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a class="modal-close waves-effect waves-green btn-flat stop-logs">Stop</a>
|
||||
</div>
|
||||
|
|
@ -430,10 +412,8 @@
|
|||
<div id="modal-hass-config" class="modal modal-fixed-footer">
|
||||
<div class="modal-content">
|
||||
<h4>Generate Home Assistant Configuration <code class="inlinecode filename"></code></h4>
|
||||
<div class="log-container">
|
||||
<pre class="log"></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a class="modal-close waves-effect waves-green btn-flat stop-logs">Stop</a>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue