Merge pull request #541 from unepwcmc/ticket-224

Ticket 224

app/assets/stylesheets/components/cards/card/_card-theme.scss

@@ -3,7 +3,7 @@
   @include border-radius;
   @include flex;
   @include flex-column;
-  @include flex-h-end;
+  @include flex-h-start;
   background-color: $grey-dark;
   background-position: center;
   background-size: cover;
@@ -24,56 +24,6 @@
   &::before { @include border-radius; }
 
   .card {
-    &__ribbon {
-      @include flex;
-      @include flex-column;
-      @include flex-h-between;
-      @include flex-v-center;
-      background-color: $grey-black;
-      padding: rem-calc(20 10);
-      text-align: center;
-      width: rem-calc(134); height: rem-calc(134); 
-
-      position: absolute;
-      top: 0;
-
-      @include breakpoint ($small) { 
-        width: rem-calc(150); height: rem-calc(150); 
-
-        right: rem-calc(26);
-      }
-
-      @include breakpoint ($medium) { right: rem-calc(44); }
-    } 
-
-      &__icon {
-        @include icon-pin-terrestrial-light;
-        flex-shrink: 0;
-
-        &.marine-protected-areas { @include icon-pin-marine-light; }
-        &.oecms { @include icon-pin-oecm-light; }
-      }
-
-      &__number {
-        color: $primary;
-        font-size: rem-calc(20);
-        font-weight: $bold;
-        line-height: 1;
-        margin-top: rem-calc(10);
-
-        display: block;
-
-        @include breakpoint ($small) { font-size: rem-calc(30); }
-        @include breakpoint ($medium) { font-size: rem-calc(40); }
-      }
-
-        &__number-text { 
-          font-size: rem-calc(16);
-          line-height: 1; 
-
-          @include breakpoint ($small) { font-size: rem-calc(18); }
-        }
-
     &__summary {
       display: none;
 

app/assets/stylesheets/components/cards/cards/_cards-facts.scss

@@ -65,7 +65,7 @@ $cards-facts-height-tablet: rem-calc(294);
 
       @include breakpoint($small) { 
         font-size: rem-calc(20); 
-        margin-top: 0;
+        margin-top: rem-calc(10);
       }
     }
 

app/views/partials/cards/_facts.html.erb

@@ -6,13 +6,13 @@
           <%= render '/partials/svgs/pin.svg' %>
         </i>
         <span class="card__number-large"><%= card[:percentage] %>%</span>
-        <p class="card__title"><%= card[:title] %></p>
         <% card[:totals].each do |total| %>
           <p class="card__total">
             <span class="card__number"><%= total[:number] %>:</span>
             <span class="card__text"><%= total[:text] %></span>
           </p>
         <% end %>
+        <p class="card__title"><%= card[:title] %></p>
       </div>
     <% end %>
   </div>

app/views/partials/sub_partials/_themes.html.erb

@@ -2,17 +2,6 @@
   title: "View the #{theme[:obj][:label]} page", 
   class: "card--theme", 
   style: "background-image: url('#{cms_fragment_render(:image, theme[:obj])}')" do %>
-  <% unless theme[:pas_no] == -1 %>
-    <div class="card__ribbon">
-      <i class="card__icon <%= theme[:obj][:slug] %>">
-        <%= render '/partials/svgs/pin.svg' %>
-      </i>
-      <p class="no-margin">
-          <span class="card__number"><%= theme[:pas_no] %></span>
-          <span class="card__number-text"><%= t('global.area-types.wdpa') %></span>
-      </p>
-    </div>
-  <% end %>
 
   <h3 class="card__title"><%= theme[:obj][:label] %></h3>
   <p class="card__summary"><%= cms_fragment_content(:summary, theme[:obj]) %></p>

config/locales/home/en.yml

@@ -3,19 +3,19 @@ en:
     facts:
       -
         theme: terrestrial
-        title: Terrestrial Protected Area Coverage
+        title: Terrestrial protected area coverage
       -
         theme: marine
-        title: Marine Protected Area Coverage
+        title: Marine protected area coverage
       -
         theme: oecm
-        title: Terrestrial OECM & Protected Area Coverage
+        title: Terrestrial OECM & protected area coverage
       -
         theme: oecm
-        title: Marine OECM & Protected Area Coverage
+        title: Marine OECM & protected area coverage
     hero:
       button: Explore Protected Areas
-      stat-text: Global Coverage of Protected Areas
+      stat-text: Global coverage of protected and conserved areas
     pas:
       title: Explore Protected Areas by...
       button: Explore All

config/locales/map/en.yml

@@ -8,7 +8,7 @@ en:
       terrestrial_wdpa:
         title: Terrestrial Protected Areas
       marine_wdpa:
-        title: Coastal and Marine Protected Areas
+        title: Marine Protected Areas
       oecm_marine:
         title: Other effective area-based conservation measures
       oecm: