Skip to content

Commit df5c57f

Browse files
scottgarnerscottgarner
committed
More formatting and styling for gallery and basic admin functions per #64 
1 parent d2e3ee3 commit df5c57f

File tree

8 files changed

+262
-34
lines changed

8 files changed

+262
-34
lines changed

‎admin/index.html

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
---
2+
layout: default
3+
title: Admin
4+
class: admin
5+
---
6+
7+
{% include header.html %}
8+
9+
<div class="container">
10+
11+
<div class="panel panel-default" id="loginPanel">
12+
<div class="panel-heading">
13+
<h3 class="panel-title">Log In</h3>
14+
</div>
15+
<div class="panel-body">
16+
17+
<div class="alert alert-danger" role="alert" id="loginFailed">
18+
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
19+
<span class="sr-only">Error:</span>
20+
<span id="loginError">Login failed.</span>
21+
</div>
22+
23+
<form role="form" id="loginForm">
24+
<div class="form-group">
25+
<label for="userEmail">Email address</label>
26+
<input type="email" class="form-control" id="userEmail" placeholder="Enter email">
27+
</div>
28+
<div class="form-group">
29+
<label for="userPassword">Password</label>
30+
<input type="password" class="form-control" id="userPassword" placeholder="Password">
31+
</div>
32+
<button type="login" id="loginButton" class="btn btn-default">Log In</button>
33+
</form>
34+
35+
</div>
36+
</div>
37+
38+
<div class="panel panel-default" id="logoutPanel">
39+
<div class="panel-heading">
40+
<h3 class="panel-title">Log Out</h3>
41+
</div>
42+
<div class="panel-body">
43+
44+
<p>You are logged in as <span id="userInfo"></span>.</p>
45+
<button id="logoutButton" class="btn btn-default">Log Out</button>
46+
47+
</div>
48+
</div>
49+
50+
</div>
51+
52+
53+
<script src="//www.parsecdn.com/js/parse-1.3.1.min.js"></script>
54+
55+
56+
<script src="/js/admin.js" type="text/javascript"></script>

‎css/main.scss

Lines changed: 46 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -246,7 +246,7 @@ div#lessonNavContainer {
246246
text-decoration: none;
247247
}
248248

249-
a.active span, a.active:hover span {
249+
#lessonNav a.active span, #lessonNav a.active:hover span {
250250
color: $secondary-color;
251251
background: transparent;
252252
border-bottom: 3px solid $secondary-color;
@@ -548,6 +548,17 @@ div#editorCommands {
548548
display: none;
549549
}
550550

551+
/* Admin Page */
552+
553+
body.admin .container {
554+
margin-top: 24px;
555+
width: 480px;
556+
}
557+
558+
#loginPanel, #logoutPanel, #loginFailed {
559+
display: none;
560+
}
561+
551562
/* Display Page */
552563

553564
div#displayInfo {
@@ -562,6 +573,14 @@ div#displayInfo {
562573
padding: 12px;
563574
}
564575

576+
button#displayAdmin {
577+
position: absolute;
578+
bottom: 1em;
579+
right: 1em;
580+
z-index: 1000;
581+
display:none;
582+
}
583+
565584
footer#displayFooter {
566585
position:absolute;
567586
bottom: 1em;
@@ -628,23 +647,38 @@ div#displayEditor {
628647
}
629648

630649
#galleryFilter {
631-
margin-top: 12px;
650+
background: $secondary-color;
651+
height: 32px;
652+
box-shadow: 0px 4px 1px rgba(0,0,0,.25);
632653
}
633654

634-
#galleryControls {
635-
width: 100%;
636-
text-align: center;
637-
padding-bottom: 28px;
655+
#galleryFilter .filter {
656+
display: inline-block;
657+
color: white;
658+
font-size: .9em;
659+
padding: 8px;
660+
height: 32px;
661+
border-left: 1px solid $secondary-color-dark;
662+
}
663+
664+
#galleryFilter .filter:last-child {
665+
border-right: 1px solid $secondary-color-dark;
666+
}
667+
668+
669+
#galleryFilter .filter:hover {
670+
color: white;
671+
text-decoration: none;
672+
}
673+
674+
#galleryFilter .filter:hover .text, #galleryFilter .active .text {
675+
border-bottom: 2px solid white;
638676
}
639677

640-
#galleryFooter {
678+
#galleryControls {
641679
width: 100%;
642-
height: 20px;
643-
color: #fff;
644-
position: absolute;
645-
bottom: 0;
646-
left: 0;
647680
text-align: center;
681+
padding-bottom: 12px;
648682
}
649683

650684
/* Hints Preview */

‎display/index.html

Lines changed: 38 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,10 +42,45 @@ <h1 id="displayTitle">Look What I Made!</h1>
4242

4343
</div>
4444

45-
<footer id="displayFooter">
46-
Processing Hour of Code // Computer Science Education Week // Code.org
47-
</footer>
45+
<button id="displayAdmin" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-edit"></span> Admin</button>
4846

47+
<footer id="displayFooter">
48+
Processing Hour of Code // Computer Science Education Week // Code.org
49+
</footer>
50+
51+
<!-- Modal Edit Window -->
52+
53+
<div class="modal fade" id="adminModal" tabindex="-1" role="dialog" aria-labelledby="codeModalTitle" aria-hidden="true" data-url="http://hello.processing.org/">
54+
<div class="modal-dialog">
55+
<div class="modal-content">
56+
<div class="modal-header">
57+
<button class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
58+
<h4 class="modal-title" id="codeModalTitle">Admin</h4>
59+
</div>
60+
<div class="modal-body">
61+
62+
<form role="form" id="adminForm">
63+
<div class="form-group">
64+
<label for="featureScore">Feature Score</label>
65+
<input type="text" class="form-control" id="featureScore">
66+
</div>
67+
<div class="checkbox">
68+
<label>
69+
<input type="checkbox" id="delete"> Delete Sketch
70+
</label>
71+
</div>
72+
73+
<button type="submit" id="saveButton" class="btn btn-default"><span class="glyphicon glyphicon-ok"></span> Save</button>
74+
<button id="cancelButton" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
75+
76+
</form>
77+
78+
</div>
79+
</div><!-- /.modal-content -->
80+
</div><!-- /.modal-dialog -->
81+
</div><!-- /.modal -->
82+
83+
<!-- End Modal Code Window -->
4984

5085
<!-- Modal Code Window -->
5186

‎gallery/index.html

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -17,19 +17,21 @@
1717
{% include header.html %}
1818

1919
<div id="galleryFilter" class="text-center">
20-
<div class="btn-group">
21-
<button class="filter btn btn-default btn-sm active" data-mode="0">
22-
<span class="glyphicon glyphicon-star"></span> Featured
23-
</button>
2420

25-
<button class="filter btn btn-default btn-sm" data-mode="1">
26-
<span class="glyphicon glyphicon-heart"></span> Popular
21+
<a class="filter active" data-mode="0" href="">
22+
<span class="glyphicon glyphicon-star"></span>
23+
<span class="text">Featured</span>
2724
</a>
2825

29-
<button class="filter btn btn-default btn-sm" data-mode="2">
30-
<span class="glyphicon glyphicon-time"></span> Recent
31-
</button>
32-
</div>
26+
<a class="filter" data-mode="1" href="">
27+
<span class="glyphicon glyphicon-heart"></span>
28+
<span class="text">Popular</span>
29+
</a>
30+
31+
<a class="filter" data-mode="2" href="">
32+
<span class="glyphicon glyphicon-time"></span>
33+
<span class="text">Recent</span>
34+
</a>
3335
</div>
3436

3537
<div id="galleryView"></div>
@@ -40,10 +42,6 @@
4042
</button>
4143
</div>
4244

43-
<footer id="galleryFooter">
44-
Processing Hour of Code // Computer Science Education Week // Code.org
45-
</footer>
46-
4745
</div>
4846

4947
<script src="//www.parsecdn.com/js/parse-1.3.1.min.js"></script>

‎js/admin.js

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
"use strict";
2+
3+
/**
4+
* Singleton for admin page
5+
*/
6+
var helloAdmin = {
7+
/**
8+
* Initialize admin page
9+
*/
10+
init: function () {
11+
12+
13+
Parse.initialize("x8FmMInL8BbVeBqonPzgvS8WNKbPro65Li5DzTI0", "Y7PPNnhLPhCdFMAKgw7amBxGerz67gAnG3UKb53s");
14+
15+
if (Parse.User.current() == null) {
16+
$("#loginPanel").show();
17+
$("#logoutPanel").hide();
18+
} else {
19+
$("#loginPanel").hide();
20+
$("#logoutPanel").show();
21+
22+
$("#userInfo").html(Parse.User.current().get("username"));
23+
}
24+
25+
$("#logoutButton").click(function() {
26+
Parse.User.logOut();
27+
$("#loginPanel").show();
28+
$("#logoutPanel").hide();
29+
});
30+
31+
$("#loginForm").submit( function() {
32+
33+
var userEmail = $("#userEmail").val();
34+
var userPassword = $("#userPassword").val();
35+
36+
Parse.User.logIn(userEmail, userPassword, {
37+
success: function(user) {
38+
39+
$("#userInfo").html(Parse.User.current().get("username"));
40+
41+
$("#loginPanel").hide();
42+
$("#logoutPanel").show();
43+
44+
},
45+
error: function(user, error) {
46+
console.log(error);
47+
$("#loginFailed").show();
48+
$("#loginError").html(error.message);
49+
}
50+
});
51+
52+
return false;
53+
});
54+
}
55+
};

‎js/display.js

Lines changed: 49 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
var helloDisplay = {
1414
processingSource: "",
1515
editor: null,
16+
parseObject: null,
1617
/**
1718
* Initialize display page
1819
*/
@@ -36,6 +37,12 @@ var helloDisplay = {
3637
return false;
3738
});
3839

40+
$("#displayAdmin").click(function () {
41+
$('#adminModal').modal('show');
42+
43+
return false;
44+
});
45+
3946
$("#downloadCode").click(function () {
4047

4148
var blob = new Blob([helloDisplay.processingSource], {type: "text/processing;charset=utf-8"});
@@ -45,6 +52,37 @@ var helloDisplay = {
4552

4653
});
4754

55+
$("#adminForm").submit( function() {
56+
57+
if ($("#delete").prop('checked')) {
58+
59+
helloDisplay.parseObject.destroy({
60+
success: function(myObject) {
61+
console.log("Object deleted.");
62+
window.location.assign("/gallery");
63+
},
64+
error: function(myObject, error) {
65+
console.log("Delete failed.");
66+
}
67+
});
68+
69+
70+
} else {
71+
72+
var featureScore = parseInt($("#featureScore").val());
73+
74+
helloDisplay.parseObject.set("featureScore", featureScore);
75+
helloDisplay.parseObject.save();
76+
}
77+
78+
79+
80+
81+
$('#adminModal').modal('hide');
82+
83+
return false;
84+
});
85+
4886
// Initialize Editor
4987

5088
this.editor = ace.edit("displayEditor");
@@ -84,14 +122,23 @@ var helloDisplay = {
84122

85123
Parse.initialize("x8FmMInL8BbVeBqonPzgvS8WNKbPro65Li5DzTI0", "Y7PPNnhLPhCdFMAKgw7amBxGerz67gAnG3UKb53s");
86124

125+
if (Parse.User.current() != null) {
126+
$("#displayAdmin").show();
127+
}
128+
87129
var GalleryObject = Parse.Object.extend("Gallery");
88130
var query = new Parse.Query(GalleryObject);
89-
console.log("Query start.");
131+
console.log("Query start!");
90132
query.get(parseID, {
91133
success: function(gallery) {
92-
console.log("Query complete.");
134+
console.log("Query complete!");
135+
136+
helloDisplay.parseObject = gallery;
93137
helloDisplay.showSketch(gallery.get("source"));
94138

139+
$("#viewCount").val(gallery.get("viewCount"));
140+
$("#featureScore").val(gallery.get("featureScore"));
141+
95142
Parse.Cloud.run('incrementViewCount', {id: gallery.id}, {
96143
success: function(result) {
97144
// Success

0 commit comments

Comments
 (0)