miraty
/
libreqr
1
1
Fork 2
Code Issues 1 Pull Requests Releases 5 Activity
Browse Source

New CSS layout

main
Miraty 2 months ago
parent
b9af8aced5
commit
6832804dc0
5 changed files with 86 additions and 125 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      README.md
  2. 2
      README_fr.md
  3. 116
      index.php
  4. 2
      locales/template.php
  5. 89
      style.less

2
README.md
View File

@ -1,4 +1,4 @@
# ![](themes/dark/icons/32.png) LibreQR
# ![](themes/libreqr/icons/32.png) LibreQR
[Lire ceci en français](README_fr.md)

2
README_fr.md
View File

@ -1,4 +1,4 @@
# ![](themes/dark/icons/32.png) LibreQR
# ![](themes/libreqr/icons/32.png) LibreQR
[Read this in english](README.md)

116
index.php
View File

@ -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 id="sideParams">
<div class="param" id="txtParam">
<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>

2
locales/template.php
View File

@ -29,6 +29,4 @@ $loc = array(
'metaText_qr' => "metaText_qr",
'metaText_legal' => "metaText_legal",
'opensearch_description' => "opensearch_description",
);

89
style.less
View File

@ -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: "💾 ";

Write Preview
Loading…
Cancel
Save