glax/Tranga-Website
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Tweak behavior for mobile devices

Browse Source
This commit is contained in:
db-2001 2024-05-18 15:08:38 -04:00
parent 2a76b7ee5d
commit b3b7b31f7d
3 changed files with 53 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Website/index.html
View File

@ -6,6 +6,7 @@
<link id='basestyle' rel="stylesheet" href="styles/base.css"> <link id='basestyle' rel="stylesheet" href="styles/base.css">
<link id='librarystyle' rel="stylesheet" href="styles/style_default.css"> <link id='librarystyle' rel="stylesheet" href="styles/style_default.css">
<link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="icon" type="image/x-icon" href="favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head> </head>
<body> <body>
<wrapper> <wrapper>

6
Website/interaction.js
View File

@ -487,7 +487,7 @@ function CreateSearchResult(manga, connector) {
folderRow = document.createElement('row'); folderRow = document.createElement('row');
folderLabel = document.createElement('label'); folderLabel = document.createElement('label');
folderLabel.innerText = 'Download Folder:'; folderLabel.innerText = 'Download Folder';
folderRow.appendChild(folderLabel); folderRow.appendChild(folderLabel);
folderInput = document.createElement('input'); folderInput = document.createElement('input');
downloadFolder = manga.folderName; downloadFolder = manga.folderName;
@ -499,7 +499,7 @@ function CreateSearchResult(manga, connector) {
intervalRow = document.createElement('row'); intervalRow = document.createElement('row');
intervalLabel = document.createElement('label'); intervalLabel = document.createElement('label');
intervalLabel.innerText = 'Job Interval:'; intervalLabel.innerText = 'Job Interval';
intervalRow.appendChild(intervalLabel); intervalRow.appendChild(intervalLabel);
intervalInput = document.createElement('input'); intervalInput = document.createElement('input');
intervalInput.placeholder = '03:00:00 (HH:MM:SS)'; intervalInput.placeholder = '03:00:00 (HH:MM:SS)';
@ -510,7 +510,7 @@ function CreateSearchResult(manga, connector) {
chapterRow = document.createElement('row'); chapterRow = document.createElement('row');
chapterLabel = document.createElement('label'); chapterLabel = document.createElement('label');
chapterLabel.innerText = 'Download from Chapter:'; chapterLabel.innerText = 'Download from Chapter';
chapterRow.appendChild(chapterLabel); chapterRow.appendChild(chapterLabel);
chapterInput = document.createElement('input'); chapterInput = document.createElement('input');
chapterInput.placeholder = (manga.ignoreChaptersBelow + 1).toString(); chapterInput.placeholder = (manga.ignoreChaptersBelow + 1).toString();

74
Website/styles/base.css
View File

@ -913,16 +913,13 @@ popup-content #loaderdiv {
#newMangaResult > .section-item { #newMangaResult > .section-item {
flex-direction: row; flex-direction: row;
min-height: 300px;
flex-grow: 0;
width: auto; width: auto;
height: auto;
padding: 0; padding: 0;
overflow-x: hidden;
overflow-y: auto;
} }
img-container { img-container {
height: 100%; height: 300px;
width: 200px; width: 200px;
position: relative; position: relative;
left: 0; left: 0;
@ -971,28 +968,26 @@ span.latest-chapter-no {
} }
div.new-manga-download-settings { div.new-manga-download-settings {
position: absolute; position: relative;
overflow: hidden; overflow: hidden;
bottom: 0; width: calc(100%-20px);
right: 0;
width: 100%;
height: auto; height: auto;
padding: 10px; padding: 10px;
} }
.new-manga-download-settings > row { .new-manga-download-settings > row {
width: 50%; width: 80%;
display: flex; display: flex;
flex-direction: row; flex-direction: column;
align-items: center; margin-top: 20px;
margin-left: 5px; margin-left: 5px;
margin-bottom: 5px;
} }
.new-manga-download-settings > row > label { .new-manga-download-settings > row > label {
margin-left: 15px;
text-wrap: nowrap; text-wrap: nowrap;
font-size: 11pt; font-size: 10pt;
font-weight: bold;
color: #474646;
} }
.new-manga-download-settings > row > input { .new-manga-download-settings > row > input {
@ -1004,14 +999,42 @@ div.new-manga-download-settings {
border-style: solid; border-style: solid;
border-color: lightgray; border-color: lightgray;
outline: none; outline: none;
text-align: end;
float: right; float: right;
width: 300px; width: 100%;
} }
.new-manga-download-settings > row > input:focus { .new-manga-download-settings > row > input:focus {
border-color: var(--secondary-color); 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 { .section-item > .jobImage {
height: 100%; height: 100%;
width: auto; width: auto;
@ -1130,17 +1153,16 @@ author-tag > img {
.mangaDescription { .mangaDescription {
font-size: 10pt; font-size: 10pt;
max-height: 120px;
overflow-y: auto;
padding: 4px; padding: 4px;
height: auto; height: auto;
margin: 2px; margin: 2px;
} }
.downloadManga { .downloadManga {
position: absolute; position: relative;
right: 10px; float: right;
bottom: 10px; width: fit-content;
margin: 5px 5px 0 auto;
border-radius: 5px; border-radius: 5px;
padding: 5px 10px; padding: 5px 10px;
@ -1148,9 +1170,10 @@ author-tag > img {
} }
border-bar-button.in-library { border-bar-button.in-library {
position: absolute; position: relative;
right: 10px; float: right;
bottom: 10px; margin: 5px 5px 0 auto;
width: fit-content;
border-radius: 5px; border-radius: 5px;
padding: 5px 10px; padding: 5px 10px;
@ -1159,6 +1182,7 @@ border-bar-button.in-library {
background-color: #08962e; background-color: #08962e;
color: #fff; color: #fff;
border: none; border: none;
cursor: default;
} }
border-bar-button.in-library:hover { border-bar-button.in-library:hover {