FIX: make project view(s) properly responsive

doubtfire-lms · Mar 11, 2016 · 19162ce · 19162ce
1 parent 8d68a68
commit 19162ce
Show file tree

Hide file tree

Showing 6 changed files with 123 additions and 90 deletions.
diff --git a/src/app/projects/project-outcome-alignment/project-outcome-alignment.tpl.html b/src/app/projects/project-outcome-alignment/project-outcome-alignment.tpl.html
@@ -1,5 +1,6 @@
 <div>
-  <tabset class="task-feedback-tab-selector pull-left col-md-2" vertical="true" type="pills">
+  <div style="margin-bottom:15px;">
+  <tabset class="task-feedback-tab-selector col-md-2" vertical="true" type="pills">
     <tab ng-click="selectTab('progress')">
       <tab-heading tooltip="View learning progress" tooltip-placement="right" tooltip-popup-delay="200">
         <div class="text-center">
@@ -15,6 +16,8 @@
       </tab-heading>
     </tab>
   </tabset><!--/tab-selector-->
+</div>
+
   <div class="col-md-10">
     <div ng-show="poaView.activeTab == 'progress'">
       <div class="panel panel-primary">

diff --git a/src/app/projects/project-portfolio-wizard/project-portfolio-wizard.tpl.html b/src/app/projects/project-portfolio-wizard/project-portfolio-wizard.tpl.html
@@ -1,5 +1,5 @@
-<div>
-  <tabset class="pull-left col-md-2" vertical="true" type="pills">
+
+  <tabset class="col-md-2" vertical="true" type="pills">
     <tab ng-repeat="(tabKey, tab) in portfolioTabsData | orderObjectBy: 'seq'" active="tab.active" select="setActivePortfolioTab(tab)">
       <tab-heading tooltip-html-unsafe="<strong>Step {{tab.seq}}</strong><br>{{tab.title}}" tooltip-placement="right" tooltip-popup-delay="200">
         <div class="text-center">
@@ -16,7 +16,6 @@ <h3 class="panel-title">Preparing Your Portfolio</h3>
             Welcome to the portfolio creation wizard
         </div>
         <div class="panel-body">
-          <div class="col-xs-12">
             <p>Preparing your portfolio involves 6 steps:</p>
             <ol>
               <li>Select your <strong>Grade</strong> you are applying for</li>
@@ -29,7 +28,6 @@ <h3 class="panel-title">Preparing Your Portfolio</h3>
             <p>
               Once you have completed all of these steps, your portfolio will be prepared by Doubtfire and you will be notified when it is ready. You can then check your work, and if you want to make any corrections you can repeat these steps to create a new version of your portfolio.
             </p>
-          </div>
         </div>
         <div class="panel-footer">
           <div class="text-right">
@@ -48,4 +46,3 @@ <h3 class="panel-title">Preparing Your Portfolio</h3>
       <portfolio-files></portfolio-files>
     </div>
   </div><!--/tabs-->
-</div>
diff --git a/src/app/projects/project-progress-dashboard/project-progress-dashboard.tpl.html b/src/app/projects/project-progress-dashboard/project-progress-dashboard.tpl.html
@@ -1,13 +1,17 @@
 <div ng-if="unitLoaded">
-  <div class="row">
-    <div class="col-lg-4 col-lg-push-8">
-      <div class="col-xs-12">
+
+  <div class="col-lg-4 col-lg-push-8">
+
+    <div class="row">
+      <div class="col-sm-6 col-lg-12">
+
         <div class="panel panel-primary">
           <div class="panel-heading clearfix">
             <div class="pull-left">
               <h4 class="panel-title">Task List</h4>
               <div ng-hide="taskDetailsSelector.viewAll">The tasks you need to focus on now.</div>
-              <div ng-show="taskDetailsSelector.viewAll">All of the tasks to achieve a {{grades[project.target_grade]}}.</div>
+              <div ng-show="taskDetailsSelector.viewAll">All of the tasks to achieve a
+                {{grades[project.target_grade]}}.</div>
             </div>
             <div class="pull-right">
               <div class="btn-group pull-right">
@@ -25,8 +29,9 @@ <h4 class="panel-title">Task List</h4>
             <project-top-tasks-list on-select="showTaskView" project="project" ng-hide="taskDetailsSelector.viewAll"></project-top-tasks-list>
           </div>
         </div>
-      </div><!--task-lists-->
-      <div class="col-xs-12">
+        <!--task-lists-->
+      </div>
+      <div class="col-sm-6 col-lg-12">
         <div class="panel panel-default">
           <div class="panel-heading">
             <h3 class="panel-title">Target Grade</h3>
@@ -39,55 +44,70 @@ <h3 class="panel-title">Target Grade</h3>
               </label>
             </p>
             <p class="help-block">
-              You target grade is <strong>{{grades[project.target_grade]}}</strong>.
+              You target grade is
+              <strong>{{grades[project.target_grade]}}</strong>.
             </p>
           </div>
         </div>
-      </div><!--target-grade-->
-    </div><!--right-hand-panel-->
-    <div class="col-lg-8 col-lg-pull-4">
-      <div class="col-xs-12">
-        <div class="panel panel-default">
-          <div class="panel-heading clearfix">
-            <div class="pull-left">
-              <div ng-show="currentVisualisation == 'burndown'">
-                <h3 class="panel-title">Burndown Chart</h3>
-                The Burndown chart shows how much work remains for you to achieve your target grade.
-              </div>
-              <div ng-show="currentVisualisation == 'taskSummary'">
-                <h3 class="panel-title">Task Summary Chart</h3>
-                Summary of each of your task statuses
-              </div>
-            </div><!--/headings-->
-            <div class="pull-right text-right">
-              <div class="btn-group">
-                <label class="btn btn-default text-center" btn-radio="'burndown'" ng-model="currentVisualisation">
-                  <i class="fa fa-line-chart"></i>
-                </label>
-                <label class="btn btn-default text-center" btn-radio="'taskSummary'" ng-model="currentVisualisation">
-                  <i class="fa fa-pie-chart"></i>
-                </label>
-              </div>
-            </div><!--/button-switch-->
+      </div>
+    </div>
+
+  </div>
+  <!--right-hand-panel-->
+
+  <div class="col-lg-8 col-lg-pull-4">
+    <div class="panel panel-default">
+      <div class="panel-heading clearfix">
+        <div class="pull-left">
+          <div ng-show="currentVisualisation == 'burndown'">
+            <h3 class="panel-title">Burndown Chart</h3>
+            The Burndown chart shows how much work remains for you to achieve your target grade.
           </div>
-          <div class="panel-body">
-            <div class="burndown-chart" ng-if="currentVisualisation == 'burndown'">
-              <progress-burndown-chart project="project" unit="unit"></progress-burndown-chart>
-            </div>
-            <div ng-if="currentVisualisation == 'taskSummary'">
-              <student-task-status-pie-chart project="project"></student-task-status-pie-chart>
-            </div>
+          <div ng-show="currentVisualisation == 'taskSummary'">
+            <h3 class="panel-title">Task Summary Chart</h3>
+            Summary of each of your task statuses
           </div>
-          <div class="panel-footer text-center">
-            <div ng-show="currentVisualisation == 'taskSummary'">
-              You have completed <strong>{{taskStats.numberOfTasksCompleted}}</strong> tasks and have <strong>{{taskStats.numberOfTasksRemaining}}</strong> left to complete to achieve a <strong>{{grades[project.target_grade]}}</strong>.
-            </div>
-            <div ng-show="currentVisualisation == 'burndown'">
-              Aim to keep your <strong style="color: #e01b5d">Complete</strong> line close to or ahead of the <strong class="text-muted">Target</strong> line to keep on track.
-            </div>
+        </div>
+        <!--/headings-->
+        <div class="pull-right text-right">
+          <div class="btn-group">
+            <label class="btn btn-default text-center" btn-radio="'burndown'" ng-model="currentVisualisation">
+              <i class="fa fa-line-chart"></i>
+            </label>
+            <label class="btn btn-default text-center" btn-radio="'taskSummary'" ng-model="currentVisualisation">
+              <i class="fa fa-pie-chart"></i>
+            </label>
           </div>
         </div>
+        <!--/button-switch-->
+      </div>
+      <div class="panel-body">
+        <div class="burndown-chart" ng-if="currentVisualisation == 'burndown'">
+          <progress-burndown-chart project="project" unit="unit"></progress-burndown-chart>
+        </div>
+        <div ng-if="currentVisualisation == 'taskSummary'">
+          <student-task-status-pie-chart project="project"></student-task-status-pie-chart>
+        </div>
+      </div>
+      <div class="panel-footer text-center">
+        <div ng-show="currentVisualisation == 'taskSummary'">
+          You have completed
+          <strong>{{taskStats.numberOfTasksCompleted}}</strong>
+          tasks and have
+          <strong>{{taskStats.numberOfTasksRemaining}}</strong>
+          left to complete to achieve a
+          <strong>{{grades[project.target_grade]}}</strong>.
+        </div>
+        <div ng-show="currentVisualisation == 'burndown'">
+          Aim to keep your
+          <strong style="color: #e01b5d">Complete</strong>
+          line close to or ahead of the
+          <strong class="text-muted">Target</strong>
+          line to keep on track.
+        </div>
       </div>
-    </div><!--primary-panel-->
+    </div>
   </div>
+  <!--primary-panel-->
+
 </div>
diff --git a/src/app/projects/project-viewer/project-viewer.tpl.html b/src/app/projects/project-viewer/project-viewer.tpl.html
@@ -22,11 +22,13 @@ <h2 ng-show="fullscreen">
         </tab-heading>
       </tab>
     </tabset><!--tabs-->
-    <project-progress-dashboard ng-if="activeTab === tabs.progressTab"></project-progress-dashboard>
-    <task-viewer ng-if="activeTab === tabs.tasksTab" unit="unit" project="project" assessing-unit-role="assessingUnitRole"></task-viewer>
-    <student-group-manager ng-if="activeTab === tabs.groupTab"></student-group-manager>
-    <project-lab-list ng-if="activeTab === tabs.tutorialTab"></project-lab-list>
-    <project-outcome-alignment ng-if="activeTab === tabs.learningOutcomeTab"></project-outcome-alignment>
-    <project-portfolio-wizard ng-if="activeTab === tabs.portfolioTab" project="project"></project-portfolio-wizard>
+    <div class="row">
+      <project-progress-dashboard ng-if="activeTab === tabs.progressTab"></project-progress-dashboard>
+      <task-viewer ng-if="activeTab === tabs.tasksTab" unit="unit" project="project" assessing-unit-role="assessingUnitRole"></task-viewer>
+      <student-group-manager ng-if="activeTab === tabs.groupTab"></student-group-manager>
+      <project-lab-list ng-if="activeTab === tabs.tutorialTab"></project-lab-list>
+      <project-outcome-alignment ng-if="activeTab === tabs.learningOutcomeTab"></project-outcome-alignment>
+      <project-portfolio-wizard ng-if="activeTab === tabs.portfolioTab" project="project"></project-portfolio-wizard>
+    </div>
   </div><!--/content-->
 </div>
diff --git a/src/app/tasks/task-viewer/task-viewer.less b/src/app/tasks/task-viewer/task-viewer.less
@@ -71,3 +71,11 @@
     .dropdown-selector;
   }
 }
+
+
+.task-viewer-tabs {
+  li {
+    text-align:center!important;
+    width:100%;
+  }
+}
diff --git a/src/app/tasks/task-viewer/task-viewer.tpl.html b/src/app/tasks/task-viewer/task-viewer.tpl.html
@@ -1,4 +1,5 @@
 <div class="task-viewer">
+<div class="col-xs-12">
   <div class="task-viewer-toolbar clearfix">
     <div class="btn-group dropdown active-task-selector col-sm-1" dropdown>
       <button class="btn task-status {{activeStatusData().class}} dropdown-toggle" dropdown-toggle>
@@ -47,35 +48,37 @@ <h3>{{project.selectedTask.definition.name}}</h3>
         trigger-transition="triggerTransition"></task-status-selector>
     </div><!--/active-task-status-selector-->
   </div><!--/task-toolbar-->
+</div>
 
-  <div class="task-viewer-tabs">
-    <tabset class="task-viewer-tab-selector pull-left col-md-2" vertical="true" type="pills">
-      <tab ng-repeat="(tabKey, tab) in tabs | orderObjectBy: 'seq'" active="tab.active" ng-click="setActiveTab(tab)">
-        <tab-heading tooltip="{{tab.title}}" tooltip-placement="right" tooltip-popup-delay="200">
-          <div class="text-center">
-            <i class="fa fa-2x {{tab.icon}}" style="margin-right: 1ex"></i>
-            <i class="fa fa-2x fa-warning" ng-class="{ 'text-warning': !isActiveTab(tab) }" ng-show="tab == tabs.plagiarismReport && project.selectedTask.similar_to_count > 0"></i>
-          </div>
-        </tab-heading>
-      </tab>
-    </tabset><!--/tab-selector-->
 
-    <div class="col-md-10 pull-right task-viewer-tab-contents">
-      <div class="panel panel-primary">
-        <div class="panel-heading row-fluid">
-          <h3 class="panel-title">
-            {{activeTab.title}}
-          </h3>
-          {{activeTab.subtitle}}
-        </div>
-        <div class="task-viewer-tab-panel">
-          <task-sheet-viewer task="project.selectedTask" project="project" unit="unit" ng-if="activeTab == tabs.taskSheet"></task-sheet-viewer>
-          <task-submission-wizard task="project.selectedTask" project="project" unit="unit" assessing-unit-role="assessingUnitRole" ng-if="activeTab == tabs.fileUpload"></task-submission-wizard>
-          <task-submission-viewer ng-show="activeTab == tabs.viewSubmission" project="project" task="project.selectedTask"></task-submission-viewer>
-          <task-comments-viewer ng-show="activeTab == tabs.viewComments" project="project" task="project.selectedTask"></task-comments-viewer>
-          <task-plagiarism-report-viewer task="project.selectedTask" ng-if="activeTab == tabs.plagiarismReport"></task-plagiarism-report-viewer>
-        </div><!--/panel-body-area-->
-      </div><!--/tab-contents-panel-->
-    </div><!--/tab-contents-->
-  </div><!--/tab-feedback-tabs-->
-</div>
+  <div class="col-sm-2 col-lg-1 task-viewer-tabs">
+
+      <tabset vertical="false" type="pills">
+        <tab ng-repeat="(tabKey, tab) in tabs | orderObjectBy: 'seq'" active="tab.active" ng-click="setActiveTab(tab)">
+          <tab-heading class="text-center" tooltip="{{tab.title}}" tooltip-placement="right" tooltip-popup-delay="200">
+
+              <i class="fa fa-2x {{tab.icon}}"></i>
+              <i class="fa fa-2x fa-warning" ng-class="{ 'text-warning': !isActiveTab(tab) }" ng-show="tab == tabs.plagiarismReport && project.selectedTask.similar_to_count > 0"></i>
+
+          </tab-heading>
+        </tab>
+      </tabset>
+  </div>
+
+  <div class="col-sm-10 col-lg-11" class="class-viewer-tab-contents">
+    <div class="panel panel-primary">
+      <div class="panel-heading row-fluid">
+        <h3 class="panel-title">
+          {{activeTab.title}}
+        </h3>
+        {{activeTab.subtitle}}
+      </div>
+      <div class="task-viewer-tab-panel">
+        <task-sheet-viewer task="project.selectedTask" project="project" unit="unit" ng-if="activeTab == tabs.taskSheet"></task-sheet-viewer>
+        <task-submission-wizard task="project.selectedTask" project="project" unit="unit" assessing-unit-role="assessingUnitRole" ng-if="activeTab == tabs.fileUpload"></task-submission-wizard>
+        <task-submission-viewer ng-show="activeTab == tabs.viewSubmission" project="project" task="project.selectedTask"></task-submission-viewer>
+        <task-comments-viewer ng-show="activeTab == tabs.viewComments" project="project" task="project.selectedTask"></task-comments-viewer>
+        <task-plagiarism-report-viewer task="project.selectedTask" ng-if="activeTab == tabs.plagiarismReport"></task-plagiarism-report-viewer>
+      </div><!--/panel-body-area-->
+    </div><!--/tab-contents-panel-->
+  </div>