Skip to content

Commit

Permalink
Fix oppia#2985: Introduce collection learner view mobile version (opp…
Browse files Browse the repository at this point in the history
…ia#3197)

* collection view mobile version

* fix linting errors

* changes to match mocks

* Made suggested changes

* Made suggested changes

* fixed flipped mobile behaviour
  • Loading branch information
Kevin Thomas authored and seanlip committed Mar 29, 2017
1 parent 3bebb88 commit 5ae40fe
Show file tree
Hide file tree
Showing 9 changed files with 430 additions and 81 deletions.
1 change: 1 addition & 0 deletions assets/i18n/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -198,6 +198,7 @@
"I18N_PLAYER_LOADING": "Loading...",
"I18N_PLAYER_NO_OBJECTIVE": "No objective specified.",
"I18N_PLAYER_NO_TAGS": "No tags specified.",
"I18N_PLAYER_PLAY_EXPLORATION": "Play Exploration",
"I18N_PLAYER_PLUS_TAGS": "<[additionalTagNumber]>+ more tags",
"I18N_PLAYER_PREVIOUS_RESPONSES": "Previous responses (<[previousResponses]>)",
"I18N_PLAYER_RATE_EXPLORATION": "Learned something new? How would you rate this exploration?",
Expand Down
1 change: 1 addition & 0 deletions assets/i18n/hi.json
Original file line number Diff line number Diff line change
Expand Up @@ -198,6 +198,7 @@
"I18N_PLAYER_LOADING": "लोड हो रहा है...",
"I18N_PLAYER_NO_OBJECTIVE": "कोई मुद्दा नहीं निर्दिष्ट।",
"I18N_PLAYER_NO_TAGS": "कोई टैग्स नहीं जुड़े है।",
"I18N_PLAYER_PLAY_EXPLORATION": "एक्सप्लोरशन प्ले करे।",
"I18N_PLAYER_PLUS_TAGS": "<[additionalTagNumber]>+ अधिक टैग",
"I18N_PLAYER_PREVIOUS_RESPONSES": "पिछले प्रतिक्रियाएं (<[previousResponses]>)",
"I18N_PLAYER_RATE_EXPLORATION": "आपने कुछ नया सीखा ? आप इस एक्सप्लोरशन को कैसे रेटिंग देंगे ?",
Expand Down
1 change: 1 addition & 0 deletions assets/i18n/qqq.json
Original file line number Diff line number Diff line change
Expand Up @@ -198,6 +198,7 @@
"I18N_PLAYER_LOADING": "Text displayed in the middle of the page while the content is being loaded.\n{{Identical|Loading}}",
"I18N_PLAYER_NO_OBJECTIVE": "Text displayed when the user is playing an exploration. - When the user clicks the information button, a dialog opens with further information. This text is shown in that dialog when the author has not entered a description for the exploration.",
"I18N_PLAYER_NO_TAGS": "Text displayed when the user is playing an exploration. - When the user clicks the information button, a dialog opens with further information. This text is shown in that dialog when the exploration has no tags.",
"I18N_PLAYER_PLAY_EXPLORATION": "Text displayed when the user selects a icon in the collection learner view for mobile, when the user clicks this text the corresponding exploration page is loaded",
"I18N_PLAYER_PLUS_TAGS": "{{doc-important|do not translate the parameter \"<[additionalTagNumber]>\"}}\nText displayed when the user is playing an exploration. - When the user clicks the information button, a dialog opens with further information. This text is shown in that dialog when the exploration has more tags that don't fit in the dialog.",
"I18N_PLAYER_PREVIOUS_RESPONSES": "Text displayed when the user is playing an exploration. - In the dialog between Oppia and the user, when the user clicks this text a list with the previous responses the user gave to a question is open.",
"I18N_PLAYER_RATE_EXPLORATION": "Text displayed when the user is playing an exploration. - Text shown when the user finishes playing an exploration. On the bottom of the text, five stars appear for the user to give a rate to the exploration",
Expand Down
185 changes: 185 additions & 0 deletions assets/images/general/mobile_path_segment.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,9 @@ oppia.directive('explorationSummaryTile', [function() {
// summary tile is clicked.
openInNewWindow: '@openInNewWindow',
isCommunityOwned: '&isCommunityOwned',
// If this is not undefined, collection preview tile for mobile
// will be displayed.
isCollectionPreviewTile: '@isCollectionPreviewTile',
// If the screen width is below the threshold defined here, the mobile
// version of the summary tile is displayed. This attribute is optional:
// if it is not specified, it is treated as 0, which means that the
Expand Down
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
<script type="text/ng-template" id="summaryTile/exploration">
<md-card class="oppia-activity-summary-tile" ng-class="{'small-width': !isWindowLarge}">
<md-card ng-class="[isCollectionPreviewTile ? 'oppia-activity-summary-tile-mobile' : 'oppia-activity-summary-tile', {'small-width': !isWindowLarge}]">
<a ng-href="<[getExplorationLink()]>" target="<[openInNewWindow ? '_blank' : '_self']>">
<div class="title-section" style="background-color: <[getThumbnailBgColor()]>;">
<img class="thumbnail-image" ng-src="<[getThumbnailIconUrl()]>" alt="<[getCategory()]>">
<h3 class="activity-title protractor-test-exp-summary-tile-title">
<span ng-if="isWindowLarge"><[getExplorationTitle()|truncate:40]></span>
<span ng-if="!isWindowLarge"><[getExplorationTitle()|truncate:40]></span>
</h3>

<!-- Note that if this is ng-if instead, the avatar area will not detect a mouseover and the tile will behave incorrectly. -->
<div ng-show="isWindowLarge && avatarsList.length > 0" class="exploration-summary-avatars" ng-show="avatarsList.length > 0">
<div>
Expand All @@ -28,8 +29,7 @@ <h3 class="activity-title protractor-test-exp-summary-tile-title">
<span translate="I18N_LIBRARY_NO_OBJECTIVE">
</span>
</div>

<ul layout="row" class="metrics" layout-align="space-between center">
<ul ng-if="!isCollectionPreviewTile" layout="row" class="metrics" layout-align="space-between center">
<li>
<span class="protractor-test-exp-summary-tile-rating" ng-class="{'rating-disabled': !getAverageRating()}">
<span class="fa fa-star fa-lg" tooltip="<['I18N_LIBRARY_RATINGS_TOOLTIP' | translate]>" tooltip-placement="top">
Expand Down Expand Up @@ -61,13 +61,11 @@ <h3 class="activity-title protractor-test-exp-summary-tile-title">
</span>
</li>
</ul>
<button ng-if="isCollectionPreviewTile" class="oppia-learner-continue-button md-button md-default-theme"
style="display: block; margin: auto; touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<span translate="I18N_PLAYER_PLAY_EXPLORATION"></span>
</button>
</div>
</a>
</md-card>
</script>

<style>
.oppia-activity-summary-tile .oppia-inactive-summary-tile-attribute {
opacity: 0.5;
}
</style>
138 changes: 122 additions & 16 deletions core/templates/dev/head/css/oppia.css
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,35 @@
100% { opacity: 1; }
}

@keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}

/* Angular material overrides. */
md-input-group.long > input {
width: 100%;
Expand Down Expand Up @@ -3634,6 +3663,20 @@ md-card.preview-conversation-skin-supplemental-card {
width: 197px;
}

.oppia-activity-summary-tile-mobile {
background-color: #fff;
cursor: pointer;
display: inline-block;
height: inherit;
margin: 8px 5.5px;
padding: 0 0 20px 0;
position: relative;
text-align: left;
vertical-align: top;
white-space: normal;
width: 250px;
}

@media only screen and (max-width: 500px) {
.oppia-activity-summary-tile {
display: block;
Expand All @@ -3645,7 +3688,11 @@ md-card.preview-conversation-skin-supplemental-card {
.oppia-activity-summary-tile a,
.oppia-activity-summary-tile a:hover,
.oppia-activity-summary-tile a:active,
.oppia-activity-summary-tile a:visited {
.oppia-activity-summary-tile a:visited,
.oppia-activity-summary-tile-mobile a,
.oppia-activity-summary-tile-mobile a:hover,
.oppia-activity-summary-tile-mobile a:active,
.oppia-activity-summary-tile-mobile a:visited {
color: inherit;
text-decoration: none;
}
Expand Down Expand Up @@ -3678,7 +3725,9 @@ md-card.preview-conversation-skin-supplemental-card {
}

.oppia-activity-summary-tile:hover,
.oppia-activity-summary-tile a:focus {
.oppia-activity-summary-tile a:focus,
.oppia-activity-summary-tile-mobile:hover,
.oppia-activity-summary-tile-mobile a:focus {
/*
This is based on the levels defined on the following page:
https://medium.com/@Florian/freebie-google-material-design-shadow-helper-2a0501295a2d#.22sskepri
Expand All @@ -3694,13 +3743,29 @@ md-card.preview-conversation-skin-supplemental-card {
width: 100%;
}

.oppia-activity-summary-tile-mobile .title-section {
height: 12em;
position: relative;
width: 100%;
}

.oppia-activity-summary-tile,
.oppia-activity-summary-tile .title-section {
-webkit-transition: all 300ms;
transition: all 300ms;
}

.oppia-activity-summary-tile .exploration-summary-avatars {
.oppia-activity-summary-tile-mobile,
.oppia-activity-summary-tile-mobile .title-section {
-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 1s; /* Firefox < 16 */
-ms-animation: fadein 1s; /* Internet Explorer */
-o-animation: fadein 1s; /* Opera < 12.1 */
animation: fadein 1s;
}

.oppia-activity-summary-tile .exploration-summary-avatars,
.oppia-activity-summary-tile-mobile .exploration-summary-avatars {
padding-bottom: 4px;
padding-right: 5px;
left: 169px;
Expand Down Expand Up @@ -3733,19 +3798,34 @@ md-card.preview-conversation-skin-supplemental-card {
z-index: 10;
}

.oppia-activity-summary-tile .exploration-black-profile {
.oppia-activity-summary-tile-mobile:hover .title-section-mask,
.oppia-activity-summary-tile-mobile a:focus .title-section-mask {
background-color: #eee;
height: 192px;
left: 0;
opacity: 0.4;
position: absolute;
top: 0;
width: 100%;
z-index: 10;
}

.oppia-activity-summary-tile .exploration-black-profile,
.oppia-activity-summary-tile-mobile .exploration-black-profile {
background-color: black;
border-radius: 50%;
width: 26px;
height: 26px;
}

.oppia-activity-summary-tile .exploration-summary-avatars profile-link-image {
.oppia-activity-summary-tile .exploration-summary-avatars profile-link-image,
.oppia-activity-summary-tile-mobile .exploration-summary-avatars profile-link-image {
display: block;
margin-bottom: 3px;
}

.oppia-activity-summary-tile .contributor-indicator {
.oppia-activity-summary-tile .contributor-indicator,
.oppia-activity-summary-tile-mobile .contributor-indicator {
border-radius: 10%;
bottom: 10px;
height: 13px;
Expand All @@ -3755,11 +3835,13 @@ md-card.preview-conversation-skin-supplemental-card {
width: 16px;
}

.oppia-activity-summary-tile .contributor-indicator-background {
.oppia-activity-summary-tile .contributor-indicator-background,
.oppia-activity-summary-tile-mobile .contributor-indicator-background {
background-color: #4078C0;
}

.oppia-activity-summary-tile .all-avatars .num-remaining-avatars {
.oppia-activity-summary-tile .all-avatars .num-remaining-avatars,
.oppia-activity-summary-tile-mobile .all-avatars .num-remaining-avatars {
color: white;
font-family: Roboto;
font-size: 0.7em;
Expand All @@ -3769,7 +3851,8 @@ md-card.preview-conversation-skin-supplemental-card {
top: 5px;
}

.oppia-activity-summary-tile .exploration-category {
.oppia-activity-summary-tile .exploration-category,
.oppia-activity-summary-tile-mobile .exploration-category {
color: #fff;
font-family: "Capriola", "Roboto", Arial, sans-serif;
font-size: 0.65em;
Expand All @@ -3788,7 +3871,17 @@ md-card.preview-conversation-skin-supplemental-card {
width: 75px;
}

.oppia-activity-summary-tile .activity-title {
.oppia-activity-summary-tile-mobile .thumbnail-image {
display: block;
height: 100px;
margin: 0 auto;
position: relative;
top: 15%;
width: 100px;
}

.oppia-activity-summary-tile .activity-title,
.oppia-activity-summary-tile-mobile .activity-title {
bottom: 0;
color: white;
font-family: "Capriola", "Roboto", Arial, sans-serif;
Expand Down Expand Up @@ -3817,11 +3910,20 @@ md-card.preview-conversation-skin-supplemental-card {
-webkit-line-clamp: 3; /* Truncating to 3 lines. */
}

.oppia-activity-summary-tile .rating-disabled {
.oppia-activity-summary-tile-mobile .objective {
height: 75px;
font-family: "Rubik", "Roboto", Arial, sans-serif;
font-size: 0.85em;
padding: 12px;
}

.oppia-activity-summary-tile .rating-disabled,
.oppia-activity-summary-tile-mobile .rating-disabled {
opacity: 0.5;
}

.oppia-activity-summary-tile [section="right-section"] {
.oppia-activity-summary-tile [section="right-section"],
.oppia-activity-summary-tile-mobile [section="right-section"] {
display: inline-block;
float: left;
height: 80px;
Expand All @@ -3830,13 +3932,15 @@ md-card.preview-conversation-skin-supplemental-card {
width: 30%;
}

.oppia-activity-summary-tile .metrics {
.oppia-activity-summary-tile .metrics,
.oppia-activity-summary-tile-mobile .metrics {
height: 30px;
margin: 5px 12px 0;
padding: 0;
}

.oppia-activity-summary-tile .metrics li {
.oppia-activity-summary-tile .metrics li,
.oppia-activity-summary-tile-mobile .metrics li {
font-size: 0.75em;
list-style-type: none;
text-align: center;
Expand Down Expand Up @@ -3867,7 +3971,8 @@ md-card.preview-conversation-skin-supplemental-card {
padding-left: 19px;
}

.oppia-activity-summary-tile .metrics li .fa {
.oppia-activity-summary-tile .metrics li .fa,
.oppia-activity-summary-tile-mobile .metrics li .fa {
font-size: 1.1em;
margin-right: 2px;
vertical-align: initial;
Expand All @@ -3884,7 +3989,8 @@ md-card.preview-conversation-skin-supplemental-card {
width: 0px;
}

.oppia-activity-summary-tile .recently-updated {
.oppia-activity-summary-tile .recently-updated,
.oppia-activity-summary-tile-mobile .recently-updated {
color: rgb(19,105,193);
font-size: 1.1em;
font-weight: bold;
Expand Down
Loading

0 comments on commit 5ae40fe

Please sign in to comment.