aboutsummaryrefslogtreecommitdiff
path: root/pdf-as-web
diff options
context:
space:
mode:
authorfschneider <florian.schneider@student.tugraz.at>2015-08-20 13:51:15 +0200
committerfschneider <florian.schneider@student.tugraz.at>2015-08-20 13:51:15 +0200
commitbe395099139640b820dfd1e6bc06d8dbcb14a415 (patch)
treefea2634760b2fd8072793e2113bc89231961ded0 /pdf-as-web
parent85614dff20a23c850696e486d5f6131503d4ad27 (diff)
downloadpdf-as-4-be395099139640b820dfd1e6bc06d8dbcb14a415.tar.gz
pdf-as-4-be395099139640b820dfd1e6bc06d8dbcb14a415.tar.bz2
pdf-as-4-be395099139640b820dfd1e6bc06d8dbcb14a415.zip
Bootstrap centering and Responsive navBar
Diffstat (limited to 'pdf-as-web')
-rw-r--r--pdf-as-web/src/main/webapp/assets/bootstrap/css/bootstrap-nav2/dist/bootstrap-nav-wizard.css5
-rw-r--r--pdf-as-web/src/main/webapp/assets/css/style.css513
-rw-r--r--pdf-as-web/src/main/webapp/index.jsp108
3 files changed, 74 insertions, 552 deletions
diff --git a/pdf-as-web/src/main/webapp/assets/bootstrap/css/bootstrap-nav2/dist/bootstrap-nav-wizard.css b/pdf-as-web/src/main/webapp/assets/bootstrap/css/bootstrap-nav2/dist/bootstrap-nav-wizard.css
index f62b9611..607ae01f 100644
--- a/pdf-as-web/src/main/webapp/assets/bootstrap/css/bootstrap-nav2/dist/bootstrap-nav-wizard.css
+++ b/pdf-as-web/src/main/webapp/assets/bootstrap/css/bootstrap-nav2/dist/bootstrap-nav-wizard.css
@@ -32,16 +32,17 @@ ul.nav-wizard:after {
z-index: 11;
content: " ";
}
-ul.nav-wizard li { /* PADDING IN OWN STYLE.CSS */
+ul.nav-wizard li {
position: relative;
float: left;
height: 46px;
display: inline-block;
text-align: middle;
- /* CHANGE: 0 20px 0 30px */
+ padding: 0 18.5% 0 6.4%;
margin: 0;
font-size: 16px;
line-height: 46px;
+ width: 1%; /* New*/
}
ul.nav-wizard li a {
color: #468847;
diff --git a/pdf-as-web/src/main/webapp/assets/css/style.css b/pdf-as-web/src/main/webapp/assets/css/style.css
index facb268a..a04540e9 100644
--- a/pdf-as-web/src/main/webapp/assets/css/style.css
+++ b/pdf-as-web/src/main/webapp/assets/css/style.css
@@ -20,21 +20,6 @@ footer {
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
-
- iframe {
- border: none;
- min-width:5em;
- width: 100%;
- height: 46%;
- }
-
- #FormBox {
- width: 100%;
- }
-
- ul.nav-wizard li {
- padding: 0 20px 0 30px;
- }
}
@@ -45,25 +30,6 @@ footer {
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
- iframe {
- border: none;
- min-width:5em;
- width: 100%;
- height: 73%;
- }
-
- #FormBox {
- width: 100%;
- }
-
- ul.nav-wizard li {
- padding: 0 3.7em 0 30px;
- }
-
- #ViewerExternToolbar {
- margin-left: 32%;
- }
-
}
/* ----------- iPhone 5 and 5S ----------- */
@@ -75,21 +41,6 @@ footer {
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
- iframe {
- border: none;
- min-width:5em;
- width: 100%;
- height: 46%;
- }
-
- #FormBox {
- width: 100%;
- }
-
- ul.nav-wizard li {
- padding: 0 20px 0 30px;
- }
-
}
/* Landscape */
@@ -99,25 +50,6 @@ footer {
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
- iframe {
- border: none;
- min-width:5em;
- width: 100%;
- height: 88%;
- }
-
- #FormBox {
- width: 100%;
- }
-
- ul.nav-wizard li {
- padding: 0 5.07em 0 30px;
- }
-
- #ViewerExternToolbar {
- margin-left: 35%;
- }
-
}
/* ----------- iPhone 6 ----------- */
@@ -129,20 +61,6 @@ footer {
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
- iframe {
- border: none;
- min-width:5em;
- width: 100%;
- height: 55%;
- }
-
- #FormBox {
- width: 100%;
- }
-
- ul.nav-wizard li {
- padding: 0 2em 0 30px;
- }
}
/* Landscape */
@@ -152,25 +70,6 @@ footer {
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
- iframe {
- border: none;
- min-width:5em;
- width: 100%;
- height: 105%;
- }
-
- #FormBox {
- width: 100%;
- }
-
- ul.nav-wizard li {
- padding: 0 6.6em 0 30px;
- }
-
- #ViewerExternToolbar {
- margin-left: 37%;
- }
-
}
/* ----------- iPhone 6+ ----------- */
@@ -182,21 +81,6 @@ footer {
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
- iframe {
- border: none;
- min-width:5em;
- width: 100%;
- height: 62%;
- }
-
- #FormBox {
- width: 100%;
- }
-
- ul.nav-wizard li {
- padding: 0 2.6em 0 30px;
- }
-
}
/* Landscape */
@@ -206,25 +90,6 @@ footer {
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {
- iframe {
- border: none;
- min-width:5em;
- width: 100%;
- height: 112%;
- }
-
- #FormBox {
- width: 100%;
- }
-
- ul.nav-wizard li {
- padding: 0 7.7em 0 30px;
- }
-
- #ViewerExternToolbar {
- margin-left: 37%;
- }
-
}
/* ----------- Google Nexus 6 ----------- */
@@ -236,24 +101,6 @@ footer {
and (-webkit-device-pixel-ratio: 3.5)
and (orientation: portrait) {
- iframe {
- border: none;
- min-width:5em;
- width: 100%;
- height: 55%;
- }
-
- #FormBox {
- width: 100%;
- }
-
- ul.nav-wizard li {
- padding: 0 2.6em 0 30px;
- }
-
- #ViewerExternToolbar {
- margin-left: 30%;
- }
}
/* Landscape */
@@ -263,24 +110,6 @@ footer {
and (orientation: landscape)
and (-webkit-device-pixel-ratio: 3.5) {
- iframe {
- border: none;
- min-width:5em;
- width: 100%;
- height: 55%;
- }
-
- #FormBox {
- width: 100%;
- }
-
- ul.nav-wizard li {
- padding: 0 7.6em 0 30px;
- }
-
- #ViewerExternToolbar {
- margin-left: 38%;
- }
}
@@ -294,21 +123,6 @@ footer {
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
- iframe {
- border: none;
- min-width:5em;
- width: 100%;
- height: 90%;
- }
-
- #FormBox {
- width: 20em;
- margin-left:29.5%;
- }
-
- ul.nav-wizard li {
- padding: 0 7.4em 0 30px;
- }
}
/* Landscape */
@@ -318,22 +132,6 @@ footer {
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
- iframe {
- border: none;
- min-width:5em;
- width: 100%;
- height: 46%;
- }
-
- #FormBox {
- width: 20em;
- margin-left: 35%;
- }
-
- ul.nav-wizard li {
- padding: 0 20px 0 30px;
- }
-
}
/* G Nexus 7 */
@@ -345,24 +143,6 @@ footer {
and (orientation: portrait)
and (-webkit-device-pixel-ratio: 2) {
- iframe {
- border: none;
- min-width:5em;
- width: 100%;
- height: 80%;
- }
-
- #FormBox {
- width: 100%;
- }
-
- ul.nav-wizard li {
- padding: 0 5.5em 0 30px;
- }
-
- #ViewerExternToolbar {
- margin-left: 35%;
- }
}
/* Landscape */
@@ -372,25 +152,6 @@ footer {
and (orientation: landscape)
and (-webkit-device-pixel-ratio: 2) {
- iframe {
- border: none;
- min-width:5em;
- width: 100%;
- height: 80%;
- }
-
- #FormBox {
- width: 20em;
- margin-left: 30%
- }
-
- ul.nav-wizard li {
- padding: 0 7.4em 0 30px;
- }
-
- #ViewerExternToolbar {
- margin-left: 38%;
- }
}
/* Blackberry Playbook */
@@ -402,26 +163,6 @@ footer {
and (orientation: portrait)
and (-webkit-device-pixel-ratio: 1) {
- iframe {
- border: none;
- min-width:5em;
- width: 100%;
- height: 80%;
- }
-
- #FormBox {
- width: 100%;
- }
-
- ul.nav-wizard li {
- padding: 0 5.5em 0 30px;
- }
-
- #ViewerExternToolbar {
- margin-left: 36%;
- }
-
-
}
/* Google Nexus 4 */
@@ -433,20 +174,6 @@ footer {
and (orientation: portrait)
and (-webkit-device-pixel-ratio: 2) {
- iframe {
- border: none;
- min-width:5em;
- width: 100%;
- height: 90%;
- }
-
- #FormBox {
- width: 100%;
- }
-
- ul.nav-wizard li {
- padding: 0 2.2em 0 30px;
- }
}
/* Landscape */
@@ -456,24 +183,6 @@ footer {
and (orientation: landscape)
and (-webkit-device-pixel-ratio: 2) {
- iframe {
- border: none;
- min-width:5em;
- width: 100%;
- height: 90%;
- }
-
- #FormBox {
- width: 100%;
- }
-
- ul.nav-wizard li {
- padding: 0 6.2em 0 30px;
- }
-
- #ViewerExternToolbar {
- margin-left: 36%;
- }
}
@@ -486,21 +195,6 @@ footer {
and (device-height: 640px)
and (orientation: portrait) {
- iframe {
- border: none;
- min-width:5em;
- width: 100%;
- height: 50%;
- }
-
- #FormBox {
- width: 100%;
- }
-
- ul.nav-wizard li {
- padding: 0 1.82em 0 30px;
- }
-
}
/* Landscape */
@@ -509,25 +203,6 @@ footer {
and (device-width: 640px)
and (orientation: landscape) {
- iframe {
- border: none;
- min-width:5em;
- width: 100%;
- height: 80%;
- }
-
- #FormBox {
- width: 100%;
- }
-
- ul.nav-wizard li {
- padding: 0 6.2em 0 30px;
- }
-
- #ViewerExternToolbar {
- margin-left: 36%;
- }
-
}
/* Nokia Lumia */
@@ -538,21 +213,6 @@ footer {
and (device-height: 533px)
and (orientation: portrait) {
- iframe {
- border: none;
- min-width:5em;
- width: 100%;
- height: 45%;
- }
-
- #FormBox {
- width: 100%;
- }
-
- ul.nav-wizard li {
- padding: 0 20px 0 30px;
- }
-
}
/* Landscape */
@@ -561,25 +221,6 @@ footer {
and (device-height: 320px)
and (orientation: landscape) {
- iframe {
- border: none;
- min-width:5em;
- width: 100%;
- height: 80%;
- }
-
- #FormBox {
- width: 100%;
- }
-
- ul.nav-wizard li {
- padding: 0 4.5em 0 30px;
- }
-
- #ViewerExternToolbar {
- margin-left: 34%;
- }
-
}
/* LG Optimus L70*/
@@ -591,25 +232,6 @@ footer {
and (orientation: portrait)
and (-webkit-device-pixel-ratio: 1.25) {
- iframe {
- border: none;
- min-width:5em;
- width: 100%;
- height: 45%;
- }
-
- #FormBox {
- width: 100%;
- }
-
- ul.nav-wizard li {
- padding: 0 2.2em 0 30px;
- }
-
- #ViewerExternToolbar {
- margin-left: 27%;
- }
-
}
/* Landscape */
@@ -619,100 +241,14 @@ footer {
and (orientation: landscape)
and (-webkit-device-pixel-ratio: 1.25) {
- iframe {
- border: none;
- min-width:5em;
- width: 100%;
- height: 80%;
- }
-
- #FormBox {
- width: 100%;
- }
-
- ul.nav-wizard li {
- padding: 0 6.2em 0 30px;
- }
-
- #ViewerExternToolbar {
- margin-left: 38%;
- }
}
-
-
-/* ----------- Non-Retina Screens ----------- */
-@media screen
- and (min-width: 961px)
- and (max-width: 1600px)
- and (orientation: landscape) {
-
- iframe {
- border: none;
- min-width:5em;
- width: 100%;
- height: 80%;
- }
-
- #FormBox {
- width: 20em;
- }
-
- ul.nav-wizard li {
- padding: 0 20px 0 30px;
- }
-}
-
-/* ----------- Retina Screens ----------- */
-@media screen
- and (min-width: 961px)
- and (min-resolution: 192dpi)
- and (orientation: landscape)
- and (-webkit-max-device-pixel-ratio: 2) {
-
- iframe {
- border: none;
- min-width:5em;
- width: 100%;
- height: 80%;
- }
-
- #FormBox {
- width: 20em;
- margin-left: 35%;
- }
-
- ul.nav-wizard li {
- padding: 0 20px 0 30px;
- }
-}
-
-/* Big Landscape Monitors */
-
- @media screen
- and (min-width: 1600px) {
-
- iframe {
- border: none;
- min-width:5em;
- width: 100%;
- height: 100%;
- }
-
- #FormBox {
- width: 20em;
- margin-left: 38.5%;
- }
-
- ul.nav-wizard li {
- padding: 0 20px 0 30px;
- }
-
- #navBar {
- margin-left: 37.5%;
-
- }
+iframe {
+ border: none;
+/* min-width:5em; */
+ height: 70%;
+ width:100%
}
body.wait, body.wait *{
@@ -722,6 +258,12 @@ body.wait, body.wait *{
#DropContainer {
+ width: 100%;
+
+}
+
+#ViewContainer {
+ width:100%
}
#SignContainer, #DownloadContainer {
@@ -730,7 +272,7 @@ body.wait, body.wait *{
.methodChooseContainer {
- width: 80px;
+ width: 125px;
height: 130px;
}
@@ -743,6 +285,10 @@ body.wait, body.wait *{
margin-top:1em;
}
+#DownloadResultContainer {
+ margin-top: 10%;
+}
+
.ImageBox {
width: 100px;
height: 125px;
@@ -760,7 +306,8 @@ body.wait, body.wait *{
}
#navBar {
- min-width: 22.94em;
+ /*min-width: 20em; */
+ width:100%
}
#InnerBackBox {
@@ -769,8 +316,7 @@ body.wait, body.wait *{
}
#BackBox {
- margin-left: 1.7em;
- width: 2.4em;
+ height: 46px;
}
#BackBox:hover {
@@ -779,27 +325,18 @@ body.wait, body.wait *{
}
#ViewerExternToolbar {
- margin-bottom: 1em;
- min-width: 25em;
+ margin: 0.5em;
+
}
+/*
#ViewerExternToolbar div {
margin-left:0.5em;
margin-right:0.5em;
text-align:center;
width:5em;
height:5em;
-}
-
-#ViewerExternToolbar div:hover {
- cursor:hand;
- cursor:pointer;
- margin:0.5em;
- margin-top:0em;
- margin-bottom:0em;
-
- border: 0.1em dashed;
-}
+} */
#ViewerExternToolbar img {
width: 3em;
@@ -840,6 +377,10 @@ body.wait, body.wait *{
text-align:center;
}
+#FormBox {
+ width: 20em;
+}
+
#content {
clear: both;
height: 40em;
diff --git a/pdf-as-web/src/main/webapp/index.jsp b/pdf-as-web/src/main/webapp/index.jsp
index 5e8ea875..fe615de9 100644
--- a/pdf-as-web/src/main/webapp/index.jsp
+++ b/pdf-as-web/src/main/webapp/index.jsp
@@ -37,8 +37,8 @@
<div class="container col-lg-8 col-lg-offset-2">
<!-- Header -->
-<div class="row">
- <div class="col-sm-12 col-md-1 col-md-offset-4 col-lg-1 col-lg-offset-4 col-xs-12" id="navBar">
+<div class="row center">
+ <div class="" id="navBar">
<ul class="nav nav-wizard">
<li class="active" id="UploadStepButton"><a href="#"><span class="glyphicon glyphicon-open-file" aria-hidden="true"></span><span id="uploadNavText"> Upload</span></a></li>
<li id="PlaceStepButton" style="pointer-events:none;"><a href="#"><span class="glyphicon glyphicon-move" aria-hidden="true"></span><span id="placeNavText" style="display:none;"> Place&nbsp;&nbsp;</span></a></li>
@@ -46,83 +46,69 @@
<li id="FinishStepButton" style="pointer-events:none;"><a href="#"><span class="glyphicon glyphicon-save-file" aria-hidden="true"></span><span id="downloadNavText" style="display:none;"> Finish&nbsp;</span></a></li>
</ul>
</div>
+ <button id="BackBox" class="btn btn-primary pull-right"><span class="glyphicon glyphicon-triangle-left" aria-hidden="true"></span></button>
</div>
- <div class="row" id="OuterBackBox">
+ <div id="OuterBackBox" style="display:none;">
<div id="InnerBackBox" class="col-sm-1 col-md-1 col-md-offset-4 col-lg-1 col-lg-offset-4">
- <p id="BackBox">Back</p>
+ <p >Back</p>
</div>
</div>
<!-- Main Switch Frame -->
-<div class="row">
-
- <div class="col-md-12">
+<div class="row center">
<div id="DropContainer">
- <h3>Upload your Document</h3>
- <div class="col-sm-12 col-md-12 col-lg-12">
- <div id="borderBox">
- <div class="row mainBox">
- <div id="FormBox" class="col-lg-12 col-lg-offset-4 col-md-12 col-md-offset-4 col-sm-12 col-sm-offset-4 col-xs-12">
- <h5 class="visible-lg-block"> Drop or select your file here</h5>
- <h5 class="hidden-lg">Upload your File</h5>
- <div id="FormDefine" class="form-group has-feedback">
- <div class="input-group">
- <span class="input-group-btn">
- <span class="btn btn-primary btn-file">
- Browse... <input type="file" name="pdf-file" id="pdf-file" accept="application/pdf">
- </span>
- </span>
- <input id= "FileNamePreview" type="text" class="form-control" readonly>
- <span id="BadFeedback" class="glyphicon glyphicon-remove form-control-feedback" style="display: none;" aria-hidden="true"></span>
- <span id="GoodFeedback" class="glyphicon glyphicon-ok form-control-feedback" style="display: none;" aria-hidden="true"></span>
- </div>
- <div id="fileTypeErrorMessage" class="pull-right">
- <p id="noPdfMessage" style="display:none;"><span class="glyphicon glyphicon-alert" aria-hidden="true"></span> The file type must be PDF!</p>
- </div>
-
- </div>
-
- <div id="ContinueButtonBox" class="col-md-12 center">
- <button id="uploadContinue" class="btn btn-primary btn-lg btn-block" disabled="disabled" >Continue</button>
- </div>
- </div>
+ <div id="borderBox">
+ <div class="row mainBox center">
+ <div id="FormBox" class="">
+ <h5 class="visible-lg-block"> Drop or select your file here</h5>
+ <h5 class="hidden-lg">Upload your File</h5>
+ <div id="FormDefine" class="form-group has-feedback">
+ <div class="input-group">
+ <span class="input-group-btn">
+ <span class="btn btn-primary btn-file">
+ Browse... <input type="file" name="pdf-file" id="pdf-file" accept="application/pdf">
+ </span>
+ </span>
+ <input id= "FileNamePreview" type="text" class="form-control" readonly>
+ <span id="BadFeedback" class="glyphicon glyphicon-remove form-control-feedback" style="display: none;" aria-hidden="true"></span>
+ <span id="GoodFeedback" class="glyphicon glyphicon-ok form-control-feedback" style="display: none;" aria-hidden="true"></span>
+ </div>
+ <div id="fileTypeErrorMessage" class="pull-right">
+ <p id="noPdfMessage" style="display:none;"><span class="glyphicon glyphicon-alert" aria-hidden="true"></span> The file type must be PDF!</p>
+ </div>
+
+ </div>
+
+ <div id="ContinueButtonBox" class="col-md-12 center">
+ <button id="uploadContinue" class="btn btn-primary btn-lg btn-block" disabled="disabled" >Continue</button>
+ </div>
</div>
- </div>
- </div>
+ </div>
+ </div>
</div>
<div id="ViewContainer" style="display: none;">
- <h3>Place your Signature</h3>
- <h6 id="noSignatureWarning">If you Quick Sign, the Signature will be appended at the end of the Document</h6>
- <div>
- <div id="ViewerExternToolbar" class="col-lg-6 col-lg-offset-5 col-md-6 col-md-offset-5 col-sm-6 col-sm-offset-5 col-xs-6 col-xs-offset-3">
- <div id="QuickSign" class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
- <img src="assets/img/federohne.svg" title="Place the Signature on a new Page"><br>Quick Sign
- </div>
- <div id="placeContinue" class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
- <img src="assets/img/federohne.svg" title="Continue"><br>Continue
- </div>
+ <div> <!-- class="center" -->
+ <div id="ViewerExternToolbar" class="center pull-right">
+ <button id="QuickSign" class="btn btn-primary">Quick Sign</button>
+ <button id="placeContinue" class="btn btn-success">Continue</button>
</div>
</div>
- <div id="outerCenter">
<div id="content" class="">
Loading your PDF, please wait...
</div>
- </div>
</div>
<div id="SignContainer" style="display: none;">
- <h3>Choose your Sign Method</h3>
- <fieldset>
- <div class="row mainBox">
- <div id="methodContainer" class="row">
+ <div class="row mainBox center">
+ <div id="methodContainer" class="row center">
<%
if (WebConfiguration.getHandyBKUURL() != null) {
%>
- <div class="methodChooseContainer col-xs-3 col-sm-3 col-md-3 col-lg-3 col-xs-offset-3 col-md-offset-4">
+ <div class="methodChooseContainer">
<div class="ImageBox" id="MobilePhoneSubmit"><img src="assets/img/mobileBKU.png" alt="Sign via mobile BKU"/>Mobile</div>
<div style="display:none;"><input type="radio" id="mobileBKU" name="connector" value="mobilebku" checked></div>
</div>
@@ -132,7 +118,7 @@
<%
if (WebConfiguration.getLocalBKUURL() != null) {
%>
- <div class="methodChooseContainer col-xs-3 col-sm-3 col-md-3 col-lg-3">
+ <div class="methodChooseContainer">
<div class="ImageBox" id="LocalBKUSubmit"><img src="assets/img/onlineBKU.png" alt="Sign via local BKU" />Card</div>
<div style="display:none;"><input type="radio" id="localBKU" name="connector" value="bku"></div>
</div>
@@ -153,7 +139,7 @@
<%
if(WebConfiguration.getKeystoreDefaultEnabled()) {
%>
- <div class="methodChooseContainer col-xs-3 col-sm-3 col-md-3 col-lg-3">
+ <div class="methodChooseContainer">
<div class="ImageBox" id="KeystoreSubmit"><img class="BKUImage" src="assets/img/onlineBKU.png" alt="Sign via Server Keystore"/></div>
<div style="display:none;"><input type="radio" id="jks" name="connector" value="jks"></div>
</div>
@@ -163,24 +149,18 @@
</div>
<iframe id='mobileSignOnFrame' style="display:none;"></iframe>
</div>
- </fieldset>
</div>
<div id="DownloadContainer" style="display: none;">
- <h3 class="center">Download your Document</h3>
-
<div id="btnSign" style="display:none">
<h3 class="center">Sign Document</h3>
</div>
- <div class="center">
+ <div class="center" id="DownloadResultContainer">
<input id="DownloadResultButton" value="Download your PDF" class="btn btn-success btn-lg">
</div>
- </div>
-
+ </div>
</div>
</div>
-
-</div>