fix css leaking from new bandwidth wizard to main router console in l…

…ight 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.
i2p · Oct 4, 2019 · 87ba857 · 87ba857
1 parent aca5617
commit 87ba857
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 36 deletions.
diff --git 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")%>" >
 <%
     }
 %>

diff --git 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 */

diff --git 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;