fix css leaking from new bandwidth wizard to main router console in light mode. Images for new bandwidth wizard(installer/resources/themes/console/images/wizard/*.png) under the UnDraw license, which is in (licenses/LICENSE-undraw.txt). Make font size consistent on bandwidth page in light mode.

2019-10-04 05:11:42 +00:00
parent aca5617935
commit 87ba8577e9
3 changed files with 43 additions and 36 deletions
--- a/apps/routerconsole/jsp/welcome.jsp
+++ b/apps/routerconsole/jsp/welcome.jsp
@@ -94,12 +94,16 @@
 %>
 <!--<h2><%=intl._t("New Install Wizard")%> <%=ipg%>/<%=LAST_PAGE%></h2>-->
 <div id="wizard">
+
 <jsp:useBean class="net.i2p.router.web.helpers.WizardHandler" id="formhandler" scope="request" />
+
 <%
    // Bind the session-scope Helper to the request-scope Handler
    formhandler.setWizardHelper(wizhelper);
 %>
+<div class="wizardnotice">
 <%@include file="formhandler.jsi" %>
+</div>
 <form action="" method="POST">
 <input type="hidden" name="nonce" value="<%=pageNonce%>">
 <input type="hidden" name="action" value="blah" >
@@ -181,7 +185,7 @@
 %>
 <img class="wizard progress" src="/themes/console/images/wizard/logogrey5.png">
 <h3 id="wizardheading" class="wizard bwtest"><%=intl._t("Bandwidth Test Results")%></h3>
-<img class="wizardimg" src="/themes/console/images/wizard/undraw_startup_life.png">
+<img class="wizardimg bwtest" src="/themes/console/images/wizard/undraw_metrics.png">
 <table class="mlabtable">
 <tr><td><%=intl._t("Test running?")%></td><td><%=wizhelper.isNDTRunning()%></td></tr>
 <tr><td><%=intl._t("Test complete?")%></td><td><%=wizhelper.isNDTComplete()%></td></tr>
@@ -210,8 +214,8 @@
 }
 </style>
 <img class="wizardimg" src="/themes/console/images/wizard/undraw_metrics.png">
-<table id="bandwidthconfig" class="configtable wizard">
-<tr><td class="infohelp" colspan="2">
+<table id="bandwidthconfig" class="configtable wizardtable">
+<tr><td class="infohelp infodiv" colspan="2">
 <%=intl._t("I2P will work best if you configure your rates to match the speed of your internet connection.")%>
 </td></tr>
 <tr><td><input style="text-align: right; width: 5em;" name="inboundrate" type="text" size="5" maxlength="5" value="<jsp:getProperty name="wizhelper" property="inboundBurstRate" />" >
@@ -256,7 +260,7 @@
 %>
 <img class="wizard progress" src="/themes/console/images/wizard/logogrey7.png">
 <h3 id="wizardheading" class="wizard"><%=intl._t("Browser Setup")%></h3>
-<img class="wizardimg" src="/themes/console/images/wizard/undraw_High_five.png">
+<img class="wizardimg" src="/themes/console/images/wizard/undraw_startup_life.png">
 <div class="wizardtext"><p>
 <%=intl._t("Your browser needs to be configured to work with I2P.")%>
 <%=intl._t("We currently provide an I2P Browser which configures itself automatically")%>
@@ -283,7 +287,7 @@
        // Done
 %>
 <h3 id="wizardheading" class="wizard"><%=intl._t("Welcome to I2P!")%></h3>
-<img class="wizardimg" src="/themes/console/images/wizard/undraw_metrics.png">
+<img class="wizardimg" src="/themes/console/images/wizard/undraw_High_five.png">
 <div class="wizardtext">
 <p>
 <%=intl._t("When you start I2P, it may take a few minutes to bootstrap (integrate) your router into the network and find additional peers, so please be patient.")%>
@@ -305,28 +309,28 @@
 <%
    if (ipg != 1) {
 %>
-<input type="submit" class="back" name="prev" value="<%=intl._t("Previous")%>" >
+<input type="submit" class="back wizardbutton" name="prev" value="<%=intl._t("Previous")%>" >
 <%
    }
    if (ipg != LAST_PAGE) {
 %>
-<input type="submit" class="cancel" name="skip" value="<%=intl._t("Skip Setup")%>" >
+<input type="submit" class="cancel wizardbutton" name="skip" value="<%=intl._t("Skip Setup")%>" >
 <%
        if (ipg == 3) {
 %>
-<input type="submit" class="cancel" name="skipbw" value="<%=intl._t("Skip Bandwidth Test")%>" >
+<input type="submit" class="cancel wizardbutton" name="skipbw" value="<%=intl._t("Skip Bandwidth Test")%>" >
 <%
        } else if (ipg == 4) {
 %>
-<input type="submit" class="cancel" name="cancelbw" value="<%=intl._t("Cancel Bandwidth Test")%>" >
+<input type="submit" class="cancel wizardbutton" name="cancelbw" value="<%=intl._t("Cancel Bandwidth Test")%>" >
 <%
        }
 %>
-<input type="submit" class="go" name="next" value="<%=intl._t("Next")%>" >
+<input type="submit" class="go wizardbutton" name="next" value="<%=intl._t("Next")%>" >
 <%
    } else {
 %>
-<input type="submit" class="accept" name="done" value="<%=intl._t("Finished")%>" >
+<input type="submit" class="accept wizardbutton" name="done" value="<%=intl._t("Finished")%>" >
 <%
    }
 %>
--- a/installer/resources/themes/console/dark/console.css
+++ b/installer/resources/themes/console/dark/console.css
@@ -2318,7 +2318,6 @@ input[type="submit"], input[type="reset"], select, button {
 input[type="submit"], input[type="reset"], button {
     padding: 5px 8px !important;
     outline: none;
-     font-size: large
 }

 .statusnotes {
@@ -3601,6 +3600,7 @@ img.wizard.progress {
    max-width: 100%;
    max-height: 100vh;
    margin: auto;
+    top: 0;
    -webkit-filter: invert(1);
    filter: invert(1);
    z-index: -1;
@@ -3636,7 +3636,7 @@ table#bandwidthconfig td:first-child {
 #bandwidthconfig.configtable.wizard td {
     white-space: normal;
     background: none;
-     font-size: small;
+     /*font-size: small;*/
 }

 #xhr.notification {
@@ -3900,12 +3900,10 @@ table#tunnelconfig td:first-child {

 input.cancel, button.cancel {
    padding: 5px 7px 5px 22px;
-    /*font-size: large;*/
 }

 input.go, button.go, input[value="GO"] {
    padding: 5px 7px 5px 22px;
-    /*font-size: large;*/
 }

 /* /configupdate */
--- a/installer/resources/themes/console/light/console.css
+++ b/installer/resources/themes/console/light/console.css
@@ -1885,6 +1885,7 @@ h3#passwordheading {
    width: 30%;
    position: absolute;
    top: 36%;
+    font-size: larger;
 }

 h3#themeheading, h3#pluginmanage, h3#pconfig, h3#webappconfig, h3#advancedclientconfig, h3#i2pclientconfig, #config_stats h3 {
@@ -2169,9 +2170,6 @@ h3#graphdisplay {
     font-weight: bold;
     line-height: 130%;
     position: absolute;
-     top: 5%;
-     right: 5%;
-     width: 20%;
 }

 .main#config_update .messages {
@@ -2281,6 +2279,13 @@ td.optionsave {
    border-top: none !important;
 }

+.wizardnotice {
+     position: absolute;
+     top: 5%;
+     right: 5%;
+     width: 20%;
+}
+
 #bandwidthconfig .configtable tr:last-child td {
     border: none;
 }
@@ -2578,9 +2583,9 @@ td {

 #wizardheading {
    border: none;
-    width: 50%;
+    width: 100%;
    padding: 2%;
-    margin: 2% 24%;
+    margin: auto;
    top: 2%;
    font-size: xx-large;
    text-transform: uppercase;
@@ -2601,13 +2606,14 @@ td {
    background-size: auto 100%, 100% 100%;
    box-shadow: inset 0 0 0 1px #fff;
    filter: drop-shadow(0 0 1px #ccf);
+    font-size: larger;
 }

 #bandwidthconfig {
    border: 1px solid #7778bf;
 }

-#bandwidthconfig.configtable.wizard {
+#bandwidthconfig.configtable.wizardtable {
    width: 35%;
    top: 36%;
    left: 31%;
@@ -2636,19 +2642,16 @@ td {
 #bandwidthconfig td:last-child {
     white-space: normal;
     background: none;
-     font-size: larger;
 }

 #bandwidthconfig.configtable td {
     white-space: normal;
     background: none;
-     font-size: larger;
 }

 #bandwidthconfig.configtable.wizard td {
     white-space: normal;
     background: none;
-     font-size: small;
 }

 #xhr.notification {
@@ -3871,10 +3874,13 @@ button:active, input[type="submit"]:active, input[type="reset"]:active {
     transition: ease box-shadow 0.05s;
 }

+input.wizardbutton, button.wizardbutton {
+    font-size: large;
+}
+
 input.accept, button.accept {
     background: url(/themes/console/images/buttons/yes.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff);
     padding: 5px 7px 5px 22px;
-     font-size: large;
 }

 input.accept:hover, button.accept:hover, input.accept:focus, button.accept:focus {
@@ -3914,7 +3920,6 @@ input.accept[value^="Filter"]:focus, button.accept[value^="Filter"]:focus {
 input.add, button.add {
     background: url(/themes/console/images/buttons/add.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff);
     padding: 5px 7px 5px 22px;
-     font-size: large;
 }

 input.add:hover, button.add:hover,
@@ -3935,7 +3940,6 @@ input.add[value^="Adjust"]:focus, button.add[value^="Adjust"]:focus {
 input.cancel, button.cancel {
     background: url(/themes/console/images/buttons/no.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff);
     padding: 5px 7px 5px 22px;
-     font-size: large;
 }

 input.cancel:hover, button.cancel:hover,
@@ -3992,7 +3996,6 @@ input.check[value$="updates"]:focus, button.check[value$="updates"]:focus {
 input.delete, button.delete {
     background: url(/themes/console/images/buttons/delete.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff);
     padding: 5px 7px 5px 22px;
-     font-size: large;
 }

 input.delete:hover, button.delete:hover,
@@ -4013,7 +4016,6 @@ input.delete[value^="Ban"]:focus, button.delete[value^="Ban"]:focus {
 input.download, button.download {
     background: url(/themes/console/images/buttons/download.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff);
     padding: 5px 7px 5px 22px;
-     font-size: large;
 }

 input.download:hover, button.download:hover,
@@ -4057,7 +4059,6 @@ input.download[value^="Dump"]:focus, button.download[value^="Dump"]:focus {
 input.go, button.go, input[value="GO"] {
     background: url(/themes/console/images/buttons/go.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff);
     padding: 5px 7px 5px 22px;
-     font-size: large;
 }

 input.go:hover, button.go:hover, input[value="GO"]:hover,
@@ -4088,7 +4089,6 @@ input.back:focus {
 input.reload, button.reload {
     background: url(/themes/console/images/buttons/restore.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff);
     padding: 5px 7px 5px 22px;
-     font-size: large;
 }

 input.reload:hover, button.reload:hover,
@@ -4914,8 +4914,8 @@ div#langsettings {

 div#wizlangsettings.wizard {
     position: absolute;
-     left: 15rem;
-     bottom: 10rem;
+     left: 15%;
+     top: 30%;
 }

 #themesettings hr, #langsettings hr {
@@ -4926,8 +4926,9 @@ img.wizard.progress {
    position: absolute;
    top: 2%;
    left: 0%;
-    width: 31%;
-    max-width: 31%;
+    max-width: 25%;
+    height: 15%;
+    max-height: 15%;
    mix-blend-mode: multiply;
 }

@@ -4945,7 +4946,7 @@ img.wizard.progress {
 .wizardtext {
    width: 25%;
    position: absolute;
-    top: 36%;
+    top: 15%;
    left: 5%;
    font-size: larger;
 }
@@ -6239,6 +6240,10 @@ table#schedjobs {
     font-size: 9pt;
 }

+.infodiv {
+    font-size: larger;
+}
+
 #peerdefs td:first-child {
     text-align: right;
     white-space: nowrap;