Skip to content
Permalink
Browse files

configurator UI fixes and improvements

  • Loading branch information...
gabrielburnworth authored and ConnorRigby committed Feb 12, 2019
1 parent 1a67faf commit 9924a3812b839e720f33ae5a46bd3d3f58062d36
@@ -2,13 +2,19 @@
font-family: "Arial";
}

html {
min-height: 100%;
}

body {
background: linear-gradient(-135deg, #6db1ec, #35a274);
padding: 0.5rem;
padding-top: 1rem;
min-height: 100%;
}

h1, h2 {
h1,
h2 {
text-shadow: 0 0 25px rgba(0, 0, 0, 0.1), 0 0 25px rgba(0, 0, 0, 0.1);
margin-bottom: 3rem;
font-weight: 100;
@@ -38,13 +44,18 @@ h1, h2 {
background-color: #434343;
}

input {
box-sizing: border-box;
}

button,
a, input[type=submit] {
a,
input[type=submit] {
padding: .5rem 1.6rem;
font-size: 1.2rem;
text-transform: uppercase;
text-decoration: none;
font-weight: 700!important;
font-weight: 700 !important;
border: none;
border-radius: 3px;
background-color: #6a4;
@@ -53,9 +64,10 @@ a, input[type=submit] {
cursor: pointer;
}

a:hover, input[type=submit]:hover {
a:hover,
input[type=submit]:hover {
border-bottom-width: 1px !important;
background-color:#61a241;
background-color: #61a241;
}

.rescan {
@@ -64,10 +76,10 @@ a:hover, input[type=submit]:hover {
padding: 5px 10px 20px 10px;
height: 0;
margin: -4px;

}

.copy-button {
margin-top: 1rem;
text-align: center;
}

@@ -106,6 +118,7 @@ p {
color: #434343 !important;
padding: 1rem;
}

.widget-content:label {
font-size: 1.3rem;
}
@@ -198,12 +211,12 @@ input[type="radio"]:checked:after {
text-align: center;
}

.connection-type-box > img {
.connection-type-box>img {
width: 7rem;
height: 7rem;
}

.connection-type-box > span {
.connection-type-box>span {
display: inline-block;
padding-top: 0.5rem;
}
@@ -251,21 +264,21 @@ input[type="radio"]:checked:after {
color: #434343;
}

.connection-type-info:hover + .connection-type-info-content {
.connection-type-info:hover+.connection-type-info-content {
transition: all 0.5s ease 0.2s;
opacity: 1;
}

input:checked + .connection-type-box {
input:checked+.connection-type-box {
background: #ccc;
border-width: 3px;
}

input:checked + .connection-type-box > span {
input:checked+.connection-type-box>span {
color: black;
}

input:checked + .connection-type-box > img {
input:checked+.connection-type-box>img {
filter: brightness(0.25);
}

@@ -283,6 +296,10 @@ th {
border-right: none;
}

td {
line-height: 0;
}

.table-header {
background: #f4f4f4;
color: #434343;
@@ -323,19 +340,30 @@ th {
text-align: center;
}

.expandable {
.expandable,
.expanded {
cursor: pointer;
}

.expandable:after {
.expandable:after,
.expanded:after {
content: "";
margin-left: 0.5rem;
display: inline-block;
}

.expandable:after {
border: 7px solid transparent;
border-top: 7px solid #434343;
border-top: 7px solid;
transform: translateY(30%);
}

.expanded:after {
border: 7px solid transparent;
border-bottom: 7px solid;
transform: translateY(-30%);
}

.eye-icon {
cursor: pointer;
width: 2rem;
@@ -374,3 +402,16 @@ th {
.last-shutdown-reason i {
font-weight: bold;
}

.last-shutdown-reason label {
text-transform: none;
}

.last-shutdown-reason hr {
border: 0.4px solid grey;
margin-top: 1.5rem;
}

.last-shutdown-reason .env-details {
padding-left: 1rem;
}
@@ -1,27 +1,21 @@
<script>
window["advancedSettingsHidden"] = true;
function toggleAdvancedSettings() {
if(advancedSettingsHidden) {
advancedSettingsHidden = false;
document.getElementById("hiddenToggle").hidden = false;
} else {
advancedSettingsHidden = true;
document.getElementById("hiddenToggle").hidden = true;
}
var advanced = document.getElementById("advancedSettings");
advanced.hidden = !advanced.hidden
document.getElementById("advancedSettingsTitle").className =
advanced.hidden ? "expandable" : "expanded"
}
function ipv4_methodChange() {
if(document.getElementById("ipv4_method").value == "static") {
document.getElementById("ipv4_settings").hidden = false;
} else {
document.getElementById("ipv4_settings").hidden = true;
}
var static = document.getElementById("ipv4_method").value == "static";
document.getElementById("ipv4_settings").hidden = !static;
}
</script>

<div>
<label class="expandable" onclick="toggleAdvancedSettings()" for="hiddenToggle">Advanced settings</label>
<fieldset id="hiddenToggle" hidden>
<label id="advancedSettingsTitle" class="expandable" for="advancedSettings"
onclick="toggleAdvancedSettings()">Advanced settings</label>
<fieldset id="advancedSettings" hidden>

<label for="regulatory_domain"> regulatory domain </label>
<input type="text" id="regulatory_domain" name="regulatory_domain" value="US">
@@ -50,7 +44,7 @@
<option> static </option>
</select>

<fieldset id="ipv4_settings" hidden>
<div id="ipv4_settings" hidden>
<label for="ipv4_address"> IP Address </label>
<input type="text" id="ipv4_address" name="ipv4_address" value="0.0.0.0">

@@ -59,7 +53,7 @@

<label for="ipv4_gateway"> IP Gateway </label>
<input type="text" id="ipv4_gateway" name="ipv4_gateway" value="0.0.0.0">
</fieldset>
</div>

</fieldset>
</div>
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
@@ -1,4 +1,5 @@
<% import Phoenix.HTML %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
@@ -86,8 +87,8 @@
</div>
</div>

<div id="submit_button" class="button" onclick="submitFirmwareChoice()">
<input type="submit" value="next">
<div id="submit_button" class="button">
<input type="submit" value="next" onclick="submitFirmwareChoice()">
</div>

</form>
@@ -1,4 +1,5 @@
<% import Phoenix.HTML %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
@@ -24,16 +25,23 @@
textArea.value += "```\n";
textArea.value += tmp.innerText;
textArea.value += "```";
document.getElementById("last-shutdown-reason-content").appendChild(textArea);
var content = document.getElementById("last-shutdown-reason-content");
content.appendChild(textArea);
textArea.focus();
textArea.select();
var copyStatus = document.execCommand("copy");
var copiedText = window.getSelection().toString();
console.log(copyStatus ? "copied:" : "did not copy: ", copiedText);
document.getElementById("last-shutdown-reason-content").removeChild(textArea);
content.removeChild(textArea);
document.getElementById("copy-lsr-button").innerHTML = copyStatus ? "copy ✓" : "copy";
}
function toggleErrorDetails() {
var details = document.getElementById("envDetails");
details.hidden = !details.hidden;
document.getElementById("addDetails").className =
details.hidden ? "expandable" : "expanded"
}
</script>
</head>

@@ -47,15 +55,32 @@

<div class="widget-content">

<p> <a hidden=true id='hidden-logs' href="/view_logs">Download all logs</a> </p>
<p> <a hidden id='hidden-logs' href="/view_logs">Download all logs</a> </p>

<%= if last_reset_reason do %>
<div class="last-shutdown-reason">
<div class="last-shutdown-reason-header">
<h5> Farmbot unexpectedly shut down </h5> <p></p>
</div>
<div id="last-shutdown-reason-content">
<i> Last shutdown reason: </i> <%= last_reset_reason %>
<i> Last shutdown reason: </i>
<script>
var all = "<%= escape_javascript(last_reset_reason) %>";
var reason = all.split("<hr>")[0];
document.write(reason)
</script>
<hr />
<label id="addDetails" class="expandable"
onclick="toggleErrorDetails()" for="envDetails">
Additional details
</label>
<div id="envDetails" class="env-details" hidden>
<script>
var all = "<%= escape_javascript(last_reset_reason) %>";
var envDetails = all.split("<hr>")[1];
document.write(envDetails)
</script>
</div>
</div>
<div class="copy-button">
<button id="copy-lsr-button" onClick='copyLSR()'>copy</button>
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>

0 comments on commit 9924a38

Please sign in to comment.
You can’t perform that action at this time.