Algov/qrcode.chapril.org
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Use HTML summary/details to display help text

Browse Source
This commit is contained in:
Miraty 2021-03-07 19:06:32 +01:00
parent 6ced4390e7
commit 9944bfbb82
6 changed files with 46 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
index.php
View File

@ -135,14 +135,14 @@ if (badQuery()) {
<div id="firstWrapper"> <div id="firstWrapper">
<div class="param"> <div class="param">
<label for="txt"><?= $loc['label_content'] ?></label> <label for="txt">
<span class="helpContainer"> <details>
<span class="helpButton" tabindex="0"><img class="helpImg" src="help.svg.php?clr=<?= urlencode($variablesTheme["text"]) ?>" alt="<?= $loc['alt_help'] ?>"></span> <summary><?= $loc['label_content'] ?></summary>
<span class="helpContent"> <p class="helpText">
<?= $loc['help_content'] ?> <?= $loc['help_content'] ?>
</span> </p>
</span> </details>
<br> </label>
<textarea rows="8" required="" id="txt" placeholder="<?= $loc['placeholder'] ?>" name="txt"><?php <textarea rows="8" required="" id="txt" placeholder="<?= $loc['placeholder'] ?>" name="txt"><?php
if (isset($_GET['txt'])) { if (isset($_GET['txt'])) {
@ -155,12 +155,14 @@ if (badQuery()) {
<div id="menusDeroulants"> <div id="menusDeroulants">
<div class="param"> <div class="param">
<label for="redondancy"><?= $loc['label_redondancy'] ?></label> <label for="redondancy">
<span class="helpContainer"> <details>
<span class="helpButton" tabindex="0"><img class="helpImg" src="help.svg.php?clr=<?= urlencode($variablesTheme["text"]) ?>" alt="<?= $loc['alt_help'] ?>"></span> <summary><?= $loc['label_redondancy'] ?></summary>
<span class="helpContent"><?= $loc['help_redondancy'] ?></span> <p class="helpText">
</span> <?= $loc['help_redondancy'] ?>
<br> </p>
</details>
</label>
<select id="redondancy" name="redondancy"> <select id="redondancy" name="redondancy">
<option <?php if (isset($_GET['redondancy']) AND ($_GET['redondancy'] == "L")) {echo 'selected="" ';} ?>value="L">L - 7%</option> <option <?php if (isset($_GET['redondancy']) AND ($_GET['redondancy'] == "L")) {echo 'selected="" ';} ?>value="L">L - 7%</option>
<option <?php if (isset($_GET['redondancy']) AND ($_GET['redondancy'] == "M")) {echo 'selected="" ';} ?>value="M">M - 15%</option> <option <?php if (isset($_GET['redondancy']) AND ($_GET['redondancy'] == "M")) {echo 'selected="" ';} ?>value="M">M - 15%</option>
@ -170,12 +172,14 @@ if (badQuery()) {
</div> </div>
<div class="param"> <div class="param">
<label for="margin"><?= $loc['label_margin'] ?></label> <label for="margin">
<span class="helpContainer"> <details>
<span class="helpButton" tabindex="0"><img class="helpImg" src="help.svg.php?clr=<?= urlencode($variablesTheme["text"]) ?>" alt="<?= $loc['alt_help'] ?>"></span> <summary><?= $loc['label_margin'] ?></summary>
<span class="helpContent"><?= $loc['help_margin'] ?></span> <p class="helpText">
</span> <?= $loc['help_margin'] ?>
<br> </p>
</details>
</label>
<select id="margin" name="margin"> <select id="margin" name="margin">
<option <?php if (isset($_GET['margin']) AND ($_GET['margin'] == "0")) {echo 'selected="" ';} ?>value="0">0</option> <option <?php if (isset($_GET['margin']) AND ($_GET['margin'] == "0")) {echo 'selected="" ';} ?>value="0">0</option>
<option <?php if (isset($_GET['margin']) AND ($_GET['margin'] == "1")) {echo 'selected="" ';} ?>value="1">1</option> <option <?php if (isset($_GET['margin']) AND ($_GET['margin'] == "1")) {echo 'selected="" ';} ?>value="1">1</option>
@ -189,12 +193,14 @@ if (badQuery()) {
</div> </div>
<div class="param"> <div class="param">
<label for="size"><?= $loc['label_size'] ?></label> <label for="size">
<span class="helpContainer"> <details>
<span class="helpButton" tabindex="0"><img class="helpImg" src="help.svg.php?clr=<?= urlencode($variablesTheme["text"]) ?>" alt="<?= $loc['alt_help'] ?>"></span> <summary><?= $loc['label_size'] ?></summary>
<span class="helpContent"><?= $loc['help_size'] ?></span> <p class="helpText">
</span> <?= $loc['help_size'] ?>
<br> </p>
</details>
</label>
<select id="size" name="size"> <select id="size" name="size">
<option <?php if (isset($_GET['size']) AND ($_GET['size'] == 1)) {echo 'selected="" ';} ?>value="1">1</option> <option <?php if (isset($_GET['size']) AND ($_GET['size'] == 1)) {echo 'selected="" ';} ?>value="1">1</option>
<option <?php if (isset($_GET['size']) AND ($_GET['size'] == 2)) {echo 'selected="" ';} ?>value="2">2</option> <option <?php if (isset($_GET['size']) AND ($_GET['size'] == 2)) {echo 'selected="" ';} ?>value="2">2</option>

1
locales/en.php
View File

@ -35,7 +35,6 @@ $loc = array(
'title_showOnlyQR' => "Show this QR code only", 'title_showOnlyQR' => "Show this QR code only",
'alt_help' => "Help",
'alt_QR_before' => 'QR code meaning "', 'alt_QR_before' => 'QR code meaning "',
'alt_QR_after' => '"', 'alt_QR_after' => '"',

1
locales/fr.php
View File

@ -35,7 +35,6 @@ $loc = array(
'title_showOnlyQR' => "Afficher uniquement ce code QR", 'title_showOnlyQR' => "Afficher uniquement ce code QR",
'alt_help' => "Aide",
'alt_QR_before' => "Code QR signifiant « ", 'alt_QR_before' => "Code QR signifiant « ",
'alt_QR_after' => " »", 'alt_QR_after' => " »",

1
locales/oc.php
View File

@ -35,7 +35,6 @@ $loc = array(
'title_showOnlyQR' => "Mostrar sonque aqueste còdi QR", 'title_showOnlyQR' => "Mostrar sonque aqueste còdi QR",
'alt_help' => "Ajuda",
'alt_QR_before' => 'Significacion de còdi QR"', 'alt_QR_before' => 'Significacion de còdi QR"',
'alt_QR_after' => '"', 'alt_QR_after' => '"',

1
locales/template.php
View File

@ -24,7 +24,6 @@ $loc = array(
'title_showOnlyQR' => "title_showOnlyQR", 'title_showOnlyQR' => "title_showOnlyQR",
'alt_help' => "alt_help",
'alt_QR_before' => "alt_QR_before", 'alt_QR_before' => "alt_QR_before",
'alt_QR_after' => "alt_QR_after", 'alt_QR_after' => "alt_QR_after",

80
style.less
View File

@ -30,16 +30,23 @@ p {
margin: 10px; margin: 10px;
} }
details .helpText {
background-color: @bgHelp;
padding: 5px;
border-radius: 10px;
text-align: left;
}
#menusDeroulants summary {
text-align: center;
margin-left: 20px;
}
#firstWrapper { #firstWrapper {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
#menusDeroulants {
text-align: center;
margin-left: 20px;
}
#qrCode { #qrCode {
max-width: 480px; max-width: 480px;
} }
@ -160,20 +167,13 @@ label[for=txt] {
} }
.metaText { .metaText {
color: @secondaryText; color: @text;
transition: color 0.12s cubic-bezier(0.42, 0.0, 1.0, 1.0);
padding: 6px; padding: 6px;
& a, a:visited { & a, a:visited {
transition: color 0.12s cubic-bezier(0.42, 0.0, 1.0, 1.0); color: @text;
color: @secondaryText;
text-decoration: underline; text-decoration: underline;
} }
&:hover, &:hover a {
color: @text;
}
} }
footer { footer {
@ -260,58 +260,6 @@ input[type=color] {
border: 2px @border solid; border: 2px @border solid;
} }
/* Help message */
.helpImg {
width: 22px;
height: 22px;
margin-bottom: -3px;
display: inline-block;
}
.helpButton {
height: 22px;
width: 22px;
color: @secondaryText;
cursor: help;
font-size: 0.8em;
display: inline-block;
}
.helpContainer {
display: inline-block;
margin-left: 5px;
}
.helpContent {
position: absolute;
transform: scale(0) rotate(-12deg);
color: @text;
background: @bgHelp;
padding: 15px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,.5);
margin-top: 23px;
margin-left: -35px;
transition: all .25s;
opacity: 0;
max-width: 500px;
font-size: 20px;
text-align: left;
@media (max-width: 500px) {
position: fixed;
margin: 5px;
left: 0px;
top: 0px;
}
}
.helpContainer:hover .helpContent, .helpContainer:focus-within .helpContent {
transform: scale(1) rotate(0);
opacity: 1;
}
/* Media queries */ /* Media queries */
@media (max-width: 850px) { @media (max-width: 850px) {