Merge pull request #10 from NextPlex/fancy-design-round3

STYLE UP THAT ORG PAGE, HOMIE

Author: nathos

app/views/civic_organization/index.html

@@ -1,8 +1,10 @@
 <div ng-app="nextplex">
   <div ng-controller="CivicOrganizationIndexCtrl">
-    <ul class="table-view" ng-repeat="organization in civic_organizations">
-      <li class="table-view-cell" ng-click="open(organization.id)">
-        <b>{{organization.name}}</b>
+    <ul class="table-view">
+      <li class="table-view-cell" ng-repeat="organization in civic_organizations">
+        <a class="navigate-right" ng-click="open(organization.id)">
+          {{organization.name}}
+        </a>
       </li>
     </ul>
   </div>

app/views/civic_organization/show.html

@@ -1,22 +1,30 @@
 <div ng-app="nextplex">
 
-  <div ng-controller="CivicOrganizationShowCtrl">
-    <h1>{{civic_organization.name}}</h1>
-    <img src="{{civic_organization.logo}}" />
-    <p ng-bind-html="civic_organization.description_html"></p>
-    <p ng-bind-html="civic_organization.street_address"></p>
-    <p ng-if="web_address">
-      {{civic_organization.web_address}}
-    </p>
-    <p ng-if="phone">
-      {{civic_organization.phone}}
-    </p>
-    <p ng-if="twitter">
-      {{civic_organization.twitter}}
-    </p>
-    <p ng-if="rss_url">
-      {{civic_organization.rss_url}}
-    </p>
+  <div class="org-detail" ng-controller="CivicOrganizationShowCtrl">
+    <h1 class="org-name">{{civic_organization.name}}</h1>
+    <div class="org-meta">
+      <p class="org-website" ng-if="civic_organization.web_address">
+        <i class="fa fa-globe fa-fw"></i>
+        {{civic_organization.web_address}}
+      </p>
+      <p class="org-phone" ng-if="civic_organization.phone">
+        <i class="fa fa-phone fa-fw"></i>
+        {{civic_organization.phone}}
+      </p>
+      <p class="org-twitter" ng-if="civic_organization.twitter">
+        <i class="fa fa-twitter fa-fw"></i>
+        @{{civic_organization.twitter}}
+      </p>
+      <p class="org-rss" ng-if="civic_organization.rss_url">
+        <i class="fa fa-rss fa-fw"></i>
+        {{civic_organization.rss_url}}
+      </p>
+    </div>
+    <div class="org-description content-padded">
+      <img src="http://s3.amazonaws.com/join_roc_pro/{{ civic_organization.logo }}" ng-if="civic_organization.logo" />
+      <p ng-bind-html="civic_organization.description_html"></p>
+      <p ng-bind-html="civic_organization.street_address"></p>
+    </div>
   </div>
 
 </div>

app/views/event/index.html

@@ -8,10 +8,12 @@ <h1 class="city-name">Rochester, NY</h1>
     <div class="list-container">
       <ul class="table-view event-list">
         <li ng-show="todayEvents.length" class="table-view-divider">Today's Events</li>
-        <li class="table-view-cell" ng-click="open(event.id)" ng-repeat="event in todayEvents | orderBy:'start_at'">
-          <p class="event-time">{{ event.start_at | date : 'h:mma' | lowercase }}<span ng-if="event.end_at">-{{ event.start_at | date : 'h:mma' | lowercase }}</span></p>
-          <p class="event-name">{{ event.name }}</p>
-          <p class="event-venue">{{ event.venue }}</p>
+        <li class="table-view-cell" ng-repeat="event in todayEvents | orderBy:'start_at'">
+          <a class="navigate-right" ng-click="open(event.id)">
+            <p class="event-time">{{ event.start_at | date : 'h:mma' | lowercase }}<span ng-if="event.end_at">-{{ event.start_at | date : 'h:mma' | lowercase }}</span></p>
+            <p class="event-name">{{ event.name }}</p>
+            <p class="event-venue">{{ event.venue }}</p>
+          </a>
         </li>
         <li ng-show="upcomingEvents.length" class="table-view-divider">Upcoming Events</li>
         <li class="table-view-cell" ng-repeat="event in upcomingEvents | orderBy:'start_at'">

www/stylesheets/application.sass

@@ -83,22 +83,22 @@ h1, h2, h3 ,h4
     & > a:not(.btn)
       margin: -8px -55px -8px -15px
 
-.event-detail, .user-detail
+.event-detail, .user-detail, .org-detail
   background-color: #fff
-  .event-name, .user-name
+  .event-name, .user-name, .org-name
     font-size: 24px
     line-height: 1.2em
     margin: 0
     padding: 10px 15px
-  .event-meta, .user-meta
+  .event-meta, .user-meta, .org-meta
     @include thin-border-top-bottom
     padding: 10px 15px
     .fa
       font-size: 14px
       position: absolute
       left: 0
       top: 0
-    .event-datetime, .event-venue, .user-headline, .user-twitter, .user-website, .user-livingin
+    .event-datetime, .event-venue, .user-headline, .user-twitter, .user-website, .user-livingin, .org-headline, .org-twitter, .org-website, .org-phone, .org-rss
       padding-left: 1.8em
       position: relative
     p
@@ -109,7 +109,7 @@ h1, h2, h3 ,h4
       margin-bottom: 6px
       &:last-child
         margin-bottom: 0
-  .event-description, .user-profile
+  .event-description, .user-profile, .org-description
     @include thin-border-bottom
     *
       -webkit-user-select: text