libre-service.eu/qrcode.libre-service.eu-libreqr
libre-service.eu/qrcode.libre-service.eu-libreqr
1
0
Fork 0
Code Issues Pull requests Projects Releases Activity

Fix CSS layout

Browse source
This commit is contained in:
Miraty 2021-07-11 21:48:56 +02:00
parent b4ae9acb4f
commit bd443a1060
2 changed files with 78 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
index.php
View file

@ -120,7 +120,7 @@ if (
<div id="firstWrapper">
<div class="param">
<div class="param" id="txtParam">
<label for="txt">
<details>
<summary><?= $loc['label_content'] ?></summary>
@ -202,33 +202,36 @@ if (
</form>
<?php
<section id="output">
if (!empty($params['txt'])) {
require "phpqrcode.php";
<?php
$imagePath = "temp/" . generateRandomString($fileNameLenght) . ".png";
QRcode::png(
$params['txt'],
$imagePath,
$params['redondancy'],
$params['size'],
$params['margin'],
false,
hexdec(substr($params['bgColor'], -6)),
hexdec(substr($params['mainColor'], -6))
);
?>
<div class="centered">
<a href="<?php echo $imagePath; ?>" class="button" download="<?= htmlspecialchars($params['txt']); ?>.png"><?= $loc['button_download'] ?></a>
</div>
if (!empty($params['txt'])) {
require "phpqrcode.php";
<div class="centered" id="showOnlyQR">
<a title="<?= $loc['title_showOnlyQR'] ?>" href="<?= $imagePath; ?>"><img alt='<?= $loc['alt_QR_before'] ?><?= htmlspecialchars($params['txt']); ?><?= $loc['alt_QR_after'] ?>' id="qrCode" src="<?= $imagePath; ?>"/></a>
</div>
<?php
}
?>
$imagePath = "temp/" . generateRandomString($fileNameLenght) . ".png";
QRcode::png(
$params['txt'],
$imagePath,
$params['redondancy'],
$params['size'],
$params['margin'],
false,
hexdec(substr($params['bgColor'], -6)),
hexdec(substr($params['mainColor'], -6))
);
?>
<div class="centered" id="downloadQR">
<a href="<?php echo $imagePath; ?>" class="button" download="<?= htmlspecialchars($params['txt']); ?>.png"><?= $loc['button_download'] ?></a>
</div>
<div class="centered" id="showOnlyQR">
<a title="<?= $loc['title_showOnlyQR'] ?>" href="<?= $imagePath; ?>"><img alt='<?= $loc['alt_QR_before'] ?><?= htmlspecialchars($params['txt']); ?><?= $loc['alt_QR_after'] ?>' id="qrCode" src="<?= $imagePath; ?>"/></a>
</div>
<?php } ?>
</section>
<footer>

89
style.less
View file

@ -27,6 +27,27 @@ You should have received a copy of the GNU Affero General Public License along w
}
}
html {
height: 100%;
}
body {
margin: 0px;
font-weight: normal;
font-size: 20px;
height: 100%;
@media @light {
color: @text-light;
background-color: @bg-light;
}
@media @dark {
color: @text-dark;
background-color: @bg-dark;
}
}
a {
text-decoration: underline;
@ -43,8 +64,8 @@ a {
}
}
p {
margin: 10px;
p.helpText {
margin: 5px 0px 0px 0px;
}
details .helpText {
@ -61,6 +82,11 @@ details .helpText {
}
}
#sideParams {
text-align: center;
margin-left: 12px;
}
#sideParams summary {
text-align: center;
margin-left: 20px;
@ -84,44 +110,18 @@ details .helpText {
text-decoration: none;
}
form {
flex-grow: 1;
margin-bottom: 30px;
}
main {
display: flex;
flex-direction: column;
margin-left: auto;
margin-right: auto;
width: 814px;
height: 99%;
}
body {
margin: 18px;
font-weight: normal;
font-size: 20px;
height: 99%;
@media @light {
color: @text-light;
background-color: @bg-light;
}
@media @dark {
color: @text-dark;
background-color: @bg-dark;
}
}
html {
height: 97%;
height: 100%;
}
header {
text-align: center;
padding: 0px;
padding-top: 12px;
margin: 0px;
height: 64px;
}
@ -156,7 +156,11 @@ h2 {
flex-direction: row;
}
#showOnlyQR {
section#output {
flex-grow: 1;
}
#showOnlyQR, #downloadQR {
margin-top: 30px;
}
@ -187,8 +191,8 @@ h2 {
}
}
label[for=txt] {
padding-left: 22px;
label[for=txt] summary {
margin-left: 22px;
}
#colors {
@ -231,7 +235,7 @@ label[for=txt] {
footer {
font-size: 14px;
padding-top: 20px;
margin-top: 10px;
text-align: left;
}
@ -252,6 +256,10 @@ header, footer {
}
}
p.helpText {
width: 534px;
}
/* Inputs */
#redondancy, #margin, #txt, #size, input[type=color], input[type=submit], .button {
@ -304,8 +312,15 @@ header, footer {
}
}
#redondancy, #size, #margin {
#redondancy {
width: 250px;
}
#size, #margin {
width: 234px;
}
#redondancy, #size, #margin {
height: 40px;
@media @light {
background-color: @bgField-light;
@ -384,10 +399,6 @@ input[type=color] {
flex-direction: column;
}
body {
margin: 10px;
}
#txt {
width: 92%;
}