Home-IoT/esphome
1
0
Fork 0
mirror of https://github.com/esphome/esphome.git synced 2024-11-26 17:05:21 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

Fix dashboard style issues (#437)

Browse source 
* Update dashboard copyright year

* Fix overflow and select color issue

* Make upload and compile modals not dismissible on outside click

* Fix to small dropdown
This commit is contained in:
Florian Gareis 2019-02-17 15:31:41 +01:00 committed by Otto Winter
parent f311a1bb30
commit b27c778cb7
4 changed files with 19 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
esphome/dashboard/static/esphome.css
View file

@ -118,6 +118,7 @@ body {
display: flex; display: flex;
min-height: 100vh; min-height: 100vh;
flex-direction: column; flex-direction: column;
overflow: hidden;
} }
main { main {
@ -144,10 +145,23 @@ ul.stepper:not(.horizontal) .step.active::before, ul.stepper:not(.horizontal) .s
width: 350px; width: 350px;
} }
.select-port-container .select-dropdown {
color: #fff;
}
.select-port-container .caret {
fill: #fff;
}
.dropdown-trigger { .dropdown-trigger {
cursor: pointer; cursor: pointer;
} }
.select-action {
width: auto !important;
height: auto !important;
}
/* https://github.com/tnhu/status-indicator/blob/master/styles.css */ /* https://github.com/tnhu/status-indicator/blob/master/styles.css */
.status-indicator .status-indicator-icon { .status-indicator .status-indicator-icon {
display: inline-block; display: inline-block;

2
esphome/dashboard/static/esphome.js
View file

@ -337,6 +337,7 @@ document.querySelectorAll(".action-upload").forEach((upload) => {
upload.addEventListener('click', (e) => { upload.addEventListener('click', (e) => {
configuration = e.target.getAttribute('data-node'); configuration = e.target.getAttribute('data-node');
const modalInstance = M.Modal.getInstance(uploadModalElem); const modalInstance = M.Modal.getInstance(uploadModalElem);
modalInstance.options['dismissible'] = false;
const log = uploadModalElem.querySelector(".log"); const log = uploadModalElem.querySelector(".log");
log.innerHTML = ""; log.innerHTML = "";
const colorState = initializeColorState(); const colorState = initializeColorState();
@ -441,6 +442,7 @@ document.querySelectorAll(".action-compile").forEach((upload) => {
upload.addEventListener('click', (e) => { upload.addEventListener('click', (e) => {
configuration = e.target.getAttribute('data-node'); configuration = e.target.getAttribute('data-node');
const modalInstance = M.Modal.getInstance(compileModalElem); const modalInstance = M.Modal.getInstance(compileModalElem);
modalInstance.options['dismissible'] = false;
const log = compileModalElem.querySelector(".log"); const log = compileModalElem.querySelector(".log");
log.innerHTML = ""; log.innerHTML = "";
const colorState = initializeColorState(); const colorState = initializeColorState();

4
esphome/dashboard/templates/index.html
View file

@ -77,7 +77,7 @@
<a class="action-show-logs" data-node="{{ entry.filename }}">Show Logs</a> <a class="action-show-logs" data-node="{{ entry.filename }}">Show Logs</a>
<a class="action-validate" data-node="{{ entry.filename }}">Validate</a> <a class="action-validate" data-node="{{ entry.filename }}">Validate</a>
</div> </div>
<ul id="dropdown-{{ i }}" class="dropdown-content card-dropdown-action"> <ul id="dropdown-{{ i }}" class="select-action dropdown-content card-dropdown-action">
<li><a class="action-clean-mqtt" data-node="{{ entry.filename }}">Clean MQTT</a></li> <li><a class="action-clean-mqtt" data-node="{{ entry.filename }}">Clean MQTT</a></li>
<li><a class="action-clean" data-node="{{ entry.filename }}">Clean Build</a></li> <li><a class="action-clean" data-node="{{ entry.filename }}">Clean Build</a></li>
<li><a class="action-compile" data-node="{{ entry.filename }}">Compile</a></li> <li><a class="action-compile" data-node="{{ entry.filename }}">Compile</a></li>
@ -471,7 +471,7 @@
</div> </div>
<div class="footer-copyright"> <div class="footer-copyright">
<div class="container"> <div class="container">
© 2018 Copyright Otto Winter, Made with <a class="grey-text text-lighten-4" href="https://materializecss.com/" target="_blank">Materialize</a> © 2019 Copyright Otto Winter, Made with <a class="grey-text text-lighten-4" href="https://materializecss.com/" target="_blank">Materialize</a>
<a class="grey-text text-lighten-4 right" href="{{ docs_link }}" target="_blank" rel="noreferrer">ESPHome {{ version }} Documentation</a> <a class="grey-text text-lighten-4 right" href="{{ docs_link }}" target="_blank" rel="noreferrer">ESPHome {{ version }} Documentation</a>
</div> </div>
</div> </div>

2
esphome/dashboard/templates/login.html
View file

@ -65,7 +65,7 @@
</div> </div>
<div class="footer-copyright"> <div class="footer-copyright">
<div class="container"> <div class="container">
© 2018 Copyright Otto Winter, Made with <a class="grey-text text-lighten-4" href="https://materializecss.com/" target="_blank">Materialize</a> © 2019 Copyright Otto Winter, Made with <a class="grey-text text-lighten-4" href="https://materializecss.com/" target="_blank">Materialize</a>
<a class="grey-text text-lighten-4 right" href="{{ docs_link }}" <a class="grey-text text-lighten-4 right" href="{{ docs_link }}"
target="_blank">ESPHome {{ version }} Documentation</a> target="_blank">ESPHome {{ version }} Documentation</a>
</div> </div>