From e40bbc9f18390c69ed8969b93ef6225719108ec0 Mon Sep 17 00:00:00 2001
From: idk <hankhill19580@gmail.com>
Date: Fri, 8 Apr 2022 16:53:36 -0400
Subject: [PATCH] Overhaul CSS n New Install Wizard in order to make it less
dependent on absolute positioning. Remove confusing M-Lab measurement table
since the meaningful results are already populated in the configuration
table. Adjust postioning of some elements on the bandwidth config pages.
remove the old images from both themes.
---
.../jsp/themes/console/dark/console.css | 38 ++++++--------
.../jsp/themes/console/light/console.css | 52 +++++++------------
apps/routerconsole/jsp/welcome.jsp | 32 +-----------
3 files changed, 37 insertions(+), 85 deletions(-)
diff --git a/apps/routerconsole/jsp/themes/console/dark/console.css b/apps/routerconsole/jsp/themes/console/dark/console.css
index c3dc8585d6..05df3faeda 100644
--- a/apps/routerconsole/jsp/themes/console/dark/console.css
+++ b/apps/routerconsole/jsp/themes/console/dark/console.css
@@ -1315,9 +1315,8 @@ div.messages li {
}
.wizardnotice {
- position: absolute;
- bottom: 20%;
- right: 5%;
+ margin-left: 75%;
+ margin-top: -3%;
width: 22%;
}
@@ -3376,7 +3375,6 @@ td#themeselect {
letter-spacing: 0.08em;
word-spacing: 0.1em;
color: #7778bf;
- position: absolute;
background: none !important;
box-shadow: none !important;
line-height: normal;
@@ -3384,15 +3382,16 @@ td#themeselect {
}
#infodiv {
- position: absolute;
- right: 5%;
width: 20%;
- top: 15%;
- box-shadow: inset 0 0 0 1px #fff;
color: #e6e6e7;
- background: rgba(0, 0, 0, 0.7);
padding: .5%;
text-align: justify;
+ margin: auto;
+ margin-top: auto;
+ margin-left: auto;
+ float: right;
+ margin-left: 60%;
+ margin-top: -10%;
}
#bandwidthconfig {
@@ -3403,16 +3402,13 @@ td#themeselect {
width: 35%;
top: 17%;
left: 31%;
- position: absolute;
background: none;
font-size: larger;
}
.configtable.wizard {
width: 20%;
- bottom: 5%;
- right: 10%;
- position: absolute;
+ margin: auto;
box-shadow: none !important;
white-space: normal;
background: none;
@@ -3716,9 +3712,7 @@ p#externaltcp {
}
img.wizard.progress {
- position: absolute;
- top: 6%;
- left: 1%;
+ margin-left: -75%;
max-height: 10%;
max-width: 30%;
mix-blend-mode: exclusion;
@@ -3732,6 +3726,10 @@ img.wizard.progress {
background: rgba(0, 0, 0, 0.7);
}
+.wizardbuttons.wizard {
+ padding-top: 5%;
+}
+
#bwconfigheader {
background: white;
}
@@ -3740,22 +3738,18 @@ img.wizard.progress {
width: 35%;
top: 20%;
left: 32%;
- position: absolute;
background: none;
}
.wizardtext {
- width: 25%;
- position: absolute;
- top: 37%;
- left: 5%;
+ width: 75%;
+ margin: auto;
font-size: larger;
color: #e6e6e7;
}
#wizard {
z-index: 0;
- position: absolute;
left: 0px;
top: 0px;
height: 100%;
diff --git a/apps/routerconsole/jsp/themes/console/light/console.css b/apps/routerconsole/jsp/themes/console/light/console.css
index 5bdda13d71..3fb713f599 100644
--- a/apps/routerconsole/jsp/themes/console/light/console.css
+++ b/apps/routerconsole/jsp/themes/console/light/console.css
@@ -2395,10 +2395,10 @@ td.optionsave {
}
.wizardnotice {
- position: absolute;
- right: 5%;
width: 22%;
- bottom: 20%;
+ margin: auto;
+ margin-left: 75%;
+ margin-top: -3%;
}
#bandwidthconfig .configtable tr:last-child td {
@@ -2712,8 +2712,6 @@ td {
border: none;
padding: 2%;
margin: auto;
- margin-left: 40%;
- margin-top: -1%;
font-size: xx-large;
letter-spacing: 0.08em;
word-spacing: 0.1em;
@@ -2725,17 +2723,18 @@ td {
.clickableProgression {
color: #327bbf;
- margin-left: 47%;
}
#infodiv {
position: absolute;
- left: 33%;
width: 31%;
- top: 25%;
- box-shadow: inset 0 0 0 1px #fff;
- background: rgba(255, 255, 255, 0.7);
font-size: larger;
+ margin: auto;
+ margin-top: auto;
+ margin-left: auto;
+ float: right;
+ margin-left: 60%;
+ margin-top: -10%;
}
#bandwidthconfig {
@@ -2744,16 +2743,13 @@ td {
#bandwidthconfig.configtable.wizardtable {
width: 31%;
- margin-left: 65%;
+ /*margin-left: 65%;*/
background: none;
font-size: 10pt !important;
}
.configtable.wizard {
- width: 20%;
- bottom: 5%;
- right: 10%;
- position: absolute;
+ width: 30%;
box-shadow: none !important;
white-space: normal;
background: none;
@@ -5258,19 +5254,13 @@ div#langsettings {
border: 1px solid #dee2e6;
}
-#wizlangsettings {
- height: 100px;
-}
-
#themesettings hr,
#langsettings hr {
display: none;
}
img.wizard.progress {
- position: absolute;
- top: 6%;
- left: 1%;
+ margin-left: -75%;
max-height: 10%;
max-width: 30%;
}
@@ -5291,25 +5281,24 @@ img.wizard.progress {
}
.wizardtext {
- width: 25%;
- position: absolute;
- top: 37%;
- left: 5%;
+ width: 75%;
+ margin: auto;
font-size: larger;
}
.wizardbuttons {
- margin-left: 10%;
+ /*margin-left: 44%;*/
+}
+
+.wizardbuttons.wizard {
+ padding-top: 5%;
}
#wizard {
z-index: 0;
- left: 0px;
- top: 0px;
height: 100%;
width: 100%;
background-color: #f8f9fa;
- text-align: start;
}
.langselect {
@@ -5331,10 +5320,7 @@ img.wizard.progress {
max-width: 75%;
max-height: 100%;
margin: auto;
- top: 0;
z-index: 0;
- position: absolute;
- right: 0%;
mix-blend-mode: multiply;
}
diff --git a/apps/routerconsole/jsp/welcome.jsp b/apps/routerconsole/jsp/welcome.jsp
index e971d8de53..7741824515 100644
--- a/apps/routerconsole/jsp/welcome.jsp
+++ b/apps/routerconsole/jsp/welcome.jsp
@@ -115,6 +115,7 @@
// Bind the session-scope Helper to the request-scope Handler
formhandler.setWizardHelper(wizhelper);
%>
+<img class="wizard progress" src="/themes/console/images/wizard/wizardlogo.png">
<div class="wizardnotice">
<%@include file="formhandler.jsi" %>
</div>
@@ -130,7 +131,7 @@
}
}
%>
-</div><img class="wizard progress" src="/themes/console/images/wizard/wizardlogo.png">
+</div>
<form action="" method="POST">
<input type="hidden" name="nonce" value="<%=pageNonce%>">
<input type="hidden" name="action" value="blah" >
@@ -148,7 +149,6 @@
<jsp:useBean class="net.i2p.router.web.helpers.ConfigUIHelper" id="uihelper" scope="request" />
<jsp:setProperty name="uihelper" property="contextId" value="<%=i2pcontextId%>" />
<h3 id="wizardheading" class="wizard"><%=uihelper._t("Select Language")%></h3>
-<img class="wizardimg" src="/themes/console/images/wizard/step-0.png">
<div class="wizardtext">
<p>
@@ -173,7 +173,6 @@
<jsp:useBean class="net.i2p.router.web.helpers.ConfigUIHelper" id="uihelper2" scope="request" />
<jsp:setProperty name="uihelper2" property="contextId" value="<%=i2pcontextId%>" />
<h3 id="wizardheading" class="wizard"><%=uihelper2._t("Select Theme")%></h3>
-<img class="wizardimg" src="/themes/console/images/wizard/step-1.png">
<div class="wizardtext">
<p>
<%=intl._t("Please select your preferred theme:")%>
@@ -189,7 +188,6 @@
// Overview of bandwidth test
%>
<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!")%>
@@ -216,7 +214,6 @@
// Bandwidth test in progress (w/ AJAX)
%>
<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="notification">
<!-- for non-script -->
<%=intl._t("Javascript is disabled - wait 60 seconds for the bandwidth test to complete and then click Next")%>
@@ -242,29 +239,6 @@
%>
<jsp:useBean class="net.i2p.router.web.helpers.ConfigNetHelper" id="nethelper" scope="request" />
<jsp:setProperty name="nethelper" property="contextId" value="<%=i2pcontextId%>" />
-<%
- if (request.getParameter("skipbw") == null) {
- // don't display this if we skipped the test
-%>
-<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>
-<%
- if (wizhelper.isNDTSuccessful()) {
- // don't display this if test failed
-%>
-<tr><td><%=intl._t("Details")%></td><td colspan="3"><%=wizhelper.getDetailStatus()%></td></tr>
-<tr><td><%=intl._t("Downstream Bandwidth")%></td><td><%=net.i2p.data.DataHelper.formatSize2Decimal(wizhelper.getDownBandwidth())%>Bps</td>
-<td><%=intl._t("Upstream Bandwidth")%></td><td><%=net.i2p.data.DataHelper.formatSize2Decimal(wizhelper.getUpBandwidth())%>Bps</td></tr>
-<tr><td><%=intl._t("Share of Bandwidth for I2P")%></td><td><%=Math.round(net.i2p.router.web.helpers.WizardHelper.BW_SCALE * 100)%>%</td></tr>
-<%
- } // sucessful
-%>
-</table>
-<%
- } // skipbw
-%>
<h3 id="wizardheading" class="wizard"><%=intl._t("Bandwidth Configuration")%></h3>
<style>
.bwtest {
@@ -319,7 +293,6 @@
// Browser setup
%>
<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.")%>
@@ -356,7 +329,6 @@
// Done
%>
<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