diff --git a/justfile b/justfile index 6097607..35cd5d0 100644 --- a/justfile +++ b/justfile @@ -113,10 +113,10 @@ deploy: deploy-database: @echo "⚠️ Deploying test database (will overwrite remote test.db)" @echo "Creating database directory if needed..." - ssh posterg "mkdir -p /var/www/posterg/database" + ssh posterg "mkdir -p /var/www/posterg/storage" rsync -vur --progress ./storage/test.db posterg:/var/www/posterg/storage/test.db @echo "Setting correct permissions..." - ssh posterg "chown www-data:posterg /var/www/posterg/database /var/www/posterg/storage/test.db && chmod 775 /var/www/posterg/database && chmod 660 /var/www/posterg/storage/test.db" + ssh posterg "chown www-data:posterg /var/www/posterg/storage /var/www/posterg/storage/test.db && chmod 775 /var/www/posterg/storage && chmod 660 /var/www/posterg/storage/test.db" @echo "✅ Test database deployed and configured" # Legacy alias diff --git a/public/assets/search.css b/public/assets/search.css new file mode 100644 index 0000000..bc5216a --- /dev/null +++ b/public/assets/search.css @@ -0,0 +1,452 @@ +/* Search page - horizontal layout */ +body { + margin: 0; + height: 100vh; + overflow: hidden; + display: flex; + flex-direction: row; + gap: 0; + font-family: + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Arial, sans-serif; +} + +/* Layout: header sidebar, main+footer wrapper takes rest */ +header { + flex: 0 0 250px; + min-width: 0; + max-width: 250px; + height: 100vh; + font-family: "police1", sans-serif; + background: #9557b5ff; + color: white; + display: flex; + flex-direction: column; + gap: 0.4rem; + padding: 0.75rem 0.6rem; + margin: 0; + overflow-y: auto; + overflow-x: hidden; + box-sizing: border-box; + border-radius: 40px; +} + +.main-wrapper { + flex: 1; + min-width: 0; + height: 100vh; + display: flex; + flex-direction: column; + overflow: hidden; +} + +main { + flex: 1; + min-width: 0; + background: #3c856bff; + position: relative; + padding: 1rem; + margin: 0; + box-sizing: border-box; + overflow: hidden; + display: flex; + flex-direction: column; + border-radius: 40px; +} + +footer { + background: #222222ff; + padding: 0.75rem 1rem; + margin: 0; + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + border-radius: 40px; +} + +/* Search header */ +.search-header { + display: flex; + flex-direction: column; + gap: 0.4rem; + width: 100%; + flex-shrink: 0; +} + +.back-button { + background: rgba(255, 255, 255, 0.15); + border: 1px solid rgba(255, 255, 255, 0.3); + color: white; + padding: 0.35rem 0.6rem; + border-radius: 10px; + cursor: pointer; + text-decoration: none; + font-size: 0.8rem; + transition: all 0.2s; + white-space: nowrap; + display: inline-flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; +} + +.back-button:hover { + background: rgba(255, 255, 255, 0.25); + transform: translateY(-1px); +} + +.search-form { + display: flex; + flex-direction: column; + gap: 0.35rem; + min-width: 0; +} + +.search-input { + width: 100%; + padding: 0.35rem 0.6rem; + border: 1px solid rgba(255, 255, 255, 0.3); + border-radius: 10px; + font-size: 0.8rem; + background: rgba(255, 255, 255, 0.9); + color: #333; + box-sizing: border-box; +} + +.search-input::placeholder { + color: #999; + font-size: 0.75rem; +} + +.search-actions { + display: flex; + gap: 0.35rem; +} + +.search-button, +.filter-button { + background: rgba(255, 255, 255, 0.15); + border: 1px solid rgba(255, 255, 255, 0.3); + color: white; + padding: 0.35rem 0.5rem; + border-radius: 10px; + cursor: pointer; + font-size: 0.8rem; + transition: all 0.2s; + white-space: nowrap; + flex: 1; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; +} + +.search-button:hover, +.filter-button:hover { + background: rgba(255, 255, 255, 0.25); + transform: translateY(-1px); +} + +.filter-button.active { + background: rgba(255, 255, 255, 0.3); + font-weight: 600; +} + +/* Filters panel */ +.filters-panel { + display: none; + background: rgba(255, 255, 255, 0.08); + padding: 0.4rem; + border-radius: 8px; + flex-shrink: 0; + overflow: visible; +} + +.filters-panel.show { + display: block; +} + +.filters-grid { + display: grid; + grid-template-columns: 1fr; + gap: 0.3rem; +} + +.filter-group { + display: flex; + flex-direction: column; + gap: 0.15rem; + min-width: 0; +} + +.filter-label { + color: white; + font-weight: 600; + font-size: 0.65rem; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.filter-select { + padding: 0.3rem 0.35rem; + border-radius: 6px; + border: 1px solid rgba(255, 255, 255, 0.3); + background: rgba(255, 255, 255, 0.9); + font-size: 0.7rem; + min-width: 0; + width: 100%; + box-sizing: border-box; +} + +.filter-actions { + display: flex; + flex-direction: column; + gap: 0.3rem; + margin-top: 0.3rem; + flex-shrink: 0; +} + +.reset-button { + background: rgba(255, 255, 255, 0.15); + border: 1px solid rgba(255, 255, 255, 0.3); + color: white; + padding: 0.3rem 0.5rem; + border-radius: 8px; + cursor: pointer; + font-size: 0.7rem; + text-decoration: none; + display: inline-block; + white-space: nowrap; + text-align: center; +} + +.reset-button:hover { + background: rgba(255, 255, 255, 0.25); +} + +.error-message { + background: rgba(255, 100, 100, 0.2); + color: white; + padding: 0.35rem 0.5rem; + border-radius: 8px; + font-size: 0.75rem; + flex-shrink: 0; +} + +/* Main content - results grid */ +.cards-container { + display: grid; + gap: 1rem; + flex: 1; + min-height: 0; + padding: 0.5rem; + overflow-y: auto; + overflow-x: hidden; + grid-template-rows: repeat(3, 1fr); + grid-template-columns: repeat(3, 1fr); + grid-auto-flow: row; +} + +@media (min-width: 1400px) and (max-width: 1700px) { + .cards-container { + grid-template-rows: repeat(3, 1fr); + grid-template-columns: repeat(4, 1fr); + } +} + +@media (min-width: 1701px) { + .cards-container { + grid-template-rows: repeat(4, 1fr); + grid-template-columns: repeat(4, 1fr); + } +} + +@media (max-width: 1399px) { + .cards-container { + grid-template-rows: repeat(3, 1fr); + grid-template-columns: repeat(2, 1fr); + } +} + +.card-link { + text-decoration: none; + color: inherit; + display: block; + height: 100%; +} + +.card { + background: #eee; + border-radius: 12px; + padding: 0.75rem; + height: 100%; + width: 100%; + box-sizing: border-box; + transition: transform 0.2s, box-shadow 0.2s; + display: flex; + flex-direction: column; + overflow: hidden; + min-width: 0; + min-height: 0; +} + +.card:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); +} + +.card-content { + display: flex; + flex-direction: column; + gap: 0.4rem; + height: 100%; + overflow: hidden; +} + +.card .title { + font-size: 0.85rem; + font-weight: 600; + margin: 0; + line-height: 1.2; + color: #333; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; +} + +.card .authors { + font-size: 0.75rem; + margin: 0; + color: #666; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.card .year { + font-size: 0.75rem; + margin: 0; + color: #9557b5; + font-weight: 600; +} + +.card .tags { + display: flex; + flex-wrap: wrap; + gap: 0.25rem; + margin-top: auto; + padding-top: 0.3rem; +} + +.card .tag { + font-size: 0.65rem; + padding: 0.2rem 0.4rem; + background: rgba(149, 87, 181, 0.15); + color: #7a3d95; + border-radius: 4px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + font-weight: 500; +} + +/* Pagination */ +.pagination { + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + padding: 0.5rem 0.75rem; + background: rgba(255, 255, 255, 0.15); + border-radius: 8px; + margin-top: 0.75rem; + width: fit-content; + align-self: center; + flex-shrink: 0; +} + +.pagination-btn { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 2rem; + height: 2rem; + padding: 0 0.5rem; + background: rgba(255, 255, 255, 0.9); + color: #3c856b; + text-decoration: none; + border-radius: 6px; + font-size: 1rem; + font-weight: 600; + transition: all 0.2s; + border: 2px solid transparent; +} + +.pagination-btn:hover:not(.disabled) { + background: white; + border-color: #9557b5; + transform: translateY(-1px); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); +} + +.pagination-btn.disabled { + opacity: 0.3; + cursor: not-allowed; + pointer-events: none; +} + +.pagination-info { + display: flex; + align-items: center; + gap: 0.25rem; + padding: 0 0.5rem; + color: white; + font-size: 0.9rem; + font-weight: 500; +} + +.page-current { + font-size: 1.1rem; + font-weight: 700; + color: #9557b5; + background: white; + padding: 0.2rem 0.6rem; + border-radius: 6px; + min-width: 1.5rem; + text-align: center; +} + +.page-separator { + font-weight: 300; + opacity: 0.6; + padding: 0 0.15rem; +} + +.page-total { + opacity: 0.8; +} + +/* Footer - results count */ +.results-footer { + display: flex; + align-items: center; + justify-content: center; + color: white; + font-size: 1rem; + gap: 0.5rem; + text-align: center; +} + +.results-count { + font-weight: 700; + font-size: 1.5rem; + letter-spacing: -0.02em; +} diff --git a/public/search.php b/public/search.php index dfc9ffc..c32c5ab 100644 --- a/public/search.php +++ b/public/search.php @@ -29,7 +29,7 @@ if (rand(1, 100) === 1) { // Pagination - adjust to grid $page = isset($_GET['page']) ? intval($_GET['page']) : 1; -$itemsPerPage = 12; // Default grid size (3 rows × 4 columns) +$itemsPerPage = 9; // Default grid size (3 rows × 3 columns) // Collect search parameters $searchParams = []; @@ -118,195 +118,7 @@ try { Recherche - Posterg - - +
@@ -318,14 +130,17 @@ try { type="text" name="query" class="search-input" - placeholder="Rechercher par titre, auteur, mots-clés..." + placeholder="Rechercher..." value="" autofocus > - - + +
+ + +
@@ -466,7 +281,8 @@ try {
-
+
+
0): ?> @@ -513,14 +329,15 @@ try {
-
- - +
+ + +