vndangkhoa/apix
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix mobile theme

Browse source
This commit is contained in:
phamhungd 2025-11-24 16:33:36 +07:00
parent cd6dcd6863
commit 4b964a20b8
2 changed files with 88 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
static/modules/templateGallery.js
View file

@ -262,6 +262,9 @@ export function createTemplateGallery({ container, onSelectTemplate }) {
const controls = document.createElement('div');
controls.className = 'template-gallery-controls';
const searchRow = document.createElement('div');
searchRow.className = 'template-gallery-search-row';
const searchContainer = document.createElement('div');
searchContainer.className = 'template-search-container';
const searchInput = document.createElement('input');
@ -285,7 +288,8 @@ export function createTemplateGallery({ container, onSelectTemplate }) {
});
searchContainer.appendChild(searchInput);
controls.appendChild(searchContainer);
searchRow.appendChild(searchContainer);
controls.appendChild(searchRow);
const modeSelect = document.createElement('select');
modeSelect.className = 'template-mode-select';
@ -305,7 +309,6 @@ export function createTemplateGallery({ container, onSelectTemplate }) {
currentMode = e.target.value;
render();
});
controls.appendChild(modeSelect);
const categorySelect = document.createElement('select');
categorySelect.className = 'template-category-select';
@ -324,7 +327,6 @@ export function createTemplateGallery({ container, onSelectTemplate }) {
currentCategory = e.target.value;
render();
});
controls.appendChild(categorySelect);
const favoritesToggle = document.createElement('button');
favoritesToggle.type = 'button';
@ -343,7 +345,12 @@ export function createTemplateGallery({ container, onSelectTemplate }) {
favoriteFilterActive = !favoriteFilterActive;
render();
});
controls.appendChild(favoritesToggle);
const filterRow = document.createElement('div');
filterRow.className = 'template-gallery-filter-row';
filterRow.appendChild(modeSelect);
filterRow.appendChild(categorySelect);
filterRow.appendChild(favoritesToggle);
const userToggle = document.createElement('button');
userToggle.type = 'button';
@ -360,7 +367,7 @@ export function createTemplateGallery({ container, onSelectTemplate }) {
userTemplateFilterActive = !userTemplateFilterActive;
render();
});
controls.appendChild(userToggle);
filterRow.appendChild(userToggle);
const createTemplateBtn = document.createElement('button');
createTemplateBtn.className = 'template-create-btn';
@ -377,7 +384,9 @@ export function createTemplateGallery({ container, onSelectTemplate }) {
window.openCreateTemplateModal();
}
});
controls.appendChild(createTemplateBtn);
filterRow.appendChild(createTemplateBtn);
controls.appendChild(filterRow);
header.appendChild(controls);
container.appendChild(header);

89
static/style.css
View file

@ -1016,14 +1016,46 @@ button#generate-btn:disabled {
.template-gallery-controls {
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: center;
flex-wrap: wrap;
}
.template-search-container {
flex: 1;
min-width: 200px;
.template-gallery-search-row,
.template-gallery-filter-row {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
}
.template-gallery-filter-row {
justify-content: flex-start;
}
.template-gallery-search-row {
width: 100%;
}
.template-gallery-search-row .template-search-container {
width: 100%;
}
@media (min-width: 1025px) {
.template-gallery-controls {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.template-gallery-search-row {
flex: 1 1 320px;
}
.template-gallery-filter-row {
flex: 0 1 auto;
justify-content: flex-end;
overflow: visible;
}
}
.template-search-input {
@ -1267,16 +1299,6 @@ button#generate-btn:disabled {
height: 120px;
}
.template-gallery-controls {
flex-direction: column;
align-items: stretch;
}
.template-search-container,
.template-category-select {
width: 100%;
min-width: unset;
}
}
/* Spinner */
@ -1344,7 +1366,9 @@ button#generate-btn:disabled {
.image-display-area {
padding: 1.25rem;
min-height: 260px;
min-height: 320px;
max-height: min(70vh, 520px);
flex: none;
}
.canvas-toolbar {
@ -1361,6 +1385,39 @@ button#generate-btn:disabled {
flex-direction: column;
align-items: stretch;
}
#template-gallery-state {
align-items: stretch;
justify-content: flex-start;
}
#template-gallery-state .template-gallery-container {
max-height: min(70vh, 520px);
min-height: 320px;
}
#template-gallery-state .template-gallery-container,
#template-gallery-state .template-card-grid {
min-height: 0;
}
.template-gallery-controls {
gap: 0.5rem;
}
.template-gallery-search-row {
order: 0;
}
.template-gallery-filter-row {
order: 1;
flex-wrap: nowrap;
overflow-x: auto;
}
.template-gallery-filter-row > * {
flex: 0 0 auto;
}
}
@media (max-width: 640px) {