From b3b7b31f7db1cba73f84af41bbdf96b3d21c8bb0 Mon Sep 17 00:00:00 2001 From: db-2001 Date: Sat, 18 May 2024 15:08:38 -0400 Subject: [PATCH] Tweak behavior for mobile devices --- Website/index.html | 1 + Website/interaction.js | 6 ++-- Website/styles/base.css | 74 +++++++++++++++++++++++++++-------------- 3 files changed, 53 insertions(+), 28 deletions(-) diff --git a/Website/index.html b/Website/index.html index 9df5fba..7260bd0 100644 --- a/Website/index.html +++ b/Website/index.html @@ -6,6 +6,7 @@ + diff --git a/Website/interaction.js b/Website/interaction.js index cdd0f9e..5c6a0c1 100644 --- a/Website/interaction.js +++ b/Website/interaction.js @@ -487,7 +487,7 @@ function CreateSearchResult(manga, connector) { folderRow = document.createElement('row'); folderLabel = document.createElement('label'); - folderLabel.innerText = 'Download Folder:'; + folderLabel.innerText = 'Download Folder'; folderRow.appendChild(folderLabel); folderInput = document.createElement('input'); downloadFolder = manga.folderName; @@ -499,7 +499,7 @@ function CreateSearchResult(manga, connector) { intervalRow = document.createElement('row'); intervalLabel = document.createElement('label'); - intervalLabel.innerText = 'Job Interval:'; + intervalLabel.innerText = 'Job Interval'; intervalRow.appendChild(intervalLabel); intervalInput = document.createElement('input'); intervalInput.placeholder = '03:00:00 (HH:MM:SS)'; @@ -510,7 +510,7 @@ function CreateSearchResult(manga, connector) { chapterRow = document.createElement('row'); chapterLabel = document.createElement('label'); - chapterLabel.innerText = 'Download from Chapter:'; + chapterLabel.innerText = 'Download from Chapter'; chapterRow.appendChild(chapterLabel); chapterInput = document.createElement('input'); chapterInput.placeholder = (manga.ignoreChaptersBelow + 1).toString(); diff --git a/Website/styles/base.css b/Website/styles/base.css index d0cfc74..68de789 100644 --- a/Website/styles/base.css +++ b/Website/styles/base.css @@ -913,16 +913,13 @@ popup-content #loaderdiv { #newMangaResult > .section-item { flex-direction: row; - min-height: 300px; - flex-grow: 0; width: auto; + height: auto; padding: 0; - overflow-x: hidden; - overflow-y: auto; } img-container { - height: 100%; + height: 300px; width: 200px; position: relative; left: 0; @@ -971,28 +968,26 @@ span.latest-chapter-no { } div.new-manga-download-settings { - position: absolute; + position: relative; overflow: hidden; - bottom: 0; - right: 0; - width: 100%; + width: calc(100%-20px); height: auto; padding: 10px; } .new-manga-download-settings > row { - width: 50%; + width: 80%; display: flex; - flex-direction: row; - align-items: center; + flex-direction: column; + margin-top: 20px; margin-left: 5px; - margin-bottom: 5px; } .new-manga-download-settings > row > label { - margin-left: 15px; text-wrap: nowrap; - font-size: 11pt; + font-size: 10pt; + font-weight: bold; + color: #474646; } .new-manga-download-settings > row > input { @@ -1004,14 +999,42 @@ div.new-manga-download-settings { border-style: solid; border-color: lightgray; outline: none; - text-align: end; float: right; - width: 300px; + width: 100%; } .new-manga-download-settings > row > input:focus { border-color: var(--secondary-color); } +@media only screen and (max-width: 768px) { + /* For mobile phones: */ + .section-item > img-container { + display: none; + } + + tag-cloud { + display: none !important; + } + .new-manga-download-settings > row, .downloadManga, border-bar-button.in-library { + width: calc(100% - 25px) !important; + align-self: center; + position: relative; + } + + popup popup-window { + width: 100%; + height: calc(100% - var(--topbar-height)); + top: var(--topbar-height); + left: 0; + border-radius: 0; + } + + .section-item { + width: 100% !important; + } +} + + .section-item > .jobImage { height: 100%; width: auto; @@ -1130,17 +1153,16 @@ author-tag > img { .mangaDescription { font-size: 10pt; - max-height: 120px; - overflow-y: auto; padding: 4px; height: auto; margin: 2px; } .downloadManga { - position: absolute; - right: 10px; - bottom: 10px; + position: relative; + float: right; + width: fit-content; + margin: 5px 5px 0 auto; border-radius: 5px; padding: 5px 10px; @@ -1148,9 +1170,10 @@ author-tag > img { } border-bar-button.in-library { - position: absolute; - right: 10px; - bottom: 10px; + position: relative; + float: right; + margin: 5px 5px 0 auto; + width: fit-content; border-radius: 5px; padding: 5px 10px; @@ -1159,6 +1182,7 @@ border-bar-button.in-library { background-color: #08962e; color: #fff; border: none; + cursor: default; } border-bar-button.in-library:hover {