From 1a5fedbb6d3dc7d0486e258224d130da3d0dac2b Mon Sep 17 00:00:00 2001
From: idk <hankhill19580@gmail.com>
Date: Sat, 20 Feb 2021 16:41:35 -0500
Subject: [PATCH] Fixup the bandwidth wizard so it works on more resolutions
---
.../jsp/themes/console/light/console.css | 64 +++++++++----------
apps/routerconsole/jsp/welcome.jsp | 34 +++++-----
2 files changed, 48 insertions(+), 50 deletions(-)
diff --git a/apps/routerconsole/jsp/themes/console/light/console.css b/apps/routerconsole/jsp/themes/console/light/console.css
index f2dc900be8..941b5237fc 100644
--- a/apps/routerconsole/jsp/themes/console/light/console.css
+++ b/apps/routerconsole/jsp/themes/console/light/console.css
@@ -1807,8 +1807,8 @@ h3#passwordheading {
.mlabtable {
width: 30%;
+ top: 150px;
position: absolute;
- top: 17%;
font-size: 10pt !important;
}
@@ -2197,8 +2197,7 @@ td.optionsave {
.wizardnotice {
position: absolute;
- top: 75%;
- left: 5%;
+ left: 75%;
width: 22%;
}
@@ -2498,27 +2497,27 @@ td {
#wizardheading {
border: none;
- width: 100%;
padding: 2%;
margin: auto;
- top: 1%;
+ margin-left: 40%;
+ margin-top: -1%;
font-size: xx-large;
letter-spacing: 0.08em;
word-spacing: 0.1em;
color: #41465f;
- position: absolute;
background: none !important;
box-shadow: none !important;
}
.clickableProgression {
- color: #327bbf;
+ color: #327bbf;
+ margin-left: 47%;
}
#infodiv {
- position: absolute;
- left: 32%;
- width: 35%;
+ position: relative;
+ left: 31%;
+ width: 31%;
top: 50%;
box-shadow: inset 0 0 0 1px #fff;
background: rgba(255,255,255,0.7);
@@ -2530,10 +2529,9 @@ td {
}
#bandwidthconfig.configtable.wizardtable {
- width: 35%;
- top: 17%;
- left: 32%;
- position: absolute;
+ width: 31%;
+ margin-top: -23%;
+ margin-left: 32%;
background: none;
font-size: 10pt !important;
}
@@ -2542,7 +2540,6 @@ td {
bottom: 10%;
right: 10%;
width: max-content;
- position: absolute;
box-shadow: none !important;
white-space: normal;
background: none;
@@ -2572,7 +2569,7 @@ td {
#xhr.notification {
width: 30%;
- position: absolute;
+ position: relative;
left: 30%;
top: 38%;
font-size: larger;
@@ -2582,7 +2579,7 @@ td {
#xhr2.notification {
width: 20%;
- position: absolute;
+ position: relative;
left: 70%;
top: 30%;
font-size: larger;
@@ -3768,7 +3765,7 @@ button:active, input[type="submit"]:active, input[type="reset"]:active {
transition: ease box-shadow 0.05s;
}
-input.wizardbutton, button.wizardbutton {
+input.wizardbuttons, button.wizardbuttons {
font-size: large;
}
@@ -4799,9 +4796,7 @@ div#langsettings {
}
div#wizlangsettings.wizard {
- position: absolute;
- left: 15%;
- top: 50%;
+ margin-left: 30%;
}
#themesettings hr, #langsettings hr {
@@ -4809,12 +4804,11 @@ div#wizlangsettings.wizard {
}
img.wizard.progress {
+ mix-blend-mode: multiply;
position: absolute;
- top: 6%;
+ top: 1%;
left: 1%;
- max-height: 10%;
- max-width: 30%;
- mix-blend-mode: multiply;
+ max-width: 40%;
}
.overlay {
@@ -4834,20 +4828,23 @@ img.wizard.progress {
.wizardtext {
width: 25%;
- position: absolute;
- top: 17%;
- left: 5%;
font-size: larger;
+ margin-top: -20%;
+ margin-left: 10%;
+}
+
+.wizardbuttons {
+ margin-left: 10%;
}
#wizard {
z-index: 0;
- position: absolute;
left: 0px;
top: 0px;
height: 100%;
width: 100%;
background-color: #f8f9fa;
+ text-align: start;
}
.langselect { /* containing box for lang selection */
@@ -4862,16 +4859,17 @@ img.wizard.progress {
float: left;
margin-left: 15%;
transition: transform 0.3s ease 0s;
+
}
.wizardimg {
- max-width: 75%;
+ max-width: 50%;
max-height: 100%;
margin: auto;
mix-blend-mode: multiply;
- position: absolute;
- z-index: 0;
- right: 0%;
+ margin-left: 40%;
+ margin-top: -10%;
+ position: relative;
}
.langselect:hover {
diff --git a/apps/routerconsole/jsp/welcome.jsp b/apps/routerconsole/jsp/welcome.jsp
index d77f0a4322..2463ba4f13 100644
--- a/apps/routerconsole/jsp/welcome.jsp
+++ b/apps/routerconsole/jsp/welcome.jsp
@@ -111,9 +111,6 @@
<jsp:setProperty name="uihelper" property="contextId" value="<%=i2pcontextId%>" />
<%-- needed for CSS: --%><div id="config_ui">
<%-- needed for lang setting in css.jsi: --%><input type="hidden" name="consoleNonce" value="<%=net.i2p.router.web.CSSHelper.getNonce()%>" >
-<img class="wizard progress" src="/themes/console/images/wizard/wizardlogo.png">
-<h3 id="wizardheading" class="wizard"><%=uihelper._t("Select Language")%></h3>
-<img class="wizardimg" src="/themes/console/images/wizard/step-0.png">
<div class="clickableProgression">
<span class="currentProgression">⬤</span>
<span class="unvisitedProgression">◯</span>
@@ -122,6 +119,9 @@
<span class="unvisitedProgression">◯</span>
<span class="unvisitedProgression">◯</span>
</div>
+<img class="wizard progress" src="/themes/console/images/wizard/wizardlogo.png">
+<h3 id="wizardheading" class="wizard"><%=uihelper._t("Select Language")%></h3>
+<img class="wizardimg" src="/themes/console/images/wizard/step-0.png">
<div id="wizlangsettings" class="wizard">
<jsp:getProperty name="uihelper" property="langSettings" />
</div>
@@ -143,9 +143,6 @@
} else if (ipg == 2) {
// Overview of bandwidth test
%>
-<img class="wizard progress" src="/themes/console/images/wizard/wizardlogo.png">
-<h3 id="wizardheading" class="wizard"><%=intl._t("Bandwidth Test")%></h3>
-<img class="wizardimg" src="/themes/console/images/wizard/step-2.png">
<div class="clickableProgression">
<span class="visitedProgression">◯</span>
<span class="currentProgression">⬤</span>
@@ -154,6 +151,9 @@
<span class="unvisitedProgression">◯</span>
<span class="unvisitedProgression">◯</span>
</div>
+<img class="wizard progress" src="/themes/console/images/wizard/wizardlogo.png">
+<h3 id="wizardheading" class="wizard"><%=intl._t("Bandwidth Test")%></h3>
+<img class="wizardimg" src="/themes/console/images/wizard/step-2.png">
<div class="wizardtext">
<p>
<%=intl._t("Let's check your internet connection!")%>
@@ -179,9 +179,6 @@
} else if (ipg == 3) {
// Bandwidth test in progress (w/ AJAX)
%>
-<img class="wizard progress" src="/themes/console/images/wizard/wizardlogo.png">
-<h3 id="wizardheading" class="wizard"><%=intl._t("Bandwidth Test in Progress")%></h3>
-<img class="wizardimg" src="themes/console/images/wizard/step-3.png">
<div class="clickableProgression">
<span class="visitedProgression">◯</span>
<span class="visitedProgression">◯</span>
@@ -190,6 +187,9 @@
<span class="unvisitedProgression">◯</span>
<span class="unvisitedProgression">◯</span>
</div>
+<img class="wizard progress" src="/themes/console/images/wizard/wizardlogo.png">
+<h3 id="wizardheading" class="wizard"><%=intl._t("Bandwidth Test in Progress")%></h3>
+<img class="wizardimg" src="themes/console/images/wizard/step-3.png">
<div id="xhr" class="notifcation">
<!-- for non-script -->
<%=intl._t("Javascript is disabled - wait 60 seconds for the bandwidth test to complete and then click Next")%>
@@ -219,8 +219,6 @@
if (request.getParameter("skipbw") == null) {
// don't display this if we skipped the test
%>
-<img class="wizard progress" src="/themes/console/images/wizard/wizardlogo.png">
-<h3 id="wizardheading" class="wizard bwtest"><%=intl._t("Bandwidth Test Results")%></h3>
<div class="clickableProgression">
<span class="visitedProgression">◯</span>
<span class="visitedProgression">◯</span>
@@ -229,6 +227,8 @@
<span class="unvisitedProgression">◯</span>
<span class="unvisitedProgression">◯</span>
</div>
+<img class="wizard progress" src="/themes/console/images/wizard/wizardlogo.png">
+<h3 id="wizardheading" class="wizard bwtest"><%=intl._t("Bandwidth Test Results")%></h3>
<table class="mlabtable">
<tr><td><%=intl._t("Test server location")%></td><td colspan="3"><%=wizhelper.getServerLocation()%></td></tr>
<tr><td><%=intl._t("Completion status")%></td><td colspan="3"><%=wizhelper.getCompletionStatus()%></td></tr>
@@ -302,9 +302,6 @@
} else if (ipg == 5) {
// Browser setup
%>
-<img class="wizard progress" src="/themes/console/images/wizard/wizardlogo.png">
-<h3 id="wizardheading" class="wizard"><%=intl._t("Browser and Application Setup")%></h3>
-<img class="wizardimg" src="/themes/console/images/wizard/step-5.png">
<div class="clickableProgression">
<span class="visitedProgression">◯</span>
<span class="visitedProgression">◯</span>
@@ -313,6 +310,9 @@
<span class="currentProgression">⬤</span>
<span class="unvisitedProgression">◯</span>
</div>
+<img class="wizard progress" src="/themes/console/images/wizard/wizardlogo.png">
+<h3 id="wizardheading" class="wizard"><%=intl._t("Browser and Application Setup")%></h3>
+<img class="wizardimg" src="/themes/console/images/wizard/step-5.png">
<div class="wizardtext"><p>
<%=intl._t("Your browser needs to be configured to work with I2P.")%>
<%=intl._t("We have instructions for configuring both Firefox and Chromium based browsers with I2P.")%>
@@ -348,9 +348,6 @@
} else if (ipg == LAST_PAGE) {
// Done
%>
-<img class="wizard progress" src="/themes/console/images/wizard/wizardlogo.png">
-<h3 id="wizardheading" class="wizard"><%=intl._t("Welcome to the Invisible Internet!")%></h3>
-<img class="wizardimg" src="/themes/console/images/wizard/step-6.png">
<div class="clickableProgression">
<span class="visitedProgression">◯</span>
<span class="visitedProgression">◯</span>
@@ -359,6 +356,9 @@
<span class="visitedProgression">◯</span>
<span class="currentProgression">⬤</span>
</div>
+<img class="wizard progress" src="/themes/console/images/wizard/wizardlogo.png">
+<h3 id="wizardheading" class="wizard"><%=intl._t("Welcome to the Invisible Internet!")%></h3>
+<img class="wizardimg" src="/themes/console/images/wizard/step-6.png">
<div class="wizardtext">
<p>
<%=intl._t("It will take some time for your peers to integrate your router into the network, but while that is happening you can still explore I2P applications and get to know your way around the router console.")%>
--
GitLab