Fixup the bandwidth wizard so it works on more resolutions

This commit is contained in:
idk
2021-02-20 16:41:35 -05:00
parent b656274c92
commit 1a5fedbb6d
2 changed files with 49 additions and 51 deletions

View File

@@ -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 {
position: absolute;
top: 6%;
left: 1%;
max-height: 10%;
max-width: 30%;
mix-blend-mode: multiply;
position: absolute;
top: 1%;
left: 1%;
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 {

View File

@@ -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">&#x2B24;</span>
<span class="unvisitedProgression">&#x25EF;</span>
@@ -122,6 +119,9 @@
<span class="unvisitedProgression">&#x25EF;</span>
<span class="unvisitedProgression">&#x25EF;</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">&#x25EF;</span>
<span class="currentProgression">&#x2B24;</span>
@@ -154,6 +151,9 @@
<span class="unvisitedProgression">&#x25EF;</span>
<span class="unvisitedProgression">&#x25EF;</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">&#x25EF;</span>
<span class="visitedProgression">&#x25EF;</span>
@@ -190,6 +187,9 @@
<span class="unvisitedProgression">&#x25EF;</span>
<span class="unvisitedProgression">&#x25EF;</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">&#x25EF;</span>
<span class="visitedProgression">&#x25EF;</span>
@@ -229,6 +227,8 @@
<span class="unvisitedProgression">&#x25EF;</span>
<span class="unvisitedProgression">&#x25EF;</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">&#x25EF;</span>
<span class="visitedProgression">&#x25EF;</span>
@@ -313,6 +310,9 @@
<span class="currentProgression">&#x2B24;</span>
<span class="unvisitedProgression">&#x25EF;</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">&#x25EF;</span>
<span class="visitedProgression">&#x25EF;</span>
@@ -359,6 +356,9 @@
<span class="visitedProgression">&#x25EF;</span>
<span class="currentProgression">&#x2B24;</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.")%>