Skip to content

Commit

Permalink
Implemented a basic learner view styling based on the gallery's styling.
Browse files Browse the repository at this point in the history
  • Loading branch information
@BenHenning
BenHenning committed Oct 23, 2015
1 parent afbaed8 commit 179100e
Show file tree
Hide file tree
Showing 4 changed files with 132 additions and 16 deletions.
87 changes: 87 additions & 0 deletions core/templates/dev/head/css/oppia.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1051,6 +1051,93 @@ pre.oppia-pre-wrapped-text {
position: relative;
}

/* Styles for the collections learner view */

.oppia-collection-player-tiles-area {
background-color: #eee;
position: relative;
}

.oppia-collection-player-tiles-header {
font-size: 1.4em;
padding-top: 40px;
padding-bottom: 40px;
}

.oppia-collection-player-tiles-container {
height: 100%;
margin-left: auto;
margin-right: auto;
max-width: 800px;
min-height: 500px;
padding-bottom: 25px;
padding-top: 56px;
}

md-card.oppia-collection-player-tile {
background-color: #fff;
color: #888;
height: 120px;
margin: 0;
padding: 0;
position: relative;
width: 100%;
}
.oppia-collection-player-tile:hover {
background-color: #f9f9f9;
}

.oppia-collection-player-tile-container-link {
height: 100%;
width: 100%;
}

.oppia-collection-player-tile-image-container {
height: 120px;
left: 0;
top: 0;
width: 120px;
}
/* This centers the image horizontally and vertically. */
.oppia-collection-player-tile-image {
height: 120px;
width: 120px;
}

.oppia-collection-player-tile-contents {
height: 100%;
padding: 23px 58px;
width: 100%;
}
.oppia-collection-player-tile-contents:hover {
text-decoration: none;
}

.oppia-collection-player-tile-details {
padding-left: 100px;
padding-top: 5px;
margin-bottom: 8px;
}
.oppia-collection-player-tile-title {
color: #333;
font-weight: bold;
}

@media (max-width: 365px) {
.oppia-collection-player-tile-image-container {
display: none;
}
.oppia-collection-player-tile-details {
padding-left: 0;
}
}
@media (max-width: 800px) {
.oppia-collection-player-tiles-header {
margin-left: 20px;
margin-right: 20px;
}
}

/* Styles for the statistics page. */

.oppia-back-arrow {
Expand Down
10 changes: 10 additions & 0 deletions core/templates/dev/head/pages/collection_player/CollectionPlayer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,17 @@ oppia.controller('CollectionPlayer', [
return undefined;
};

$scope.hasFinishedCollection = function() {
return $scope.collection.next_exploration_ids.length == 0;
};

$scope.getSuggestedCollectionNodes = function() {
// If the collection has been finished, show all explorations so users may
// replay any of their choice.
if ($scope.hasFinishedCollection()) {
return $scope.collection.nodes;
}

var nextExplorationIds = $scope.collection.next_exploration_ids;
var suggestedCollectionNodes = [];
for (var i = 0; i < nextExplorationIds.length; i++) {
Expand Down
49 changes: 34 additions & 15 deletions core/templates/dev/head/pages/collection_player/collection_player.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,12 @@
<script type="text/javascript">
GLOBALS.collectionId = JSON.parse('{{collection_id|js_string}}');
</script>

<style>
html, body {
background-color: #eee;
}
</style>
{% endif %}

{{dependencies_html}}
Expand All @@ -26,21 +32,34 @@

{% block content %}
<div ng-controller="CollectionPlayer">
<div ng-if="collection">
<span>Welcome to: <[collection.title]></span>
<br>
Begin by playing or continue where you left off:
<ul>
<li ng-repeat="collection_node in getSuggestedCollectionNodes()">
<a target="_blank" href="/explore/<[collection_node.exploration.id]>?collection_id=<[collectionId]>"><[collection_node.exploration.title]></a>
</li>
</ul>
<span>This collection has <[collection.nodes.length]> explorations.</span>
<ul>
<li ng-repeat="collection_node in collection.nodes">
<a target="_blank" href="/explore/<[collection_node.exploration.id]>"><[collection_node.exploration.title]></a>
</li>
</ul>
<div ng-if="collection" class="oppia-collection-player-tiles-area">
<div class="oppia-collection-player-tiles-container">
<div ng-if="!hasFinishedCollection()" class="oppia-collection-player-tiles-header">
<span>Begin by playing or continue where you left off:</span>
</div>
<div ng-if="hasFinishedCollection()" class="oppia-collection-player-tiles-header">
<span>You have finished the collection! Feel free to replay any explorations in this collection.</span>
</div>

<div ng-repeat="collection_node in getSuggestedCollectionNodes()">
<md-card layout="row" class="oppia-collection-player-tile protractor-test-collection-player-tile">
<a href="/explore/<[collection_node.exploration.id]>?collection_id=<[collectionId]>" class="oppia-collection-player-tile-container-link" style="text-decoration: none;">
<div class="oppia-collection-player-tile-contents">
<span class="oppia-collection-player-tile-image-container"
style="position: absolute;">
<img class="oppia-collection-player-tile-image" ng-src="/images/gallery/exploration_background_teal_small.png">
</span>

<div class="oppia-collection-player-tile-details">
<span class="oppia-collection-player-tile-title protractor-test-gallery-tile-title">
<[collection_node.exploration.title]>
</span>
</div>
</div>
</a>
</md-card>
</div>
</div>
</div>
</div>

Expand Down
2 changes: 1 addition & 1 deletion data/collections/welcome_to_collections.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ nodes:
exploration_id: '0'
prerequisite_skills: []
- acquired_skills: []
exploration_id: '2'
exploration_id: '13'
prerequisite_skills:
- Introduced to Oppia
- acquired_skills: []
Expand Down

0 comments on commit 179100e

Please sign in to comment.