Updates

_examples/markbook.html

@@ -3,6 +3,8 @@
 layout: standalone
 ---
 
+{% assign num = 10 %}
+
 <div class="ff-ui-heading">
     <h1>Markbook</h1>
     <div class="ff-ui-actions">
@@ -27,7 +29,7 @@ <h1>Markbook</h1>
         </div>
     </div>
 
-<div class="ff-mark-grid" data-ff-mark-grid-tasks="100">
+<div class="ff-mark-grid" data-ff-mark-grid-tasks="{{ num }}">
 
     <div class="ff-mark-grid-students">
 
@@ -69,13 +71,11 @@ <h1>Markbook</h1>
             </ul>
         </div>
 
-        {% assign num = 100 %}
-
         <div class="ff-mark-grid-header">
             <ol>
                 {% for i in (1..num) %}
                 <li id="ff-mark-grid-task-uid1" {% if i == 2 %}class="ff-mark-grid-highlight"{% endif %}>
-                    {% include_relative markbook_includes/task-header.html date=i %}
+                    {% include_relative markbook_includes/task-header.html date=i title="Write 500 a word on the process of quantum interactions within the chloroplasts of plants" %}
                 </li>
                 {% endfor %}
             </ol>

_examples/markbook_includes/task-header.html

@@ -1,5 +1,8 @@
 <div class="ff-popover-trigger">
-    <time class="ff-mark-grid-date">{{ include.date }}</time>
+    <div class="ff-mark-grid-task-title">
+        {{ include.title }}
+        <time class="ff-mark-grid-date">{{ include.date }}</time>
+    </div>
     <div class="ff-popover">
         <div class="ff-popover-header">
             An example task title, they're all the same here as I didn't want to manually add them 

_patterns/01a-dropdowns/ff-button-with-dropdown.html

@@ -4,9 +4,9 @@
 notes:
 ---
 
-<div class="ff-button-with-dropdown">
-    <a href="#" class="ff-primary-action ff-button ff-button-add ff-icon ff-icon-task-add"><span>Set a New Task</span></a>
-    <ul class="ff-dropdown ff-button ff-button-dropdown ff-secondary-actions">
+<div class="ff-ui-button-with-dropdown">
+    <a href="#" class="ff-ui-button ff-icon ff-icon-task-add ff-primary-action"><span>Set a New Task</span></a>
+    <ul class="ff-ui-dropdown ff-ui-button ff-secondary-actions">
         <li class="ff-icon-dropdown"><span class="ff-dropdown-label">More Options</span>
             <ul class="ff-dropdown-items ff-secondary-actions-dropdown">
                 <li><a href="#" class="ff-icon ff-icon-archive"><span>Bulk Archive</span></a></li>

_patterns/01a-dropdowns/ff-dropdown.html

@@ -4,7 +4,7 @@
 notes:
 ---
 
-<ul class="ff-dropdown ff-button ff-button-dropdown ff-button-bookmark">
+<ul class="ff-ui-dropdown ff-ui-button">
     <li class="ff-icon ff-icon-bookmark ff-icon-dropdown"><span class="ff-dropdown-label">Bookmark</span>
         <ul class="ff-dropdown-items">
             <li class="ff-button-unbookmark-page"><a href="#"><span>UnBookmark Page</span></a></li>

config.codekit

@@ -619,15 +619,6 @@
 		"outputPathIsOutsideProject": 0,
 		"outputPathIsSetByUser": 0
 		},
-	"\/_site\/css\/styles.css": {
-		"fileType": 16,
-		"ignore": 1,
-		"ignoreWasSetByUser": 0,
-		"inputAbbreviatedPath": "\/_site\/css\/styles.css",
-		"outputAbbreviatedPath": "No Output Path",
-		"outputPathIsOutsideProject": 0,
-		"outputPathIsSetByUser": 0
-		},
 	"\/_site\/examples\/bookmarks.html": {
 		"fileType": 8192,
 		"ignore": 0,
@@ -817,36 +808,47 @@
 		},
 	"\/_site\/js\/jquery-1.11.2.min.js": {
 		"fileType": 64,
-		"ignore": 1,
+		"ignore": 0,
 		"ignoreWasSetByUser": 0,
 		"inputAbbreviatedPath": "\/_site\/js\/jquery-1.11.2.min.js",
 		"outputAbbreviatedPath": "\/_site\/js\/min\/jquery-1.11.2.min-min.js",
 		"outputPathIsOutsideProject": 0,
 		"outputPathIsSetByUser": 0,
 		"outputStyle": 1,
-		"syntaxCheckerStyle": 0
+		"syntaxCheckerStyle": 1
+		},
+	"\/_site\/js\/mark-grid.js": {
+		"fileType": 64,
+		"ignore": 0,
+		"ignoreWasSetByUser": 0,
+		"inputAbbreviatedPath": "\/_site\/js\/mark-grid.js",
+		"outputAbbreviatedPath": "\/_site\/js\/min\/mark-grid-min.js",
+		"outputPathIsOutsideProject": 0,
+		"outputPathIsSetByUser": 0,
+		"outputStyle": 1,
+		"syntaxCheckerStyle": 1
 		},
 	"\/_site\/js\/pattern-library.js": {
 		"fileType": 64,
-		"ignore": 1,
+		"ignore": 0,
 		"ignoreWasSetByUser": 0,
 		"inputAbbreviatedPath": "\/_site\/js\/pattern-library.js",
 		"outputAbbreviatedPath": "\/_site\/js\/min\/pattern-library-min.js",
 		"outputPathIsOutsideProject": 0,
 		"outputPathIsSetByUser": 0,
 		"outputStyle": 1,
-		"syntaxCheckerStyle": 0
+		"syntaxCheckerStyle": 1
 		},
 	"\/_site\/js\/scroll.js": {
 		"fileType": 64,
-		"ignore": 1,
+		"ignore": 0,
 		"ignoreWasSetByUser": 0,
 		"inputAbbreviatedPath": "\/_site\/js\/scroll.js",
 		"outputAbbreviatedPath": "\/_site\/js\/min\/scroll-min.js",
 		"outputPathIsOutsideProject": 0,
 		"outputPathIsSetByUser": 0,
 		"outputStyle": 1,
-		"syntaxCheckerStyle": 0
+		"syntaxCheckerStyle": 1
 		},
 	"\/_site\/less\/default-settings.less": {
 		"allowInsecureImports": 0,
@@ -1610,6 +1612,26 @@
 		"strictMath": 0,
 		"strictUnits": 0
 		},
+	"\/less\/_ff-ui-button-with-dropdown.less": {
+		"allowInsecureImports": 0,
+		"createSourceMap": 0,
+		"disableJavascript": 0,
+		"fileType": 1,
+		"ieCompatibility": 1,
+		"ignore": 1,
+		"ignoreWasSetByUser": 0,
+		"inputAbbreviatedPath": "\/less\/_ff-ui-button-with-dropdown.less",
+		"outputAbbreviatedPath": "\/css\/_ff-ui-button-with-dropdown.css",
+		"outputPathIsOutsideProject": 0,
+		"outputPathIsSetByUser": 0,
+		"outputStyle": 0,
+		"relativeURLS": 0,
+		"shouldRunAutoprefixer": 0,
+		"shouldRunBless": 0,
+		"strictImports": 0,
+		"strictMath": 0,
+		"strictUnits": 0
+		},
 	"\/less\/_ff-ui-button.less": {
 		"allowInsecureImports": 0,
 		"createSourceMap": 0,

css/styles.css

@@ -877,6 +877,7 @@ table {
   position: absolute;
   width: 100%;
   right: -1px;
+  min-width: 160px;
   top: 100%;
   border: 1px solid #b4b4b4;
   background: #def1fa;
@@ -965,26 +966,26 @@ table {
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
 }
-.ff-mark-grid .ff-mark-grid-results .ff-mark-grid-results-body {
+.ff-mark-grid .ff-mark-grid-results .ff-mark-grid-header {
   overflow: hidden;
 }
 .ff-mark-grid .ff-mark-grid-results .ff-mark-grid-header ol > li {
   display: block;
   float: left;
-  width: 60px;
-  width: 3.75rem;
-  max-width: 60px;
-  max-width: 3.75rem;
+  width: 160px;
+  width: 10rem;
+  max-width: 160px;
+  max-width: 10rem;
 }
 .ff-mark-grid .ff-mark-grid-results .ff-mark-grid-results-body ol {
   float: left;
 }
 .ff-mark-grid .ff-mark-grid-results .ff-mark-grid-results-body ol > li {
   display: block;
-  width: 60px;
-  width: 3.75rem;
-  max-width: 60px;
-  max-width: 3.75rem;
+  width: 160px;
+  width: 10rem;
+  max-width: 160px;
+  max-width: 10rem;
 }
 .ff-mark-grid .ff-mark-grid-student {
   font-size: 16px;
@@ -1730,7 +1731,7 @@ table {
   border-width: 0 12px 12px 0;
   border-color: transparent #edeb56 transparent transparent;
 }
-.ff-mark-grid .ff-mark-grid-date {
+.ff-mark-grid .ff-mark-grid-task-title {
   text-align: center;
   display: block;
   cursor: context-menu;
@@ -1743,7 +1744,7 @@ table {
   -webkit-background-clip: padding-box;
   background-clip: padding-box;
 }
-.ff-mark-grid .ff-mark-grid-date:hover {
+.ff-mark-grid .ff-mark-grid-task-title:hover {
   color: #366797;
 }
 .ff-mark-grid .ff-mark-grid-student {
@@ -1947,18 +1948,18 @@ table {
 .ff-summary .ff-summary-excerpt {
   cursor: help;
 }
-.ff-button-with-dropdown {
+.ff-ui-button-with-dropdown {
   zoom: 1;
 }
-.ff-button-with-dropdown:after,
-.ff-button-with-dropdown:before {
+.ff-ui-button-with-dropdown:after,
+.ff-ui-button-with-dropdown:before {
   content: "";
   display: table;
 }
-.ff-button-with-dropdown:after {
+.ff-ui-button-with-dropdown:after {
   clear: both;
 }
-.ff-button-with-dropdown .ff-primary-action {
+.ff-ui-button-with-dropdown .ff-primary-action {
   float: left;
   border-right: none;
   -webkit-border-top-right-radius: 0;
@@ -1977,7 +1978,7 @@ table {
   -webkit-background-clip: padding-box;
   background-clip: padding-box;
 }
-.ff-button-with-dropdown .ff-secondary-actions {
+.ff-ui-button-with-dropdown .ff-secondary-actions {
   float: left;
   -webkit-border-top-right-radius: 2px;
   -webkit-border-bottom-right-radius: 2px;
@@ -1995,7 +1996,7 @@ table {
   -webkit-background-clip: padding-box;
   background-clip: padding-box;
 }
-.ff-button-with-dropdown .ff-secondary-actions.ff-dropdown .ff-dropdown-label {
+.ff-ui-button-with-dropdown .ff-secondary-actions.ff-ui-dropdown .ff-dropdown-label {
   display: none;
 }
 .ff-nav-filter {

js/mark-grid.js

@@ -7,6 +7,8 @@
     ---    
 */
 
+var ffMarkGrid_markBlockWidth = 160;
+
 var ffMarkGrid__isSmall = function(obj)
 {
     var breakpoint = 800;
@@ -42,7 +44,7 @@ var ffMarkGrid__fixHeader = function(obj)
             var objHeight = obj.outerHeight(false);
             var headerWidth = $('.ff-mark-grid-results',obj).outerWidth(false);	
             var totalTasks = obj.attr('data-ff-mark-grid-tasks'); 
-            var tasksWidth = 60 * totalTasks;
+            var tasksWidth = ffMarkGrid_markBlockWidth * totalTasks;
             if ($(window).scrollTop() > aboveHeight && $(window).scrollTop() < (aboveHeight + objHeight)) //fix header
             {
                 obj.addClass('ff-mark-grid-fixed-header');
@@ -76,7 +78,7 @@ var ffMarkGrid__fixHeader = function(obj)
 var ffMarkGrid__setWidth = function(obj)
 {
     totalTasks = obj.attr('data-ff-mark-grid-tasks');
-    width = 60 * totalTasks;
+    width = ffMarkGrid_markBlockWidth * totalTasks;
     $('.ff-mark-grid-results-wrapper').css('width',width);
 }
 var ffMarkGrid__releaseWidth = function(obj)
@@ -137,7 +139,7 @@ var ffMarkGrid__syncScrollPosition = function(obj)
 var ffMarkGrid__scrollTo = function(obj,direction,distance)
 {
     var target = $('.ff-mark-grid-results',obj);
-    var markWidth = 60;
+    var markWidth = ffMarkGrid_markBlockWidth;
     if(direction == 'forward')
     {
         target.animate({

less/_ff-mark-grid.less

@@ -1,5 +1,5 @@
 @ff_markbook_header_height: 80;
-@ff_makrbook_cell_width: 60;
+@ff_makrbook_cell_width: 160;
 
 
 @ff_markbok_cell_height: 54;
@@ -58,13 +58,11 @@
             //width: 6000px;//set by js
         }
 
-        .ff-mark-grid-results-body {
-            overflow: hidden;
-        }
-
         //header wrapper
         .ff-mark-grid-header {
 
+            overflow: hidden;
+
             ol > li {
                 display: block;
                 float: left;
@@ -241,8 +239,8 @@
     }
 
 
-    //date box
-    .ff-mark-grid-date {
+    //task title box
+    .ff-mark-grid-task-title {
         text-align: center;
         display: block;
         cursor: context-menu;

less/_ff-ui-button-with-dropdown.less

@@ -0,0 +1,24 @@
+// ------------------------------------------------------------- //
+// .ff-button-with-dropdown
+// ------------------------------------------------------------- //
+
+.ff-ui-button-with-dropdown {
+  #ff > .clearfix();
+
+  .ff-primary-action {
+    float: left;
+    border-right: none;
+    #ff > .border-radius(0,0,@ff_dashboard_rounded,@ff_dashboard_rounded);
+  }
+
+  .ff-secondary-actions {
+    float: left;
+    #ff > .border-radius(@ff_dashboard_rounded,@ff_dashboard_rounded,0,0);
+
+    &.ff-ui-dropdown .ff-dropdown-label {
+      display: none;
+    }
+
+  }
+
+}

less/_ff-ui-dropdown.less

@@ -21,6 +21,7 @@
     position: absolute;
     width: 100%;
     right:-1px;
+    min-width: 160px;
     top:100%;
     border:1px solid @ff_dashboard_c_border;
     background: @ff_dashboard_c_bg_secondary;

less/styles.less

@@ -343,7 +343,7 @@ i, em {
 @import "_ff-summary";
 
 
-@import "_ff-button-with-dropdown";
+@import "_ff-ui-button-with-dropdown";
 @import "_ff-nav-filter";
 @import "_ff-nav-filter";
 @import "_ff-panel";