Merge pull request #371 from gitcoinco/hopsoft/349/sort-dropdowns

Improve UX around dropdowns

Author: hopsoft

assets/.prettierrc.js

@@ -1 +1,4 @@
-module.exports = {};
+module.exports = {
+  trailingComma: 'es5',
+  singleQuote: true,
+};

assets/src/css/_selectize.bootstrap4.scss

@@ -1,7 +1,3 @@
-/**
- * Selectize bootstrap 4
- */
-
 .selectize-control {
   position: relative;
 }
@@ -39,6 +35,25 @@
   -webkit-border-radius: 0rem;
   -moz-border-radius: 0rem;
   border-radius: 0rem;
+
+  input {
+    height: auto !important;
+  }
+}
+
+.selectize-control {
+  &.single .item {
+    max-width: 85% !important;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+  &.multi .item {
+    width: 180px !important;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
 }
 
 .selectize-control.multi .selectize-input.has-items {
@@ -136,6 +151,10 @@
   right: 0;
 }
 
+.selectize-input, .selectize-dropdown {
+  min-width: 250px;
+}
+
 .selectize-dropdown {
   position: absolute;
   z-index: 10;
@@ -209,6 +228,11 @@
   overflow-x: hidden;
   max-height: 200px;
   -webkit-overflow-scrolling: touch;
+
+  .option {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
 }
 
 .selectize-control.single .selectize-input,
@@ -426,9 +450,9 @@
 }
 
 .selectize-input.dropdown-active {
-  -webkit-border-radius: 0.25rem;
-  -moz-border-radius: 0.25rem;
-  border-radius: 0.25rem;
+  //-webkit-border-radius: 0.25rem;
+  //-moz-border-radius: 0.25rem;
+  //border-radius: 0.25rem;
 }
 
 .selectize-input.dropdown-active::before {
@@ -475,4 +499,4 @@
   -webkit-border-radius: 0;
   -moz-border-radius: 0;
   border-radius: 0;
-}
+}

assets/src/css/codefund-framework/_custom.scss

@@ -76,3 +76,9 @@ ul.list-group-kv li.list-group-item {
 .click-option:hover {
   text-decoration: underline;
 }
+
+.page-item {
+  .page-link.active {
+    background-color: #ccecf8;
+  }
+}

assets/src/onload.js

@@ -1,19 +1,17 @@
-import "selectize";
-import $ from "jquery";
+import 'selectize';
+import $ from 'jquery';
 
 const initSelectize = () => {
-  $("select.selectize").selectize({
-    plugins: ["remove_button"],
-    delimiter: ",",
-    persist: false
+  $('select.selectize').selectize({
+    plugins: ['remove_button'],
+    delimiter: ',',
+    persist: false,
+    onDropdownClose: _dropdown => {},
   });
 };
 
-const initFontAwesome = () => {
-  return FontAwesome.dom.i2svg();
-};
-
-document.addEventListener("turbolinks:load", () => {
+const initFontAwesome = () => FontAwesome.dom.i2svg();
+document.addEventListener('turbolinks:load', () => {
   initSelectize();
   initFontAwesome();
 });

lib/code_fund/assets/assets.ex

@@ -60,7 +60,7 @@ defmodule CodeFund.Assets do
   end
 
   def by_user_id(user_id) do
-    from(o in Asset, where: o.user_id == ^user_id)
+    from(o in Asset, where: o.user_id == ^user_id, order_by: fragment("lower(?)", o.name))
     |> CodeFund.Repo.all()
   end
 
@@ -155,7 +155,8 @@ defmodule CodeFund.Assets do
 
   """
   def list_assets do
-    Repo.all(Asset)
+    from(a in Asset, order_by: fragment("lower(?)", a.name))
+    |> Repo.all()
   end
 
   defp filter_config(:assets) do

lib/code_fund/audiences/audiences.ex

@@ -25,7 +25,8 @@ defmodule CodeFund.Audiences do
 
   """
   def list_audiences do
-    Repo.all(Audience)
+    from(a in Audience, order_by: fragment("lower(?)", a.name))
+    |> Repo.all()
     |> Repo.preload(:campaigns)
   end
 

lib/code_fund/creatives/creatives.ex

@@ -62,7 +62,7 @@ defmodule CodeFund.Creatives do
   end
 
   def by_user_id(user_id) do
-    from(o in Creative, where: o.user_id == ^user_id)
+    from(o in Creative, where: o.user_id == ^user_id, order_by: fragment("lower(?)", o.name))
     |> CodeFund.Repo.all()
   end
 
@@ -160,7 +160,7 @@ defmodule CodeFund.Creatives do
 
   """
   def list_creatives do
-    Repo.all(Creative)
+    from(c in Creative, order_by: fragment("lower(?)", c.name)) |> Repo.all()
   end
 
   defp filter_config(:creatives) do

lib/code_fund/templates/templates.ex

@@ -19,7 +19,7 @@ defmodule CodeFund.Templates do
 
   """
   def list_templates do
-    Template
+    from(t in Template, order_by: fragment("lower(?)", t.name))
     |> Repo.all()
     |> Repo.preload([:themes])
   end

lib/code_fund/users/users.ex

@@ -24,7 +24,8 @@ defmodule CodeFund.Users do
   end
 
   def get_by_role(role) do
-    from(u in User, where: ^role in u.roles, order_by: [asc: u.first_name]) |> Repo.all()
+    from(u in User, where: ^role in u.roles, order_by: fragment("lower(?)", u.first_name))
+    |> Repo.all()
   end
 
   def get_by_api_key(api_key) do

lib/code_fund_web/controllers/campaign_controller.ex

@@ -119,9 +119,17 @@ defmodule CodeFundWeb.CampaignController do
       status: [
         type: :select,
         label: "Status",
-        opts: [choices: CodeFund.Campaigns.statuses()]
+        opts: [
+          choices: CodeFund.Campaigns.statuses()
+        ]
+      ],
+      audience_id: [
+        type: :select,
+        label: "Audience",
+        opts: [
+          choices: audiences
+        ]
       ],
-      audience_id: [type: :select, label: "Audience", opts: [choices: audiences]],
       creative_id: [
         type: :select,
         label: "Creative",
@@ -157,31 +165,27 @@ defmodule CodeFundWeb.CampaignController do
         type: :multiple_select,
         label: "Included Topic Categories",
         opts: [
-          class: "form-control campaign-form selectize",
           choices: Framework.GenericEnums.topic_categories()
         ]
       ],
       included_programming_languages: [
         type: :multiple_select,
         label: "Included Programming Languages",
         opts: [
-          class: "form-control campaign-form selectize",
           choices: Framework.GenericEnums.programming_languages()
         ]
       ],
       excluded_topic_categories: [
         type: :multiple_select,
         label: "Excluded Topic Categories",
         opts: [
-          class: "form-control campaign-form selectize",
           choices: Framework.GenericEnums.topic_categories()
         ]
       ],
       excluded_programming_languages: [
         type: :multiple_select,
         label: "Excluded Programming Languages",
         opts: [
-          class: "form-control campaign-form selectize",
           choices: Framework.GenericEnums.programming_languages()
         ]
       ],
@@ -194,7 +198,6 @@ defmodule CodeFundWeb.CampaignController do
             action: "change->campaign-form#generateEstimates",
             key: "included_countries"
           ],
-          class: "form-control campaign-form selectize",
           choices: Framework.Geolocation.Countries.list(),
           hint: ~s"""
           <div>