Style tweaks

Author: iezer

app/controllers/application.js

@@ -8,18 +8,18 @@ const YEARS = [
 ];
 
 const MONTHS = [
-  1,
-  2,
-  3,
-  4,
-  5,
-  6,
-  7,
-  8,
-  9,
-  10,
-  11,
-  12
+  { name: 'Jan' , value: 1},
+  { name: 'Feb', value: 2 },
+  { name: 'Mar', value: 3 },
+  { name: 'Apr', value: 4 },
+  { name: 'May', value: 5 },
+  { name: 'Jun', value: 6 },
+  { name: 'Jul', value: 7 },
+  { name: 'Aug', value: 8 },
+  { name: 'Sep', value: 9 },
+  { name: 'Oct', value: 10 },
+  { name: 'Nov', value: 11 },
+  { name: 'Dec', value: 12 }
 ];
 
 const CURRENT_DATE = new Date();
@@ -33,21 +33,27 @@ export default Controller.extend({
   years: YEARS,
   months: MONTHS,
 
+  selectedMonth: computed('month', 'months', function() {
+    let months = this.get('months');
+    let month = parseInt(this.get('month'));
+    return months.findBy('value', month);
+  }),
+
   showCTA: computed({
     get() {
       if (this.get('fastboot.isFastBoot')) {
         return;
       }
-      return !localStorage.getItem('seenCTA');
+      return !localStorage.getItem('seenCTA-2');
     },
     set(key, value) {
-      localStorage.setItem('seenCTA', !value);
+      localStorage.setItem('seenCTA-2', !value);
       return value;
     }
   }),
 
   actions: {
-    changeMonth(month) {
+    changeMonth({ value: month }) {
       let year = this.get('year');
       this.get('router').transitionTo('graph', year, month);
     },

app/controllers/index.js

@@ -1,114 +1,3 @@
 import Controller from '@ember/controller';
-import {computed} from '@ember/object';
-import createGraph from 'cats-client/utils/create-graph';
-import { A as emberA } from '@ember/array';
-import { inject as service } from '@ember/service';
-
-export const ALL_MONTHS = 0;
-
 export default Controller.extend({
-  store: service(),
-  fastboot: service(),
-
-  allMonths: ALL_MONTHS,
-
-  showCTA: computed({
-    get() {
-      if (this.get('fastboot.isFastBoot')) {
-        return;
-      }
-      return !localStorage.getItem('seenCTA');
-    },
-    set(key, value) {
-      localStorage.setItem('seenCTA', !value);
-      return value;
-    }
-  }),
-
-  selectedArtist: computed('artist', {
-    get() {
-      let artist = this.get('artist');
-      if (artist) {
-        return this.get('store').peekRecord('artist', artist);
-      }
-
-      return null;
-    },
-    set(key, value) {
-      this.set('showCTA', false);
-      this.set('artist', value && value.get('id'));
-      return value;
-    }
-  }),
-
-  sortDef: Object.freeze(['startTime:desc']),
-  sortedEvents: computed.sort('events', 'sortDef'),
-
-  includeBandmates: true,
-  month: ALL_MONTHS,
-  year: null,
-
-  artist: null,
-
-  queryParams: Object.freeze([ 'month', 'year', 'includeBandmates', 'artist' ]),
-
-  // converter query-string month input "1"-"12"
-  // do 0 based int 0-11 so that getMonth() works.
-  monthInt: computed('month', function() {
-    let month = this.get('month');
-    if (month === ALL_MONTHS || month === null) {
-      return null;
-    }
-
-    return parseInt(month, 10) - 1;
-  }),
-
-  // Filter on month and/or selectedArtist
-  events: computed('monthInt', 'selectedArtist', 'includeBandmates', function() {
-    let month = this.get('monthInt');
-    let events;
-
-    let selectedArtist = this.get('selectedArtist');
-    if (selectedArtist) {
-      events = emberA();
-
-      let pushEvents = function(artist) {
-        events.pushObjects(artist.get('events').filter(event => {
-          if (month === null) {
-            return true;
-          }
-
-          return event.get('startTime').getMonth() === month;
-        }));
-      };
-
-      pushEvents(selectedArtist);
-
-      if (this.get('includeBandmates')) {
-        let bandMates = emberA();
-        events.forEach(event => {
-          bandMates.pushObjects(event.get('artists').toArray());
-        });
-
-        bandMates = bandMates.uniq().removeObject(selectedArtist);
-
-        bandMates.forEach(bandMate => pushEvents(bandMate));
-      }
-
-      return events.uniq();
-    }
-
-    // if (month !== null) {
-    //   return this.get('model').filter(event => {
-    //     return event.get('startTime').getMonth() === month;
-    //   });
-    // }
-
-    return this.get('model');
-  }),
-
-  graph: computed('events.[]', function() {
-    let events = this.get('events');
-    return createGraph(events);
-  })
 });

app/styles/app.scss

@@ -59,6 +59,12 @@ strong {
 
 .ember-power-select-trigger {
   display: inline-block;
+  min-width: 45px;
+  margin-right: 10px;
+}
+
+.ember-power-select-options[role=listbox] {
+  max-height: none !important;
 }
 
 @import "ember-power-select";

app/styles/index.scss

@@ -19,7 +19,7 @@ $margin: 10px;
   .index-container__cta {
     position: absolute;
     left: 50%;
-    top: 25px;
+    top: 30px;
     transform: translate(-50%, -50%);
     margin: 10px;
     text-align: center;

app/templates/application.hbs

@@ -20,10 +20,10 @@
 
       {{#power-select options=months
          searchEnabled=false
-         selected=month
+         selected=selectedMonth
          onchange=(action 'changeMonth')
          as |value|}}
-        {{value}}
+        {{value.name}}
       {{/power-select}}
 
       {{link-to "Monthly graph" "index" class="selectable"}}

app/templates/index.hbs

@@ -1,32 +1 @@
-<div class='index-container'>
-  <div class='index-container__column'>
-
-    {{#if showCTA}}
-      <div {{action (mut showCTA) false}} class='index-container__cta selectable'>
-        Click a dot or a musician's name to get started.
-      </div>
-    {{/if}}
-
-    <div class='index-container__events'>
-      {{#if selectedArtist}}
-        {{#artist-info artist=selectedArtist
-           month=monthInt
-           clearArtist=(action (mut selectedArtist))}}
-          {{input type="checkbox" name="includeBandmates" checked=includeBandmates}} Graph Bandmates' Gigs
-        {{/artist-info}}
-      {{/if}}
-
-      {{#each sortedEvents as |event|}}
-        {{event-info event=event
-          selectArtist=(action (mut selectedArtist))
-          selectedArtist=selectedArtist}}
-      {{/each}}
-    </div>
-  </div>
-
-  <div class='index-container__column'>
-    {{force-graph graph=graph
-      selectArtist=(action (mut selectedArtist))
-      selectedArtist=selectedArtist}}
-  </div>
-</div>
+{{outlet}}