Dropdown selector

app/assets/stylesheets/tpi.scss

@@ -25,6 +25,7 @@
 @import "tpi/charts";
 @import "tpi/base-tooltip";
 @import "tpi/footer";
+@import "tpi/dropdown-selector";
 
 @import "tpi/pages/*";
 

app/assets/stylesheets/tpi/_dropdown-selector.scss

@@ -0,0 +1,149 @@
+
+@import "colors";
+@import "typography";
+
+$container-top-padding: 40px; // top
+$container-side-padding: 96px; // right and left padding
+$box-shadow: 30px;
+$header-height: 120px;
+
+.dropdown-selector__container {
+  background-color: $blue;
+  min-width: 800px;
+  max-width: 880px;
+  padding: $container-top-padding $container-side-padding 140px $container-side-padding;
+  position: relative;
+
+  &--active {
+    background-color: $white;
+  }
+}
+
+.dropdown-selector__input {
+  color: $dark;
+  font-size: 48px;
+  font-family: $font-family-regular;
+  border: none;
+  width: 100%;
+  outline: none;
+}
+
+::placeholder { /* Edge */
+  color: rgba(25, 25, 25, 0.25);
+}
+
+.dropdown-selector__header {
+  color: $white;
+  font-size: 48px;
+  font-family: $font-family-bold;
+  border-bottom: 2px solid $white;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  height: $header-height;
+  width: 100%;
+
+  &--active {
+    border-bottom: 2px solid $black;
+  }
+}
+
+.chevron-icon {
+  height: 12px;
+  margin-right: 8px;
+  margin-top: 8px;
+}
+
+.chevron-icon-rotated {
+  transform: rotate(180deg);
+}
+
+.dropdown-selector__wrapper {
+  background-color: $blue;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.dropdown-selector__options-wrapper {
+  position: absolute;
+  top: calc(100% - $container-top-padding);
+  left: calc(-1 * #{$box-shadow});
+  width: calc(100% + (2 * #{$box-shadow})); // 60px = 2 x 30px for box shadow from left and right
+  margin-top: 20px;
+  z-index: 1;
+  overflow: hidden;
+}
+
+.dropdown-selector__options {
+  box-shadow: 0 0 $box-shadow 0 rgba(25, 25, 25, 0.15);
+  margin: 0 $box-shadow $box-shadow $box-shadow;
+  background-color: $white;
+  padding-bottom: 20px;
+  min-height: $header-height;
+  max-height: 290px;
+  overflow-y: scroll;
+
+  & > * {
+    padding: 8px $container-side-padding;
+  }
+}
+
+.dropdown-selector__option {
+  font-size: 24px;
+  line-height: 30px;
+  color: rgba(25, 25, 25, 0.5);
+  cursor: pointer;
+
+  &:hover {
+    background-color: $blue-dark;
+    color: $white;
+  }
+}
+
+.dropdown-selector__option-company {
+  padding: 8px 110px;
+}
+
+.dropdown-selector__buttons {
+  display: flex;
+
+  & * > {
+    margin-right: 10px;
+  }
+}
+
+%shared-button-config {
+  font-size: 16px;
+  border: none;
+  padding: 8px 12px;
+  outline: none;
+  cursor: pointer;
+}
+
+.dropdown-selector__button {
+  @extend %shared-button-config;
+  font-family: $font-family-regular;
+  background-color: transparent;
+  color: $white;
+}
+
+.dropdown-selector__active-button {
+  @extend %shared-button-config;
+  background-color: $blue-dark;
+  color: $white;
+  font-family: $font-family-bold;
+}
+
+.dropdown-selector__not-active-opened {
+  background-color: $white;
+  color: $blue-dark;
+}
+
+.dropdown-selector__sector-name {
+  font-family: $font-family-bold;
+  font-size: 16px;
+  color: rgba($black, 0.9);
+  text-transform: uppercase;
+}

app/assets/stylesheets/tpi/pages/company.scss

@@ -1,4 +1,10 @@
 .company-page {
+
+  .dropdown-selector-company-page-wrapper {
+    height: 335px;
+    background-color: $blue;
+  }
+
   .summary-box {
     background: $grey;
     padding: 40px;

app/assets/stylesheets/tpi/pages/sector.scss

@@ -1,6 +1,11 @@
 $tape-color: rgba(25,25,25,0.1);
 
 .sector-page {
+  .dropdown-selector-sector-page-wrapper {
+    height: 335px;
+    background-color: $blue;
+  }
+
   .sectors-header {
     background: $blue;
 

app/controllers/tpi/companies_controller.rb

@@ -6,6 +6,9 @@ class CompaniesController < TPIController
 
     def show
       @company_summary = company_presenter.summary
+
+      @sectors = TPISector.select(:id, :name, :slug).order(:name)
+      @companies = Company.joins(:sector).select(:id, :name, :slug, 'tpi_sectors.name as sector_name')
     end
 
     def mq_assessment; end

app/controllers/tpi/sectors_controller.rb

@@ -2,13 +2,16 @@ module TPI
   class SectorsController < TPIController
     def index
       @sectors = TPISector.select(:id, :name, :slug).order(:name)
-      @companies = Company.select(:id, :name, :slug)
+      @companies = Company.joins(:sector).select(:id, :name, :slug, 'tpi_sectors.name as sector_name')
       @companies_by_sectors = ::Api::Charts::Sector.new(companies_scope(params)).companies_market_cap_by_sector
     end
 
     def show
       @sector = TPISector.friendly.find(params[:id])
 
+      @sectors = TPISector.select(:id, :name, :slug).order(:name)
+      @companies = Company.joins(:sector).select(:id, :name, :slug, 'tpi_sectors.name as sector_name')
+
       @companies_by_levels = ::Api::Charts::Sector.new(companies_scope(params)).companies_summaries_by_level
     end