Style Maps & add regional organization design pass

src/angular/planit/src/app/create-plan/create-plan.component.html

@@ -1,18 +1,17 @@
 <div *ngIf="showSplash" class="main-container splash-container">
   <main class="main-content splash-content" role="main">
     <header class="splash-header">
-      <p class="splash-title">Let&rsquo;s get started</p>
-      <h1 class="splash-intro">Create your city&rsquo;s adaptation plan</h1>
+      <p class="splash-title">Let’s get started</p>
+      <h1 class="splash-intro">Create your adaptation plan</h1>
     </header>
 
     <div class="splash-prompt">
       <div class="splash-prompt-content">
         <p>
-          You can now enter your plan&rsquo;s basic information, such as aspects of your
-          changing climate and aspects of your community that you want to focus on.
+          Enter your plan’s basic information, like the area it will be designed for and aspects of the climate and community that it will focus on.
         </p>
         <p>
-          If you have questions or need assistance at any time, click &ldquo;Ask an expert&rdquo; to enlist the help of climate experts at ICLEI-USA.
+          If you have questions at any time, click “Ask an expert” to enlist help.
         </p>
         <button class="button button-primary button-large button-icon-right" (click)="showSplash = false">
           Set up plan<span class="icon-arrow-right"></span>

src/angular/planit/src/app/create-plan/plan-wizard/plan-wizard.component.html

@@ -1,7 +1,7 @@
 <div class="main-container" *ngIf="!wizardComplete">
   <main class="main-content wizard-container" role="main">
     <header class="wizard-header">
-      <h1 class="wizard-title-large">Set up your city&rsquo;s adaptation plan</h1>
+      <h1 class="wizard-title-large">Create adaptation plan</h1>
     </header>
     <wizard #wizard
             class="custom-steps"

src/angular/planit/src/app/create-plan/plan-wizard/steps/area-step/area-step.component.html

@@ -1,7 +1,7 @@
 <div class="step-header">
   <h2 class="step-title">Geographic area</h2>
   <p>
-    Create a plan for your organization&rsquo;s community or draw an area of interest. All of the climate change data in Temperate will be specific to the area you select.
+    Create a plan for your organization’s community or draw an area of interest. All of the climate change data in Temperate will be specific to the area you select.
   </p>
 </div>
 
@@ -34,14 +34,16 @@ <h2 class="step-title">Geographic area</h2>
       </div>
     </div>
     <div class="tab-content" *ngIf="areaTab === areaTabs.DrawArea">
-      <h3>Draw your plan&rsquo;s boundaries</h3>
+      <h3 class="draw-header">
+        Draw your plan’s boundaries
+      </h3>
       <p class="map-help">
         <span
           [ngClass]="polygonArea >= maxArea ? 'error' : null">
           Please create a region that is under {{ maxArea | number }} sq mi.
         </span>
         <span *ngIf="polygonArea !== null">
-          Total: <span [ngClass]="polygonArea > maxArea ? 'error' : null">{{ polygonArea | number : '1.0-0' }}</span> out of max <b>{{ maxArea | number }} sq mi.</b>
+          Total: <strong><span [ngClass]="polygonArea > maxArea ? 'error' : null">{{ polygonArea | number : '1.0-0' }}</span></strong> out of max <strong>{{ maxArea | number }} sq mi.</strong>
         </span>
       </p>
       <p class="error" *ngIf="polygonOutOfBounds">
@@ -63,7 +65,7 @@ <h3>Draw your plan&rsquo;s boundaries</h3>
           class="button redraw-btn"
           *ngIf="polygon !== null"
           (click)="clearBounds()">
-          <i class="icon icon-cancel"></i>Re-draw
+          <i class="icon icon-cw"></i>Re-draw
         </button>
       </div>
     </div>

src/angular/planit/src/app/dashboard/city-minimap/city-minimap.component.html

@@ -1,12 +1,16 @@
 <div class="aside-block" *ngIf="organization">
   <div class="aside-content aside-minimap">
-    <app-gmap-static-map
-      [bounds]="organization?.bounds"
-      [latitude]="organization?.location.geometry.coordinates[1]"
-      [longitude]="organization?.location.geometry.coordinates[0]">
+    <div class="minimap-container">
+      <app-gmap-static-map
+        [bounds]="organization?.bounds"
+        [latitude]="organization?.location.geometry.coordinates[1]"
+        [longitude]="organization?.location.geometry.coordinates[0]">
       </app-gmap-static-map>
-    <h3>Organization</h3>
-    <h2 class="text-large">
+    </div>
+    <h3 class="minimap-subheader">
+      Organization
+    </h3>
+    <h2 class="minimap-org-name">
       {{ organization?.name || 'Your organization' }}
     </h2>
   </div>

src/angular/planit/src/app/map/map.component.html

@@ -1,3 +1,4 @@
 <app-impact-map
+  [showHeader]="true"
   [impacts]="impacts"
 ></app-impact-map>

src/angular/planit/src/app/shared/impact-map/impact-map.component.html

@@ -3,34 +3,60 @@
 </div>
 <main class="main-content" role="main" *ngIf="mapImpacts">
   <aside class="map-sidebar">
-    <label>Visualization</label>
-    <select class="form-control"
+    <h1 *ngIf="showHeader">
+      Maps
+    </h1>
+    <p class="paragraph-intro">
+     Use the visualization input below to view location-based climate data for {{organization?.getLocationName()}}.
+    </p>
+    <label class="label-viz" for="viz-select">
+      Visualization
+    </label>
+    <select id="viz-select"
+            class="form-control form-control-dark"
             (change)="setLayer()"
             [(ngModel)]="layerIndex"
             *ngIf="mapImpacts && mapImpacts.length > 0">
       <option [value]="null">---</option>
       <option *ngFor="let impact of mapImpacts; index as i" [value]="i">{{ impact.label }}</option>
     </select>
-    <ng-container *ngIf="mapImpacts && mapImpacts.length === 0"><span>No impacts have map data</span></ng-container>
+
+
+
     <ng-container *ngIf="layer">
-      <a
-        *ngIf="layer.external_link"
-        href="{{ layer.external_link }}"
-        target="_blank">
-        <i class="icon icon-question-circle"></i>
-        About this map
-      </a>
-      <label>Legend</label>
-      <ul class="legend">
-        <li *ngFor="let row of layer.legend">
+      <label class="label-legend" for="map-legend">
+        Legend
+      </label>
+      <ul id="map-legend" class="legend">
+        <li class="legend-row" *ngFor="let row of layer.legend">
           <span class="swatch" [style.backgroundColor]="row.color"></span>
           &nbsp;
           <span *ngIf="row.label">{{ row.label }}</span>
           <span *ngIf="row.min_value != undefined && row.max_value != undefined">{{ row.min_value }} &ndash; {{ row.max_value }}</span>
         </li>
       </ul>
-      <div class="attribution">
-        &copy; <span class="attribution-text">{{ layer.attribution }}</span>
+
+      <div class="footnotes">
+        <div class="about-viz-link">
+          <i *ngIf="layer.external_link" class="icon icon-question-circle"></i>
+          <a *ngIf="layer.external_link"
+            href="{{ layer.external_link }}"
+            target="_blank">
+            About this map
+          </a>
+        </div>
+        <hr>
+        <div class="attribution">
+          &copy;
+           <!-- TODO: Add attribution_link to impact map layer models #1345-->
+           <a *ngIf="layer.attribution_link"
+              href="{{ layer.attribution_link }}"
+              target="_blank"
+              class="attribution-text">
+             {{ layer.attribution }}
+           </a>
+           <span *ngIf="!layer.attribution_link">{{ layer.attribution }}</span>
+        </div>
       </div>
     </ng-container>
   </aside>

src/angular/planit/src/app/shared/impact-map/impact-map.component.ts

@@ -56,6 +56,7 @@ const PARSEINT_RADIX = 10; // eslint complains if parseInt is called without an
   templateUrl: './impact-map.component.html'
 })
 export class ImpactMapComponent implements OnChanges, OnInit, AfterViewInit {
+  @Input() showHeader = false;
   @Input() impacts: Impact[];
 
   public startingZoom = STARTING_MAP_ZOOM;

src/angular/planit/src/app/shared/navbar/navbar.component.html

@@ -13,7 +13,7 @@
     <a class="button button-inverse-light"
        *ngIf="showLink()"
        routerLink="/map"
-       routerLinkActive="current">Map</a>
+       routerLinkActive="current">Maps</a>
     <app-org-dropdown *ngIf="showOrgDropdown()"></app-org-dropdown>
     <app-user-dropdown></app-user-dropdown>
   </div>

src/angular/planit/src/assets/fonts/fontello/config.json

@@ -1778,6 +1778,12 @@
         "map-marked-alt"
       ]
     },
+    {
+      "uid": "bc71f4c6e53394d5ba46b063040014f1",
+      "css": "cw",
+      "code": 59568,
+      "src": "fontawesome"
+    },
     {
       "uid": "aaafc57606711978ce1817857229d8eb",
       "css": "plus",

src/angular/planit/src/assets/fonts/fontello/css/temperate-codes.css

@@ -124,6 +124,7 @@
 .icon-draw-polygon:before { content: '\e87a'; } /* '' */
 .icon-search:before { content: '\e87b'; } /* '' */
 .icon-map-marked-alt:before { content: '\e897'; } /* '' */
+.icon-cw:before { content: '\e8b0'; } /* '' */
 .icon-forestry:before { content: '\e8e6'; } /* '' */
 .icon-circle:before { content: '\e8fc'; } /* '' */
 .icon-circle-empty:before { content: '\e8fd'; } /* '' */

src/angular/planit/src/assets/fonts/fontello/css/temperate-ie7-codes.css

@@ -124,6 +124,7 @@
 .icon-draw-polygon { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-search { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-map-marked-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-cw { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-forestry { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-circle { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-circle-empty { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

src/angular/planit/src/assets/fonts/fontello/css/temperate-ie7.css

@@ -135,6 +135,7 @@
 .icon-draw-polygon { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-search { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-map-marked-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-cw { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-forestry { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-circle { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-circle-empty { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

src/angular/planit/src/assets/fonts/fontello/css/temperate.css

@@ -1,11 +1,11 @@
 @font-face {
   font-family: 'temperate';
-  src: url('../font/temperate.eot?65604603');
-  src: url('../font/temperate.eot?65604603#iefix') format('embedded-opentype'),
-       url('../font/temperate.woff2?65604603') format('woff2'),
-       url('../font/temperate.woff?65604603') format('woff'),
-       url('../font/temperate.ttf?65604603') format('truetype'),
-       url('../font/temperate.svg?65604603#temperate') format('svg');
+  src: url('../font/temperate.eot?47188523');
+  src: url('../font/temperate.eot?47188523#iefix') format('embedded-opentype'),
+       url('../font/temperate.woff2?47188523') format('woff2'),
+       url('../font/temperate.woff?47188523') format('woff'),
+       url('../font/temperate.ttf?47188523') format('truetype'),
+       url('../font/temperate.svg?47188523#temperate') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -15,7 +15,7 @@
 @media screen and (-webkit-min-device-pixel-ratio:0) {
   @font-face {
     font-family: 'temperate';
-    src: url('../font/temperate.svg?65604603#temperate') format('svg');
+    src: url('../font/temperate.svg?47188523#temperate') format('svg');
   }
 }
 */
@@ -180,6 +180,7 @@
 .icon-draw-polygon:before { content: '\e87a'; } /* '' */
 .icon-search:before { content: '\e87b'; } /* '' */
 .icon-map-marked-alt:before { content: '\e897'; } /* '' */
+.icon-cw:before { content: '\e8b0'; } /* '' */
 .icon-forestry:before { content: '\e8e6'; } /* '' */
 .icon-circle:before { content: '\e8fc'; } /* '' */
 .icon-circle-empty:before { content: '\e8fd'; } /* '' */

src/angular/planit/src/assets/fonts/fontello/demo.html

@@ -229,11 +229,11 @@
 }
 @font-face {
       font-family: 'temperate';
-      src: url('./font/temperate.eot?73398089');
-      src: url('./font/temperate.eot?73398089#iefix') format('embedded-opentype'),
-           url('./font/temperate.woff?73398089') format('woff'),
-           url('./font/temperate.ttf?73398089') format('truetype'),
-           url('./font/temperate.svg?73398089#temperate') format('svg');
+      src: url('./font/temperate.eot?15077506');
+      src: url('./font/temperate.eot?15077506#iefix') format('embedded-opentype'),
+           url('./font/temperate.woff?15077506') format('woff'),
+           url('./font/temperate.ttf?15077506') format('truetype'),
+           url('./font/temperate.svg?15077506#temperate') format('svg');
       font-weight: normal;
       font-style: normal;
     }
@@ -485,17 +485,18 @@ <h1>temperate <small>font demo</small></h1>
       </div>
       <div class="row">
         <div class="the-icons span3" title="Code: 0xe897"><i class="demo-icon icon-map-marked-alt">&#xe897;</i> <span class="i-name">icon-map-marked-alt</span><span class="i-code">0xe897</span></div>
+        <div class="the-icons span3" title="Code: 0xe8b0"><i class="demo-icon icon-cw">&#xe8b0;</i> <span class="i-name">icon-cw</span><span class="i-code">0xe8b0</span></div>
         <div class="the-icons span3" title="Code: 0xe8e6"><i class="demo-icon icon-forestry">&#xe8e6;</i> <span class="i-name">icon-forestry</span><span class="i-code">0xe8e6</span></div>
         <div class="the-icons span3" title="Code: 0xe8fc"><i class="demo-icon icon-circle">&#xe8fc;</i> <span class="i-name">icon-circle</span><span class="i-code">0xe8fc</span></div>
-        <div class="the-icons span3" title="Code: 0xe8fd"><i class="demo-icon icon-circle-empty">&#xe8fd;</i> <span class="i-name">icon-circle-empty</span><span class="i-code">0xe8fd</span></div>
       </div>
       <div class="row">
+        <div class="the-icons span3" title="Code: 0xe8fd"><i class="demo-icon icon-circle-empty">&#xe8fd;</i> <span class="i-name">icon-circle-empty</span><span class="i-code">0xe8fd</span></div>
         <div class="the-icons span3" title="Code: 0xf099"><i class="demo-icon icon-twitter">&#xf099;</i> <span class="i-name">icon-twitter</span><span class="i-code">0xf099</span></div>
         <div class="the-icons span3" title="Code: 0xf09a"><i class="demo-icon icon-facebook">&#xf09a;</i> <span class="i-name">icon-facebook</span><span class="i-code">0xf09a</span></div>
         <div class="the-icons span3" title="Code: 0xf0d4"><i class="demo-icon icon-gplus-squared">&#xf0d4;</i> <span class="i-name">icon-gplus-squared</span><span class="i-code">0xf0d4</span></div>
-        <div class="the-icons span3" title="Code: 0xf0d5"><i class="demo-icon icon-gplus">&#xf0d5;</i> <span class="i-name">icon-gplus</span><span class="i-code">0xf0d5</span></div>
       </div>
       <div class="row">
+        <div class="the-icons span3" title="Code: 0xf0d5"><i class="demo-icon icon-gplus">&#xf0d5;</i> <span class="i-name">icon-gplus</span><span class="i-code">0xf0d5</span></div>
         <div class="the-icons span3" title="Code: 0xf230"><i class="demo-icon icon-facebook-official">&#xf230;</i> <span class="i-name">icon-facebook-official</span><span class="i-code">0xf230</span></div>
         <div class="the-icons span3" title="Code: 0xf308"><i class="demo-icon icon-facebook-squared">&#xf308;</i> <span class="i-name">icon-facebook-squared</span><span class="i-code">0xf308</span></div>
       </div>

src/angular/planit/src/assets/sass/components/_form.scss

@@ -31,7 +31,8 @@ label, .label {
   margin: 0.65rem 0 1.25rem;
 }
 
-.form-control, textarea {
+.form-control,
+textarea {
   display: block;
   margin: $space-base 0 $space-base;
   width: 100%;
@@ -44,6 +45,11 @@ label, .label {
   border: $field-border;
   border-radius: $field-border-radius;
 
+  &-dark {
+    background-color: $white;
+    border: $field-border-dark;
+  }
+
   &:focus {
     @include button-focus-outline();
   }