Featured scenarios with groups and authors

app/assets/stylesheets/_root.sass

@@ -1,5 +1,9 @@
 body#root
   font-family: $landing-font-family
+  #wrapper
+    background: no-repeat linear-gradient(-45deg, #d0e0f7, $landing-background-color, $dark-cream, #89a9ec), $soft-grey
+    background-size: 400% 760px
+    animation: gradient 60s ease infinite
 
   &, #wrapper, #content
     height: auto
@@ -8,6 +12,17 @@ body#root
   footer
     display: none
 
+
+@keyframes gradient
+  0%
+    background-position: 0% 0%
+  50%
+    background-position: 100% 0%
+  100%
+    background-position: 0% 0%
+
+
+
 #landing
   margin: 0 auto
   padding: 50px 0 20px
@@ -229,6 +244,7 @@ body#root
 
   #new-scenario, #preset-scenario
     border: none
+    margin-bottom: 80px
     .header-container
       display: flex
       margin: -15px -20px 0px
@@ -376,16 +392,11 @@ body#root
         margin-left: -6px
 
   #preset-scenario
-    border-top-color: $landing-gold
-    padding-bottom: 2rem
-    .header-container a
-      color: $landing-grey
-      text-decoration: underline
-      &:hover
-        color: $landing-blue
+    background: $soft-grey
+    .header-container .title
+      color: #462c34
 
     .hint
-      color: $landing-grey
       margin: 1.5rem 0
 
     .year-tabs
@@ -397,7 +408,7 @@ body#root
         border-radius: 6px
         font-size: .875rem
         padding: 5px 13px
-        // border: 1px solid #d0d5d8
+        border: 1px solid #d0d5d8
         background: $soft-grey
         transition: background 0.15s ease-in
         a
@@ -422,51 +433,81 @@ body#root
         &:first-child
           margin-left: 0
 
-    ul.scenario-list
-      list-style: none
-      margin: 0 -20px 0
+    .scenario-list
+      margin: 0
       padding: 0
-      // display: none
       transition: opacity 1s ease-out
       opacity: 0
       height: 0
       overflow: hidden
+      display: grid
+      gap: 1.5rem
+      grid-template-columns: 1fr 1fr 1fr 1fr
       &.show
-        // display: block
         opacity: 1
         height: auto
 
-      li.title
-        font-weight: 500
-        margin-top: 15px
-        margin-bottom: 2px
-        padding: 0 20px
+      .study-title
+        grid-column-start: 1
+        grid-column-end: 5
         font-size: 14px
-
-      a
-        align-items: baseline
-        color: black
-        display: flex
-        padding: 3px 7px
-        margin: 0 13px
+        color: #462c34
+        font-weight: 500
+        margin-top: 1.5rem
+        margin-left: 1.5rem
+        margin-right: 1.5rem
+        padding-bottom: 0.5rem
+        border-bottom: 1px solid #e5e7eb
+
+      a.scenario
+        padding: 1.5rem
         border-radius: 5px
+        background: $landing-background-color
+        border: 1px solid $landing-background-color
+        display: flex
+        flex-direction: column
+        align-items: baseline
+        margin: 0
         position: relative
-        transition: background 0.15s ease-in
+        color: black
+        transition: background 0.15s ease-in, border 0.15s ease-in
 
         &:hover
+          border-color: #e5e7eb
+          cursor: pointer
           background: $soft-grey
           text-decoration: none
 
-        &:active
-          background: darken($landing-background-color, 3%)
+        .title
+          color: #462c34
+          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
+            background: $landing-background-color
+            color: #462c34
+            border-radius: 5px
+            border-radius: 5px
+            padding: 5px 10px
+
+      // .version
+      //   color: $landing-grey
+      //   margin-left: 5px
 
-      .version
-        color: $landing-grey
-        margin-left: 5px
-      .org
-        font-size: 13px
-        line-height: 1
-        margin-left: 6px
 
       span.last_updated
         margin-left: auto
@@ -476,7 +517,14 @@ body#root
       span.author
         color: darken($landing-background-color, 100%)
         font-size: 0.75rem
-        margin-left: auto
+                margin-bottom: 0.75rem
+
+      span.version
+        font-size: 0.75rem
+        color: $landing-grey
+        white-space: nowrap
+        margin-bottom: 0
+        margin-top: 1rem
 
   #legal
     border-top: 1px solid $landing-border-color

app/views/pages/root_page/_preset_scenario.html.haml

@@ -12,7 +12,7 @@
           %a= year
 
     - @featured_scenarios.each do |year, grouped|
-      %ul.scenario-list{year: year}
+      .scenario-list{year: year}
         - grouped.each do |data|
           = render partial: 'pages/root_page/scenario_group', locals: { group: data[:name], scenarios: data[:scenarios] }
   - else

app/views/pages/root_page/_scenario_group.haml

@@ -1,16 +1,25 @@
-- scenarios.each do |scenario|
-  - title = scenario.localized_title(I18n.locale)
-  - if title.to_s.include?(' - ')
-    %li.with_org
-      = link_to(my_etm_path("saved_scenarios/#{scenario.saved_scenario_id}")) do
-        - main_title, org = title.split(' - ', 2)
-        %span.who= format_subscripts(main_title)
-        %span.org= org.html_safe
-        %span.version= " ##{scenario.version}"
-        %span.author= scenario.author
-  - else
-    %li
-      = link_to(my_etm_path("saved_scenarios/#{scenario.saved_scenario_id}")) do
-        = format_subscripts(title)
+- scenarios.reverse.group_by(&:study_en).each do |study, grouped_scenarios|
+  - if study.present?
+    %h4.study-title= study
+  - grouped_scenarios.each do |scenario|
+    - title = scenario.localized_title(I18n.locale)
+
+    - if title.to_s.include?(' - ')
+      = link_to(my_etm_path("saved_scenarios/#{scenario.saved_scenario_id}"), class: 'scenario') do
+        - org, main_title = title.split(' - ', 2)
+        .labels
+          .group= t("areas.#{scenario.area_code}")
+          -# .org
+          -#   = org.html_safe
+
+
+        %h4.title= format_subscripts(main_title)
+        %span.author= t('intro.featured_by', author: scenario.author)
+        %span.version= "##{scenario.version}"
+    - else
+      = link_to(my_etm_path("saved_scenarios/#{scenario.saved_scenario_id}"), class: 'scenario') do
+        .labels
+          .group= t("areas.#{scenario.area_code}")
+        %h4.title= format_subscripts(title)
+        %span.author= t('intro.featured_by', author: scenario.author)
         %span.version= "##{scenario.version}"
-        %span.author= scenario.author

config/locales/en_intro.yml

@@ -15,6 +15,7 @@ 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}"
     features:
       title: Features
     whats_new:

config/locales/nl_intro.yml

@@ -17,6 +17,7 @@ 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 scenario.
+    featured_by: "Gemaakt door %{author}"
     features:
       title: Features
     whats_new: