Merge pull request #94 from openplans/list-view

Add a list view of places
openplans · Feb 13, 2014 · 035e738 · 035e738
2 parents 8414177 + 2f4f207
commit 035e738
Show file tree

Hide file tree

Showing 15 changed files with 3,068 additions and 76 deletions.
diff --git a/VERSION b/VERSION
@@ -1 +1 @@
-3.10.3
+3.11.0
diff --git a/src/sa_web/jstemplates/place-detail-support.html b/src/sa_web/jstemplates/place-detail-support.html
@@ -1,4 +1,4 @@
-    <form id="user_support" action="#" method="post" class="btn btn-block btn-small">
+    <form action="#" method="post" class="btn btn-block btn-small user-support">
       <input type="hidden" name="user_token" value="{{{ user_token }}}">
       <input type="hidden" name="visible" value="true">
       <input type="checkbox" id="support"{{# is_supporting }} checked="checked"{{/ is_supporting }}>

diff --git a/src/sa_web/jstemplates/place-detail.html b/src/sa_web/jstemplates/place-detail.html
@@ -1,37 +1,39 @@
         {{> place-detail-promotion-bar }}
 
         <header class="place-header clearfix">
-          <h1>{{ name }}</h1>
+          <h1><a href="/place/{{ id }}">{{ name }}</a></h1>
           <span class="place-submission-details">
             {{#_}}<strong class="point-submitter">
               {{#if submitter}}
                 <img src="{{ submitter.avatar_url }}" class="avatar" /> {{ submitter.name }}
               {{^}}
-                <!-- TODO: FIXME: don't hardcode image URL -->
-                <img src="/static/css/images/user-50.png" class="avatar" /> {{ submitter_name }}
+                <img src="{{ STATIC_URL }}/css/images/user-50.png" class="avatar" /> {{ anonymous_name }}
               {{/if}}
-            </strong> {{ place_config.action_text }} this {{#if place_type_label}}{{ place_type_label }}{{else}}place{{/if}}
+            </strong> {{ action_text }} this {{ place_type_label location_type}}
 
             {{#if region}}
               in {{ region }}
             {{/if}}{{/_}}
 
-            <time datetime="{{ created_datetime }}" class="response-date">{{ pretty_created_datetime }}</time>
+            <time datetime="{{ created_datetime }}" class="response-date"><a href="/place/{{ id }}">{{ fromnow created_datetime }}</a></time>
+
+            <a href="/place/{{ id }}" class="submission-count">{{ survey_count }} <span class="submission-type">{{ survey_label_by_count }}</span></a>
+
           </span>
         </header>
 
         <section class="place-items">
           {{# attachments }}
-          <div class="place-item place-attachment-{{ name }}">
+          <div class="place-item place-item-attachment place-attachment-{{ name }}">
             <img src="{{ file }}" class="place-value place-value-{{ name }}" alt="{{ name }}">
           </div>
           {{/ attachments }}
-          {{# items }}
+          {{#each_place_item }}
           <div class="place-item place-item-{{ name }}">
             <span class="place-label place-label-{{ name }}">{{ label }}</span>
             <p class="place-value place-value-{{ name }}">{{ value }}</p>
           </div>
-          {{/ items }}
+          {{/each_place_item }}
         </section>
 
         {{#if survey_config}}

diff --git a/src/sa_web/jstemplates/place-list.html b/src/sa_web/jstemplates/place-list.html
@@ -0,0 +1,9 @@
+<div class="place-list-header">
+  <form class="list-search-form">
+    <input id="list-search" name="list_search" type="text" placeholder="Search...">
+    <input name="search" type="submit" value="Search" class="btn btn-primary submit-btn">
+  </form>
+  <nav class="list-sort-menu"><span class="list-sort-prompt">Sort by:</span> <a href="#" class="date-sort is-selected">Date</a> | <a href="#" class="support-sort">Support</a> | <a href="#" class="survey-sort">{{ survey_label }}</a></nav>
+</div>
+
+<ul class="place-list unstyled-list"></ul>
diff --git a/src/sa_web/static/css/default.css b/src/sa_web/static/css/default.css
@@ -78,7 +78,6 @@ strong {
 }
 hr {
   margin: 1.5em 0;
-  border: 0;
   border: 1px solid #eeeeee;
   border-top-color: rgba(0,0,0,0.2);
   border-bottom-color: rgba(255,255,255,0.75);
@@ -334,7 +333,7 @@ img {
   padding: 0;
   display: none;
 }
-.access.expose {
+.access.is-exposed {
   display: block;
 }
 .access li {
@@ -373,7 +372,7 @@ img {
   padding: 0;
   display: none;
 }
-.sign-in-menu.expose {
+.sign-in-menu.is-exposed {
   display: block;
 }
 .sign-in-menu-item {
@@ -426,12 +425,12 @@ a.logout-btn {
 
 /* =Map
 -------------------------------------------------------------- */
-
 #map-container {
-  background: #a3c7d9;
   position: relative;
+  background: #a3c7d9;
   z-index: 10;
 }
+
 #map {
   background: #a3c7d9;
   height: 150px;
@@ -686,9 +685,10 @@ a.close-btn span {
   margin-bottom: 0.75em;
   position: relative;
 }
-#user_support {
+.user-support {
+  position: relative;
 }
-#user_support input[type=checkbox] {
+.user-support input[type=checkbox] {
   cursor: pointer;
   display: block;
   padding: 0;
@@ -703,7 +703,7 @@ a.close-btn span {
   -ms-filter: "alpha(opacity=0)";
   zoom: 1;
 }
-#user_support label {
+.user-support label {
   display: block;
   background: transparent url(images/heart-empty.png) left center no-repeat scroll;
   box-shadow: none;
@@ -712,10 +712,10 @@ a.close-btn span {
   padding-left: 22px;
   color: #007fbf;
 }
-#user_support input[type=checkbox]:checked ~ label {
+.user-support input[type=checkbox]:checked ~ label {
   background-image: url(images/heart.png);
 }
-#user_support:hover label {
+.user-support:hover label {
   background-color: #93b7c9;
 }
 .support-count {
@@ -749,6 +749,9 @@ a.close-btn span {
 .place-header {
   margin-bottom: 1em;
 }
+.place-header a {
+  text-decoration: none;
+}
 .place-submission-details {
   display: block;
   padding-left: 3.75em;
@@ -763,7 +766,23 @@ a.close-btn span {
   display: block;
   text-transform: uppercase;
   color: #888;
-  font-size: 0.85em;
+  font-size: 0.75em;
+}
+.response-date a {
+  color: #888;
+}
+.response-date a:hover {
+  color: #00aaff;
+}
+.submission-count {
+  font-size: 0.875em;
+  font-weight: bold;
+  text-transform: uppercase;
+  float: left;
+}
+.submission-count .submission-type {
+  font-size: 0.875em;
+  font-weight: normal;
 }
 
 /* Surveys */
@@ -866,7 +885,7 @@ form .signed-in-as .avatar {
 }
 form .signed-in-as a {
   font-weight: bold;
-  font-size: 0.85em;
+  font-size: 0.875em;
   text-transform: uppercase;
 }
 .or-sign-in {
@@ -937,6 +956,118 @@ ul.recent-points {
 }
 
 
+/* =List View
+-------------------------------------------------------------- */
+
+.list-toggle-nav { 
+  display: none;
+}
+
+#list-container {
+  display: none;
+  background: #fff;
+  position: absolute;
+  padding: 1.75em 1em;
+  top: 5em; /* height of #site-header (on large screens) */
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 39;
+  overflow: auto;
+}
+.place-list,
+.place-list-header {
+  max-width: 70em;
+  margin: 0 auto;
+}
+
+/* Search */
+.list-search-form input {
+  max-width: 25em;
+  float: left;
+  padding: 0.5em;
+  margin-right: 0.5em;
+}
+
+/* Search & Sort */
+.list-sort-menu {
+  float: right;
+  padding: 1em 0 0;
+  color: #eee;
+  text-transform: uppercase;
+}
+.list-sort-prompt {
+  font-size: 0.75em;
+  color: #999;
+}
+.list-sort-menu a {
+  font-weight: bold;
+  font-size: 0.75em;
+  text-decoration: none;
+}
+.list-sort-menu a.is-selected {
+  color: #555;
+}
+
+/* Place List */
+.place-list {
+  clear: both;
+  padding: 1.25em 0 0;
+}
+.place-list > li {
+  margin: 0 0 1.25em 0;
+  padding: 0.75em 0 0 0;
+  border-top: 1px solid #eeeeee;
+}
+.place-list .place-header {
+  font-size: 0.875em;
+}
+.place-list .place-header:before, .place-list .place-header:after { display: none; }
+.place-list .place-header:after { clear: none; }
+.place-list .place-header h1 {
+  font-size: 1.625em;
+  margin-bottom: 0.75em;
+}
+.place-list .place-submission-details {
+  float: left;
+  width: 17.25em;
+  margin-top: 0.5em;
+  padding-left: 3em;
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+}
+.place-list .point-submitter .avatar {
+  width: 2.5em;
+  height: 2.5em;
+  float: left;
+  margin-left: -3em;
+}
+.place-list .submission-count {
+  font-size: 1.25em;
+}
+.place-list .place-items {
+  margin-right: 5em;
+  margin-left: 16em;
+}
+.place-list .place-item-attachment {
+  float: left;
+  max-width: 9em;
+  margin: 0 1em 0.75em 0;
+}
+
+.place-list .place-label, 
+.place-list .place-value {
+}
+.place-list .place-label:empty, 
+.place-list .place-value:empty {
+  display: none;
+}
+.place-item-attachment .place-value:empty {
+  display: block;
+}
+
+
 /* =Footer
 -------------------------------------------------------------- */
 
@@ -1061,6 +1192,7 @@ a.close-unsupported-overlay {
   }
   #pages-nav-container {
     height: 100%;
+    float: left;
   }
   .access {
     font-size: 0.875em;
@@ -1238,6 +1370,30 @@ a.close-unsupported-overlay {
     right: 18em; /* width of #ticker */
   }
 
+  /* List View */
+  .list-toggle-nav { 
+    display: block;
+    float: right;
+    width: auto;
+    margin: -1.125em 0 0 0.5em;
+    position: relative;
+    top: 50%;
+    font-size: 0.875em;
+  }
+  #list-container.is-exposed {
+    display: block;
+  }
+  .list-toggle-btn,
+  .list-toggle-btn:visited,
+  .list-toggle-btn:link {
+    background-color: #007fbf;
+    color: #eee;
+  }
+  .list-toggle-btn:hover {
+    background-color: #00aaff;
+    color: #fff;
+  }
+
   /* Footer */
   #colophon {
     background-color: #666;