Skip to content

Commit

Permalink
Merge pull request #483 from durvalcarvalho/feature/482-improve-check…
Browse files Browse the repository at this point in the history 
…box-usability

[REVIEW] #482 - Add label to all checkbox text
  • Loading branch information
@pablodiegoss
pablodiegoss authored Oct 27, 2022
2 parents 8d537df + c22fa9e commit ea665b2
Show file tree
Hide file tree
Showing 7 changed files with 60 additions and 42 deletions.
14 changes: 9 additions & 5 deletions src/ARte/users/jinja2/users/artwork-create.jinja2
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,9 @@
<div class="form-options">
<p>
<input id="marker-agreement-chk" type="checkbox" name="agreement">
{{ _("I agree to share this content under CC BY-SA 4.0 and I'm aware that, once uploaded, I cannot remove it. ") }}
<label for="marker-agreement-chk">
{{ _("I agree to share this content under CC BY-SA 4.0 and I'm aware that, once uploaded, I cannot remove it. ") }}
</label>
</p>
</div>

Expand All @@ -55,7 +57,9 @@
<div class="form-options">
<p>
<input id="object-agreement-chk" type="checkbox" name="agreement">
{{ _("I agree to share this content under CC BY-SA 4.0 and I'm aware that, once uploaded, I cannot remove it. ") }}
<label for="object-agreement-chk">
{{ _("I agree to share this content under CC BY-SA 4.0 and I'm aware that, once uploaded, I cannot remove it. ") }}
</label>
</p>
</div>
<button id="next-desc" type="button" class="select-btn next-btn">
Expand All @@ -77,9 +81,9 @@
</form>
</div>
<script>
const MARKER_TAB = 0;
const OBJECT_TAB = 1;
const DESCRIPTION_TAB = 2;
const MARKER_TAB = 0;
const OBJECT_TAB = 1;
const DESCRIPTION_TAB = 2;
let currentTab = MARKER_TAB;
function showTab(tabNumber){
Expand Down
14 changes: 9 additions & 5 deletions src/ARte/users/jinja2/users/artwork-edit.jinja2
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,9 @@
<div class="form-options">
<p>
<input id="marker-agreement-chk" type="checkbox" name="agreement">
{{ _("I agree to share this content under CC BY-SA 4.0 and I'm aware that, once uploaded, I cannot remove it. ") }}
<label for="marker-agreement-chk">
{{ _("I agree to share this content under CC BY-SA 4.0 and I'm aware that, once uploaded, I cannot remove it. ") }}
</label>
</p>
</div>

Expand All @@ -55,7 +57,9 @@
<div class="form-options">
<p>
<input id="object-agreement-chk" type="checkbox" name="agreement">
{{ _("I agree to share this content under CC BY-SA 4.0 and I'm aware that, once uploaded, I cannot remove it. ") }}
<label for="object-agreement-chk">
{{ _("I agree to share this content under CC BY-SA 4.0 and I'm aware that, once uploaded, I cannot remove it. ") }}
</label>
</p>
</div>
<button id="next-desc" type="button" class="select-btn next-btn">
Expand All @@ -77,9 +81,9 @@
</form>
</div>
<script>
const MARKER_TAB = 0;
const OBJECT_TAB = 1;
const DESCRIPTION_TAB = 2;
const MARKER_TAB = 0;
const OBJECT_TAB = 1;
const DESCRIPTION_TAB = 2;
let currentTab = 0;
function showTab(tabNumber){
Expand Down
5 changes: 4 additions & 1 deletion src/ARte/users/jinja2/users/login.jinja2
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,10 @@
{% endfor%}
<div class="form-options">
<p>
<input type="checkbox" name="remember" value="1"> Remember me
<input id="remember-me-chk" type="checkbox" name="remember" value="1">
<label for="remember-me-chk">
{{ _("Remember me") }}
</label>
</p>
</div>
<input class="submit-btn" type="submit" value="{{ _('Submit') }}"/>
Expand Down
4 changes: 2 additions & 2 deletions src/ARte/users/jinja2/users/signup.jinja2
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,8 @@
{% endfor %}
<div class="form-options">
<p>
<input type="checkbox" name="remember" value="1">
{{ _('Remember me') }}
<input type="checkbox" name="remember" value="1" id="remember-me-checkbox">
<label for="remember-me-checkbox">{{ _('Remember me') }}</label>
</p>
</div>
<input class="submit-btn" type="submit" value="{{ _('Submit') }}"/>
Expand Down
16 changes: 10 additions & 6 deletions src/ARte/users/jinja2/users/upload-marker.jinja2
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
<h3>{{_("Choose Marker's title")}}
{{ form.visible_fields()[2] }}
{{ form.visible_fields()[2].errors }}
</p>
</p>
<h3>{{ _("Choose Marker image") }}</h3>
{{ form.visible_fields()[0] }}
{{ form.visible_fields()[0].errors }}
Expand All @@ -31,9 +31,11 @@

<input id="author-chk" type="checkbox" name="author" value="1">
{% if form_type == 'marker' %}
{{ _("I'm this Marker author") }}
<label for="author-chk">
{{ _("I'm this Marker author") }}
</label>
{% endif %}

</p>
<p class="upload-field" id="author-field">
{{ form.visible_fields()[1] }}
Expand All @@ -42,9 +44,11 @@
<div class="form-options">
<p>
<input id="agreement-chk" type="checkbox" name="agreement" value="1">
{{ _('I agree to have this content under <a target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/legalcode">CC BY-SA 4.0</a> and I\'m aware that it can\'t be removed after other people are using it.') }}
<label for="agreement-chk">
{{ _('I agree to have this content under <a target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/legalcode">CC BY-SA 4.0</a> and I\'m aware that it can\'t be removed after other people are using it.') }}
</label>
</p>
</div>
</div>
<input class="submit-btn" type="submit" value="{{ _('Submit') }}" disabled="disabled"/>
</form>
</div>
Expand Down Expand Up @@ -98,7 +102,7 @@
// put fullMarkerImage into #imageContainer
var container = document.querySelector('#imageContainer')
while (container.firstChild) container.removeChild(container.firstChild);
container.appendChild(fullMarkerImage)
container.appendChild(fullMarkerImage)
})
}
</script>
Expand Down
22 changes: 12 additions & 10 deletions src/ARte/users/jinja2/users/upload-object.jinja2
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<h3>{{_("Choose Object's title")}}
{{ form.visible_fields()[2] }}
{{ form.visible_fields()[2].errors }}
</p>
</p>
{% endif %}
<p class="upload-field" id="source-field">
{%if route == 'object-upload' %}
Expand Down Expand Up @@ -49,7 +49,7 @@
<h3>Horizontal:</h3>
<input id="X-position" class="trigger-change-value" value ="0">
<h3>Vertical:</h3>
<input id="Y-position" class="trigger-change-value" value ="0">
<input id="Y-position" class="trigger-change-value" value ="0">

{{ form.hidden_fields()[0] }}
{{ form.hidden_fields()[0].errors }}
Expand All @@ -64,9 +64,9 @@

<input id="author-chk" type="checkbox" name="author" value="1">
{% if form_type == 'object' %}
{{ _("I'm this Object author") }}
<label for="author-chk">{{ _("I'm this Object author") }}</label>
{% endif %}

</p>
<p class="upload-field" id="author-field">
{{ form.visible_fields()[1] }}
Expand All @@ -75,9 +75,11 @@
<div class="form-options">
<p>
<input id="agreement-chk" type="checkbox" name="agreement" value="1">
{{ _('I agree to have this content under <a target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/legalcode">CC BY-SA 4.0</a> and I\'m aware that it can\'t be removed after other people are using it.') }}
<label for="agreement-chk">
{{ _('I agree to have this content under <a target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/legalcode">CC BY-SA 4.0</a> and I\'m aware that it can\'t be removed after other people are using it.') }}
</label>
</p>
</div>
</div>
<input class="submit-btn" onclick="updateValues()" type="submit" value="{{ _('Submit') }}" disabled="disabled"/>
</form>
</div>
Expand Down Expand Up @@ -132,7 +134,7 @@
document.getElementById("content-box").appendChild(image_preview); //make preview image of the object/marker show
}
}
var reader = new FileReader();
reader.onloadend = previewAndLoadFile;
reader.readAsDataURL(file);
Expand Down Expand Up @@ -165,13 +167,13 @@
var scl = scal*xprop + " " + scal*yprop;
var rot = "270 0 0";
var pos = xpos + " " + ypos + " 0"; //messing with the Z gives some really weird things
$('#id_scale').val(scl);
$('#id_scale').val(scl);
$('#id_rotation').val(rot);
$('#id_position').val(pos);
}
</script>
</section>
{% endblock %}
27 changes: 14 additions & 13 deletions src/ARte/users/jinja2/users/upload.jinja2
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,9 +55,9 @@
<input id="scale" class="trigger-change-value" value ="1">

<h2 id="positionTitle">{{_("Adjust position")}}</h2>
<span
<span
id="tooltipText"
data-text="Position should be adjusted relative to the Marker's size on the screen. If horizontal position is 2, the center of the Object will be in a distance 2 times the size of its Marker's side to the right. If it's -1, it will be shown to the left."
data-text="Position should be adjusted relative to the Marker's size on the screen. If horizontal position is 2, the center of the Object will be in a distance 2 times the size of its Marker's side to the right. If it's -1, it will be shown to the left."
class="tooltip"
>
?
Expand All @@ -84,14 +84,13 @@
</div>
{% endif %}
<p class="form-options">

<input id="author-chk" type="checkbox" name="author" value="1">
{% if form_type == 'marker' %}
{{ _("I'm this Marker author") }}
<label for="author-chk">{{ _("I'm this Marker author") }}</label>
{% elif form_type == 'object' %}
{{ _("I'm this Object author") }}
{% endif %}

<label for="author-chk">{{ _("I'm this Object author") }}</label>
{% endif %}
</p>
<p class="upload-field" id="author-field">
{{ form.visible_fields()[1] }}
Expand All @@ -100,7 +99,9 @@
<div class="form-options">
<p>
<input id="agreement-chk" type="checkbox" name="agreement" value="1">
{{ _('I agree to have this content under <a target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/legalcode">CC BY-SA 4.0</a> and I\'m aware that it can\'t be removed after other people are using it.') }}
<label for="agreement-chk">
{{ _('I agree to have this content under <a target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/legalcode">CC BY-SA 4.0</a> and I\'m aware that it can\'t be removed after other people are using it.') }}
</label>
</p>
</div>
<input class="submit-btn" onclick="updateValues()" type="submit" value="{{ _('Submit') }}" disabled="disabled"/>
Expand Down Expand Up @@ -132,7 +133,7 @@
$("#id_source").change(
function(e) {
var previous_content_box = document.getElementById('content-box');
var previous_content_box = document.getElementById('content-box');
if(previous_content_box){
previous_content_box.remove()
}
Expand All @@ -146,23 +147,23 @@
content_box.style.position = "relative"
var close_icon = document.createElement("div");
close_icon.id = "close-icon";
close_icon.style.position = "absolute"
close_icon.id = "close-icon";
close_icon.style.position = "absolute"
close_icon.style.top = "10px"
close_icon.style.right = "10px"
close_icon.style.padding = "5px 10px"
close_icon.style.padding = "5px 10px"
close_icon.style.borderRadius= "5px"
close_icon.style.cursor= "pointer"
close_icon.style.color = "white"
close_icon.style.background = "#ff6961"
close_icon.innerHTML = "x"
close_icon.onclick = function(){
this.parentElement.remove();
this.parentElement.remove();
document.querySelector('input[type="file"]').value = ""
}
content_box.appendChild(close_icon);
if (file.type === "video/mp4" || file.type === "video/webm") {
image_preview = document.createElement("video");
Expand Down

0 comments on commit ea665b2

Please sign in to comment.