Skip to content

Commit

Permalink
Merge pull request #88 from open-craft/mtyaka/studio-help
Browse files Browse the repository at this point in the history 
Clean up studio edit template
  • Loading branch information
@itsjeyd
itsjeyd authored Aug 18, 2016
2 parents 7b5bc7d + f0c1f02 commit c958bc5
Show file tree
Hide file tree
Showing 7 changed files with 499 additions and 376 deletions.
30 changes: 15 additions & 15 deletions drag_and_drop_v2/drag_and_drop_v2.py
View file
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 = {
'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
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

0 comments on commit c958bc5

Please sign in to comment.