AGentooCat/i2p.i2p
1
0
Fork 0
forked from I2P_Developers/i2p.i2p
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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.

Browse Source
This commit is contained in:
idk
2022-04-08 16:53:36 -04:00
parent ec72f3cdf6
commit e40bbc9f18
3 changed files with 37 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
apps/routerconsole/jsp/themes/console/dark/console.css
View File

@@ -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%;

52
apps/routerconsole/jsp/themes/console/light/console.css
View File

@@ -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;
}

32
apps/routerconsole/jsp/welcome.jsp
View File

@@ -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.")%>