Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Clean up studio edit template #88

Merged
merged 11 commits into from
Aug 18, 2016
Merged

Clean up studio edit template #88

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
142b49c
Refactor studio edit template.
mtyaka Aug 3, 2016
17334d9
Avoid using ID attributes in preference to classes.
mtyaka Aug 4, 2016
883e332
Address review notes.
mtyaka Aug 5, 2016
9bc8c07
Address review comments.
mtyaka Aug 10, 2016
cd434ea
Address review comments.
mtyaka Aug 11, 2016
7c3c2a2
Set focus to first input when switching tab.
mtyaka Aug 12, 2016
a4466fb
Increase padding between zone input and close button.
mtyaka Aug 12, 2016
dde1c6a
Select content of field when focusing it.
mtyaka Aug 12, 2016
67845ba
Address review comments.
itsjeyd Aug 16, 2016
eca2554
Update translation files.
itsjeyd Aug 16, 2016
f0c1f02
Silence pylint complaint about "location" not being a member of DragA…
itsjeyd Aug 16, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 15 additions & 15 deletions drag_and_drop_v2/drag_and_drop_v2.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
# -*- coding: utf-8 -*-
#
""" Drag and Drop v2 XBlock """

# Imports ###########################################################

import copy
Expand Down Expand Up @@ -93,7 +94,7 @@ class DragAndDropBlock(XBlock, XBlockWithSettingsMixin, ThemableXBlockMixin):

question_text = String(
display_name=_("Problem text"),
help=_("The description of the problem or instructions shown to the learner"),
help=_("The description of the problem or instructions shown to the learner."),
scope=Scope.settings,
default="",
)
Expand All @@ -106,22 +107,22 @@ class DragAndDropBlock(XBlock, XBlockWithSettingsMixin, ThemableXBlockMixin):
)

weight = Float(
display_name=_("Weight"),
help=_("The maximum score the learner can receive for the problem"),
display_name=_("Maximum score"),
help=_("The maximum score the learner can receive for the problem."),
scope=Scope.settings,
default=1,
)

item_background_color = String(
display_name=_("Item background color"),
help=_("The background color of draggable items in the problem."),
help=_("The background color of draggable items in the problem (example: 'blue' or '#0000ff')."),
scope=Scope.settings,
default="",
)

item_text_color = String(
display_name=_("Item text color"),
help=_("Text color to use for draggable items."),
help=_("Text color to use for draggable items (example: 'white' or '#ffffff')."),
scope=Scope.settings,
default="",
)
Expand Down Expand Up @@ -247,18 +248,17 @@ def studio_view(self, context):
"""

js_templates = loader.load_unicode('/templates/html/js_templates.html')
help_texts = {
field_name: self.ugettext(field.help)
for field_name, field in self.fields.viewitems() if hasattr(field, "help")
}
field_values = {
field_name: field.values
for field_name, field in self.fields.viewitems() if hasattr(field, "values")
}
# Get a 'html_id' string that is unique for this block.
# We append it to HTML element ID attributes to ensure multiple instances of the DnDv2 block
# on the same page don't share the same ID value.
# We avoid using ID attributes in preference to classes, but sometimes we still need IDs to
# connect 'for' and 'aria-describedby' attributes to the associated elements.
id_suffix = self.location.html_id() # pylint: disable=no-member
js_templates = js_templates.replace('{{id_suffix}}', id_suffix)
context = {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why are you directly replacing id_suffix on line 224 in js_templates (I'm not sure how those are used) and also passing id_suffix in the context (which is what I would expect)?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@cahrens js_templates contains Handlebars templates. Replacing id_suffix with raw string substitutions is a bit of a hack, however I think it's still better than passing the id_suffix variable to JavaScript and making sure it is present in the handlebars context every time when rendering a handlebars template.

We still have to pass the id_suffix variable in the context, because we use it inside django templates, too.

'js_templates': js_templates,
'help_texts': help_texts,
'field_values': field_values,
'id_suffix': id_suffix,
'fields': self.fields,
'self': self,
'data': urllib.quote(json.dumps(self.data)),
}
Expand Down
208 changes: 114 additions & 94 deletions drag_and_drop_v2/public/css/drag_and_drop_edit.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,52 +61,78 @@
position: relative;
}

.xblock--drag-and-drop--editor .tab::after,
.xblock--drag-and-drop--editor .tab-footer::after {
.xblock--drag-and-drop--editor .tab::after {
content: "";
display: table;
clear: both;
}

.xblock--drag-and-drop--editor .tab h3,
.xblock--drag-and-drop--editor .tab .h3 {
margin: 20px 0 8px 0;
.xblock--drag-and-drop--editor .tab h3 {
font-size: 18px;
}

.xblock--drag-and-drop--editor .tab .h3 {
.xblock--drag-and-drop--editor .tab h4,
.xblock--drag-and-drop--editor .tab .h4 {
display: block;
font: inherit;
font-size: 100%;
font-size: 16px;
margin: 20px 0 8px 0;
}

.xblock--drag-and-drop--editor .tab .nested-input {
display: block;
margin-top: 8px;
.xblock--drag-and-drop--editor .tab .items-form .item .row:first-of-type .h4 {
margin-top: 0;
}

.xblock--drag-and-drop--editor .tab-header,
.xblock--drag-and-drop--editor .tab-content,
.xblock--drag-and-drop--editor .tab-footer {
.xblock--drag-and-drop--editor .tab-content {
width: 96%;
margin: 2%;
}

.xblock--drag-and-drop--editor .tab-footer {
height: 25px;
position: relative;
display: block;
float: left;
}

.xblock--drag-and-drop--editor .items {
width: calc(100% - 515px);
margin: 10px 0 0 0;
}

.xblock--drag-and-drop--editor .target-image-form input,
.xblock--drag-and-drop--editor .target-image-form textarea {
.xblock--drag-and-drop--editor .target-image-form input {
width: 50%;
}
.xblock--drag-and-drop--editor .target-image-form textarea {
width: 97%;
}

.xblock--drag-and-drop--editor .target-image-form textarea {
display: block;
}

.xblock--drag-and-drop--editor input,
.xblock--drag-and-drop--editor textarea {
box-sizing: border-box;
font-size: 14px;
background: #fff;
box-shadow: none;
padding: 6px 8px;
border: 1px solid #b2b2b2;
color: #4c4c4c;
}

.xblock--drag-and-drop--editor label > span {
display: inline-block;
margin-bottom: 0.25em;
}

.xblock--drag-and-drop--editor label.checkbox-label {
font-size: 14px;
}

/* Main Tab */
.xblock--drag-and-drop--editor .feedback-tab input,
.xblock--drag-and-drop--editor .feedback-tab select {
display: block;
}

.xblock--drag-and-drop--editor .feedback-tab input[type=checkbox] {
display: inline-block;
}

/* Zones Tab */
.xblock--drag-and-drop--editor .zones-tab .zone-editor {
Expand All @@ -122,7 +148,6 @@
width: 40%;
max-width: 50%;
min-width: 330px;
margin-right: 15px;
}

.xblock--drag-and-drop--editor .zones-tab .tab-content .target {
Expand All @@ -137,39 +162,57 @@
max-width: 100%;
}

.xblock--drag-and-drop--editor .zones-form .zone-row {
background-color: #b1d9f1;
padding: 1rem;
margin-bottom: 2rem;
}

.xblock--drag-and-drop--editor .zones-form .zone-row label {
display: block;
}

.xblock--drag-and-drop--editor .zones-form .zone-row label > span {
display: inline-block;
width: 18%;
font-size: 14px;
min-width: 8rem;
}

.xblock--drag-and-drop--editor .zones-form .zone-row > input {
width: 60%;
.xblock--drag-and-drop--editor .zones-form .zone-row label > input {
width: 63%;
margin: 0 0 5px;
line-height: 2.664rem; /* .title gets line-height from a Studio rule that does not apply to .description;
here we make sure that both input fields get the same value for line-height */
}

.xblock--drag-and-drop--editor .zones-form .zone-row .alignment {
margin-bottom: 15px;
.xblock--drag-and-drop--editor .zones-form .zone-row .layout {
margin: 2rem 0;
}

.xblock--drag-and-drop--editor .zones-form .zone-row .layout label {
display: inline-block;
width: 45%;
}

.xblock--drag-and-drop--editor .zones-form .zone-row .layout .zone-size,
.xblock--drag-and-drop--editor .zones-form .zone-row .layout .zone-coord {
width: 35%;
line-height: inherit;
}

.xblock--drag-and-drop--editor .zones-form .zone-row .layout .size,
.xblock--drag-and-drop--editor .zones-form .zone-row .layout .coord {
width: 15%;
margin: 0 19px 5px 0;
.xblock--drag-and-drop--editor .zones-form .zone-row .alignment {
margin-bottom: 15px;
}


.xblock--drag-and-drop--editor .feedback-form textarea {
width: 99%;
height: 128px;
}

.xblock--drag-and-drop--editor .zones-form .zones-form-help,
.xblock--drag-and-drop--editor .target-image-form .target-image-form-help,
.xblock--drag-and-drop--editor .item-styles-form .item-styles-form-help {
margin-top: 5px;
font-size: small;
.xblock--drag-and-drop--editor .form-help {
margin: 0.5rem 0 1rem;
font-size: 12px;
}

.xblock--drag-and-drop--editor .item-styles-form,
Expand All @@ -178,14 +221,9 @@
}

.xblock--drag-and-drop--editor .items-form .item {
background-color: #8fcaec;
padding: 10px 0 1px;
margin: 15px 0;
}

.xblock--drag-and-drop--editor .items-form label,
.xblock--drag-and-drop--editor .items-form .h3 {
margin: 0 1%;
background-color: #b1d9f1;
padding: 2rem;
margin-bottom: 2rem;
}

.xblock--drag-and-drop--editor .items-form select {
Expand All @@ -199,7 +237,6 @@
.xblock--drag-and-drop--editor .items-form .item-text,
.xblock--drag-and-drop--editor .items-form .item-image-url {
width: 50%;
margin: 0 1%;
}

.xblock--drag-and-drop--editor .items-form .item-width {
Expand All @@ -208,23 +245,30 @@

.xblock--drag-and-drop--editor .items-form textarea {
width: 97%;
margin: 0 1%;
}

.xblock--drag-and-drop--editor .items-form .zone-checkbox-label {
text-align: left;
}

.xblock--drag-and-drop--editor .items-form .row {
margin-bottom: 20px;
}
.xblock--drag-and-drop--editor .items-form .row.advanced {
display: none;
}
.xblock--drag-and-drop--editor .items-form .row.advanced-link {
padding-left: 1em;
font-size: 80%;
font-size: 12px;
margin-top: 2em;
}
.xblock--drag-and-drop--editor .items-form .row.advanced-link button {
background: none;
border: none;
color: #4c4c4c;
}
.xblock--drag-and-drop--editor .items-form .row.advanced-link button:before {
content: '\25B6';
margin-right: 0.5em;
}
.rtl .xblock--drag-and-drop--editor .items-form .row.advanced-link button:before {
content: '\25C0';
margin-left: 0.5em;
margin-right: 0;
}

.xblock--drag-and-drop-editor .items-form .zone-checkbox-row {
margin-bottom: 0px;
}
Expand All @@ -238,48 +282,33 @@
padding: 5px 10px;
}

.xblock--drag-and-drop--editor .btn:hover {
opacity: 0.8;
cursor: pointer;
}

.xblock--drag-and-drop--editor .btn:hover,
.xblock--drag-and-drop--editor .btn:focus {
outline: none;
opacity: 0.5;
}

.xblock--drag-and-drop--editor .add-element {
text-decoration: none;
color: #1d5280;
}

.xblock--drag-and-drop--editor .remove-zone {
float: right;
margin-top: 2px;
margin-right: 16px;
background-color: #296ba5;
box-shadow: 0 1px 1px rgba(0,0,0,0.5);
}

.xblock--drag-and-drop--editor .remove-zone,
.xblock--drag-and-drop--editor .remove-item {
float: right;
display: inline-block;
margin-right: 16px;
padding: 3px;
border-radius: 12px;
}
.rtl .xblock--drag-and-drop--editor .remove-zone,
.rtl .xblock--drag-and-drop--editor .remove-item {
float: left;
}

.xblock--drag-and-drop--editor .icon {
width: 14px;
height: 14px;
border-radius: 7px;
background-color: #1d5280;
position: relative;
float: left;
margin: 0 5px 0 0;
display: inline-block;
}

.xblock--drag-and-drop--editor .add-zone:hover,
.xblock--drag-and-drop--editor .add-zone:hover .icon,
.xblock--drag-and-drop--editor .remove-zone:hover,
.xblock--drag-and-drop--editor .remove-zone:hover .icon {
opacity: 0.7;
.xblock--drag-and-drop--editor .remove-zone .icon,
.xblock--drag-and-drop--editor .remove-item .icon {
display: block;
}

.xblock--drag-and-drop--editor .tab .field-error {
Expand Down Expand Up @@ -342,12 +371,3 @@
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}

.xblock--drag-and-drop--editor .remove-item .icon.remove {
background-color: #fff;
color: #0072a7; /* Override default color from Studio to ensure contrast is large enough */
}
.xblock--drag-and-drop--editor .remove-item .icon.remove:before,
.xblock--drag-and-drop--editor .remove-item .icon.remove:after {
background-color: #1d5280;
}
Loading