From b4497d54d4c5db9a4c5890283e3e19d0f97296c2 Mon Sep 17 00:00:00 2001
From: Jennifer Chen <shinyi.chen@gmail.com>
Date: Wed, 31 Mar 2021 10:46:12 -0700
Subject: [PATCH 1/2] Address duplicated library names

* Show owner and has collaborators columns in My Libraries list
* Show privacy and has collaborators icons inside individual library
* Show library owner in dropdown list
---
 .../templates/libraries-list-container.html   | 22 +++++++--
 .../libraries_all/templates/library-item.html | 47 +++++++++++++++++--
 .../templates/library-header.html             | 29 +++++++++++-
 src/styles/sass/ads-sass/library.scss         | 40 +++++++++++++++-
 src/styles/sass/ads-sass/utility.scss         | 16 ++++++-
 5 files changed, 143 insertions(+), 11 deletions(-)

diff --git a/src/js/widgets/libraries_all/templates/libraries-list-container.html b/src/js/widgets/libraries_all/templates/libraries-list-container.html
index fc301655f..c838a7029 100644
--- a/src/js/widgets/libraries_all/templates/libraries-list-container.html
+++ b/src/js/widgets/libraries_all/templates/libraries-list-container.html
@@ -37,10 +37,14 @@
           <!--page num -->
           <span class="sr-only">no data</span>
         </th>
-        <th>
+        <th class="hide-xs">
           <!--public/private status-->
           <span class="sr-only">no data</span>
         </th>
+        <th class="hide-xs">
+          <!-- has collaborators -->
+          <span class="sr-only">no data</span>
+        </th>
         <th>
           Library
           <button
@@ -65,6 +69,18 @@
             {{/compare}}{{/compare}}
           </button>
         </th>
+        <th>
+          Owner
+          <button
+            title="sort by owner"
+            class="btn btn-xs {{#compare sort 'owner'}} s-sort-active {{/compare}} btn-default"
+            data-sort='{"sort":"owner","type":"string"}'
+          >
+            <i class="fa fa-lg fa-sort" aria-hidden="true"></i> {{#compare sort
+            'owner'}} {{#compare order "asc"}} asc {{else}} desc
+            {{/compare}}{{/compare}}
+          </button>
+        </th>
         <th>
           Permission
           <button
@@ -77,11 +93,11 @@
             {{/compare}}{{/compare}}
           </button>
         </th>
-        <th class="hide-xs">
+        <th class="hide-xxs">
           Last Modified
           <button
             title="sort by last modified"
-            class="btn btn-xs {{#compare sort 'date_last_modified'}} s-sort-active {{/compare}} btn-default hide-xs"
+            class="btn btn-xs {{#compare sort 'date_last_modified'}} s-sort-active {{/compare}} btn-default hide-xxs"
             data-sort='{"sort":"date_last_modified","type":"date"}'
           >
             <i class="fa fa-lg fa-sort" aria-hidden="true"></i> {{#compare sort
diff --git a/src/js/widgets/libraries_all/templates/library-item.html b/src/js/widgets/libraries_all/templates/library-item.html
index fcea03dcb..2e59d24ce 100644
--- a/src/js/widgets/libraries_all/templates/library-item.html
+++ b/src/js/widgets/libraries_all/templates/library-item.html
@@ -1,7 +1,7 @@
 <td class="hide-xs">
   {{libNum}}
 </td>
-<td>
+<td class="hide-xs">
   {{#if public}}
   <i
     class="fa fa-lg fa-unlock"
@@ -17,8 +17,47 @@
   {{/if}}
 </td>
 
+<td class="hide-xs">
+  {{#compare permission 'owner'}} 
+    {{#compare num_users 1 operator=">"}} 
+      <i class="fa fa-users" aria-hidden="true" title="This library has collaborators"></i>
+    {{else}}
+      <i class="fa fa-user" aria-hidden="true" title="This library has no collaborators"></i>
+    {{/compare}}
+  {{else}}
+    <i class="fa fa-users" aria-hidden="true" title="This library has collaborators"></i>
+  {{/compare}}
+</td>
+
 <td>
-  <a href="#user/libraries/{{id}}"><h3 class="s-library-title">{{name}}</h3></a>
+  <div class="hide-xs">
+    <span class="s-library-title">{{name}}</span>
+  </div>
+  <div class="hide-all-but-xs">
+    <span class="s-library-title">{{name}}</span><br/>
+    {{#if public}}
+      <i
+        class="fa fa-lg fa-unlock"
+        aria-hidden="true"
+        title="this library is public"
+      ></i>
+      {{else}}
+      <i
+        class="fa fa-lg fa-lock text-light"
+        aria-hidden="true"
+        title="this library is private"
+      ></i>
+    {{/if}} 
+    {{#compare permission 'owner'}} 
+      {{#compare num_users 1 operator=">"}} 
+        <i class="fa fa-users" aria-hidden="true" title="This library has collaborators"></i>
+      {{else}}
+        <i class="fa fa-user" aria-hidden="true" title="This library has no collaborators"></i>
+      {{/compare}} 
+    {{else}}
+      <i class="fa fa-users" aria-hidden="true" title="This library has collaborators"></i>
+    {{/compare}}
+  </div>
   {{#if description}}
   <p class="library-description">{{description}}</p>
   {{/if}}
@@ -26,6 +65,8 @@
 
 <td>{{num_documents}}</td>
 
+<td>{{#compare permission 'owner'}}Me{{else}}{{owner}}{{/compare}}</td>
+
 <td>{{permission}}</td>
 
-<td class="hide-xs">{{date_last_modified}}</td>
+<td class="hide-xxs">{{date_last_modified}}</td>
diff --git a/src/js/widgets/library_individual/templates/library-header.html b/src/js/widgets/library_individual/templates/library-header.html
index d1307e2c1..18a1af3d1 100644
--- a/src/js/widgets/library_individual/templates/library-header.html
+++ b/src/js/widgets/library_individual/templates/library-header.html
@@ -155,6 +155,7 @@ <h5>Date Last Modified:</h5>
 {{/if}} {{else}}
 <!-- not public -->
 
+<!-- In private view -->
 <div class="pull-right-md" style="position:relative;z-index:1">
   {{#if largeLibrary}}
   <button
@@ -183,6 +184,32 @@ <h5>Date Last Modified:</h5>
   </button>
   {{/if}}
 </div>
+
+<div>
+{{#if public}}
+  <i
+    class="fa fa-lg fa-unlock"
+    aria-hidden="true"
+    title="this library is public"
+  ></i>
+{{else}}
+  <i
+    class="fa fa-lg fa-lock text-light"
+    aria-hidden="true"
+    title="this library is private"
+  ></i>
+{{/if}} 
+{{#compare permission 'owner'}} 
+  {{#compare num_users 1 operator=">"}} 
+    <i class="fa fa-users" aria-hidden="true" title="This library has collaborators"></i>
+  {{else}}
+    <i class="fa fa-user" aria-hidden="true" title="This library has no collaborators"></i>
+  {{/compare}} 
+{{else}}
+    <i class="fa fa-users" aria-hidden="true" title="This library has collaborators"></i>
+{{/compare}}
+</div>
+
 {{#if edit}}
 <div class="editable-item">
   <h2>
@@ -284,7 +311,7 @@ <h5>Owner:</h5>
     data-target="#library-actions"
     aria-expanded="false"
   >
-    <i class="fa fa-cog" aria-hidden="true"></i> View editing options<span class="hide-xs"> (You have
+    <i class="fa fa-cog" aria-hidden="true"></i> View editing options<span class="hide-xxs"> (You have
     <b>{{permission}}</b> privileges)</span>
   </button>
   <div
diff --git a/src/styles/sass/ads-sass/library.scss b/src/styles/sass/ads-sass/library.scss
index 2efb47aa5..953a6aa6e 100644
--- a/src/styles/sass/ads-sass/library.scss
+++ b/src/styles/sass/ads-sass/library.scss
@@ -86,6 +86,12 @@
     margin: 0 0 5px 0;
     font-weight: 500;
     font-size: 18px;
+    word-wrap: break-word;
+
+    @media screen and (max-width: $screen-sm) {
+      font-size: 1em;
+      max-width: 70px;
+    }
   }
 
   .libraries-list-container th {
@@ -93,6 +99,10 @@
     font-variant: small-caps;
     text-transform: lowercase;
     font-size: 18px;
+
+    @media screen and (max-width: $screen-sm) {
+      font-size: 1em;
+    }
   }
 
   tbody tr {
@@ -110,6 +120,10 @@
     border-top: 1px solid #ddd;
     vertical-align: top;
     line-height: 1.428571429;
+
+    @media screen and (max-width: $screen-sm) {
+      padding: 5px;
+    }
   }
 
   a:hover {
@@ -120,10 +134,29 @@
 .all-libraries-widget .library-description {
   margin: 0;
   max-width: 370px;
+  word-wrap: break-word;
+
+  @media screen and (max-width: $screen-sm) {
+    max-width: 70px;
+  }
 }
 
-.all-libraries-widget .fa-unlock {
+.fa-unlock {
   color: $brand-success;
+  padding: 4px 2px;
+}
+
+.fa-lock {
+  padding: 4px 2px;
+}
+
+.fa-users {
+  color: $brand-info;
+  padding: 4px 2px;
+}
+
+.fa-user {
+  padding: 4px 2px;
 }
 
 .all-libraries-widget tbody tr {
@@ -133,7 +166,7 @@
 .library-detail-view,
 .library-widget .main {
   margin: 15px auto;
-  padding: 20px 10px;
+  padding: 20px 3.7%;
   max-width: 1000px;
 
   @extend .s-ads-card;
@@ -227,6 +260,9 @@
   .s-library-description p {
     display: inline;
     font-size: 18px;
+    @media screen and (max-width: $screen-sm) {
+      font-size: 1em;
+    }
   }
 
   .s-library-title,
diff --git a/src/styles/sass/ads-sass/utility.scss b/src/styles/sass/ads-sass/utility.scss
index c8100b59d..84726b8e2 100644
--- a/src/styles/sass/ads-sass/utility.scss
+++ b/src/styles/sass/ads-sass/utility.scss
@@ -20,13 +20,25 @@
 }
 
 @media screen and (max-width: $screen-xs) {
-  .hide-xs {
+  .hide-xxs {
     display: none;
   }
 }
 
 @media screen and (max-width: $screen-sm) {
-  .hide-sm {
+  .hide-xs {
+    display: none;
+  }
+}
+
+@media screen and (min-width: $screen-xs) {
+  .hide-all-but-xxs {
+    display: none;
+  }
+}
+
+@media screen and (min-width: $screen-sm) {
+  .hide-all-but-xs {
     display: none;
   }
 }

From 56cdb283f2b7d4a654a4181bed600798ada248b2 Mon Sep 17 00:00:00 2001
From: Jennifer Chen <shinyi.chen@gmail.com>
Date: Wed, 31 Mar 2021 16:03:22 -0700
Subject: [PATCH 2/2] Updated test

---
 src/js/widgets/query_info/query_info_template.html   | 2 +-
 src/js/wraps/abstract_page_library_add/template.html | 2 +-
 test/mocha/js/widgets/libraries_all.spec.js          | 4 ++--
 test/mocha/js/widgets/query_info_widget.spec.js      | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/js/widgets/query_info/query_info_template.html b/src/js/widgets/query_info/query_info_template.html
index 91a17a3db..e1cb38beb 100644
--- a/src/js/widgets/query_info/query_info_template.html
+++ b/src/js/widgets/query_info/query_info_template.html
@@ -51,7 +51,7 @@
                 <label for="library-select">to an <span class="s-text-bold">existing library:</span></label>
                 <select id="library-select" name="library-select" class="form-control input-sm s-library-select" aria-label="select existing library">
                     {{#each libraries}}
-                    <option value="{{this.id}}" {{#compare id ../selectedLibrary}} selected="true" {{/compare}}>{{this.name}}</option>
+                    <option value="{{this.id}}" {{#compare id ../selectedLibrary}} selected="true" {{/compare}}>{{this.name}}{{#compare permission "owner" operator="!=="}} ({{this.owner}}){{/compare}}</option>
                     {{/each}}
                 </select>
                 <button class="btn btn-sm btn-primary-faded submit-add-to-library">submit</button>
diff --git a/src/js/wraps/abstract_page_library_add/template.html b/src/js/wraps/abstract_page_library_add/template.html
index d6fa8a7dc..36c182849 100644
--- a/src/js/wraps/abstract_page_library_add/template.html
+++ b/src/js/wraps/abstract_page_library_add/template.html
@@ -28,7 +28,7 @@
               <label for="#library-select">add to an existing library:</label>
               <select id="library-select" name="library-select" class="form-control input-sm s-library-select" aria-label="select existing library">
                   {{#each libraries}}
-                  <option value="{{this.id}}" {{#compare id ../selectedLibrary}} selected="true" {{/compare}}>{{this.name}}</option>
+                  <option value="{{this.id}}" {{#compare id ../selectedLibrary}} selected="true" {{/compare}}>{{this.name}}{{#compare permission "owner" operator="!=="}} ({{this.owner}}){{/compare}}</option>
                   {{/each}}
               </select>
               <button class="btn btn-sm btn-primary-faded submit-add-to-library">submit</button>
diff --git a/test/mocha/js/widgets/libraries_all.spec.js b/test/mocha/js/widgets/libraries_all.spec.js
index bac0d9866..9347e435d 100644
--- a/test/mocha/js/widgets/libraries_all.spec.js
+++ b/test/mocha/js/widgets/libraries_all.spec.js
@@ -133,11 +133,11 @@ define([
 
       if (entry.match('7:57pm')) {
         expect(entry).to.eql(
-          '1 Aliens Among Us Are you one of them? 300 owner Jun 11 2015, 7:57pm'
+          '1 Aliens Among Us Aliens Among Us Are you one of them? 300 Me owner Jun 11 2015, 7:57pm'
         );
       } else {
         expect(entry).to.eql(
-          '1 Aliens Among Us Are you one of them? 300 owner Jun 11 2015, 3:57pm'
+          '1 Aliens Among Us Aliens Among Us Are you one of them? 300 Me owner Jun 11 2015, 3:57pm'
         );
       }
     });
diff --git a/test/mocha/js/widgets/query_info_widget.spec.js b/test/mocha/js/widgets/query_info_widget.spec.js
index 299274395..96cf3de04 100644
--- a/test/mocha/js/widgets/query_info_widget.spec.js
+++ b/test/mocha/js/widgets/query_info_widget.spec.js
@@ -121,7 +121,7 @@ define([
         expect($("#test #all-vs-selected")[0].options[1].value).to.eql("all");
 
         expect($("#test #library-select")[0].options[1].value).to.eql("1");
-        expect($("#test #library-select")[0].options[1].textContent).to.eql("Stars? Stars!!!");
+        expect($("#test #library-select")[0].options[1].textContent).to.eql("Stars? Stars!!! ()");
 
 
         $("#test .submit-add-to-library").click();