Merge pull request #599 from ubc/#547-mobile-view

Update mobile view to resolve #547

compair/static/less/assignment.less

@@ -199,6 +199,11 @@
 
       padding: 1em 1em 2em 1em;
       border-bottom: 1px solid @border-gray;
+
+      /* your answer heading */
+      h3.first {  
+        margin-top:0;
+      }
 
       /* headings for comparison/feedback/self-evaluation inside each evaluation */
       h5 {

compair/static/less/mobile.less

@@ -6,17 +6,37 @@
 
 @media (max-width: 768px) {
 
-    /* each assignment's metadata */
-    .assignment-metadata-list {
-        text-align: center;
+    /* titles */
+    h1,
+    .standalone-assignment h2 {
+        word-wrap: break-word;
     }
 
     /* arrow for dropping assignment criteria */
     .fa-arrow-down.visible-xs {
         display: inline-block !important;
     }
+
+    /* action buttons (e.g., Answer, Compare Pairs) */
+    .action-btns {
+        margin: 1.5em 0 1em 0;
+    }
+
+    .login-screen {
+
+        /* login prompts */
+        h2 {
+            font-size: 1.3em;
+        }
+
+    }//closes login-screen
 
     .home-screen {
+
+        /* logo */
+        .compair-logo {
+            display: none;
+        }
 
         /* search box */
         .search-courses {
@@ -29,44 +49,57 @@
 
         /* assignment description content */
         .assignment-desc {
-
-            margin: 0;
-
-            > div {
+            
+            margin: 0 0 2em 0;
+            
+            div {
                 display: none;
             }
-
+            
         }//closes assignment-desc
 
-        /* right-aligned action buttons (e.g., Answer, Compare Pairs) */
-        .action-btns {
-            margin: 1.5em 0 1em 0;
-            text-align: left;
-        }
-
     }//closes course-screen
 
     .assignment-screen {
 
         /* multiple filters on top right of tabs */
         .multi-filters {
+
             text-align: left;
-        }
+
+            select {
+                width: 100%;
+            }
+
+        }//closes multi-filters
 
         /* edit/delete buttons and answer scores */
         .manager-actions,
         .score-display {
-            margin-bottom: 1.2em;
+            margin: 1.2em 0 1em 0;
         }
-
-        /* replies indented less */
-        .tab-content .each-reply {
-            margin-left: 2em;
+
+        /* navigation tab links */
+        .nav > li > a {
+            padding: 8px;
+            font-size: .8em;
         }
 
-        /* comment button */
-        .comment-btn {
-            text-align: center;
+        /* replies/peer feedback */
+        .tab-content .each-reply {
+
+            margin-left: 1.2em;
+
+            compair-avatar img {
+                display: none;
+            }
+
+        }//closes tab-content each-reply
+
+        /* answer score in paired viewing, instructor label */
+        .answer-choice .label,
+        .each-header .label {
+            font-size: .7em;
         }
 
     }//closes assignment-screen
@@ -97,7 +130,7 @@
             margin: .8em 0 .2em .4em;
         }
 
-    }//closese evaluations-screen
+    }//closes evaluations-screen
 
     .manage-screen {
 
@@ -124,14 +157,13 @@
 
     }//closes manage-screen
 
-
+    /* enable modal windows to fill screen */
     .modal-dialog {
         width: 100%;
         height: 100%;
         margin: 0;
         padding: 0;
     }
-
     .modal-content {
         height: auto;
         min-height: 100%;
@@ -181,16 +213,21 @@
 
 
 @media (max-width: 1200px) {
+
+    //nothing added yet
 
 }//closes 1200px
 
-// force selectable/editable content font size on mobile devises
+
+// force selectable/editable content font size on mobile devices
 // iPhone & Safari has autozoom features that do not zoom back out
 // autozooming only happens when the font-size in less than 16px
 @media screen and (-webkit-min-device-pixel-ratio:0) {
+
     select,
     textarea,
     input {
         font-size: 16px !important;
     }
-}//closes screen and -webkit-min-device-pixel-ratio:0
+
+}//closes screen and (-webkit-min-device-pixel-ratio:0)

compair/static/less/rich-content.less

@@ -15,7 +15,7 @@
 }
 
 .modal-content {
-    .each-attachment-content, .each-embeddable-content {
+    .each-embeddable-content {
         border-left: none;
         padding-left: 0em;
     }

compair/static/less/variables_mixins.less

@@ -72,6 +72,7 @@
   }
 
   .label {
+    margin: 0 .5em;
     font-size: 100%;
 
     .label-link {

compair/static/modules/assignment/assignment-view-partial.html

@@ -3,7 +3,7 @@
     <div class="row">
         <header class="col-sm-6">
             <h1>View Assignment</h1>
-            <br ng-if="!canManageAssignment" />
+            <br class="hidden-xs" ng-if="!canManageAssignment" />
         </header>
         <div class="col-sm-6 sub-nav">
             <span ng-if="canManageAssignment || assignment.user_id == loggedInUserId">
@@ -108,16 +108,16 @@ <h2><i class="fa fa-comments"></i> {{assignment.name}}</h2>
     <!-- Tabs -->
     <ul class="nav nav-tabs" role="tablist">
         <li id="answers" ng-class="{active:showTab('answers')}">
-            <a ng-click="setTab('answers')" href="">Answers <span ng-show="canManageAssignment || (!assignment.answer_period && see_answers)">({{answers.total}})</span></a>
+            <a ng-click="setTab('answers')" href="">Answers <span class="hidden-xs" ng-show="canManageAssignment || (!assignment.answer_period && see_answers)">({{answers.total}})</span></a>
         </li>
         <li ng-show="!canManageAssignment" id="your_work" ng-class="{active:showTab('your_work')}">
-            <a ng-click="setTab('your_work')" href="">Your Work + Feedback <span ng-if="assignment.status.answers.feedback">({{assignment.status.answers.feedback}})</span></a>
+            <a ng-click="setTab('your_work')" href="">Your Work + Feedback <span class="hidden-xs" ng-if="assignment.status.answers.feedback">({{assignment.status.answers.feedback}})</span></a>
         </li>
         <li ng-show="canManageAssignment" id="comparisons" ng-class="{active:showTab('comparisons')}">
-            <a ng-click="setTab('comparisons')" href="">Comparisons ({{totalNumComparisonsShown.count}})</span></a>
+            <a ng-click="setTab('comparisons')" href="">Comparisons <span class="hidden-xs">({{totalNumComparisonsShown.count}})</span></a>
         </li>
         <li id="comments" ng-class="{active:showTab('help')}">
-            <a ng-click="setTab('help')" href="">Help Comments ({{assignment.comment_count}})</a>
+            <a ng-click="setTab('help')" href=""><span class="hidden-xs">Help</span> Comments <span class="hidden-xs">({{assignment.comment_count}})</span></a>
         </li>
         <li ng-show="canManageAssignment" id="participation" ng-class="{active:showTab('participation')}">
             <a ng-click="setTab('participation')" href="">Participation</a>
@@ -163,7 +163,7 @@ <h2>Answers
                                     <option value="score" ng-if="!canManageAssignment">Answer rank</option>
                                 </select>
                             </span><br />
-                            <span class="filter" ng-if="canManageAssignment">
+                            <span class="filter hidden-xs" ng-if="canManageAssignment">
                                  <a href="" uib-tooltip="Hide student names, scores, and replies when sharing this screen with students" tooltip-trigger tooltip-animation="false" tooltip-placement="left">
                                     <i class="fa fa-question-circle"></i>
                                 </a>&nbsp;
@@ -406,7 +406,7 @@ <h2>Your work and feedback</h2>
 
             <!-- Student Answer Metadata Header -->
             <div class="each-evaluation clearfix" ng-repeat="answer in user_answers.objects">
-                <h3 ng-if="$first">Your answer and peer feedback</h3>
+                <h3 ng-if="$first" ng-class="{first: $first}">Your answer and peer feedback</h3>
                 <br ng-if="$first"/>
                 <div class="each-header clearfix">
                     <compair-avatar user-id="answer.user_id" avatar="answer.user.avatar" me="true"></compair-avatar>
@@ -502,6 +502,7 @@ <h5 class="content">Answer Pair</h5>
                     </a></p>
                     <div class="collapsible-content row" ng-show="showAnswers">
                         <compair-answer-content answer="comparison.answer1" is-chosen="comparison.winner == WinningAnswer.answer1" name="Odd-Numbered Answer" show-score="false"></compair-answer-content>
+                        <hr class="visible-xs-block" />
                         <compair-answer-content answer="comparison.answer2" is-chosen="comparison.winner == WinningAnswer.answer2" name="Even-Numbered Answer" show-score="false"></compair-answer-content>
                     </div>
 

compair/static/modules/comment/answer-content.html

@@ -1,7 +1,6 @@
 <div class="col-md-6">
     <div class="answer-choice clearfix">
-        <p class="h4"><strong><compair-logo type="'scale'"></compair-logo> {{ name }}
-            <span ng-show="isChosen">(Chosen)</span></strong>
+        <p class="h4"><strong><compair-logo type="'scale'"></compair-logo> {{ name }}</strong>
             <span ng-if="answer.score">
                 <span class="label label-warning pull-right score-display"
                     ng-if="answer && showScore">

compair/static/modules/comment/comment-form-partial.html

@@ -6,8 +6,9 @@
 
 <div ng-show="showAssignment" class="standalone-assignment">
     <h2 ng-if="parent.name"><i class="fa fa-comments"></i> {{parent.name}}</h2>
+    <rich-content ng-if="parent.name" content="parent.description" attachment="parent.file"></rich-content>
     <h2 ng-if="answerComment"><i class="fa fa-user"></i> {{parent.user.displayname}}'s Answer</h2>
-    <rich-content content="parent.content" attachment="parent.file"></rich-content>
+    <rich-content ng-if="answerComment" content="parent.content" attachment="parent.file"></rich-content>
 </div>
 
 <form name="commentForm" class="form" ng-submit="commentSubmit()" confirm-form-exit novalidate form-type="comment">

compair/static/modules/common/form-directive.js

@@ -148,6 +148,7 @@ module.service('EditorOptions', function() {
 
         // enable custom plugin that combines ASCIIMath and LaTeX math input and code highlighting
         extraPlugins: 'codesnippet,combinedmath,autolink'
+
     };
 });
 

compair/static/modules/comparison/comparison-view-partial.html

@@ -82,6 +82,7 @@ <h5 class="content">Answer Pair</h5>
 
                 <div class="row collapsible-content" ng-show="showAnswers">
                     <compair-answer-content answer="comparison.answer1" is-chosen="comparison.winner == WinningAnswer.answer1" name="Odd-Numbered Answer" show-score="true"></compair-answer-content>
+                    <hr class="visible-xs-block" />
                     <compair-answer-content answer="comparison.answer2" is-chosen="comparison.winner == WinningAnswer.answer2" name="Even-Numbered Answer" show-score="true"></compair-answer-content>
                 </div>
 

compair/static/modules/home/home-partial.html

@@ -74,10 +74,10 @@ <h3 class="media-heading">
                         <!-- number of unfinished assignments for student user that can still be completed for each course, i.e.,
                              the student has not answered && the answer period is active ||
                              the student has not compared/self-eval'ed && the compare/eval period is active -->
-                        <li ng-if="course.status && course.status.incomplete_assignments > 0" title="{{course.status.incomplete_assignments}} unfinished">
+                        <li ng-if="course.status && course.status.incomplete_assignments > 0 && !course.canManageAssignment" title="{{course.status.incomplete_assignments}} unfinished">
                             <label class="label label-warning">{{course.status.incomplete_assignments}} assignment<span ng-if="course.status.incomplete_assignments != 1">s</span> to do</label>
                         </li>
-                        <li ng-if="course.status && course.status.incomplete_assignments == 0" title="{{course.status.incomplete_assignments}} unfinished">
+                        <li ng-if="course.status && course.status.incomplete_assignments == 0 && !course.canManageAssignment" title="{{course.status.incomplete_assignments}} unfinished">
                             No assignments to do
                         </li>
                         <!-- Total Users (instructors only) -->

compair/static/modules/navbar/navbar-partial.html

@@ -5,7 +5,7 @@
                 <!-- Button to expand menu when navbar is collapsed on small displays -->
                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#compair-navbar-collapse" ng-click="isCollapsed = !isCollapsed">
                     <span class="sr-only">Show Navigation Menu</span>
-                    <i class="fa fa-bars"></i>
+                    <i class="fa fa-bars"></i> Menu
                 </button>
                 <a class="navbar-brand" href="#/" title="ComPAIR Home"><compair-logo type="'small'"></compair-logo></a>
             </div>

compair/templates/index-dev.html

@@ -83,6 +83,7 @@
             // config CKEDITOR
             CKEDITOR.plugins.addExternal( 'combinedmath', '/app/lib_extension/ckeditor/plugins/combinedmath/' );
             CKEDITOR.plugins.addExternal( 'autolink', '/app/lib_extension/ckeditor/plugins/autolink/' );
+            CKEDITOR.addCss( '@media screen and (-webkit-min-device-pixel-ratio:0) { .cke_editable { font-size: 16px !important; } }' );
             CKEDITOR.on('dialogDefinition', function(ev) {
                 var dialogName = ev.data.name;
                 var dialog = ev.data.definition.dialog;

compair/templates/index.html

@@ -39,6 +39,7 @@
             // config CKEDITOR
             CKEDITOR.plugins.addExternal( 'combinedmath', '/app/lib_extension/ckeditor/plugins/combinedmath/' );
             CKEDITOR.plugins.addExternal( 'autolink', '/app/lib_extension/ckeditor/plugins/autolink/' );
+            CKEDITOR.addCss( '@media screen and (-webkit-min-device-pixel-ratio:0) { .cke_editable { font-size: 16px !important; } }' );
             CKEDITOR.on('dialogDefinition', function(ev) {
                 var dialogName = ev.data.name;
                 var dialog = ev.data.definition.dialog;