diff options
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 </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 </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> |