Added new icons for all of the content

cms/static/sass/_calendar.scss

@@ -20,11 +20,13 @@ section.cal {
       font-size: 14px;
       padding: 6px 6px 6px 0;
       font-size: 12px;
+      margin: 0;
     }
 
     ul {
       @include inline-block;
       float: right;
+      margin: 0;
 
       li  {
         @include inline-block;
@@ -48,6 +50,7 @@ section.cal {
 
         ul {
           @include inline-block();
+          margin: 0;
 
           li {
             @include inline-block();
@@ -66,6 +69,8 @@ section.cal {
     border-top: 1px solid lighten($dark-blue, 40%);
     width: 100%;
     @include box-sizing(border-box);
+    margin: 0;
+    padding: 0;
 
     > li {
       border-right: 1px solid lighten($dark-blue, 40%);
@@ -94,6 +99,7 @@ section.cal {
           border-bottom: 1px solid lighten($dark-blue, 60%);
           padding: 6px;
           color: $bright-blue;
+          margin: 0;
 
           a {
             color: $bright-blue;
@@ -109,6 +115,9 @@ section.cal {
         }
 
         ul {
+          margin: 0;
+          padding: 0;
+
           li {
             background: #fff;
             color: #888;
@@ -120,8 +129,8 @@ section.cal {
 
       ul {
         list-style: none;
-        margin-bottom: 1px;
-
+        margin: 0 0 1px 0;
+        padding: 0;
 
         li {
           border-bottom: 1px solid darken($light-blue, 8%);
@@ -133,6 +142,7 @@ section.cal {
 
             a.draggable {
               background-color: lighten($yellow, 14%);
+              opacity: 1;
             }
           }
 
@@ -157,6 +167,7 @@ section.cal {
               @include position(absolute,  0px 0px 0 0);
               width: 30px;
               z-index: 99;
+              opacity: .3;
 
               &:hover {
                 cursor: move;

cms/static/sass/_content-types.scss

@@ -0,0 +1,55 @@
+.content-type {
+  padding-left: 34px;
+  background-position: 8px center;
+  background-repeat: no-repeat;
+}
+
+.videosequence a:first-child {
+  @extend .content-type;
+  background-image: url('/static/img/content-types/videosequence.png');
+}
+
+.video a:first-child {
+  @extend .content-type;
+  background-image: url('/static/img/content-types/video.png');
+}
+
+.problemset a:first-child {
+  @extend .content-type;
+  background-image: url('/static/img/content-types/problemset.png');
+}
+
+.problem a:first-child {
+  @extend .content-type;
+  background-image: url('/static/img/content-types/problem.png');
+}
+
+.lab a:first-child {
+  @extend .content-type;
+  background-image: url('/static/img/content-types/lab.png');
+}
+
+.tab a:first-child {
+  @extend .content-type;
+  background-image: url('/static/img/content-types/lab.png');
+}
+
+.html a:first-child {
+  @extend .content-type;
+  background-image: url('/static/img/content-types/html.png');
+}
+
+.vertical a:first-child {
+  @extend .content-type;
+  background-image: url('/static/img/content-types/vertical.png');
+}
+
+.sequential a:first-child {
+  @extend .content-type;
+  background-image: url('/static/img/content-types/sequential.png');
+}
+
+.chapter a:first-child {
+  @extend .content-type;
+  background-image: url('/static/img/content-types/chapter.png');
+}

cms/static/sass/_layout.scss

@@ -26,7 +26,7 @@ body {
         font-size: 14px;
         text-transform: uppercase;
         float: left;
-        margin-right: 15px;
+        margin: 0 15px 0 0;
 
         a {
           color: #fff;
@@ -47,6 +47,7 @@ body {
 
       ul {
         float: left;
+        margin: 0;
 
         &.user-nav {
           float: right;

cms/static/sass/_normalize.scss

@@ -0,0 +1,504 @@
+/*! normalize.css 2012-03-11T12:53 UTC - http://github.com/necolas/normalize.css */
+
+/* =============================================================================
+   HTML5 display definitions
+   ========================================================================== */
+
+/*
+ * Corrects block display not defined in IE6/7/8/9 & FF3
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+nav,
+section,
+summary {
+    display: block;
+}
+
+/*
+ * Corrects inline-block display not defined in IE6/7/8/9 & FF3
+ */
+
+audio,
+canvas,
+video {
+    display: inline-block;
+    *display: inline;
+    *zoom: 1;
+}
+
+/*
+ * Prevents modern browsers from displaying 'audio' without controls
+ * Remove excess height in iOS5 devices
+ */
+
+audio:not([controls]) {
+    display: none;
+    height: 0;
+}
+
+/*
+ * Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4
+ * Known issue: no IE6 support
+ */
+
+[hidden] {
+    display: none;
+}
+
+
+/* =============================================================================
+   Base
+   ========================================================================== */
+
+/*
+ * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
+ *    http://clagnut.com/blog/348/#c790
+ * 2. Prevents iOS text size adjust after orientation change, without disabling user zoom
+ *    www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
+ */
+
+html {
+    font-size: 100%; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+    -ms-text-size-adjust: 100%; /* 2 */
+}
+
+/*
+ * Addresses font-family inconsistency between 'textarea' and other form elements.
+ */
+
+html,
+button,
+input,
+select,
+textarea {
+    font-family: sans-serif;
+}
+
+/*
+ * Addresses margins handled incorrectly in IE6/7
+ */
+
+body {
+    margin: 0;
+}
+
+
+/* =============================================================================
+   Links
+   ========================================================================== */
+
+/*
+ * Addresses outline displayed oddly in Chrome
+ */
+
+a:focus {
+    outline: thin dotted;
+}
+
+/*
+ * Improves readability when focused and also mouse hovered in all browsers
+ * people.opera.com/patrickl/experiments/keyboard/test
+ */
+
+a:hover,
+a:active {
+    outline: 0;
+}
+
+
+/* =============================================================================
+   Typography
+   ========================================================================== */
+
+/*
+ * Addresses font sizes and margins set differently in IE6/7
+ * Addresses font sizes within 'section' and 'article' in FF4+, Chrome, S5
+ */
+
+h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+}
+
+h2 {
+    font-size: 1.5em;
+    margin: 0.83em 0;
+}
+
+h3 {
+    font-size: 1.17em;
+    margin: 1em 0;
+}
+
+h4 {
+    font-size: 1em;
+    margin: 1.33em 0;
+}
+
+h5 {
+    font-size: 0.83em;
+    margin: 1.67em 0;
+}
+
+h6 {
+    font-size: 0.75em;
+    margin: 2.33em 0;
+}
+
+/*
+ * Addresses styling not present in IE7/8/9, S5, Chrome
+ */
+
+abbr[title] {
+    border-bottom: 1px dotted;
+}
+
+/*
+ * Addresses style set to 'bolder' in FF3+, S4/5, Chrome
+*/
+
+b,
+strong {
+    font-weight: bold;
+}
+
+blockquote {
+    margin: 1em 40px;
+}
+
+/*
+ * Addresses styling not present in S5, Chrome
+ */
+
+dfn {
+    font-style: italic;
+}
+
+/*
+ * Addresses styling not present in IE6/7/8/9
+ */
+
+mark {
+    background: #ff0;
+    color: #000;
+}
+
+/*
+ * Addresses margins set differently in IE6/7
+ */
+
+p,
+pre {
+    margin: 1em 0;
+}
+
+/*
+ * Corrects font family set oddly in IE6, S4/5, Chrome
+ * en.wikipedia.org/wiki/User:Davidgothberg/Test59
+ */
+
+pre,
+code,
+kbd,
+samp {
+    font-family: monospace, serif;
+    _font-family: 'courier new', monospace;
+    font-size: 1em;
+}
+
+/*
+ * Improves readability of pre-formatted text in all browsers
+ */
+
+pre {
+    white-space: pre;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
+
+/*
+ * 1. Addresses CSS quotes not supported in IE6/7
+ * 2. Addresses quote property not supported in S4
+ */
+
+/* 1 */
+
+q {
+    quotes: none;
+}
+
+/* 2 */
+
+q:before,
+q:after {
+    content: '';
+    content: none;
+}
+
+small {
+    font-size: 75%;
+}
+
+/*
+ * Prevents sub and sup affecting line-height in all browsers
+ * gist.github.com/413930
+ */
+
+sub,
+sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+
+sup {
+    top: -0.5em;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+
+/* =============================================================================
+   Lists
+   ========================================================================== */
+
+/*
+ * Addresses margins set differently in IE6/7
+ */
+
+dl,
+menu,
+ol,
+ul {
+    margin: 1em 0;
+}
+
+dd {
+    margin: 0 0 0 40px;
+}
+
+/*
+ * Addresses paddings set differently in IE6/7
+ */
+
+menu,
+ol,
+ul {
+    padding: 0 0 0 40px;
+}
+
+/*
+ * Corrects list images handled incorrectly in IE7
+ */
+
+nav ul,
+nav ol {
+    list-style: none;
+    list-style-image: none;
+}
+
+
+/* =============================================================================
+   Embedded content
+   ========================================================================== */
+
+/*
+ * 1. Removes border when inside 'a' element in IE6/7/8/9, FF3
+ * 2. Improves image quality when scaled in IE7
+ *    code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
+ */
+
+img {
+    border: 0; /* 1 */
+    -ms-interpolation-mode: bicubic; /* 2 */
+}
+
+/*
+ * Corrects overflow displayed oddly in IE9
+ */
+
+svg:not(:root) {
+    overflow: hidden;
+}
+
+
+/* =============================================================================
+   Figures
+   ========================================================================== */
+
+/*
+ * Addresses margin not present in IE6/7/8/9, S5, O11
+ */
+
+figure {
+    margin: 0;
+}
+
+
+/* =============================================================================
+   Forms
+   ========================================================================== */
+
+/*
+ * Corrects margin displayed oddly in IE6/7
+ */
+
+form {
+    margin: 0;
+}
+
+/*
+ * Define consistent border, margin, and padding
+ */
+
+fieldset {
+    border: 1px solid #c0c0c0;
+    margin: 0 2px;
+    padding: 0.35em 0.625em 0.75em;
+}
+
+/*
+ * 1. Corrects color not being inherited in IE6/7/8/9
+ * 2. Corrects text not wrapping in FF3
+ * 3. Corrects alignment displayed oddly in IE6/7
+ */
+
+legend {
+    border: 0; /* 1 */
+    padding: 0;
+    white-space: normal; /* 2 */
+    *margin-left: -7px; /* 3 */
+}
+
+/*
+ * 1. Corrects font size not being inherited in all browsers
+ * 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome
+ * 3. Improves appearance and consistency in all browsers
+ */
+
+button,
+input,
+select,
+textarea {
+    font-size: 100%; /* 1 */
+    margin: 0; /* 2 */
+    vertical-align: baseline; /* 3 */
+    *vertical-align: middle; /* 3 */
+}
+
+/*
+ * Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet
+ */
+
+button,
+input {
+    line-height: normal; /* 1 */
+}
+
+/*
+ * 1. Improves usability and consistency of cursor style between image-type 'input' and others
+ * 2. Corrects inability to style clickable 'input' types in iOS
+ * 3. Removes inner spacing in IE7 without affecting normal text inputs
+ *    Known issue: inner spacing remains in IE6
+ */
+
+button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+    cursor: pointer; /* 1 */
+    -webkit-appearance: button; /* 2 */
+    *overflow: visible;  /* 3 */
+}
+
+/*
+ * Re-set default cursor for disabled elements
+ */
+
+button[disabled],
+input[disabled] {
+    cursor: default;
+}
+
+/*
+ * 1. Addresses box sizing set to content-box in IE8/9
+ * 2. Removes excess padding in IE8/9
+ * 3. Removes excess padding in IE7
+      Known issue: excess padding remains in IE6
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+    *height: 13px; /* 3 */
+    *width: 13px; /* 3 */
+}
+
+/*
+ * 1. Addresses appearance set to searchfield in S5, Chrome
+ * 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof)
+ */
+
+input[type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box; /* 2 */
+    box-sizing: content-box;
+}
+
+/*
+ * Removes inner padding and search cancel button in S5, Chrome on OS X
+ */
+
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+}
+
+/*
+ * Removes inner padding and border in FF3+
+ * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+/*
+ * 1. Removes default vertical scrollbar in IE6/7/8/9
+ * 2. Improves readability and alignment in all browsers
+ */
+
+textarea {
+    overflow: auto; /* 1 */
+    vertical-align: top; /* 2 */
+}
+
+
+/* =============================================================================
+   Tables
+   ========================================================================== */
+
+/*
+ * Remove most spacing between table cells
+ */
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}

cms/static/sass/_reset.scss

@@ -1,229 +0,0 @@
-html, body, div, span, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-abbr, address, cite, code,
-del, dfn, em, img, ins, kbd, q, samp,
-small, strong, sub, sup, var,
-b, i,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section, summary,
-time, mark, audio, video {
-    margin:0;
-    padding:0;
-    border:0;
-    outline:0;
-    vertical-align:baseline;
-    background:transparent;
-}
-
-html,body {
-  font-size: 100%;
-}
-
-// Corrects block display not defined in IE8/9 & FF3
-article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
-  display: block;
-}
-
-// Corrects inline-block display not defined in IE8/9 & FF3
-audio, canvas, video {
-  display: inline-block;
-}
-
-// Prevents modern browsers from displaying 'audio' without controls
-audio:not([controls]) {
-  display: none;
-}
-
-// Addresses styling for 'hidden' attribute not present in IE8/9, FF3, S4
-[hidden] {
-  display: none;
-}
-
-// Prevents iOS text size adjust after orientation change, without disabling user zoom
-// www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
-html {
-  font-size: 100%;
-  -webkit-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
-}
-
-// Addresses font-family inconsistency between 'textarea' and other form elements.
-html, button, input, select, textarea {
-  font-family: sans-serif;
-}
-
-a {
-  // Addresses outline displayed oddly in Chrome
-  &:focus {
-    outline: thin dotted;
-    // Webkit
-    outline: 5px auto -webkit-focus-ring-color;
-    outline-offset: -2px;
-  }
-
-  // Improves readability when focused and also mouse hovered in all browsers
-  // people.opera.com/patrickl/experiments/keyboard/test
-  &:hover, &:active {
-    outline: 0;
-  }
-}
-
-// Addresses styling not present in IE8/9, S5, Chrome
-abbr[title] {
-  border-bottom: 1px dotted;
-}
-
-// Addresses style set to 'bolder' in FF3+, S4/5, Chrome
-b, strong {
-  font-weight: bold;
-}
-
-blockquote {
-  margin: 1em 40px;
-}
-
-// Addresses styling not present in S5, Chrome
-dfn {
-  font-style: italic;
-}
-
-// Addresses styling not present in IE8/9
-mark {
-  background: #ff0;
-  color: #000;
-}
-
-// Corrects font family set oddly in S4/5, Chrome
-// en.wikipedia.org/wiki/User:Davidgothberg/Test59
-pre, code, kbd, samp {
-  font-family: monospace, serif;
-  _font-family: 'courier new', monospace;
-  font-size: 1em;
-}
-
-// Improves readability of pre-formatted text in all browsers
-pre {
-  white-space: pre;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-}
-
-// Addresses quote property not supported in S4
-blockquote, q {
-  quotes: none;
-  &:before, &:after {
-    content: '';
-    content: none;
-  }
-}
-
-small {
-  font-size: 75%;
-}
-
-sub, sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sup {
-  top: -0.5em;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-nav {
-  ul, ol {
-    list-style: none;
-    list-style-image: none;
-  }
-}
-
-// Removes border when inside 'a' element in IE8/9, FF3
-img {
-  border: 0;
-  height: auto;
-  max-width: 100%;
-  -ms-interpolation-mode: bicubic;
-}
-
-// Corrects overflow displayed oddly in IE9
-svg:not(:root) {
-  overflow: hidden;
-}
-
-// Define consistent border, margin, and padding
-fieldset {
-  border: 1px solid #c0c0c0;
-  margin: 0 2px;
-  padding: 0.35em 0.625em 0.75em;
-}
-
-legend {
-  border: 0; // Corrects color not being inherited in IE8/9
-  padding: 0;
-  white-space: normal; // Corrects text not wrapping in FF3
-}
-
-button, input, select, textarea {
-  font-size: 100%; // Corrects font size not being inherited in all browsers
-  margin: 0; // Addresses margins set differently in FF3+, S5, Chrome
-  vertical-align: baseline; // Improves appearance and consistency in all browsers
-}
-
-// Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet
-button, input {
-  line-height: normal;
-}
-
-button, input[type="button"], input[type="reset"], input[type="submit"] {
-  cursor: pointer; // Improves usability and consistency of cursor style between image-type 'input' and others
-  -webkit-appearance: button; // Corrects inability to style clickable 'input' types in iOS
-}
-
-// Re-set default cursor for disabled elements
-button[disabled], input[disabled] {
-  cursor: default;
-}
-
-input[type="checkbox"], input[type="radio"] {
-  box-sizing: border-box; // Addresses box sizing set to content-box in IE8/9
-  padding: 0; //Removes excess padding in IE8/9
-}
-
-input[type="search"] {
-  -webkit-appearance: textfield; // Addresses appearance set to searchfield in S5, Chrome
-  -moz-box-sizing: content-box;
-  -webkit-box-sizing: content-box; // Addresses box-sizing set to border-box in S5, Chrome (-moz to future-proof)
-  box-sizing: content-box;
-}
-
-// Removes inner padding and search cancel button in S5, Chrome on OS X
-input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button {
-  -webkit-appearance: none;
-}
-
-// Removes inner padding and border in FF3+
-// www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
-button::-moz-focus-inner, input::-moz-focus-inner {
-  border: 0;
-  padding: 0;
-}
-
-textarea {
-  overflow: auto; // Removes default vertical scrollbar in IE8/9
-  vertical-align: top; // Improves readability and alignment in all browsers
-}
-
-// Remove most spacing between table cells
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}

cms/static/sass/_section.scss

@@ -16,11 +16,14 @@ section#unit-wrapper {
       font-size: 14px;
       padding: 6px 6px 6px 0;
       font-size: 12px;
+      margin: 0;
     }
 
     ul {
       @include clearfix();
       list-style: none;
+      margin: 0;
+      padding: 0;
 
       li {
         @include inline-block;
@@ -66,6 +69,7 @@ section#unit-wrapper {
           letter-spacing: 1px;
           line-height: 19px;
           text-transform: uppercase;
+          margin: 0;
         }
       }
 
@@ -88,6 +92,8 @@ section#unit-wrapper {
 
         ol {
           list-style: none;
+          margin: 0;
+          padding: 0;
 
           li {
             border-bottom: 1px solid lighten($dark-blue, 60%);
@@ -98,6 +104,8 @@ section#unit-wrapper {
 
             ol {
               list-style: none;
+              margin: 0;
+              padding: 0;
 
               li {
                 padding: 6px;
@@ -128,13 +136,15 @@ section#unit-wrapper {
 
                     h3 {
                       font-size: 14px;
+                      margin: 0;
                     }
                   }
 
-
                   ol {
                     border-left: 4px solid #999;
                     border-bottom: 0;
+                    margin: 0;
+                    padding: 0;
 
                     li {
                       &:last-child {
@@ -157,6 +167,8 @@ section#unit-wrapper {
 
         ol {
           list-style: none;
+          margin: 0;
+          padding: 0;
 
           li {
             border-bottom: 1px solid darken($light-blue, 8%);
@@ -180,6 +192,8 @@ section#unit-wrapper {
 
             ul {
               list-style: none;
+              margin: 0;
+              padding: 0;
 
               li {
                 padding: 6px;

cms/static/sass/_unit.scss

@@ -14,13 +14,19 @@ section#unit-wrapper {
         letter-spacing: 1px;
         @include inline-block();
         color: $bright-blue;
+        margin: 0;
       }
 
       p {
         @include inline-block();
-        margin-left: 10px;
-        color: #999;
-        font-size: 12px;
+        margin: 0;
+
+        a {
+          text-indent: -9999px;
+          @include inline-block();
+          width: 1px;
+          height: 100%;
+       }
       }
     }
 
@@ -71,10 +77,12 @@ section#unit-wrapper {
           @include clearfix;
 
           ul {
-            list-style: none;
             border: 1px solid darken($light-blue, 15%);
             @include clearfix();
             float: left;
+            list-style: none;
+            margin: 0;
+            padding: 0;
 
             li {
               border-right: 1px solid darken($light-blue, 15%);
@@ -144,10 +152,12 @@ section#unit-wrapper {
             h2 {
               font-size: 14px;
               @include inline-block();
+              margin: 0;
             }
 
             p {
               @include inline-block();
+              margin: 0;
             }
           }
         }
@@ -212,6 +222,8 @@ section#unit-wrapper {
 
       ul {
         list-style: none;
+        margin: 0;
+        padding: 0;
 
         li {
           margin-bottom: 20px;

cms/static/sass/base-style.scss

@@ -1,6 +1,6 @@
 @import 'bourbon/bourbon';
-@import 'reset';
+@import 'normalize';
 
-@import 'base', 'layout';
+@import 'base', 'layout', 'content-types';
 @import 'calendar';
 @import 'section', 'unit';

cms/templates/unit.html

@@ -2,7 +2,7 @@
   <header>
     <section>
       <h1 class="editable">${name}</h1>
-      <p>${category}</p>
+      <p class="${category}"><a href="#">${category}</a></p>
     </section>
 
     <div class="actions">

cms/templates/widgets/navigation.html

@@ -1,6 +1,7 @@
 <section class="cal">
   <header class="wip">
     <a href="#">Timeline view</a>
+    <a href="#">Multi-Module edit</a>
     <ul>
       <li>
         <h2>Sort:</h2>

cms/templates/widgets/sequence-edit.html

@@ -35,7 +35,7 @@
         <li>
           <ol>
             % for child in module.get_children():
-            <li>
+            <li class="${module.category}">
               <a href="#" class="module-edit" id="${child.location.url()}">${child.name}</a>
               <a href="#" class="draggable">handle</a>
             </li>