From 5f9452ddf93e7e5a28ae05685d88789262456703 Mon Sep 17 00:00:00 2001
From: FarawayVision <stmobo@gmail.com>
Date: Thu, 2 May 2019 13:11:34 -0400
Subject: [PATCH] Select Screen: always show "Show More"/"Show Less" buttons
---
css/spni.css | 64 ++++++++++++++++++++---------------------------
index.html | 2 +-
js/spniDisplay.js | 15 ++++++++++-
3 files changed, 42 insertions(+), 39 deletions(-)
diff --git a/css/spni.css b/css/spni.css
index 96606f3bce5..825e04a060b 100644
--- a/css/spni.css
+++ b/css/spni.css
@@ -1953,12 +1953,12 @@ body.modal-open {
justify-content: center;
}
-#source-tag-column label {
+#source-tag-column label, #name-creator-column label {
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
-#source-tag-column input {
+#source-tag-column input, #name-creator-column input {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
border-left: 0px;
@@ -2033,7 +2033,7 @@ body.modal-open {
/*height: 35%;*/
height: auto;
- min-height: 15%;
+ /*min-height: 15%;*/
max-height: 82%;
overflow-y: auto;
@@ -2141,10 +2141,6 @@ body.modal-open {
display: flex;
}
-.opponent-epilogues-field:not(.has-epilogues), .opponent-collectibles-field:not(.has-collectibles) {
- display: none;
-}
-
.opponent-options-row {
margin: 0.5% 0;
flex: 1;
@@ -2187,6 +2183,30 @@ body.modal-open {
flex: 1;
}
+.show-more-button {
+ display: block;
+}
+
+.show-more-button::after {
+ content: "More";
+}
+
+.show-more .show-more-button::after {
+ content: "Less";
+}
+
+.opponent-details-basic .extra-details-row {
+ display: none;
+}
+
+.show-more .extra-details-row {
+ display: flex;
+}
+
+.opponent-epilogues-field:not(.has-epilogues), .opponent-collectibles-field:not(.has-collectibles) {
+ display: none;
+}
+
/************************************************************
* Classes for the opponent Epilogues and Collectibles views.
************************************************************/
@@ -2250,37 +2270,7 @@ body.modal-open {
* less than 4:3.
************************************************************/
-@media (min-aspect-ratio: 4/3) {
- .show-more-button {
- display: none;
- }
-}
-
@media (max-aspect-ratio: 4/3) {
- .show-more-button {
- display: block;
- }
-
- .show-more-button::after {
- content: "More";
- }
-
- .show-more .show-more-button::after {
- content: "Less";
- }
-
- .opponent-details-basic .extra-details-row {
- display: none;
- }
-
- .show-more .extra-details-row {
- display: flex;
- }
-
- .opponent-epilogues-field:not(.has-epilogues), .opponent-collectibles-field:not(.has-collectibles) {
- display: none;
- }
-
.gender-component, .sort-component > .dropdown-menu > li, .sort-component > button {
font-size: 1vw;
}
diff --git a/index.html b/index.html
index 45c7e34db94..0a2e08054bd 100644
--- a/index.html
+++ b/index.html
@@ -524,7 +524,7 @@
<img class="opponent-details-simple-image" />
</div>
<div class="opponent-details-panel bordered" hidden>
- <div class="opponent-details-view opponent-details-basic">
+ <div class="opponent-details-view opponent-details-basic show-more">
<div class="opponent-options-row">
<button type="button" class="bordered smooth-button smooth-button-blue show-more-button">Show </button>
<select class="form-control opponent-costume-select"></select>
diff --git a/js/spniDisplay.js b/js/spniDisplay.js
index 4af16ff3768..b7421c365dd 100644
--- a/js/spniDisplay.js
+++ b/js/spniDisplay.js
@@ -895,6 +895,13 @@ OpponentDetailsDisplay = function () {
this.epiloguesView.hide();
this.collectiblesView.hide();
+
+ var query = window.matchMedia('(min-aspect-ratio: 4/3)');
+ if (query.matches) {
+ this.mainView.addClass('show-more');
+ } else {
+ this.mainView.removeClass('show-more');
+ }
}
OpponentDetailsDisplay.prototype = Object.create(OpponentDisplay.prototype);
@@ -957,7 +964,6 @@ OpponentDetailsDisplay.prototype.clear = function () {
this.selectButton.prop('disabled', true);
this.epiloguesField.removeClass('has-epilogues');
this.collectiblesField.removeClass('has-collectibles');
- this.mainView.removeClass('show-more');
this.costumeSelector.hide();
this.displayContainer.hide();
@@ -1105,6 +1111,13 @@ OpponentDetailsDisplay.prototype.update = function (opponent) {
this.selectButton.prop('disabled', false);
+ var query = window.matchMedia('(min-aspect-ratio: 4/3)');
+ if (query.matches) {
+ this.mainView.addClass('show-more');
+ } else {
+ this.mainView.removeClass('show-more');
+ }
+
if (!opponent.ending) {
this.epiloguesField.removeClass('has-epilogues');
} else {
--
GitLab