FEAT-990 Mobile landscape mode and functional size sliders (#998)

st3v3nmw · Jul 22, 2024 · 971e4af · 971e4af
1 parent a89a818
commit 971e4af
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 5 deletions.
diff --git a/src/gui/FlashcardModal.tsx b/src/gui/FlashcardModal.tsx
@@ -48,7 +48,9 @@ export class FlashcardModal extends Modal {
 
  // Setup base containers
  this.modalEl.style.height = this.settings.flashcardHeightPercentage + "%";
+ this.modalEl.style.maxHeight = this.settings.flashcardHeightPercentage + "%";
  this.modalEl.style.width = this.settings.flashcardWidthPercentage + "%";
+ this.modalEl.style.maxWidth = this.settings.flashcardWidthPercentage + "%";
  this.modalEl.setAttribute("id", "sr-modal");
 
  this.contentEl.addClass("sr-modal-content");

diff --git a/styles.css b/styles.css
@@ -1,8 +1,40 @@
-.is-mobile #sr-modal {
- --top-space: calc(var(--safe-area-inset-top) + var(--header-height) + var(--size-4-2));
- width: 100vw !important;
- height: calc(100vh - var(--top-space)) !important;
- margin-top: var(--top-space);
+@media only screen and (orientation: landscape) {
+ .is-mobile .sr-flashcard {
+ flex-direction: row;
+ }
+
+ .is-mobile .sr-header {
+ flex-direction: column;
+ flex: 0 1 0;
+ }
+
+ .is-mobile .sr-content {
+ flex: 1 0 0;
+ }
+
+ .is-mobile .sr-response {
+ flex-direction: column;
+ flex: 0 1 0;
+ }
+
+ .is-mobile .sr-controls {
+ flex-direction: column;
+ }
+
+ .is-mobile .sr-title {
+ display: none;
+ }
+
+ .is-mobile .sr-response-button {
+ writing-mode: vertical-lr;
+ }
+}
+
+#sr-modal {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
 }
 
 #sr-modal .modal-title {