civicmakers / client Goto Github PK

Restyle the global navbar to be responsive, and replace "CivicMakers" text with logo.

Logo image:
https://civicmakers.slack.com/files/grodeska/F0L3DHFNJ/civicmakers_logo.png

Change login button text to "Login"

Note: current home page design shows transparent navbar, but let's stick with current white background globally, including home page.

As a story owner, I would like to receive email notifications of questions asked on my story.

As a practitioner, I would like to receive email notifications of answers to my questions.

Requirements: - email notifications to owner for questions asked

• email notifications to users whose questions are answered

Develop responsive styles for the Tools page based on the breakpoints and layouts in this file:
https://drive.google.com/open?id=0BxQM53EujCl0NEpzU3R5NXlmY1E

... and the 'created by' section on the story page is not the user...it's the project logo/name!

• Firebase needs a pointer in the project object to the user id that was logged in when the project was added
• UI needs to be updated to pull in the field

Need way to store story/tool logos (especially if screen shot needed) and also size/render them correctly - unless perfectly square they get distorted

Note: a lot of stories/tools don't appear to have logos we can link out to - or they're not square and look bad on the page

At the moment we're storing images (if none available where I'm looking at story/project) at https://github.com/civicmakers/civicmakers.github.io/tree/master/images

Form description should read:

"Share a tool with the civic tech community! It could be a product, a Github repo, or a best practice. If there's a tool you've built or you use for civic projects, your peers want to know about it."

Basic styling should be:

• 60% of content width
• style input forms like those on add story & tool pages
• style button like site-wide buttons
• add padding

As a user, I would like to be able to read the privacy policy for the CivicMakers site.

• Add new view
• Add "Privacy policy" link in footer

Evaluating Feedback Lite: http://www.feedbacklite.com/pricing/

As a user, I would like to see a guide to starting my own project. I can access this guide from the "do this in my area" button on the project page.

This page should be a new view.

Url for this page should be: civicmakers.com/start-a-project-guide

Content is forthcoming from Lawrence

Longer project name pushes Pricing to a 2nd line – longer project names should truncate or wrap to 2nd line while pricing stays on top line, aligned right

Profile menu in nav bar should instead float to the right edge of content width.

A lot of our business logic code is written in the controllers while it should be in different services in order to make it more MVC-like and more testable.
Controllers should not talk directly with the DB...

When adding tools on the '/add/project' page - tool names and images should bind with whatever user types and a corresponding tool. However, any input in the input field renders all of the tools no matter what you type.

I believe the error occurred when we required a user to login to add anything to our page see sha# 8d15e3.

client/app/projects/AddProject/AddProject.html

-     <div class="lil-card" ng-if="searchInput !== undefined " ng-repeat="tool in tools | filter:searchInput | limitTo: 12" ng-click="addToTools(tool)">
+     <div class="lil-card" ng-if="addProjectCtrl.searchInput !== undefined " ng-repeat="tool in addProjectCtrl.tools | filter:searchInput | limitTo: 12" ng-click="addProjectCtrl.addToTools(tool)">
        <img ng-src="{{tool.image}}" alt="">
        <p>{{tool.name}}</p>
      </div>

-     <div class="selected-tools" ng-if="selectedTools.length !== 0">
+     <div class="selected-tools" ng-if="addProjectCtrl.selectedTools.length !== 0">
       <h3>Your Selected Tools:</h3>
       <div class="card-container">
-        <div class="lil-card" ng-repeat="selectedTool in selectedTools track by $index">
+        <div class="lil-card" ng-repeat="selectedTool in addProjectCtrl.selectedTools track by $index">
          <img ng-src="{{selectedTool.image}}" alt="">
          <p>{{selectedTool.name}}</p>
         </div>
@@ -51,7 +51,7 @@

   </form>

client/app/projects/AddProject/AddProject.controller.js

+(function() {
+  function AddProjectCtrl($scope, ProjectApi, $location, ToolApi, AuthenticationService) {
+    var self = this;
+    this.projectFormData = {
+        // TODO: prevent duplicates
+        tools: []
         // authorIp:
         // cfApiProjId:
         // cfApiOrgId
     };
+    // TODO: prevent duplicates
+    this.selectedTools = [];

     ToolApi.getAllTools().then(function (tools){
       console.log('add project tools',tools);
-      $scope.tools = tools;
+      self.tools = tools;
     });

-    $scope.addToTools = function (input) {
-      $scope.selectedTools.push(input);
-      $scope.projectFormData.tools.push(input.$id);
+    this.addToTools = function (input) {
+      this.selectedTools.push(input);
+      this.projectFormData.tools.push(input.$id);
     };
-// TODO: prevent duplicates
-    $scope.selectedTools = [];
+    

As detailed here:
https://docs.google.com/spreadsheets/d/1OEGiGUOv8RrAfYePDwviwMJb7p6-yT3t5Cw9Dg4B64I/edit#gid=1471225924

Need to rename 'Tags' array in firebase DB to 'tags' (just like the projects).

Go to the story or tools list and click the refresh button (or copy paste the entire URL). Get a 'page not found' / 404 error.

Design spec has card dimensions at 141 x 140 px:

https://app.zeplin.io/project.html#pid=5643f6ea7f758de72a21c434&sid=56458e26dcf8e30f535284ff

Create name spaces for all elements
Define style guide standards
Create directives that can be extracted

Right now the height of the story/tool cards is fixed (180px).
In case the tags list is too long the cards seem cropped at the bottom like so:

@olliebeannn, @cpalmatier please share your thoughts on this.
These are possible solutions I thought of:

• Having each card expand and still keep the rows (cards start at the same height and the row ends where the longest card ended).
• Pinterest style (see example - http://cssdeck.com/labs/css-only-pinterest-style-columns-layout press the refresh button at the top right if nothing appears)
• Restyle the tags list in a way that it'll always take the same space.
• Remove tags list from cards (only show it on story/tool profile)

Design spec has card dimensions at 141 x 140 px:

https://app.zeplin.io/project.html#pid=5643f6ea7f758de72a21c434&sid=56458e26dcf8e30f535284ff

Requirements outline here:
https://docs.google.com/document/d/1AK0EG_psBD6sy1ZLs268NURq4yrqji7vp118KlmLS8k/edit

Design here:
https://civicmakers.slack.com/files/ollie/F0JDK32MS/story-v1-pitch.png

When clicking tool or story from home page, the new view doesn't scroll to top of form/view:

The gruntfile is currently not behaving properly for several reasons:

• There are tasks that don't exist but are in some task lists (concat for example).
• The flow - copying files to .tmp on serve and to dist on build doesn't work as it should.
• Some tasks don't work (autoprefixer for example).
• Some tasks don't work properly (grunt-ng-annotate doesn't work for controller functions inside directives for example).
• A few node modules are really outdated: need to run 'npm outdated', go over the list and update whatever's possible (make sure things work properly if upgrading major version).

Any time I click on the 'back' button the url goes back but the page itself doesn't.

I'm using Chrome on Ubuntu 12.04.

3 column call to action
project screenshot
tool screenshot

Topic tags are not being pulled in on left hand column

When clicking tools or stories on home page, new view should scroll all the way to the top.

This:

Should look like this:

Screen Shot 2015-12-02 at 9.35.30 PM

Topic tags are not being pulled in on left hand column

Topic tags are static - they need to be dynamic

On "Add story" form, "Search for Tools to Include" returns no result for Github, Ourstory, etc. "autocomplete filtering is borked"

In DB, make sure projects & tools are unique (no double entries!)

At the moment if the user logged in with twitter but didn't give us his email (for example closed the login modal without registering) if the user then wants to write to the db he can.
We need to pop the login modal any time we check if the user is logged in and make sure we have his email.

On profileCard directive, fields should only be displayed if data exists (Twitter, URL, tags, etc.)

Previous comments from James Tyack:

If we're associating projects 'from cfapi' is this associating a project stub with a cfapi project?

If we're calling CFAPI, we may need some back-end proxy...I'm thinking that Express may be useful here? I know that there can be issues if you try to call a third party site from client's browser (CORS etc)