Adjust scenario cards

Author: noracato

app/assets/stylesheets/_root.sass

@@ -227,6 +227,7 @@ body#root
 
   #new-scenario, #preset-scenario
     border: none
+    margin-bottom: 80px
     .header-container
       display: flex
       margin: -15px -20px 0px
@@ -243,6 +244,12 @@ body#root
       line-height: 1
       margin: 0 auto 0 0
       padding: 0
+  .header-container.loose
+    h4
+      font-size: 16px
+      line-height: 1
+      margin: 0 0 20px 20px
+      padding: 0
 
   #new-scenario
     border-top-color: $landing-blue
@@ -378,9 +385,12 @@ body#root
     .header-container .title
       color: #462c34
 
+    .hint
+      margin-bottom: 1.5rem
+
     .year-tabs
       display: flex
-      margin-bottom: 1rem
+      margin-bottom: 1.5rem
       .end-year-tab
         margin-left: 1rem
         margin-bottom: 3px
@@ -440,7 +450,6 @@ body#root
         transition: background 0.15s ease-in, border 0.15s ease-in
         &:hover
           border-color: #e5e7eb
-          background: $soft-grey
           cursor: pointer
           background: $soft-grey
           text-decoration: none
@@ -450,11 +459,25 @@ body#root
           font-size: 14px
           line-height: 1.7
           margin-bottom: 2px
+        .fa
+          margin-right: 5px
+        .labels
+          font-size: 0.75rem
+          margin-bottom: 1rem
+          display: flex
+          width: 100%
+          .group
+            border: 1px solid #e5e7eb
+            border-radius: 5px
+            padding: 5px 10px
+            background: $soft-grey
+
+          .org
+            margin-left: auto
+            text-decoration: underline
+            border-radius: 5px
+            padding: 5px 10px
 
-      .org
-        color: $landing-grey
-        line-height: 1
-        margin-bottom: 2px
 
       span.last_updated
         margin-left: auto
@@ -464,16 +487,14 @@ body#root
       span.author
         color: darken($landing-background-color, 100%)
         font-size: 0.75rem
+        margin-bottom: 0.75rem
 
       span.version
         font-size: 0.75rem
         color: $landing-grey
         white-space: nowrap
-
-      .scenario .group
-        font-size: 0.75rem
-        text-decoration: underline
-        margin-left: auto
+        margin-bottom: 0
+        margin-top: 1rem
 
   #legal
     border-top: 1px solid $landing-border-color

app/views/pages/root.html.haml

@@ -18,6 +18,8 @@
   = render partial: 'pages/root_page/new_scenario'
   = render partial: 'pages/root_page/preset_scenario'
 
+  .header-container.loose
+    %h4.title= t('intro.features.title')
   #other-features
     .feature.whats-new
       %h4= t('intro.whats_new.title')

app/views/pages/root_page/_scenario_group.haml

@@ -4,15 +4,26 @@
   - if title.to_s.include?(' - ')
     = link_to(my_etm_path("saved_scenarios/#{scenario.saved_scenario_id}"), class: 'scenario') do
       - main_title, org = title.split(' - ', 2)
-      %span.group= group.capitalize
+      .labels
+        .group= group.capitalize
+        .org
+          .fa.fa-folder
+          = org.html_safe
+
 
-      %span.version= "##{scenario.version}"
       %h4.title= format_subscripts(main_title)
-      %span.org= org.html_safe
-      %span.author= t('intro.featured_by', author: scenario.author, area: t("areas.#{scenario.area_code}"))
+      %span.author= t('intro.featured_by', author: scenario.author)
+      .area
+        .fa.fa-map-marker
+        = t("areas.#{scenario.area_code}")
+      %span.version= "##{scenario.version}"
   - else
     = link_to(my_etm_path("saved_scenarios/#{scenario.saved_scenario_id}"), class: 'scenario') do
-      %span.group= group.capitalize
-      %span.version= "##{scenario.version}"
+      .labels
+        .group= group.capitalize
       %h4.title= format_subscripts(title)
-      %span.author= t('intro.featured_by', author: scenario.author, area: t("areas.#{scenario.area_code}"))
+      %span.author= t('intro.featured_by', author: scenario.author)
+      .area
+        .fa.fa-map-marker
+        = t("areas.#{scenario.area_code}")
+      %span.version= "##{scenario.version}"

config/locales/en_intro.yml

@@ -16,7 +16,9 @@ en:
     about_featured_scenarios: |
       Here you can find a list of featured scenarios published by other parties. Explore them
       or use them as a basis for your own scenario.
-    featured_by: "Developed by %{author} for %{area}"
+    featured_by: "Developed by %{author}"
+    features:
+      title: Features
     whats_new:
       title: What's new?
       description: |

config/locales/nl_intro.yml

@@ -17,7 +17,9 @@ nl:
     about_featured_scenarios: |
       Hieronder vind je een lijst van uitgelichte scenario's gepubliceerd door verschillende
       partijen. Open ze en ga op onderzoek uit, of gebruik ze als basis voor je eigen sceanrio.
-    featured_by: "Gemaakt door %{author} voor %{area}"
+    featured_by: "Gemaakt door %{author}"
+    features:
+      title: Features
     whats_new:
       title: Laatste updates
       description: |