ylqjgm
/
canvas-lms
mirror of https://github.com/instructure/canvas-lms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

empty item group styles 

closes CNVS-7708

test plan:
- look at the style for empty groups on:
  * assignment index page with an empty assignment group
  * quiz index page with 0 quizzes
  * quiz index page with quizzes but 0 search results
- it should look good, and match the mockup

Change-Id: Ief100f17dbd03793d8347d7ec7cc39ef8c989b62
Reviewed-on: https://gerrit.instructure.com/23668
Tested-by: Jenkins <jenkins@instructure.com>
QA-Review: Amber Taniuchi <amber@instructure.com>
Reviewed-by: Ryan Florence <ryanf@instructure.com>
Product-Review: Simon Williams <simon@instructure.com>
This commit is contained in:
Simon Williams 2013-08-22 14:42:02 -06:00
parent bfac0e5f11
commit 9b970fe140
8 changed files with 103 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/coffeescripts/views/quizzes/QuizItemGroupView.coffee
View File

@ -30,7 +30,7 @@ define [
render: ->
super
@$el.find('.ig-no-content').toggle(@isEmpty())
@$el.find('.no_content').toggle(@isEmpty())
@
renderItem: (model) =>

34
app/stylesheets/utilities/_item-groups-condensed.scss
View File

@ -149,6 +149,25 @@ color with a dashed line between groups.
</ul>
</div>
<div class="item-group-condensed">
<h2 class="ig-header">
<a class="ig-header-title element_toggler" href="#"
aria-controls="cond_group_3"
aria-expanded="true">
<i class="icon-mini-arrow-down"></i> Item Group Header
</a>
</h2>
<ul class="ig-list" id="cond_group_3">
<li>
<div class="ig-row ig-row-empty">
<div class="ig-empty-msg">
No assignments in this Group
</div>
</div>
</li>
</ul>
</div>
</div>
```
@ -157,6 +176,7 @@ color with a dashed line between groups.
body.with_item_groups #main {
background-color: #e8ecef;
}
.item-group-container {
background-color: $wellBackground;
padding-bottom: 70px;
@ -165,6 +185,7 @@ body.with_item_groups #main {
border-bottom: 1px dashed #c2c8d0;
padding: 15px;
}
.item-group-condensed:last-child,
.item-group-condensed.last {
border-bottom: 0;
@ -173,12 +194,12 @@ body.with_item_groups #main {
.ig-list {
margin-top: 0;
}
.ig-list li {
margin: 0;
}
}
.item-group-condensed {
padding: 9px;
@ -196,17 +217,28 @@ body.with_item_groups #main {
border-radius: 0;
background: #fff;
}
.ig-list li:first-child {
margin-top: 5px;
}
.ig-list li:first-child .ig-row {
border-top: 1px solid #c1c7cf;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
&.ig-row-empty {
border-top: 1px solid #dcdee0;
}
}
.ig-list li:last-child .ig-row {
border-bottom: 1px solid #c1c7cf;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
&.ig-row-empty {
border-bottom: 1px solid #dcdee0;
}
}
}

43
app/stylesheets/utilities/_item-groups.scss
View File

@ -121,7 +121,25 @@ is for items that are not draggable.
</div>
</li>
</ul>
</div>
<div class="item-group">
<h2 class="ig-header">
<a class="ig-header-title element_toggler" href="#"
aria-controls="group_2"
aria-expanded="true">
<i class="icon-mini-arrow-down"></i> Item Group Header
</a>
</h2>
<ul class="ig-list" id="group_2">
<li>
<div class="ig-row ig-row-empty">
<div class="ig-empty-msg">
No assignments in this Group
</div>
</div>
</li>
</ul>
</div>
```
@ -218,8 +236,20 @@ is for items that are not draggable.
&.ig-published .ig-title {
color: #34832b;
}
}
&.ig-row-empty {
height: 30px;
background: #f3f6f7;
border: 1px solid #dcdee0;
box-shadow: none;
}
.ig-empty-msg {
color: #676b6e;
text-align: center;
padding: 5px;
}
}
.ig-title {
position: absolute;
@ -277,14 +307,3 @@ is for items that are not draggable.
color: #3d454c;
font-size: 15px;
}
.ig-no-content {
height: 20px;
margin-top: 5px;
border: 1px dashed #c1c7cf;
border-radius: 3px;
background: #fff;
padding: 10px 17px;
color: #878d92;
line-height: 20px;
}

8
app/views/jst/assignments/AssignmentGroupListItem.handlebars
View File

@ -67,10 +67,10 @@
{{else}}
<ul class="ig-list">
<li>
<div class="ig-row">
<span class="ig-title ellipses">
{{#t "no_assignments"}}No assignments{{/t}}
</span>
<div class="ig-row ig-row-empty">
<div class="ig-empty-msg">
{{#t "no_assignments_in_this_group"}}No assignments in this group{{/t}}
</div>
</div>
</li>
</ul>

15
app/views/jst/quizzes/NoQuizzesView.handlebars
View File

@ -1,6 +1,13 @@
<h2 class="ig-header">
<i class="icon-mini-arrow-right"></i> {{#t "headers.course_quizzes"}}Course Quizzes{{/t}}
<i class="icon-mini-arrow-down"></i> {{#t "headers.course_quizzes"}}Course Quizzes{{/t}}
</h2>
<div class="ig-no-content">
{{#t "no_quizzes"}}No quizzes available{{/t}}
</div>
<ul class="ig-list">
<li>
<div class="ig-row ig-row-empty">
<div class="ig-empty-msg">
{{#t "no_quizzes"}}No quizzes available{{/t}}
</div>
</div>
</li>
</ul>

20
app/views/jst/quizzes/QuizItemGroupView.handlebars
View File

@ -8,10 +8,16 @@
<ul id="{{listId}}" class="ig-list collectionViewItems"></ul>
<div class="ig-no-content">
{{#if isSurvey}}
{{#t "no_surveys"}}There are no surveys to show.{{/t}}
{{else}}
{{#t "no_quizzes"}}There are no quizzes to show.{{/t}}
{{/if}}
</div>
<ul class="ig-list no_content">
<li>
<div class="ig-row ig-row-empty">
<div class="ig-empty-msg">
{{#if isSurvey}}
{{#t "no_surveys"}}No surveys found{{/t}}
{{else}}
{{#t "no_quizzes"}}No quizzes found{{/t}}
{{/if}}
</div>
</div>
</li>
</ul>

6
spec/coffeescripts/views/quizzes/IndexViewSpec.coffee
View File

@ -108,7 +108,7 @@ define [
open = new QuizCollection([{id: 3, title: 'Foo Title'}, {id: 4, title: 'Bar Title'}])
view = indexView(assignments, open)
equal view.$el.find('.item-group-condensed li').length, 4
equal view.$el.find('.collectionViewItems li').length, 4
test 'should filter by search term', ->
assignments = new QuizCollection([{id: 1, title: 'Foo Name'}, {id: 2, title: 'Bar Title'}])
@ -117,12 +117,12 @@ define [
view = indexView(assignments, open)
$('#searchTerm').val('foo')
view.filterResults()
equal view.$el.find('.item-group-condensed li').length, 1
equal view.$el.find('.collectionViewItems li').length, 1
view = indexView(assignments, open)
$('#searchTerm').val('name')
view.filterResults()
equal view.$el.find('.item-group-condensed li').length, 2
equal view.$el.find('.collectionViewItems li').length, 2
test 'should filter models with title that doesnt match term', ->
view = indexView()

14
spec/coffeescripts/views/quizzes/QuizItemGroupViewSpec.coffee
View File

@ -36,23 +36,23 @@ define [
test 'should rerender on :hidden change', ->
collection = new QuizCollection([{id: 1}, {id: 2}])
view = createView(collection)
equal view.$el.find('.ig-list li').length, 2
equal view.$el.find('.collectionViewItems li').length, 2
quiz = collection.get(1)
quiz.set('hidden', true)
equal view.$el.find('.ig-list li').length, 1
equal view.$el.find('.collectionViewItems li').length, 1
test 'should not render no-content message if quizzes are available', ->
test 'should not render no content message if quizzes are available', ->
collection = new QuizCollection([{id: 1}, {id: 2}])
view = createView(collection)
equal view.$el.find('.ig-list li').length, 2
ok !view.$el.find('.ig-no-content').is(':visible')
equal view.$el.find('.collectionViewItems li').length, 2
ok !view.$el.find('.no_content').is(':visible')
test 'should render no content message if no quizzes available', ->
collection = new QuizCollection([])
view = createView(collection)
equal view.$el.find('.ig-list li').length, 0
ok view.$el.find('.ig-no-content').is(':visible')
equal view.$el.find('.collectionViewItems li').length, 0
ok view.$el.find('.no_content').is(':visible')
test 'clicking the header should toggle arrow state', ->