Styling improvements

forsbergplustwo · Sep 20, 2023 · 6df869b · 6df869b
1 parent 2f3ac7e
commit 6df869b
Show file tree

Hide file tree

Showing 10 changed files with 85 additions and 56 deletions.
diff --git a/app/assets/stylesheets/polaris_overrides.css b/app/assets/stylesheets/polaris_overrides.css
@@ -12,3 +12,15 @@
     fill: var(--p-color-icon) !important;
   }
 }
+
+@media screen and (max-width: 1024px) {
+  .Polaris-HorizontalGrid {
+    grid-template-columns: repeat(2, minmax(0, 1fr))
+  }
+}
+
+@media screen and (max-width: 500px) {
+  .Polaris-HorizontalGrid {
+    grid-template-columns: repeat(1, minmax(0, 1fr))
+  }
+}
diff --git a/app/models/metric/tile_presenter.rb b/app/models/metric/tile_presenter.rb
@@ -9,8 +9,9 @@ def initialize(filter:, tile_config:)
     @display = tile_config[:display]
     @positive_change_is_good = tile_config[:positive_change_is_good]
     @is_yearly_revenue = tile_config[:is_yearly_revenue]
+    @width = tile_config[:width].presence || :third
   end
-  attr_reader :handle, :display, :calculation, :positive_change_is_good, :is_yearly_revenue
+  attr_reader :handle, :display, :calculation, :positive_change_is_good, :is_yearly_revenue, :width
 
   def current_value
     metrics = @filter.current_period_metrics

diff --git a/app/models/metric/tiles_config.rb b/app/models/metric/tiles_config.rb
@@ -111,23 +111,24 @@ module Metric::TilesConfig
       positive_change_is_good: true,
       is_yearly_revenue: true
     },
-    {
-      handle: :recurring_avg_revenue_per_shop,
-      calculation: :average,
-      charge_type: :recurring_revenue,
-      column: :average_revenue_per_shop,
-      display: :currency,
-      positive_change_is_good: true,
-      is_yearly_revenue: nil
-    },
+    # {
+    #   handle: :recurring_avg_revenue_per_shop,
+    #   calculation: :average,
+    #   charge_type: :recurring_revenue,
+    #   column: :average_revenue_per_shop,
+    #   display: :currency,
+    #   positive_change_is_good: true,
+    #   is_yearly_revenue: nil
+    # },
     {
       handle: :recurring_avg_revenue_per_shop_monthly,
       calculation: :average,
       charge_type: :recurring_revenue,
       column: :average_revenue_per_shop,
       display: :currency,
       positive_change_is_good: true,
-      is_yearly_revenue: false
+      is_yearly_revenue: false,
+      width: :half
     },
     {
       handle: :recurring_avg_revenue_per_shop_yearly,
@@ -136,25 +137,27 @@ module Metric::TilesConfig
       column: :average_revenue_per_shop,
       display: :currency,
       positive_change_is_good: true,
-      is_yearly_revenue: true
-    },
-    {
-      handle: :shop_churn,
-      calculation: :average,
-      charge_type: :recurring_revenue,
-      column: :shop_churn,
-      display: :percentage,
-      positive_change_is_good: false,
-      is_yearly_revenue: nil
+      is_yearly_revenue: true,
+      width: :half
     },
+    # {
+    #   handle: :shop_churn,
+    #   calculation: :average,
+    #   charge_type: :recurring_revenue,
+    #   column: :shop_churn,
+    #   display: :percentage,
+    #   positive_change_is_good: false,
+    #   is_yearly_revenue: nil
+    # },
     {
       handle: :shop_churn_monthly,
       calculation: :average,
       charge_type: :recurring_revenue,
       column: :shop_churn,
       display: :percentage,
       positive_change_is_good: false,
-      is_yearly_revenue: false
+      is_yearly_revenue: false,
+      width: :half
     },
     {
       handle: :shop_churn_yearly,
@@ -163,25 +166,27 @@ module Metric::TilesConfig
       column: :shop_churn,
       display: :percentage,
       positive_change_is_good: false,
-      is_yearly_revenue: true
-    },
-    {
-      handle: :revenue_churn,
-      calculation: :average,
-      charge_type: :recurring_revenue,
-      column: :revenue_churn,
-      display: :percentage,
-      positive_change_is_good: false,
-      is_yearly_revenue: nil
+      is_yearly_revenue: true,
+      width: :half
     },
+    # {
+    #   handle: :revenue_churn,
+    #   calculation: :average,
+    #   charge_type: :recurring_revenue,
+    #   column: :revenue_churn,
+    #   display: :percentage,
+    #   positive_change_is_good: false,
+    #   is_yearly_revenue: nil
+    # },
     {
       handle: :revenue_churn_monthly,
       calculation: :average,
       charge_type: :recurring_revenue,
       column: :revenue_churn,
       display: :percentage,
       positive_change_is_good: false,
-      is_yearly_revenue: false
+      is_yearly_revenue: false,
+      width: :half
     },
     {
       handle: :revenue_churn_yearly,
@@ -190,25 +195,27 @@ module Metric::TilesConfig
       column: :revenue_churn,
       display: :percentage,
       positive_change_is_good: false,
-      is_yearly_revenue: true
-    },
-    {
-      handle: :lifetime_value,
-      calculation: :average,
-      charge_type: :recurring_revenue,
-      column: :lifetime_value,
-      display: :currency,
-      positive_change_is_good: true,
-      is_yearly_revenue: nil
+      is_yearly_revenue: true,
+      width: :half
     },
+    # {
+    #   handle: :lifetime_value,
+    #   calculation: :average,
+    #   charge_type: :recurring_revenue,
+    #   column: :lifetime_value,
+    #   display: :currency,
+    #   positive_change_is_good: true,
+    #   is_yearly_revenue: nil
+    # },
     {
       handle: :lifetime_value_monthly,
       calculation: :average,
       charge_type: :recurring_revenue,
       column: :lifetime_value,
       display: :currency,
       positive_change_is_good: true,
-      is_yearly_revenue: false
+      is_yearly_revenue: false,
+      width: :half
     },
     {
       handle: :lifetime_value_yearly,
@@ -217,7 +224,8 @@ module Metric::TilesConfig
       column: :lifetime_value,
       display: :currency,
       positive_change_is_good: true,
-      is_yearly_revenue: true
+      is_yearly_revenue: true,
+      width: :half
     }
   ].freeze
 

diff --git a/app/views/imports/_import.html.erb b/app/views/imports/_import.html.erb
@@ -1,6 +1,6 @@
 <%= tag.div id: dom_id(import, :details) do %>
   <%= polaris_card do %>
-    <%= polaris_vertical_stack(gap: "5") do |stack| %>
+    <%= polaris_vertical_stack(gap: "6") do |stack| %>
 
       <%= polaris_stack(alignment: :center) do |nested_stack| %>
         <% nested_stack.with_item do %>

diff --git a/app/views/imports/index.html.erb b/app/views/imports/index.html.erb
@@ -27,7 +27,7 @@
 
   <% if @imports.any? %>
 
-    <%= polaris_vertical_stack(gap: "5") do %>
+    <%= polaris_vertical_stack(gap: "6") do %>
 
       <% if current_user.partner_api_credential.blank? %>
         <%= render "api_credentials_banner" %>

diff --git a/app/views/imports/show.html.erb b/app/views/imports/show.html.erb
@@ -23,7 +23,7 @@
     <%= render "shared/status", resource: @import %>
   <% end %>
 
-  <%= polaris_vertical_stack(gap: "5") do %>
+  <%= polaris_vertical_stack(gap: "6") do %>
 
     <% if current_user.partner_api_credential.blank? %>
       <%= render "api_credentials_banner" %>

diff --git a/app/views/metrics/_tile_with_chart.html.erb b/app/views/metrics/_tile_with_chart.html.erb
@@ -1,6 +1,6 @@
 <%= polaris_card(title: t("metrics.tiles.#{tile.handle}", default: tile.handle.to_s.humanize)) do |card| %>
 
-  <%= polaris_vertical_stack(gap: "5") do %>
+  <%= polaris_vertical_stack(gap: "6") do %>
 
     <%= polaris_stack(alignment: :center) do |stack| %>
 

diff --git a/app/views/metrics/show.html.erb b/app/views/metrics/show.html.erb
@@ -7,7 +7,7 @@
 
   <%= turbo_frame_tag :metrics do %>
 
-    <%= polaris_vertical_stack(gap: "5") do %>
+    <%= polaris_vertical_stack(gap: "6") do %>
 
       <%= polaris_stack(alignment: :center) do |stack| %>
 
@@ -27,8 +27,16 @@
 
           <%= render "tile_with_chart", tile: @selected_tile, filter: @filter %>
 
-          <%= polaris_horizontal_grid(gap: "5", columns: 3) do %>
+          <%= polaris_horizontal_grid(gap: "6", columns: 3) do %>
             <% @tiles.each do |tile| %>
+              <% next if tile.width != :third %>
+              <%= render "tile", tile: tile, filter: @filter %>
+            <% end %>
+          <% end %>
+
+          <%= polaris_horizontal_grid(gap: "6", columns: 2) do %>
+            <% @tiles.each do |tile| %>
+              <% next if tile.width != :half %>
               <%= render "tile", tile: tile, filter: @filter %>
             <% end %>
           <% end %>

diff --git a/app/views/summarys/index.html.erb b/app/views/summarys/index.html.erb
@@ -7,7 +7,7 @@
 
   <% if @summaries.any? %>
 
-    <%= polaris_vertical_stack(gap: "5") do %>
+    <%= polaris_vertical_stack(gap: "6") do %>
 
       <%= render "app_filter", selected_app: @selected_app, app_titles: @app_titles %>
 

diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -62,14 +62,14 @@ en:
       title: "Affiliate"
       subtitle: "Revenue from the partner affiliate program."
     tiles:
-      recurring_revenue: "Total subscription revenue"
-      recurring_revenue_monthly: "Monthly subscription revenue"
-      recurring_revenue_yearly: "Annual subscription revenue"
+      recurring_revenue: "Total recurring revenue"
+      recurring_revenue_monthly: "Monthly recurring revenue"
+      recurring_revenue_yearly: "Annual recurring revenue"
       paying_shops: "Total subscriptions"
       paying_shops_monthly: "Monthly subscriptions"
       paying_shops_yearly: "Annual subscriptions"
       recurring_avg_revenue_per_charge: "Avg. revenue per charge"
-      recurring_avg_revenue_per_shop: "Avg. subscription payment"
+      recurring_avg_revenue_per_shop: "Avg. recurring payment"
       recurring_avg_revenue_per_shop_monthly: "Avg. monthly payment"
       recurring_avg_revenue_per_shop_yearly: "Avg. annual payment"
       shop_churn: "Subscription churn"