Skip to content

Commit

Permalink
Update mobile view to resolve #547
Browse files Browse the repository at this point in the history
Includes:
- Allowing long titles, names to wrap
- Improving spacing, especially for action buttons/links
- Hiding homepage logo
- Shrinking tabs
- Removing extra br spaces
- Hiding anonymous button option
- Preventing auto-zoom for ckeditor
- Adding hr lines for answer pairs
- Adding menu text to hamburger icon
- Various non-mobile display fixes
  • Loading branch information
lenglund committed Sep 22, 2017
1 parent 363ee79 commit e190011
Show file tree
Hide file tree
Showing 11 changed files with 91 additions and 43 deletions.
5 changes: 5 additions & 0 deletions compair/static/less/assignment.less
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
93 changes: 65 additions & 28 deletions compair/static/less/mobile.less
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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
Expand Down Expand Up @@ -97,7 +130,7 @@
margin: .8em 0 .2em .4em;
}

}//closese evaluations-screen
}//closes evaluations-screen

.manage-screen {

Expand All @@ -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%;
Expand Down Expand Up @@ -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)
2 changes: 1 addition & 1 deletion compair/static/less/rich-content.less
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
}

.modal-content {
.each-attachment-content, .each-embeddable-content {
.each-embeddable-content {
border-left: none;
padding-left: 0em;
}
Expand Down
1 change: 1 addition & 0 deletions compair/static/less/variables_mixins.less
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@
}

.label {
margin: 0 .5em;
font-size: 100%;

.label-link {
Expand Down
15 changes: 8 additions & 7 deletions compair/static/modules/assignment/assignment-view-partial.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>

Expand Down
3 changes: 1 addition & 2 deletions compair/static/modules/comment/answer-content.html
Original file line number Diff line number Diff line change
@@ -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">
Expand Down
3 changes: 2 additions & 1 deletion compair/static/modules/comment/comment-form-partial.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
5 changes: 4 additions & 1 deletion compair/static/modules/common/form-directive.js
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,10 @@ module.service('EditorOptions', function() {
height: "150px",

// enable custom plugin that combines ASCIIMath and LaTeX math input and code highlighting
extraPlugins: 'codesnippet,combinedmath,autolink'
extraPlugins: 'codesnippet,combinedmath,autolink',

contentsCss: ["body {font-size: 16px !important}"]

};
});

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
4 changes: 2 additions & 2 deletions compair/static/modules/home/home-partial.html
Original file line number Diff line number Diff line change
Expand Up @@ -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) -->
Expand Down
2 changes: 1 addition & 1 deletion compair/static/modules/navbar/navbar-partial.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit e190011

Please sign in to comment.