New CSS layout
This commit is contained in:
Miraty
parent
b9af8aced5
commit
6832804dc0
@ -1,4 +1,4 @@
|
||||
#  LibreQR
|
||||
#  LibreQR
|
||||
|
||||
[Lire ceci en français](README_fr.md)
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
#  LibreQR
|
||||
#  LibreQR
|
||||
|
||||
[Read this in english](README.md)
|
||||
|
||||
|
||||
116
index.php
116
index.php
@ -135,67 +135,63 @@ if (
|
||||
|
||||
<form method="post" action="./#output">
|
||||
|
||||
<div id="firstWrapper">
|
||||
<div class="param" id="txtParam">
|
||||
<details>
|
||||
<summary><label for="txt"><?= $loc['label_content'] ?></label></summary>
|
||||
<div class="helpText">
|
||||
<?= $loc['help_content'] ?>
|
||||
</div>
|
||||
</details>
|
||||
<textarea rows="3" required="" id="txt" placeholder="<?= $loc['placeholder'] ?>" name="txt"><?= htmlspecialchars($params['txt']) ?></textarea>
|
||||
</div>
|
||||
|
||||
<div class="param" id="txtParam">
|
||||
<div id="sideParams">
|
||||
|
||||
<div class="param">
|
||||
<details>
|
||||
<summary><label for="txt"><?= $loc['label_content'] ?></label></summary>
|
||||
<div class="helpText">
|
||||
<?= $loc['help_content'] ?>
|
||||
</div>
|
||||
<summary><label for="redundancy"><?= $loc['label_redundancy'] ?></label></summary>
|
||||
<p class="helpText">
|
||||
<?= $loc['help_redundancy'] ?>
|
||||
</p>
|
||||
</details>
|
||||
<textarea rows="8" required="" id="txt" placeholder="<?= $loc['placeholder'] ?>" name="txt"><?= htmlspecialchars($params['txt']) ?></textarea>
|
||||
<select id="redundancy" name="redundancy">
|
||||
<option <?php if ($params['redundancy'] === "low") echo 'selected="" '; ?>value="low">L - 7%</option>
|
||||
<option <?php if ($params['redundancy'] === "medium") echo 'selected="" '; ?>value="medium">M - 15%</option>
|
||||
<option <?php if ($params['redundancy'] === "quartile") echo 'selected="" '; ?>value="quartile">Q - 25%</option>
|
||||
<option <?php if ($params['redundancy'] === "high") echo 'selected="" '; ?>value="high">H - 30%</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div id="sideParams">
|
||||
|
||||
<div class="param">
|
||||
<details>
|
||||
<summary><label for="redundancy"><?= $loc['label_redundancy'] ?></label></summary>
|
||||
<p class="helpText">
|
||||
<?= $loc['help_redundancy'] ?>
|
||||
</p>
|
||||
</details>
|
||||
<select id="redundancy" name="redundancy">
|
||||
<option <?php if ($params['redundancy'] === "low") echo 'selected="" '; ?>value="low">L - 7%</option>
|
||||
<option <?php if ($params['redundancy'] === "medium") echo 'selected="" '; ?>value="medium">M - 15%</option>
|
||||
<option <?php if ($params['redundancy'] === "quartile") echo 'selected="" '; ?>value="quartile">Q - 25%</option>
|
||||
<option <?php if ($params['redundancy'] === "high") echo 'selected="" '; ?>value="high">H - 30%</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="param">
|
||||
<details>
|
||||
<summary><label for="margin"><?= $loc['label_margin'] ?></label></summary>
|
||||
<p class="helpText">
|
||||
<?= $loc['help_margin'] ?>
|
||||
</p>
|
||||
</details>
|
||||
<input type="number" list="margins" id="margin" placeholder="<?= $loc['placeholder_pixels'] ?>" name="margin" min="0" max="1024" value="<?= htmlspecialchars($params['margin']) ?>">
|
||||
<datalist id="margins">
|
||||
<option value="16">
|
||||
<option value="32">
|
||||
<option value="64">
|
||||
<option value="128">
|
||||
</datalist>
|
||||
</div>
|
||||
|
||||
<div class="param">
|
||||
<details>
|
||||
<summary><label for="size"><?= $loc['label_size'] ?></label></summary>
|
||||
<p class="helpText">
|
||||
<?= $loc['help_size'] ?>
|
||||
</p>
|
||||
</details>
|
||||
<input type="number" list="sizes" id="size" placeholder="<?= $loc['placeholder_pixels'] ?>" name="size" min="1" max="4096" value="<?= htmlspecialchars($params['size']) ?>">
|
||||
<datalist id="sizes">
|
||||
<option value="128">
|
||||
<option value="256">
|
||||
<option value="512">
|
||||
<option value="1024">
|
||||
</datalist>
|
||||
</div>
|
||||
<div class="param">
|
||||
<details>
|
||||
<summary><label for="margin"><?= $loc['label_margin'] ?></label></summary>
|
||||
<p class="helpText">
|
||||
<?= $loc['help_margin'] ?>
|
||||
</p>
|
||||
</details>
|
||||
<input type="number" list="margins" id="margin" placeholder="<?= $loc['placeholder_pixels'] ?>" name="margin" min="0" max="1024" value="<?= htmlspecialchars($params['margin']) ?>">
|
||||
<datalist id="margins">
|
||||
<option value="16">
|
||||
<option value="32">
|
||||
<option value="64">
|
||||
<option value="128">
|
||||
</datalist>
|
||||
</div>
|
||||
|
||||
<div class="param">
|
||||
<details>
|
||||
<summary><label for="size"><?= $loc['label_size'] ?></label></summary>
|
||||
<p class="helpText">
|
||||
<?= $loc['help_size'] ?>
|
||||
</p>
|
||||
</details>
|
||||
<input type="number" list="sizes" id="size" placeholder="<?= $loc['placeholder_pixels'] ?>" name="size" min="1" max="4096" value="<?= htmlspecialchars($params['size']) ?>">
|
||||
<datalist id="sizes">
|
||||
<option value="128">
|
||||
<option value="256">
|
||||
<option value="512">
|
||||
<option value="1024">
|
||||
</datalist>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -204,16 +200,12 @@ if (
|
||||
|
||||
<div class="param">
|
||||
<label for="bgColor"><?= $loc['label_bgColor'] ?></label>
|
||||
<div class="inputColorContainer">
|
||||
<input type="color" name="bgColor" id="bgColor" value="#<?= htmlspecialchars($params['bgColor']) ?>">
|
||||
</div>
|
||||
<input type="color" name="bgColor" id="bgColor" value="#<?= htmlspecialchars($params['bgColor']) ?>">
|
||||
</div>
|
||||
|
||||
<div class="param">
|
||||
<label for="mainColor"><?= $loc['label_mainColor'] ?></label>
|
||||
<div class="inputColorContainer">
|
||||
<input type="color" name="mainColor" id="mainColor" value="#<?= htmlspecialchars($params['mainColor']) ?>">
|
||||
</div>
|
||||
<input type="color" name="mainColor" id="mainColor" value="#<?= htmlspecialchars($params['mainColor']) ?>">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -290,7 +282,7 @@ if (
|
||||
<?php } ?>
|
||||
|
||||
<section class="metaText">
|
||||
<?= $loc['metaText_legal'] ?>
|
||||
<small><?= $loc['metaText_legal'] ?></small>
|
||||
</section>
|
||||
|
||||
</footer>
|
||||
|
||||
@ -29,6 +29,4 @@ $loc = array(
|
||||
|
||||
'metaText_qr' => "metaText_qr",
|
||||
'metaText_legal' => "metaText_legal",
|
||||
|
||||
'opensearch_description' => "opensearch_description",
|
||||
);
|
||||
|
||||
89
style.less
89
style.less
@ -35,7 +35,7 @@ body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
width: 814px;
|
||||
max-width: 812px;
|
||||
height: 100%;
|
||||
|
||||
margin: 0px;
|
||||
@ -103,28 +103,22 @@ code {
|
||||
}
|
||||
}
|
||||
|
||||
#txtParam {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#sideParams {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-left: 12px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
& .param {
|
||||
max-width: 270px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
summary {
|
||||
margin-left: 20px;
|
||||
cursor: help;
|
||||
|
||||
#sideParams & {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
#firstWrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#qrCode {
|
||||
@ -200,7 +194,7 @@ header {
|
||||
}
|
||||
|
||||
#titles {
|
||||
margin-left: 20px;
|
||||
margin-left: 2%;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
@ -224,7 +218,11 @@ h2 {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#showOnlyQR, #downloadQR {
|
||||
#downloadQR {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
#showOnlyQR {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
@ -234,12 +232,6 @@ h2 {
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.inputColorContainer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
::selection {
|
||||
|
||||
@media @light {
|
||||
@ -260,7 +252,8 @@ label[for=txt] summary {
|
||||
#colors {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
text-align: center;
|
||||
|
||||
& .param {
|
||||
@ -268,7 +261,7 @@ label[for=txt] summary {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
@ -296,15 +289,18 @@ label[for=txt] summary {
|
||||
}
|
||||
|
||||
footer {
|
||||
font-size: 14px;
|
||||
font-size: 16px;
|
||||
margin-top: auto;
|
||||
padding-top: 10px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#info {
|
||||
font-size: 16px;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
margin: 0px;
|
||||
|
||||
& h3 {
|
||||
@ -411,9 +407,14 @@ input[type=color] {
|
||||
}
|
||||
}
|
||||
|
||||
#txtParam {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#txt {
|
||||
padding: 10px;
|
||||
width: 500px;
|
||||
width: auto;
|
||||
scrollbar-width: auto;
|
||||
|
||||
@media @light {
|
||||
@ -451,36 +452,6 @@ input[type=submit] {
|
||||
}
|
||||
}
|
||||
|
||||
/* Media queries */
|
||||
|
||||
@media (max-width: 850px) {
|
||||
|
||||
body {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#firstWrapper {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#txt {
|
||||
width: 92%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 500px) { // Mobile version
|
||||
|
||||
#colors {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#txt {
|
||||
width: 85%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
a[download]::before {
|
||||
content: "💾 ";
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user