Merge pull request mozilla#119 from mozilla/101-style-home-and-experi…

…ment-pages

101 style home and experiment pages

gulpfile.js

@@ -1,6 +1,5 @@
 const autoprefixer = require('gulp-autoprefixer');
 const babelify = require('babelify');
-const bourbon = require('node-bourbon');
 const browserify = require('browserify');
 const buffer = require('vinyl-buffer');
 const cache = require('gulp-cache');
@@ -13,7 +12,7 @@ const gulpif = require('gulp-if');
 const gutil = require('gulp-util');
 const imagemin = require('gulp-imagemin');
 const minifycss = require('gulp-minify-css');
-const neat = require('node-neat');
+const normalize = require('node-normalize-scss');
 const rename = require('gulp-rename');
 const runSequence = require('run-sequence');
 const sass = require('gulp-sass');
@@ -118,7 +117,7 @@ gulp.task('scripts', function scriptsTask() {
 gulp.task('styles', function stylesTask() {
   return gulp.src(SRC_PATH + 'styles/**/*.scss')
     .pipe(sass({
-      includePaths: bourbon.with(neat.includePaths)
+      includePaths: normalize.includePaths
     }).on('error', sass.logError))
     .pipe(autoprefixer('last 2 versions'))
     .pipe(gulp.dest(DEST_PATH + 'styles'))

idea_town/experiments/serializers.py

@@ -17,26 +17,11 @@ def get_experiment_url(self, obj):
         return request.build_absolute_uri(path)
 
 
-class ExperimentDeepSerializer(serializers.HyperlinkedModelSerializer):
-    """Deep Experiment serializer that includes ExperimentDetails"""
+class ExperimentSerializer(serializers.HyperlinkedModelSerializer):
+    """Experiment serializer that includes ExperimentDetails"""
     details = ExperimentDetailSerializer(many=True, read_only=True)
 
     class Meta:
         model = Experiment
         fields = ('id', 'url', 'title', 'slug', 'thumbnail', 'description',
                   'xpi_url', 'details')
-
-
-class ExperimentSerializer(serializers.HyperlinkedModelSerializer):
-    """Shallow Experiment serializer that links to a set of ExperimentDetails"""
-    details_url = serializers.SerializerMethodField()
-
-    class Meta:
-        model = Experiment
-        fields = ('id', 'url', 'title', 'slug', 'thumbnail', 'description',
-                  'xpi_url', 'details_url')
-
-    def get_details_url(self, obj):
-        request = self.context['request']
-        path = reverse('experiment-details', args=(obj.pk,))
-        return request.build_absolute_uri(path)

idea_town/experiments/views.py

@@ -2,7 +2,7 @@
 from rest_framework.decorators import detail_route
 from rest_framework.response import Response
 from .models import (Experiment, ExperimentDetail)
-from .serializers import (ExperimentSerializer, ExperimentDeepSerializer,
+from .serializers import (ExperimentSerializer,
                           ExperimentDetailSerializer)
 
 import logging
@@ -20,7 +20,7 @@ def retrieve(self, request, *args, **kwargs):
         """Use the deep serializer for individual retrieval, which includes
         ExperimentDetail items"""
         instance = self.get_object()
-        serializer = ExperimentDeepSerializer(
+        serializer = ExperimentSerializer(
             instance, context=self.get_serializer_context())
         return Response(serializer.data)
 

idea_town/frontend/static-src/app/templates/experiment-page.js

@@ -1,12 +1,88 @@
 export default `
-  <section class="page" data-hook="experiment-page">
-    <h1>{{title}}</h1>
-    {{#isInstalled}}
-      <button data-hook="uninstall">Uninstall</button>
-    {{/isInstalled}}
-    {{^isInstalled}}
-      <button data-hook="install">Install</button>
-    {{/isInstalled}}
+  <section id="details" class="page" data-hook="experiment-page">
+    <div id="details">
+      <div class="details-sticker"></div>
+
+      <div class="details-header-wrapper">
+        <div class="details-header">
+          <h1>{{title}}</h1>
+          <div class="idea-controls">
+            {{#isInstalled}}
+              <button data-hook="install" class="button primary">Enable {{title}}</button>
+            {{/isInstalled}}
+            {{^isInstalled}}
+              <button data-hook="uninstall" class="button primary">Disable {{title}}</button>
+            {{/isInstalled}}
+            <div class="user-count">7,654,321</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="details-content">
+        <div class="details-overview">
+          <img src="{{thumbnail}}" width="260">
+          <section>
+            <h3>Measurements</h3>
+            <p class="disclaimer">All data is collected anonymously and used only to help us improve this test. <a href="">Learn more.</a></p>
+            <ul class="measurement">
+              <li>Usage per session</li>
+              <li>Index of selected results</li>
+              <li>Time spent searching</li>
+            </ul>
+          </section>
+          <section>
+            <h3>Brought to you by</h3>
+            <ul class="contributors">
+              <li>
+                <img src="images/[email protected]" width="56" height="56">
+                <div class="contributor">
+                  <p class="name">Chris P. Bacon</span>
+                  <p class="title">Senior Strategy Dingus</span>
+                </div>
+              </li>
+              <li>
+                <img src="images/[email protected]" width="56" height="56">
+                <div class="contributor">
+                  <p class="name">Chris P. Bacon</span>
+                  <p class="title">Senior Strategy Dingus</span>
+                </div>
+              </li>
+              <li>
+                <img src="images/[email protected]" width="56" height="56">
+                <div class="contributor">
+                  <p class="name">Chris P. Bacon</span>
+                  <p class="title">Senior Strategy Dingus</span>
+                </div>
+              </li>
+            </ul>
+          </section>
+          <section>
+            <h3>Details</h3>
+            <table class="stats">
+              <tr>
+                <td>Version</td>
+                <td>0.4.5 <a href="">changelog</a></td>
+              </tr>
+              <tr>
+                <td>Last Update</td>
+                <td>10/22/15</td>
+              </tr>
+              <tr>
+                <td>Repo</td>
+                <td><a href="">https://github.com/mozilla/snooze-tabs<a></td>
+              </tr>
+            </table>
+          </section>
+        </div>
+
+        <div class="details-description">
+          <p class="copy">{{description}}
+          {{#details}}
+            <div class="details-image">
+              <img src="{{image}}" width="680">
+        </div>
+      </div>
+    </div>
   </section>
 `;
 

idea_town/frontend/static-src/app/templates/experiment-row-view.js

@@ -1,10 +1,8 @@
 export default `
-  <li data-hook="show-detail"
-    // toggle a class for styling purposes:
-    class="{{#isInstalled}} active {{/isInstalled}}">
-    <img width="200" height="200" src="{{thumbnail}}">
+  <li data-hook="show-detail" class="idea-card {{#isInstalled}} active {{/isInstalled}}">
+    <div class="idea-preview-image" style="background: url({{thumbnail}}) no-repeat"></div>
     <h2>{{title}}</h2>
-    <p>Status: {{^isInstalled}} Not {{/isInstalled}} Installed</p>
+    <p>{{description}}</p>
   </li>
 `;
 

idea_town/frontend/static-src/app/templates/header-view.js

@@ -1,7 +1,19 @@
 export default `
   <section class="navbar">
     {{#activeUser}}
-      Logged in as {{session}} <button data-hook="logout">Log out</button>
+      <div id="expanded-branding">
+        <div class="wrapper">
+          <header>
+            <h1>Idea Town</h1>
+            <p class="subtitle"> A place where ideas come to ideas
+            and also ideas are ideas etc.</p>
+          </header>
+          <div class="town-background"></div>
+          <div id="avatar-wrapper">
+            <span class="default-avatar" data-hook="logout"></span>
+          </div>
+        </div>
+      </div>
     {{/activeUser}}
     {{^activeUser}}
       <div id="tabzilla">

idea_town/frontend/static-src/app/templates/home-page.js

@@ -1,6 +1,7 @@
 export default `
   <section class="page" data-hook="home-page">
-    <ul class="experiments"></ul>
+
+    <ul id="idea-card-list" class="experiments"></ul>
   </section>
 `;
 

idea_town/frontend/static-src/app/templates/landing-page.js

@@ -1,10 +1,10 @@
 export default `
-  <section class="page" data-hook="landing-page">
+  <section class="page main-content" data-hook="landing-page">
     {{^loggedIn}}
       <div class="firefox-logo"></div>
       <h1 class="hero">Introducing Idea Town</h1>
       <h2 class="sub-hero">We're building the next generation of<br> Firefox features and we want your feedback! <br>Get started with a Firefox Account.</h2>
-      <div class="cta-layout-wrapper">
+      <div id="cta-layout-wrapper">
         <div class="cta-layout">
           <a href="/accounts/login/?next=/home"><button class="button large primary">Sign up</button></a>
           <a href="/accounts/login/?next=/home" class="fxa-alternate">Already have an account? Sign in.</a>
@@ -17,7 +17,7 @@ export default `
       <div class="firefox-logo"></div>
       <h1 class="hero">Thanks for Signing up!</h1>
       <h2 class="sub-hero">Install the Idea Town Add-on to participate<br> in experiments and give us feedback<br></h2>
-      <div class="cta-layout-wrapper">
+      <div id="cta-layout-wrapper">
         <div class="cta-layout">
           <a href="{{ downloadUrl }}"><button class="button large primary">Install the Add-on</button></a>
         </div>

idea_town/frontend/static-src/app/views/experiment-page.js

@@ -18,14 +18,35 @@ export default BaseView.extend({
   render() {
     this.title = this.model.title;
     this.isInstalled = !!this.model.isInstalled;
+    this.details = this.model.details;
+    this.thumbnail = this.model.thumbnail;
+    this.description = this.model.description;
+
+    // TODO: let's not mess with body, if possible
+    if (this.isInstalled) {
+      document.body.classList.add('active');
+    } else {
+      document.body.classList.add('inactive');
+    }
+    document.body._id = document.body.id;
+    document.body.id = 'idea-view';
+
     BaseView.prototype.render.apply(this, arguments);
   },
 
+  remove() {
+    document.body.id = document.body._id;
+    document.body.classList.remove('active');
+    document.body.classList.remove('inactive');
+
+    BaseView.prototype.remove.apply(this, arguments);
+  },
+
   // isInstall is a boolean: true if we are installing, false if uninstalling
   _updateAddon(isInstall) {
     this.model.isInstalled = !this.model.isInstalled;
-    const packet = isInstall ? { install: this.model.name } :
-                  { uninstall: this.model.name };
+    const packet = isInstall ? { install: this.model.slug } :
+                  { uninstall: this.model.slug };
     app.webChannel.sendMessage('from-web-to-addon', packet);
     this.render();
   },

idea_town/frontend/static-src/app/views/experiment-row-view.js

@@ -14,6 +14,7 @@ export default BaseView.extend({
     this.model.on('change:isInstalled', this.renderButton, this);
 
     this.title = this.model.title;
+    this.description = this.model.description;
     this.thumbnail = this.model.thumbnail;
     this.isInstalled = this.model.isInstalled;
   },

idea_town/frontend/static-src/app/views/header-view.js

@@ -20,7 +20,7 @@ export default BaseView.extend({
     this.session = app.me.user.id;
 
     // an active user has an addon and a session
-    this.activeUser = !!app.me.user.id && app.me.hasAddon;
+    this.activeUser = !!this.session && app.me.hasAddon;
 
     BaseView.prototype.render.apply(this, arguments);
   },

idea_town/frontend/static-src/app/views/home-page.js

@@ -8,7 +8,10 @@ export default BaseView.extend({
   _template: template,
 
   render() {
-    // TODO: do I need to do this if I don't want to manually assign this.el?
+    // TODO: this is not awesome
+    document.body.id = document.body._id;
+    document.body.id = 'list-view';
+
     BaseView.prototype.render.apply(this, arguments);
 
     // render the experiment list into the page
@@ -17,6 +20,12 @@ export default BaseView.extend({
       ExperimentRowView,
       this.query('.experiments')
     );
+  },
+
+  remove() {
+    document.body.id = document.body._id;
+
+    BaseView.prototype.remove.apply(this, arguments);
   }
 
 });

idea_town/frontend/static-src/styles/_base.scss

@@ -22,7 +22,8 @@ h2,
 h3,
 h4,
 h5,
-h6 {
+h6,
+p {
   font-weight: 200;
   margin: 0;
 }
@@ -35,4 +36,46 @@ h2 {
   font-size: 40px;
 }
 
+h3 {
+  font-size: 26px;
+}
+
+a {
+  color: $default;
+}
+
+// RECYCLABLE LITTLE BITS THAT
+// PROBABLY DON'T REQUIRE STAND ALONE
+// MODULES
+
+// LAYOUT
+
+.wrapper {
+  @include flex-container(default, space-between, top, nowrap, true);
+}
+
+.main-content {
+  @include wrapper;
+  flex: 1;
+}
+
+// TEXT FORMATTING
+
+.subtitle {
+  font-size: 16px;
+}
+
+.copy {
+  line-height: 2.5rem;
+  margin-bottom: 24px;
+}
+
+.caption {
+  font-size: 12px;
+  font-weight: 400;
+  margin: 6px 0 0 6px;
+}
+
+
+