From ddf899b2f9b6c634147f3a951c789f75fa0b7e08 Mon Sep 17 00:00:00 2001
From: Jennifer Chen <shinyi.chen@gmail.com>
Date: Fri, 12 Mar 2021 15:44:13 -0800
Subject: [PATCH 1/6] Remove left right paddings in the middle column when
 screen size is med or smaller

---
 src/styles/sass/ads-sass/page-managers.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/styles/sass/ads-sass/page-managers.scss b/src/styles/sass/ads-sass/page-managers.scss
index a772b0ab7..f9b2654bb 100644
--- a/src/styles/sass/ads-sass/page-managers.scss
+++ b/src/styles/sass/ads-sass/page-managers.scss
@@ -144,6 +144,10 @@ s-search-bar-motion is applied */
 .s-dynamic-page-body {
   background-color: $darker-background;
   min-height: 500px;
+  @media screen and (max-width: $screen-md-max) {
+    padding-left: 0;
+    padding-right: 0;
+  }
 }
 
 .s-abstract-content {

From 2e3f4b085582c5a6f836e000d3f9e3bbf34e019c Mon Sep 17 00:00:00 2001
From: Jennifer Chen <shinyi.chen@gmail.com>
Date: Fri, 12 Mar 2021 16:38:51 -0800
Subject: [PATCH 2/6] Make the checkbox fit into the content column and align
 controller's checkbox and results' checkboxes.

---
 src/styles/sass/ads-sass/results-list.scss | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/styles/sass/ads-sass/results-list.scss b/src/styles/sass/ads-sass/results-list.scss
index 04efe79cd..3948b45dc 100644
--- a/src/styles/sass/ads-sass/results-list.scss
+++ b/src/styles/sass/ads-sass/results-list.scss
@@ -82,6 +82,11 @@
   .s-citation-link {
     color: $brand-primary;
   }
+
+  @media screen and (max-width: $screen-sm-max) {
+    margin-left: 0;
+    margin-right: 0;
+  }
 }
 
 .s-show-details-container {
@@ -251,6 +256,11 @@ li.article-author {
   border-bottom: $border-light-default;
   @extend .clearfix;
   padding-bottom: 15px;
+
+  @media screen and (max-width: $screen-md-min) {
+    padding-left: 2%;
+    border-left: 5px solid #fff;
+  }
 }
 
 .s-back-button-container {

From 7a598b86508febadbe5b9b2907e8240a30382940 Mon Sep 17 00:00:00 2001
From: Jennifer Chen <shinyi.chen@gmail.com>
Date: Fri, 12 Mar 2021 17:17:12 -0800
Subject: [PATCH 3/6] Make all content on the first row of search result item
 fit

---
 .../list_of_things/templates/item-template.html        |  4 ++--
 src/styles/sass/ads-sass/results-list.scss             | 10 ++++++++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/js/widgets/list_of_things/templates/item-template.html b/src/js/widgets/list_of_things/templates/item-template.html
index 48e5831b2..1ff236c67 100644
--- a/src/js/widgets/list_of_things/templates/item-template.html
+++ b/src/js/widgets/list_of_things/templates/item-template.html
@@ -31,7 +31,7 @@
     </div>
 
     <div class="hidden-sm hidden-md hidden-lg">
-      <div class="col-xs-3 col-sm-5 col-md-3 s-top-row-col text-right">
+      <div class="col-xs-2 col-sm-5 col-md-3 s-top-row-col text-right">
           {{#if citation_count }}
               {{#if normCiteSort}}
               <a href="#abs/{{encodedIdentifier}}/citations" title="citation count" class="citations-redirect-link" aria-label="{{citationCountNorm}} normalized citations"><span class="hidden-xs">cited (n):</span> {{citationCountNorm}}</a>
@@ -44,7 +44,7 @@
 
 
 
-    <div class="col-xs-4 col-sm-4 pull-right">
+    <div class="col-xs-5 col-sm-4 pull-right">
         <div class="s-results-links">
 
             {{#if links}}
diff --git a/src/styles/sass/ads-sass/results-list.scss b/src/styles/sass/ads-sass/results-list.scss
index 3948b45dc..25703c3d8 100644
--- a/src/styles/sass/ads-sass/results-list.scss
+++ b/src/styles/sass/ads-sass/results-list.scss
@@ -63,8 +63,14 @@
   @extend .icon-text;
 }
 
-.s-identifier a {
-  color: $text-color;
+.s-identifier {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-left: 0;
+  padding-right: 0;
+  a {
+    color: $text-color;
+  }
 }
 
 .just-authors {

From ad89c9bdb5b61bcab0992145579569513637347e Mon Sep 17 00:00:00 2001
From: Jennifer Chen <shinyi.chen@gmail.com>
Date: Mon, 15 Mar 2021 11:37:13 -0700
Subject: [PATCH 4/6] Remove the padding so that all control buttons in the
 results fit into one row

---
 .../results/templates/container-template.html | 72 +++++++++----------
 src/styles/sass/ads-sass/results-list.scss    |  1 +
 2 files changed, 36 insertions(+), 37 deletions(-)

diff --git a/src/js/widgets/results/templates/container-template.html b/src/js/widgets/results/templates/container-template.html
index 0ae6eb530..f02c8e89d 100644
--- a/src/js/widgets/results/templates/container-template.html
+++ b/src/js/widgets/results/templates/container-template.html
@@ -14,43 +14,41 @@
         {{/unless}}
       </div>
 
-      <div class="col-xs-11">
-        <div class="s-show-details-container">
-          {{#unless loading}} {{#if showHighlights}} {{#compare showHighlights
-          "open"}}
-          <button class="btn  btn-primary  btn-sm show-highlights">
-            Hide highlights
-          </button>
-          {{else}}
-          <button class="btn btn-primary btn-sm btn-inverse show-highlights">
-            Show highlights
-          </button>
-          {{/compare}} {{/if}} {{#compare showAbstract "open"}}
-          <button class="btn show-abstract btn-sm btn-primary">
-            Hide abstracts
-          </button>
-          {{else}}
-          <button class="btn show-abstract btn-sm btn-inverse btn-primary">
-            Show abstracts
-          </button>
-          {{/compare}} {{#if showSidebars}}
-          <button
-            class="btn btn-sm btn-inverse btn-primary toggle-sidebars hidden-xs hidden-sm"
-          >
-            Hide Sidebars
-          </button>
-          {{else}}
-          <button
-            class="btn btn-sm btn-primary toggle-sidebars hidden-xs hidden-sm"
-          >
-            Show Sidebars
-          </button>
-          {{/if}}
-          <button class="btn-sm btn-link pull-right" id="go-to-bottom">
-            Go To Bottom
-          </button>
-          {{/unless}}
-        </div>
+      <div class="col-xs-11 s-show-details-container">
+        {{#unless loading}} {{#if showHighlights}} {{#compare showHighlights
+        "open"}}
+        <button class="btn  btn-primary  btn-sm show-highlights">
+          Hide highlights
+        </button>
+        {{else}}
+        <button class="btn btn-primary btn-sm btn-inverse show-highlights">
+          Show highlights
+        </button>
+        {{/compare}} {{/if}} {{#compare showAbstract "open"}}
+        <button class="btn show-abstract btn-sm btn-primary">
+          Hide abstracts
+        </button>
+        {{else}}
+        <button class="btn show-abstract btn-sm btn-inverse btn-primary">
+          Show abstracts
+        </button>
+        {{/compare}} {{#if showSidebars}}
+        <button
+          class="btn btn-sm btn-inverse btn-primary toggle-sidebars hidden-xs hidden-sm"
+        >
+          Hide Sidebars
+        </button>
+        {{else}}
+        <button
+          class="btn btn-sm btn-primary toggle-sidebars hidden-xs hidden-sm"
+        >
+          Show Sidebars
+        </button>
+        {{/if}}
+        <button class="btn-sm btn-link pull-right" id="go-to-bottom">
+          Go To Bottom
+        </button>
+        {{/unless}}
       </div>
     </div>
   </div>
diff --git a/src/styles/sass/ads-sass/results-list.scss b/src/styles/sass/ads-sass/results-list.scss
index 25703c3d8..090c1e57a 100644
--- a/src/styles/sass/ads-sass/results-list.scss
+++ b/src/styles/sass/ads-sass/results-list.scss
@@ -97,6 +97,7 @@
 
 .s-show-details-container {
   margin-top: 20px;
+  padding-left: 0;
 }
 
 .s-results-title {

From a65cde3ee2078ef7633d382693c92109f6e9aa51 Mon Sep 17 00:00:00 2001
From: Jennifer Chen <shinyi.chen@gmail.com>
Date: Mon, 15 Mar 2021 14:21:18 -0700
Subject: [PATCH 5/6] Page control layout

---
 .../templates/pagination-partial.html         |  6 ++---
 src/styles/sass/ads-sass/results-list.scss    | 22 ++++++++++++++++++-
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/js/widgets/list_of_things/templates/pagination-partial.html b/src/js/widgets/list_of_things/templates/pagination-partial.html
index f3f58c8e9..c154fec35 100644
--- a/src/js/widgets/list_of_things/templates/pagination-partial.html
+++ b/src/js/widgets/list_of_things/templates/pagination-partial.html
@@ -13,8 +13,8 @@
         <div class="col-xs-5 per-page-container">
             {{#if pageData}}
             <div class="form-group">
-              <label for="per-page-select" class="col-xs-4 control-label" style="line-height: 32px;">Per Page</label>
-              <div class="col-xs-8 col-sm-5">
+              <label for="per-page-select" class="col-xs-6 control-label" style="line-height: 32px; text-align: right;">Per Page</label>
+              <div class="col-xs-6 col-sm-5">
                 <select name="per-page-select" id="per-page-select" class="form-control">
                   <option value="25" {{#compare pageData.perPage 25}}selected{{/compare}}>25</option>
                   <option value="50" {{#compare pageData.perPage 50}}selected{{/compare}}>50</option>
@@ -26,7 +26,7 @@
             </div>
             {{/if}}
         </div>
-        <div class="col-xs-6">
+        <div class="col-xs-7 pagination-container">
             <nav aria-label="pagination controls">
                 <ul class="pager">
                     <li class="{{#unless pageData.previousPossible}} disabled {{/unless}}"><a href="javascript:void(0)" class="page-control previous-page"><i class="fa fa-chevron-circle-left" aria-hidden="true"></i> prev</a></li>
diff --git a/src/styles/sass/ads-sass/results-list.scss b/src/styles/sass/ads-sass/results-list.scss
index 090c1e57a..b89da0057 100644
--- a/src/styles/sass/ads-sass/results-list.scss
+++ b/src/styles/sass/ads-sass/results-list.scss
@@ -363,8 +363,18 @@ li.article-author {
 }
 
 .per-page-container {
-  margin: 23px 0 0 6.3%;
+  margin: 23px 0 0 0;
   padding-left: 0px;
+
+  @media screen and (max-width: $screen-xs) {
+    width: 100%;
+    margin: 10px 0 0 0;
+    padding: 0 0 0 0;
+  }
+}
+
+#per-page-select {
+  width: auto;
 }
 
 .per-page--active {
@@ -372,3 +382,13 @@ li.article-author {
   background-color: $brand-primary;
   color: white;
 }
+
+.pagination-container {
+  padding-right: 0;
+  padding-left: 0;
+
+  @media screen and (max-width: $screen-xs) {
+    width: 100%;
+    margin: 0 0 0 0;
+  }
+}

From 433dc50200b7983de9d2410848c6ebcf45f99e1d Mon Sep 17 00:00:00 2001
From: Jennifer Chen <shinyi.chen@gmail.com>
Date: Tue, 16 Mar 2021 10:07:12 -0700
Subject: [PATCH 6/6] Search result control layout

---
 src/js/page_managers/templates/results-control-row.html | 6 +++---
 src/js/widgets/sort/components/sort-app.jsx.js          | 2 +-
 src/js/wraps/export_dropdown.js                         | 2 +-
 src/styles/sass/ads-sass/results-list.scss              | 5 +++++
 src/styles/sass/ads-sass/search-bar.scss                | 4 +---
 5 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/js/page_managers/templates/results-control-row.html b/src/js/page_managers/templates/results-control-row.html
index a1de5555c..8fb883cfc 100644
--- a/src/js/page_managers/templates/results-control-row.html
+++ b/src/js/page_managers/templates/results-control-row.html
@@ -4,12 +4,12 @@
     </div>
 
 
-    <div class="col-sm-6" style="padding-right:0">
+    <div class="col-xs-12 col-sm-6" style="padding-right:0">
         <div class="s-results-action-buttons">
-            <div class="col-md-6 clearfix" style="margin-bottom:10px;">
+            <div class="col-xs-12 col-md-5 clearfix" style="margin-bottom:10px;">
                 <div data-widget="Sort" class="s-display-inline-block pull-right"/>
             </div>
-            <div class="col-md-6">
+            <div class="col-xs-12 col-md-7">
                 <div data-widget="VisualizationDropdown" class="s-display-inline-block pull-right"/>
                 <div data-widget="ExportDropdown" class="s-display-inline-block pull-right"/>
             </div>
diff --git a/src/js/widgets/sort/components/sort-app.jsx.js b/src/js/widgets/sort/components/sort-app.jsx.js
index 476f2c449..6e00e38b1 100644
--- a/src/js/widgets/sort/components/sort-app.jsx.js
+++ b/src/js/widgets/sort/components/sort-app.jsx.js
@@ -41,7 +41,7 @@ define(['react', 'prop-types'], function(React, PropTypes) {
         >
           {sort.text} <span className="caret" aria-hidden="true" />
         </button>
-        <ul className="dropdown-menu" role="menu">
+        <ul className="dropdown-menu pull-right" role="menu">
           {options.map((o) => (
             <li key={o.id}>
               <a
diff --git a/src/js/wraps/export_dropdown.js b/src/js/wraps/export_dropdown.js
index aeb623b23..963373632 100644
--- a/src/js/wraps/export_dropdown.js
+++ b/src/js/wraps/export_dropdown.js
@@ -37,7 +37,7 @@ define([
   var btnType = 'btn-primary-faded';
   var dropdownTitle = 'Export';
   var iconClass = 'icon-export';
-  var rightAlign = true;
+  var rightAlign = false;
   var selectedOption = true;
 
   return function() {
diff --git a/src/styles/sass/ads-sass/results-list.scss b/src/styles/sass/ads-sass/results-list.scss
index b89da0057..cdb8d3ad2 100644
--- a/src/styles/sass/ads-sass/results-list.scss
+++ b/src/styles/sass/ads-sass/results-list.scss
@@ -274,6 +274,11 @@ li.article-author {
   height: 86px;
   padding-top: 37px;
   padding-left: 2em;
+
+  @media screen and (max-width: $screen-sm) {
+    height: auto;
+    padding: 10px 0 10px 10px;
+  }
 }
 
 // get rid of top padding when the search bar is in scroll mode
diff --git a/src/styles/sass/ads-sass/search-bar.scss b/src/styles/sass/ads-sass/search-bar.scss
index a03a87726..d4c0e7ee3 100644
--- a/src/styles/sass/ads-sass/search-bar.scss
+++ b/src/styles/sass/ads-sass/search-bar.scss
@@ -145,9 +145,7 @@
 }
 
 .s-num-found {
-  position: absolute;
-  left: 2%;
-  top: 88px;
+  padding-left: 2%;
   font-size: 16px;
   display: none;
 }