24eme/signaturepdf
24eme/signaturepdf
1
0
Fork 0
mirror of https://github.com/24eme/signaturepdf.git synced 2023-08-25 09:33:08 +02:00
Code Issues Releases Wiki Activity

Externalisation du css

Browse Source
This commit is contained in:
Vincent LAURENT 2022-01-05 01:23:37 +01:00
parent f65f77b4aa
commit c20b244dba
3 changed files with 45 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
public/css/app.css Normal file
View File

@ -0,0 +1,35 @@
@font-face {
font-family: 'Caveat';
font-style: normal;
font-weight: 400;
src: url(/vendor/fonts/Caveat-Regular.ttf) format('truetype');
}
#container-pages {
overflow: auto;
}
#sidebarTools {
width: 350px;
}
#sidebarTools .list-item-add label:hover {
background: #e8ebed;
border: 1px solid #505050;
}
#sidebarTools .list-item-add label:active, #sidebarTools .list-item-add label.active, #sidebarTools .list-item-add .btn-check:active + .btn-outline-secondary, #sidebarTools .list-item-add .btn-check:checked + .btn-outline-secondary {
background: #c9d1d8;
border: 1px solid #000;
box-shadow: 0 .25rem .5rem rgba(0,0,0,.075) !important;
}
#input-text-signature {
font-family: Caveat;
font-size: 48px;
}
#img-upload {
max-width: 460px;
max-height: 200px;
}

4
public/js/app.js
View File

@ -46,7 +46,7 @@ loadingTask.promise.then(function(pdf) {
var pdfHistory = {}; var pdfHistory = {};
var currentScale = 1.5; var currentScale = 1.5;
var windowWidth = window.innerWidth; var windowWidth = window.innerWidth;
var menu = document.getElementById('offcanvasTop') var menu = document.getElementById('sidebarTools');
var menuOffcanvas = new bootstrap.Offcanvas(menu) var menuOffcanvas = new bootstrap.Offcanvas(menu)
var currentCursor = null; var currentCursor = null;
@ -56,7 +56,7 @@ loadingTask.promise.then(function(pdf) {
var responsiveDisplay = function() { var responsiveDisplay = function() {
if(is_mobile()) { if(is_mobile()) {
document.body.style.paddingRight = ""; document.body.style.paddingRight = "inherit";
menu.classList.remove('show'); menu.classList.remove('show');
menuOffcanvas.hide(); menuOffcanvas.hide();
document.getElementById('container-pages').classList.remove('vh-100'); document.getElementById('container-pages').classList.remove('vh-100');

34
templates/pdf.html.php
View File

@ -7,35 +7,17 @@
<link href="/vendor/bootstrap.min.css?5.1.1" rel="stylesheet"> <link href="/vendor/bootstrap.min.css?5.1.1" rel="stylesheet">
<link href="/vendor/bootstrap-icons.css?1.5.0" rel="stylesheet"> <link href="/vendor/bootstrap-icons.css?1.5.0" rel="stylesheet">
<style> <link href="/css/app.css" rel="stylesheet">
@font-face {
font-family: 'Caveat';
font-style: normal;
font-weight: 400;
src: url(/vendor/fonts/Caveat-Regular.ttf) format('truetype');
}
.offcanvas .list-item-add label:hover {
background: #e8ebed;
border: 1px solid #505050;
}
.offcanvas .list-item-add label:active, .offcanvas .list-item-add label.active, .offcanvas .list-item-add .btn-check:active + .btn-outline-secondary, .offcanvas .list-item-add .btn-check:checked + .btn-outline-secondary {
background: #c9d1d8;
border: 1px solid #000;
box-shadow: 0 .25rem .5rem rgba(0,0,0,.075) !important;
}
</style>
<title>Signature PDF</title> <title>Signature PDF</title>
</head> </head>
<body class="bg-light" style="padding-right: 350px;"> <body class="bg-light" style="padding-right: 350px;">
<div style="height: 65px;" class="d-md-none"></div> <div style="height: 65px;" class="d-md-none"></div>
<div id="container-pages" style="overflow: auto" class="col-12 pt-1 pb-1 text-center vh-100"> <div id="container-pages" class="col-12 pt-1 pb-1 text-center vh-100">
</div> </div>
<div style="height: 55px;" class="d-md-none"></div> <div style="height: 55px;" class="d-md-none"></div>
<div class="offcanvas offcanvas-end show d-none d-md-block shadow-sm" data-bs-backdrop="false" data-bs-scroll="true" data-bs-keyboard="false" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel" style="width: 350px;"> <div class="offcanvas offcanvas-end show d-none d-md-block shadow-sm" data-bs-backdrop="false" data-bs-scroll="true" data-bs-keyboard="false" tabindex="-1" id="sidebarTools" aria-labelledby="sidebarToolsLabel">
<div class="offcanvas-header mb-0 pb-0"> <div class="offcanvas-header mb-0 pb-0">
<h5 id="offcanvasTopLabel">Signature du PDF</h5> <h5 id="sidebarToolsLabel">Signature du PDF</h5>
<button type="button" class="btn-close text-reset d-md-none" data-bs-dismiss="offcanvas" aria-label="Close"></button> <button type="button" class="btn-close text-reset d-md-none" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div> </div>
<div class="offcanvas-body"> <div class="offcanvas-body">
@ -76,14 +58,14 @@
<input id="input_pdf" name="pdf" type="file" class="d-none" /> <input id="input_pdf" name="pdf" type="file" class="d-none" />
<input id="input_svg" name="svg[]" type="file" class="d-none" /> <input id="input_svg" name="svg[]" type="file" class="d-none" />
<div class="d-grid gap-2 mt-2"> <div class="d-grid gap-2 mt-2">
<button class="btn btn-primary" disabled="disabled" type="submit" id="save"><i class="bi bi-download"></i> Télécharger le PDF Signé</button> <button class="btn btn-primary" disabled="disabled" type="submit" id="save"><i class="bi bi-download"></i> Télécharger le PDF Signé</button>
</div> </div>
</form> </form>
</div> </div>
</div> </div>
<div class="position-fixed top-0 start-0 bg-white w-100 p-2 shadow-sm d-md-none"> <div class="position-fixed top-0 start-0 bg-white w-100 p-2 shadow-sm d-md-none">
<div class="d-grid gap-2"> <div class="d-grid gap-2">
<button id="btn_svn_select" class="btn btn-light btn-lg" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop"><i class="bi bi-hand-index"></i> Séléctionner une signature</button> <button id="btn_svn_select" class="btn btn-light btn-lg" data-bs-toggle="offcanvas" data-bs-target="#sidebarTools" aria-controls="sidebarTools"><i class="bi bi-hand-index"></i> Séléctionner une signature</button>
</div> </div>
<div id="svg_selected_container" class="text-center d-none position-relative"> <div id="svg_selected_container" class="text-center d-none position-relative">
<img id="svg_selected" src="" style="height: 48px;" class="img-fluid"/> <img id="svg_selected" src="" style="height: 48px;" class="img-fluid"/>
@ -120,11 +102,11 @@
<canvas id="signature-pad" class="border bg-light" width="462" height="200"></canvas> <canvas id="signature-pad" class="border bg-light" width="462" height="200"></canvas>
</div> </div>
<div class="tab-pane fade" id="nav-type" role="tabpanel" aria-labelledby="nav-type-tab"> <div class="tab-pane fade" id="nav-type" role="tabpanel" aria-labelledby="nav-type-tab">
<input id="input-text-signature" type="text" class="form-control form-control-lg" placeholder="Ma signature" style="font-family: Caveat; font-size: 48px;" /> <input id="input-text-signature" type="text" class="form-control form-control-lg" placeholder="Ma signature" />
</div> </div>
<div class="tab-pane fade" id="nav-import" role="tabpanel" aria-labelledby="nav-import-tab"> <div class="tab-pane fade" id="nav-import" role="tabpanel" aria-labelledby="nav-import-tab">
<div class="text-center"> <div class="text-center">
<img id="img-upload" class="d-none" style="max-width: 460px; max-height: 200px;" src="" /> <img id="img-upload" class="d-none" src="" />
</div> </div>
<form id="form-image-upload" action="/image2svg" method="POST" enctype="multipart/form-data"> <form id="form-image-upload" action="/image2svg" method="POST" enctype="multipart/form-data">
<input id="input-image-upload" class="form-control" name="image" type="file"> <input id="input-image-upload" class="form-control" name="image" type="file">