From 139e040cb6c19f111a2f075dffe769cccbd7dd4a Mon Sep 17 00:00:00 2001
From: Michael Heppler <mheppler@hmdc.harvard.edu>
Date: Mon, 16 Mar 2020 16:08:29 -0400
Subject: [PATCH] Improve responsive widths of dataset pg btns for sm, xs
 layouts [ref #6684]

---
 src/main/webapp/dataset-citation.xhtml      |  4 ++--
 src/main/webapp/dataset.xhtml               | 26 ++++++++++-----------
 src/main/webapp/resources/css/structure.css | 18 +++++++-------
 3 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/main/webapp/dataset-citation.xhtml b/src/main/webapp/dataset-citation.xhtml
index cb565e7316d..1218eeeddd3 100644
--- a/src/main/webapp/dataset-citation.xhtml
+++ b/src/main/webapp/dataset-citation.xhtml
@@ -12,8 +12,8 @@
             <div class="row">
                 <!-- TO-DO, REVIEW USE OF vcenter CLASS IN CITATION VS THUMBNAIL -->
                 <!-- TO-DO, REVIEW INCLUSION OF THUMBNAIL IN WIDGET VIEW -->
-                <div class="col-xs-2 col-sm-3 col-md-2 vcenter title-preview-icon-block">
-                    <img src="#{DatasetPage.thumbnailString}" style="height:114px;" jsf:rendered="#{!empty DatasetPage.thumbnailString}" alt="#{DatasetPage.datasetVersionUI.title.value}"/>
+                <div class="col-xs-2 col-sm-3 col-md-2 center-block preview-icon-block">
+                    <img src="#{DatasetPage.thumbnailString}" class="img-responsive" style="min-height:114px;/*TO-DO, FIX SM THUMBNAIL HACK*/" jsf:rendered="#{!empty DatasetPage.thumbnailString}" alt="#{DatasetPage.datasetVersionUI.title.value}"/>
                     <span class="icon-dataset" jsf:rendered="#{empty DatasetPage.thumbnailString}"/>
                 </div>
                 <div class="col-xs-10 col-sm-9 col-md-10 citation">
diff --git a/src/main/webapp/dataset.xhtml b/src/main/webapp/dataset.xhtml
index aaa95bc0cd2..f1c3594dd54 100644
--- a/src/main/webapp/dataset.xhtml
+++ b/src/main/webapp/dataset.xhtml
@@ -111,7 +111,7 @@
                                     <!-- START: NEW RESPONSIVE ABOVE FOLD BLOCK -->
                                     <div class="row">
                                         
-                                        <div class="col-xs-12 col-sm-9">
+                                        <div class="col-xs-12 col-sm-12 col-md-8 col-lg-9">
                                             <!-- CITATION BLOCK -->
                                             <ui:fragment rendered="#{!empty DatasetPage.displayCitation}">
                                                 <ui:include src="dataset-citation.xhtml">
@@ -121,7 +121,7 @@
                                             <!-- END: CITATION BLOCK -->
                                         </div>
                                         
-                                        <div class="col-xs-12 col-sm-3 pull-right">
+                                        <div class="col-xs-12 col-sm-12 col-md-4 col-lg-3 pull-right">
                                             <!-- ActionButtonBlock -->
                                             <div id="actionButtonBlock" jsf:rendered="#{!widgetWrapper.widgetView}">
 
@@ -429,7 +429,7 @@
                                             <!-- END: ActionButtonBlock -->
                                         </div>
                                         
-                                        <div class="col-xs-12 col-sm-3 pull-right" jsf:rendered="#{true}">
+                                        <div class="col-xs-12 col-sm-12 col-md-4 col-lg-3 pull-right" jsf:rendered="#{true}">
                                             <!-- Metrics -->
                                             <div id="metrics-block" style="border:0;" jsf:rendered="#{!(settingsWrapper.rsyncDownload or DatasetPage.workingVersion.deaccessioned)}">
                                                 <div id="metrics-headingXXX">
@@ -484,23 +484,23 @@
                                         </div>
                                         
                                         <!-- RESPONSIVE ORDER HACK BOOTSTRAP 3 https://stackoverflow.com/a/24834574 -->
-                                        <div id="dataset-colorder-block" class="hidden-xs col-sm-9"><!--Hack--></div>
+                                        <div id="dataset-colorder-block" class="visible-md-block visible-lg-block col-md-8 col-lg-9"><!--Hack--></div>
                                         <!-- END: RESPONSIVE ORDER HACK BOOTSTRAP 3 -->
                                         
                                         <!-- DEACCESSION REASON -->
-                                        <div class="col-xs-12 col-sm-9 margin-bottom" jsf:rendered="#{DatasetPage.workingVersion.deaccessioned}">
-                                        <div id="deaccession-reason-block" class="col-xs-12 bg-danger">
-                                            <h5 class="margin-top-half">#{bundle['dataset.deaccession.reason']}</h5>
-                                            <p>#{DatasetPage.workingVersion.versionNote}</p>
-                                            <ui:fragment rendered="#{!empty DatasetPage.workingVersion.archiveNote}">
-                                                <p>#{bundle['dataset.beAccessedAt']} <a href="#{DatasetPage.workingVersion.archiveNote}" target="_blank">#{DatasetPage.workingVersion.archiveNote}</a></p>
-                                            </ui:fragment>
-                                        </div>
+                                        <div class="col-xs-12 col-sm-12 col-md-8 col-lg-9 margin-bottom" jsf:rendered="#{DatasetPage.workingVersion.deaccessioned}">
+                                            <div id="deaccession-reason-block" class="col-xs-12 bg-danger">
+                                                <h5 class="margin-top-half">#{bundle['dataset.deaccession.reason']}</h5>
+                                                <p>#{DatasetPage.workingVersion.versionNote}</p>
+                                                <ui:fragment rendered="#{!empty DatasetPage.workingVersion.archiveNote}">
+                                                    <p>#{bundle['dataset.beAccessedAt']} <a href="#{DatasetPage.workingVersion.archiveNote}" target="_blank">#{DatasetPage.workingVersion.archiveNote}</a></p>
+                                                </ui:fragment>
+                                            </div>
                                         </div>
                                         <!-- END: DEACCESSION REASON -->
                                         
                                         <!-- BEGIN: DATASET SUMMARY -->
-                                        <div id="dataset-summary-metadata" class="col-xs-12 col-sm-9 metadata-container margin-bottom"
+                                        <div id="dataset-summary-metadata" class="col-xs-12 col-sm-12 col-md-8 col-lg-9 metadata-container margin-bottom"
                                              jsf:rendered="#{!widgetWrapper.widgetView and !DatasetPage.workingVersion.deaccessioned and 
                                                              (!empty DatasetPage.datasetVersionUI.descriptionDisplay
                                                              or !empty DatasetPage.datasetVersionUI.keywordDisplay
diff --git a/src/main/webapp/resources/css/structure.css b/src/main/webapp/resources/css/structure.css
index b935afdd624..104cf0a18ca 100644
--- a/src/main/webapp/resources/css/structure.css
+++ b/src/main/webapp/resources/css/structure.css
@@ -493,14 +493,6 @@ span.search-term-match {font-weight: bold;}
 [id$='resultsTable'] div.card-preview-icon-block span[class^='icon'],
 [id$='resultsTable'] div.card-preview-icon-block span[class^='glyphicon'] {font-size:2.8em;}
 
-
-/*MOVED*/
-/*TO-DO, REVIEW USE OF vcenter CLASS IN CITATION VS THUMBNAIL*/
-div.citation-block div.vcenter.title-preview-icon-block {/*display:inline-block; vertical-align:middle; float:none; padding:0;*/}
-div.citation-block div.title-preview-icon-block {/*width:48px;*/ font-size:275%; line-height:1.1; color:#428BCA;}
-div.citation-block div.title-preview-icon-block img {margin:6px 0;}
-div.citation-block div.title-preview-icon-block span[class^='icon'] {font-size:2.8em;}
-
 form[id$='facetType'] > div.clearfix {margin-bottom:4px;}
 form[id$='facetType'] > div.clearfix:last-child {margin-bottom:0;}
 form[id$='facetType'] > div.clearfix .facetTypeChBox {display:block; float:left;}
@@ -624,7 +616,7 @@ div[id$='roleDisplay'] span.label, div[id$='roleDetails'] span.label {display:in
 
 /* RESPONSIVE ORDER HACK BOOTSTRAP 3 https://stackoverflow.com/a/24834574 */
 #dataset-colorder-block {height: 50px;}
-@media(min-width:768px){
+@media(min-width:992px){
     #dataset-summary-metadata, #deaccession-reason-block {margin-top: -50px;}
 }
 
@@ -638,6 +630,14 @@ div.alert-info.bg-citation, div.alert-danger.bg-danger {/*padding-top:4px; paddi
 .citation-select {/*-- display:inline-block; --*/}
 .citation, .citation-download, .citation-standards {/*padding:.5em;*/}
 .citation span.glyphicon-question-sign {margin-left:.5em; margin-bottom:2px; vertical-align: middle;}
+
+/*MOVED*/
+/*TO-DO, REVIEW USE OF vcenter CLASS IN CITATION VS THUMBNAIL*/
+/*div.citation-block div.vcenter.title-preview-icon-block {display:inline-block; vertical-align:middle; float:none; padding:0;}*/
+div.citation-block div.preview-icon-block {/*width:48px;*/}
+div.citation-block div.preview-icon-block img {/*margin:6px 0;*/}
+div.citation-block div.preview-icon-block span[class^='icon'] {font-size:7.5em; line-height:1.1; color:#428BCA;}
+
 /*COMMENTED OUT FOR THUMBNAILS*/
 /*TO-DO, REVIEW USE OF vcenter CLASS IN CITATION VS THUMBNAIL*/
 .citation-block .vcenter {/*display: inline-block; vertical-align: middle; float: none;*/}