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 id="firstWrapper">
<div class="param"> <div class="param" id="txtParam">
<label for="txt"> <label for="txt">
<details> <details>
<summary><?= $loc['label_content'] ?></summary> <summary><?= $loc['label_content'] ?></summary>
@ -202,33 +202,36 @@ if (
</form> </form>
<?php <section id="output">
if (!empty($params['txt'])) { <?php
require "phpqrcode.php";
$imagePath = "temp/" . generateRandomString($fileNameLenght) . ".png"; if (!empty($params['txt'])) {
QRcode::png( require "phpqrcode.php";
$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>
<div class="centered" id="showOnlyQR"> $imagePath = "temp/" . generateRandomString($fileNameLenght) . ".png";
<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> QRcode::png(
</div> $params['txt'],
<?php $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> <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 { a {
text-decoration: underline; text-decoration: underline;
@ -43,8 +64,8 @@ a {
} }
} }
p { p.helpText {
margin: 10px; margin: 5px 0px 0px 0px;
} }
details .helpText { details .helpText {
@ -61,6 +82,11 @@ details .helpText {
} }
} }
#sideParams {
text-align: center;
margin-left: 12px;
}
#sideParams summary { #sideParams summary {
text-align: center; text-align: center;
margin-left: 20px; margin-left: 20px;
@ -84,44 +110,18 @@ details .helpText {
text-decoration: none; text-decoration: none;
} }
form {
flex-grow: 1;
margin-bottom: 30px;
}
main { main {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
width: 814px; width: 814px;
height: 99%; height: 100%;
}
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%;
} }
header { header {
text-align: center; text-align: center;
padding: 0px; padding-top: 12px;
margin: 0px; margin: 0px;
height: 64px; height: 64px;
} }
@ -156,7 +156,11 @@ h2 {
flex-direction: row; flex-direction: row;
} }
#showOnlyQR { section#output {
flex-grow: 1;
}
#showOnlyQR, #downloadQR {
margin-top: 30px; margin-top: 30px;
} }
@ -187,8 +191,8 @@ h2 {
} }
} }
label[for=txt] { label[for=txt] summary {
padding-left: 22px; margin-left: 22px;
} }
#colors { #colors {
@ -231,7 +235,7 @@ label[for=txt] {
footer { footer {
font-size: 14px; font-size: 14px;
padding-top: 20px; margin-top: 10px;
text-align: left; text-align: left;
} }
@ -252,6 +256,10 @@ header, footer {
} }
} }
p.helpText {
width: 534px;
}
/* Inputs */ /* Inputs */
#redondancy, #margin, #txt, #size, input[type=color], input[type=submit], .button { #redondancy, #margin, #txt, #size, input[type=color], input[type=submit], .button {
@ -304,8 +312,15 @@ header, footer {
} }
} }
#redondancy, #size, #margin { #redondancy {
width: 250px; width: 250px;
}
#size, #margin {
width: 234px;
}
#redondancy, #size, #margin {
height: 40px; height: 40px;
@media @light { @media @light {
background-color: @bgField-light; background-color: @bgField-light;
@ -384,10 +399,6 @@ input[type=color] {
flex-direction: column; flex-direction: column;
} }
body {
margin: 10px;
}
#txt { #txt {
width: 92%; width: 92%;
} }