Merge pull request #18 from andrewlalis/al/small_updates

Al/small updates

backend/postings/forms.py

@@ -10,3 +10,5 @@ class EntityReviewForm(forms.Form):
 	content = forms.CharField(widget=forms.Textarea)
 	# The id of the entity for which the review is created.
 	entity_id = forms.IntegerField()
+	# TEMPORARY name for author name.
+	name = forms.CharField(max_length=64, required=False)

backend/postings/migrations/0005_review_author_name.py

@@ -0,0 +1,18 @@
+# Generated by Django 2.1.1 on 2018-10-18 08:30
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('postings', '0004_remove_reviewhelpfulvote_user'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='review',
+            name='author_name',
+            field=models.CharField(default='Anonymous', max_length=64),
+        ),
+    ]

backend/postings/models.py

@@ -40,6 +40,27 @@ class RateableEntity(models.Model):
 			return None
 		return rating_sum / reviews.count()
 
+	# Gets a 5-item list of the count of each rating, and the percentage of total votes.
+	def getRatingDistribution(self):
+		reviews = self.review_set.select_related()
+		distribution = [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]]
+		review_count = reviews.count()
+		
+		for review in reviews:
+			distribution[review.rating-1][0] += 1
+
+		if (review_count > 0):
+			max_val = 0
+			for rating_dist in distribution:
+				rating_dist[1] = (rating_dist[0] / review_count) * 100
+				if (rating_dist[1] > max_val):
+					max_val = rating_dist[1]
+
+			for rating_dist in distribution:
+				rating_dist[1] = (rating_dist[1] / max_val) * 100
+
+		return distribution
+
 	# Simply returns the name as the string representation.
 	def __str__(self):
 		return self.name
@@ -66,6 +87,8 @@ class Review(models.Model):
 	last_updated_date = models.DateTimeField(auto_now=True)
 	# A reference to the person who created this review.
 	author = models.ForeignKey('postings.User', on_delete=models.PROTECT, null=True, blank=True)
+	# TEMPORARY: Name of person who gave review.
+	author_name = models.CharField(max_length=64, default='Anonymous')
 
 	# Gets the total number of votes which marked this review as 'helpful'.
 	@property

backend/postings/static/postings/css/style.css

@@ -7,19 +7,32 @@
   margin-bottom: 0;
   overflow-y: hidden; }
 
-.fullcontainer {
+.box .fullcontainer {
   display: flex;
   align-items: center;
   height: -webkit-calc(100vh - 50px);
   height: -moz-calc(100vh - 50px);
   height: calc(100vh - 50px); }
 
+.box3 .fullcontainer {
+  display: flex;
+  height: -webkit-calc(100vh - 50px);
+  height: -moz-calc(100vh - 50px);
+  height: calc(100vh - 50px); }
+
 .fullcontainer h1 {
-  font-size: 60px; }
+  font-size: 50px; }
 
 .fullcontainer h3 {
   margin-bottom: 30px; }
 
+.whitebox {
+  background: white;
+  border-radius: 15px;
+  padding: 30px;
+  margin-top: 25px;
+  margin-bottom: 25px; }
+
 .navbar-brand {
   cursor: pointer; }
 
@@ -39,8 +52,7 @@ body {
   color: #FFF; }
 
 .rating-block {
-  background-color: #FAFAFA;
+  float: right;
-  border: 1px solid #EFEFEF;
   padding: 15px 15px 20px 15px;
   border-radius: 3px; }
 
@@ -55,7 +67,9 @@ body {
   border: 1px solid #EFEFEF;
   padding: 15px;
   border-radius: 3px;
-  margin-bottom: 15px; }
+  margin-bottom: 15px;
+  float: right;
+  width: 100%; }
 
 .review-block-name {
   font-size: 12px;
@@ -86,6 +100,10 @@ body {
   font-size: 24px;
   color: #d17581; }
 
+.selfcenter {
+  margin: 0 auto;
+  float: inherit; }
+
 .hr-line-dashed {
   border-top: 1px dashed #E7EAEC;
   color: #ffffff;
@@ -106,4 +124,10 @@ h2 {
 .big-font {
   font-size: 25px; }
 
+.box3 {
+  background: #5850c7 url(https://d20ohkaloyme4g.cloudfront.net/img/hero-illustration-module.png) repeat; }
+
+.box2 {
+  background: #5850c7 url(https://d20ohkaloyme4g.cloudfront.net/img/hero-illustration-module.png) repeat; }
+
 /*# sourceMappingURL=style.css.map */

backend/postings/static/postings/css/style.css.map

@@ -1,6 +1,6 @@
 {
 "version": 3,
-"mappings": "AACA,IAAI;EACF,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,0FAA0F;EACtG,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,MAAM;EAClB,aAAa,EAAE,CAAC;EAChB,UAAU,EAAC,MAAM;;AAEnB,cAAe;EACb,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,MAAM;EACnB,MAAM,EAAE,0BAA0B;EAClC,MAAM,EAAE,uBAAuB;EAC/B,MAAM,EAAE,kBAAkB;;AAE5B,iBAAiB;EACf,SAAS,EAAE,IAAI;;AAEjB,iBAAiB;EACf,aAAa,EAAE,IAAI;;AAIrB,aAAa;EACX,MAAM,EAAC,OAAO;;AAIhB,KAAM;EACJ,UAAU,EAAE,OAAO;EACnB,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,IAAI;;AAGb,MAAM;EACJ,UAAU,EAAE,KAAK;;AAGnB,IAAK;EACH,WAAW,EAAE,IAAI;;AAEnB,SAAS;EACP,gBAAgB,EAAC,OAAO;EACxB,KAAK,EAAC,IAAI;;AAEZ,aAAa;EACX,gBAAgB,EAAC,OAAO;EACxB,MAAM,EAAC,iBAAiB;EACxB,OAAO,EAAC,mBAAmB;EAC3B,aAAa,EAAC,GAAG;;AAEnB,KAAK;EACH,WAAW,EAAC,GAAG;;AAEjB,iBAAiB;EACf,cAAc,EAAC,GAAG;;AAGpB,aAAa;EACX,gBAAgB,EAAC,OAAO;EACxB,MAAM,EAAC,iBAAiB;EACxB,OAAO,EAAC,IAAI;EACZ,aAAa,EAAC,GAAG;EACjB,aAAa,EAAC,IAAI;;AAEpB,kBAAkB;EAChB,SAAS,EAAC,IAAI;EACd,MAAM,EAAC,MAAM;;AAEf,kBAAkB;EAChB,SAAS,EAAC,IAAI;;AAEhB,kBAAkB;EAChB,SAAS,EAAC,IAAI;EACd,aAAa,EAAC,IAAI;;AAEpB,mBAAmB;EACjB,SAAS,EAAC,IAAI;EACd,WAAW,EAAC,GAAG;EACf,aAAa,EAAC,IAAI;;AAEpB,yBAAyB;EACvB,SAAS,EAAC,IAAI;;AAGhB,SAAU;EACR,kBAAkB,EAAE,WAAW;EAC/B,eAAe,EAAE,WAAW;EAC5B,UAAU,EAAE,WAAW;;AAGzB,MACA;EACE,MAAM,EAAE,MAAM;EACd,SAAS,EAAE,IAAI;EACf,KAAK,EAAE,OAAO;;AAOhB,eAAgB;EACd,UAAU,EAAE,kBAAkB;EAC9B,KAAK,EAAE,OAAO;EACd,gBAAgB,EAAE,OAAO;EACzB,MAAM,EAAE,GAAG;EACX,MAAM,EAAE,MAAM;;AAGhB,EAAG;EACD,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,GAAG;;AAElB,OAAQ;EACN,UAAU,EAAE,KAAK;;AAGnB,YAAY;EACV,SAAS,EAAC,IAAI;;AAGhB,SAAS;EACP,SAAS,EAAC,IAAI",
+"mappings": "AACA,IAAI;EACF,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,0FAA0F;EACtG,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,MAAM;EAClB,aAAa,EAAE,CAAC;EAChB,UAAU,EAAC,MAAM;;AAEnB,mBAAoB;EAClB,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,MAAM;EACnB,MAAM,EAAE,0BAA0B;EAClC,MAAM,EAAE,uBAAuB;EAC/B,MAAM,EAAE,kBAAkB;;AAG5B,oBAAqB;EACnB,OAAO,EAAE,IAAI;EACb,MAAM,EAAE,0BAA0B;EAClC,MAAM,EAAE,uBAAuB;EAC/B,MAAM,EAAE,kBAAkB;;AAE5B,iBAAiB;EACf,SAAS,EAAE,IAAI;;AAEjB,iBAAiB;EACf,aAAa,EAAE,IAAI;;AAGrB,SAAS;EACP,UAAU,EAAE,KAAK;EACjB,aAAa,EAAE,IAAI;EACnB,OAAO,EAAE,IAAI;EACb,UAAU,EAAC,IAAI;EACf,aAAa,EAAC,IAAI;;AAIpB,aAAa;EACX,MAAM,EAAC,OAAO;;AAIhB,KAAM;EACJ,UAAU,EAAE,OAAO;EACnB,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,IAAI;;AAGb,MAAM;EACJ,UAAU,EAAE,KAAK;;AAGnB,IAAK;EACH,WAAW,EAAE,IAAI;;AAEnB,SAAS;EACP,gBAAgB,EAAC,OAAO;EACxB,KAAK,EAAC,IAAI;;AAEZ,aAAa;EACX,KAAK,EAAC,KAAK;EACX,OAAO,EAAC,mBAAmB;EAC3B,aAAa,EAAC,GAAG;;AAEnB,KAAK;EACH,WAAW,EAAC,GAAG;;AAEjB,iBAAiB;EACf,cAAc,EAAC,GAAG;;AAGpB,aAAa;EACX,gBAAgB,EAAC,OAAO;EACxB,MAAM,EAAC,iBAAiB;EACxB,OAAO,EAAC,IAAI;EACZ,aAAa,EAAC,GAAG;EACjB,aAAa,EAAC,IAAI;EAClB,KAAK,EAAE,KAAK;EACZ,KAAK,EAAC,IAAI;;AAEZ,kBAAkB;EAChB,SAAS,EAAC,IAAI;EACd,MAAM,EAAC,MAAM;;AAEf,kBAAkB;EAChB,SAAS,EAAC,IAAI;;AAEhB,kBAAkB;EAChB,SAAS,EAAC,IAAI;EACd,aAAa,EAAC,IAAI;;AAEpB,mBAAmB;EACjB,SAAS,EAAC,IAAI;EACd,WAAW,EAAC,GAAG;EACf,aAAa,EAAC,IAAI;;AAEpB,yBAAyB;EACvB,SAAS,EAAC,IAAI;;AAGhB,SAAU;EACR,kBAAkB,EAAE,WAAW;EAC/B,eAAe,EAAE,WAAW;EAC5B,UAAU,EAAE,WAAW;;AAGzB,MACA;EACE,MAAM,EAAE,MAAM;EACd,SAAS,EAAE,IAAI;EACf,KAAK,EAAE,OAAO;;AAOhB,WAAW;EACT,MAAM,EAAE,MAAM;EACd,KAAK,EAAE,OAAO;;AAGhB,eAAgB;EACd,UAAU,EAAE,kBAAkB;EAC9B,KAAK,EAAE,OAAO;EACd,gBAAgB,EAAE,OAAO;EACzB,MAAM,EAAE,GAAG;EACX,MAAM,EAAE,MAAM;;AAGhB,EAAG;EACD,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,GAAG;;AAElB,OAAQ;EACN,UAAU,EAAE,KAAK;;AAGnB,YAAY;EACV,SAAS,EAAC,IAAI;;AAGhB,SAAS;EACP,SAAS,EAAC,IAAI;;AAGhB,KAAK;EACH,UAAU,EAAE,0FAA0F;;AAExG,KAAK;EACH,UAAU,EAAE,0FAA0F",
 "sources": ["style.scss"],
 "names": [],
 "file": "style.css"

backend/postings/static/postings/css/style.scss

@@ -8,20 +8,35 @@
   margin-bottom: 0;
   overflow-y:hidden;
 }
-.fullcontainer {
+.box .fullcontainer {
   display: flex;
   align-items: center;
   height: -webkit-calc(100vh - 50px);
   height: -moz-calc(100vh - 50px);
   height: calc(100vh - 50px);
 }
+
+.box3 .fullcontainer {
+  display: flex;
+  height: -webkit-calc(100vh - 50px);
+  height: -moz-calc(100vh - 50px);
+  height: calc(100vh - 50px);
+}
 .fullcontainer h1{
-  font-size: 60px;
+  font-size: 50px;
 }
 .fullcontainer h3{
   margin-bottom: 30px;
 }
 
+.whitebox{
+  background: white;
+  border-radius: 15px;
+  padding: 30px;
+  margin-top:25px;
+  margin-bottom:25px;
+}
+
 
 .navbar-brand{
   cursor:pointer
@@ -46,8 +61,7 @@ body {
   color:#FFF;
 }
 .rating-block{
-  background-color:#FAFAFA;
+  float:right;
-  border:1px solid #EFEFEF;
   padding:15px 15px 20px 15px;
   border-radius:3px;
 }
@@ -64,6 +78,8 @@ body {
   padding:15px;
   border-radius:3px;
   margin-bottom:15px;
+  float: right;
+  width:100%;
 }
 .review-block-name{
   font-size:12px;
@@ -102,6 +118,11 @@ body {
 
 }
 
+.selfcenter{
+  margin: 0 auto;
+  float: inherit;
+}
+
 .hr-line-dashed {
   border-top: 1px dashed #E7EAEC;
   color: #ffffff;
@@ -125,3 +146,10 @@ h2 {
 .big-font{
   font-size:25px;
 }
+
+.box3{
+  background: #5850c7 url(https://d20ohkaloyme4g.cloudfront.net/img/hero-illustration-module.png) repeat;
+}
+.box2{
+  background: #5850c7 url(https://d20ohkaloyme4g.cloudfront.net/img/hero-illustration-module.png) repeat;
+}

backend/postings/static/postings/js/main.js

@@ -65,7 +65,7 @@ $(function(){
         });
 
         ///Set the stars for the average
-        if(i>avg){
+        if((isNaN(parseFloat(avg)))||i>avg){
             $(".rating-block").append("<button value=" + i +  " id = \"star" + i +"\" type=\"button\" class=\"btn btn-default btn-grey btn-sm\" aria-label=\"Left Align\">\n" +
                 "                    <span class=\"glyphicon glyphicon-star\" aria-hidden=\"true\"></span>\n" +
                 "                </button>");

backend/postings/templates/postings/frontend/entity.html

@@ -8,27 +8,103 @@
 {% endblock %}
 
 {% block content %}
-<div class="container entity">
+
+<div class="fullcontainer">
+<div class="container entity whitebox">
+    {% block entity_info %}
         <div class="row">
-        <div class="col-sm-6">
+            <div class="col-sm-8 selfcenter">
-            <h1 class="muted text-center">{{ entity.name }} {{ entity.average }}</h1>
+                <h1 class="muted text-center">{{ entity.name }}</h1>
             </div>
         </div>
+    {% endblock %}
     <hr>
     <div class="row">
-        <div class="col-sm-3">
+        <div class="col-sm-5">
             <div class="rating-block" data-rating="{{ entity.average_rating|floatformat:"-2" }}">
-                <h4>Average user rating</h4>
+                <h2>Average user rating</h2>
                 <h2 class="bold padding-bottom-7">{{ entity.average_rating|floatformat:"-2" }} <small>/ 5</small></h2>
             </div>
         </div>
+        {# Rating Distribution Display #}
+        <div class="col-sm-5">
+            <h4>Rating breakdown</h4>
+            <div class="pull-left">
+                <div class="pull-left" style="width:35px; line-height:1;">
+                    <div style="height:9px; margin:5px 0;">5 <span class="glyphicon glyphicon-star"></span></div>
+                </div>
+                <div class="pull-left" style="width:250px;">
+                    <div class="progress" style="height:9px; margin:8px 0;">
+                        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="5" style="width: {{ entity.rating_distribution.4.1 }}%">
+                            <span class="sr-only">80% Complete (danger)</span>
+                        </div>
+                    </div>
                 </div>
 
+            </div>
+            <div class="pull-left">
+                <div class="pull-left" style="width:35px; line-height:1;">
+                    <div style="height:9px; margin:5px 0;">4 <span class="glyphicon glyphicon-star"></span></div>
+                </div>
+                <div class="pull-left" style="width:250px;">
+                    <div class="progress" style="height:9px; margin:8px 0;">
+                        <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="4" aria-valuemin="0" aria-valuemax="5" style="width: {{ entity.rating_distribution.3.1 }}%">
+                            <span class="sr-only">80% Complete (danger)</span>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+            <div class="pull-left">
+                <div class="pull-left" style="width:35px; line-height:1;">
+                    <div style="height:9px; margin:5px 0;">3 <span class="glyphicon glyphicon-star"></span></div>
+                </div>
+                <div class="pull-left" style="width:250px;">
+                    <div class="progress" style="height:9px; margin:8px 0;">
+                        <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="3" aria-valuemin="0" aria-valuemax="5" style="width: {{ entity.rating_distribution.2.1 }}%">
+                            <span class="sr-only">80% Complete (danger)</span>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+            <div class="pull-left">
+                <div class="pull-left" style="width:35px; line-height:1;">
+                    <div style="height:9px; margin:5px 0;">2 <span class="glyphicon glyphicon-star"></span></div>
+                </div>
+                <div class="pull-left" style="width:250px;">
+                    <div class="progress" style="height:9px; margin:8px 0;">
+                        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="5" style="width: {{ entity.rating_distribution.1.1 }}%">
+                            <span class="sr-only">80% Complete (danger)</span>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+            <div class="pull-left">
+                <div class="pull-left" style="width:35px; line-height:1;">
+                    <div style="height:9px; margin:5px 0;">1 <span class="glyphicon glyphicon-star"></span></div>
+                </div>
+                <div class="pull-left" style="width:250px;">
+                    <div class="progress" style="height:9px; margin:8px 0;">
+                        <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="1" aria-valuemin="0" aria-valuemax="5" style="width: {{ entity.rating_distribution.0.1 }}%">
+                            <span class="sr-only">80% Complete (danger)</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+
+
+
     <div class="row">
-        <div class="col-sm-7">
+        <div class="col-sm-12">
             <hr/>
             <div id="review_container" class="review-block">
-                <div class="row" style="margin-top:40px;">
+                <div class="row" style="margin-top:10px;">
                     <div class="col-md-12">
                         <div class="well-sm">
                             <div class="text-right">
@@ -39,12 +115,13 @@
                             <div class="row" id="post-review-box" style="display:none;">
                                 <div class="col-md-12">
                                     <form method="post" action="/reviews">
+                                        <div id="csrf-token">{% csrf_token %}</div>
                                         <p class="text-right date"></p>
 
                                         {# Username input #}
                                         <div class="form-group">
-                                            <label for="name_input">Name:</label>
+                                            <label for="name_input">Name (Optional):</label>
-                                            <input type="text" class="form-control" placeholder="Name..." id="name_input">
+                                            <input type="text" class="form-control" placeholder="Name..." id="name_input" name="name">
                                         </div>
 
                                         {# Title input #}
@@ -71,7 +148,6 @@
 
                                             {# Hidden values that need to be posted with user content. #}
                                             <input type="hidden"  id="rating_input" name="rating" value="1">
-                                            <div id="csrf-token">{% csrf_token %}</div>
                                             <input type="hidden" name="entity_id" value="{{ entity.pk }}">
 
                                             {# Submit the form #}
@@ -92,7 +168,7 @@
 
         </div>
     </div>
-
+</div>
 
 {% endblock %}
 

backend/postings/templates/postings/frontend/results.html

@@ -7,7 +7,7 @@
 {% block content %}
 <div class="fullcontainer container bootstrap snippet results">
     <div class="row">
-        <div class="col-lg-12">
+        <div class="col-lg-12 whitebox">
             <div class="ibox float-e-margins ">
                 <div class="ibox-content">
                     <h2>
@@ -32,7 +32,7 @@
                         {% for entity in results %}
                             <div class="hr-line-dashed"></div>
                             <div class="search-result">
-                                <h3><a href="/rateables/{{ entity.pk }}">{{ entity.name }}</a></h3>
+                                <h2><a href="/rateables/{{ entity.pk }}">{{ entity.name }}</a></h2>
                                 <h4> Reviews: {{entity.review_set.all|length}}</h4>
                                 <span class="toright glyphicon glyphicon-icon-comments"></span>
 
@@ -46,5 +46,5 @@
             </div>
         </div>
     </div>
-</div>
+
 {% endblock %}

backend/postings/templates/postings/frontend/review.html

@@ -7,17 +7,17 @@
         <span class="big-font glyphicon glyphicon-user img-rounded"></span>
 
         {# Username #}
-        <div class="review-block-name"><a href="#">Student</a></div>
+        <div class="review-block-name"><p class="h5"><a href="#">{{ review.author_name }}</a></p></div>
 
         {# Date at which review was posted. #}
-        <div class="review-block-date">{{ review.created_date|date:"j M, Y" }}<br/></div>
+        <div class="review-block-date"><p class="h5">{{ review.created_date|date:"j M, Y" }}</p><br/></div>
     </div>
     <div class="col-sm-9">
         <div class="review-block-rate" data-rating="{{ review.rating }}">
             <div class="clearfix"></div>
         </div>
-        <div class="review-block-title">{{ review.title }}</div>
+        <div class="review-block-title"> <p class="h3">{{ review.title }}</p></div>
-        <div class="review-block-description">{{ review.content }}</div>
+        <div class="review-block-description"><p class="h4">{{ review.content }}</p></div>
 
         <div id="review-votes-{{ review.pk }}" class="js_votes" data-review_id="{{ review.pk }}">
             <div class="review-vote-buttons">

backend/postings/views.py

@@ -49,6 +49,7 @@ def rateable_entity(request, entity_id):
 		# Set any auxiliary variables needed, like average rating.
 		# This MUST be done after categorizing the object above.
 		entity.average_rating = entity.getAverageRating()
+		entity.rating_distribution = entity.getRatingDistribution()
 	except RateableEntity.DoesNotExist:
 		raise Http404("RateableEntity with id " + str(entity_id) + " does not exist.")
 
@@ -72,6 +73,12 @@ def post_review(request):
 			title = form.cleaned_data['title']
 			content = form.cleaned_data['content']
 			entity_id = form.cleaned_data['entity_id']
+
+			if 'name' in request.POST:
+				author_name = form.cleaned_data['name']
+			else:
+				author_name = None
+			
 			try:
 				entity = RateableEntity.objects.get(pk=entity_id)
 			except RateableEntity.DoesNotExist:
@@ -80,6 +87,7 @@ def post_review(request):
 			# Creates the new Review object from the posted data.
 			review = Review.objects.create(
 				rating=rating,
+				author_name=author_name,
 				title=title,
 				content=content,
 				rateable_entity=entity