diff --git a/content/search-results.php b/content/search-results.php new file mode 100644 index 0000000..c7cfa62 --- /dev/null +++ b/content/search-results.php @@ -0,0 +1,125 @@ + + +
+ + + + +
+ +
+

Suchergebnisse

+

3 Treffer für Ihre Suchanfrage

+
+ + +
+ + + + +

+ Bitte überprüfe deine Sucheingabe und versuche es erneut! +

+ + + + +
+
+

+ Pythagoras +

+

Von: Max Mustermann

+
+
→
+
+ + +
+
+

+ Pythagoras +

+

Von: Max Mustermann

+
+
→
+
+ + +
+
+

+ Pythagoras +

+

Von: Max Mustermann

+
+
→
+
+ +
+
+ + +
+ + +
+ +
+ + + +
+ +
+
+ +
\ No newline at end of file diff --git a/css/navbar.css b/css/navbar.css index 26e754f..a8b5384 100644 --- a/css/navbar.css +++ b/css/navbar.css @@ -205,6 +205,10 @@ CSS für die navbar margin-left: 4px; } + .nav__search-button:hover { + background-color: #f8f9fa; + } + /* restliche desktop-navbar aus */ .nav__center, .nav__right .nav__button, diff --git a/css/search-results.css b/css/search-results.css new file mode 100644 index 0000000..f2fc36f --- /dev/null +++ b/css/search-results.css @@ -0,0 +1,263 @@ +/* +CSS für die Suchergebnis-Seite + */ +/* Container und Layout-Schutz vor globalen Styles */ +.s-res-layout-grid { + box-sizing: border-box; + max-width: 95%; /* Nutzt jetzt 95% der Bildschirmbreite statt starrer Pixel */ + width: 95%; /* Erhöht das Limit für extrem große Monitore von 1200px auf 1600px */ + margin: 2rem auto; + padding: 0 1rem; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + color: #212529; + line-height: 1.5; + + /* Grid für die Zweispaltigkeit */ + display: grid; + grid-template-columns: 320px 1fr; /* Seitenleiste leicht verbreitert, Inhalt nimmt den gesamten Rest ein */ + gap: 2.5rem; /* Etwas mehr Abstand zwischen Seitenleiste und Inhalt für das breitere Layout */ +} + +.s-res-layout-grid * { + box-sizing: border-box; +} + +/* --- SEITENLEISTE (FILTER & SUCHE) --- */ +.s-res-sidebar { + display: flex; + flex-direction: column; + gap: 1.5rem; +} + +.s-res-sidebar-box { + background-color: #ffffff; + border: 1px solid #e2e8f0; + border-radius: 8px; + padding: 1.25rem; +} + +.s-res-sidebar-title { + font-size: 1rem; + font-weight: 700; + color: #1a202c; + margin: 0 0 1rem 0; + text-transform: uppercase; + letter-spacing: 0.05em; +} + +/* Formular & deine Suchleisten-Klassen */ +.s-res-search-form { + display: flex; + align-items: center; +} + +/* Filter Radio-Buttons */ +.s-res-filter-group { + display: flex; + flex-direction: column; + gap: 0.75rem; +} + +.s-res-filter-option { + display: flex; + align-items: center; + gap: 0.5rem; + cursor: pointer; + font-size: 0.95rem; + color: #4a5568; +} + +.s-res-filter-option input[type="radio"] { + margin: 0; + accent-color: #3182ce; /* Moderne Färbung des Radio-Buttons */ +} + +/* --- HAUPTINHALT (ERGEBNISSE) --- */ +.s-res-main-content { + min-width: 0; /* Verhindert das Ausbrechen von Flex-Elementen */ +} + +.s-res-header { + margin-bottom: 2rem; + border-bottom: 2px solid #dee2e6; + padding-bottom: 1rem; +} + +.s-res-main-title { + font-size: 2rem; + color: #1a202c; + margin: 0 0 0.5rem 0; + font-weight: 700; +} + +.s-res-meta { + color: #6c757d; + font-size: 0.95rem; + margin: 0; +} + +.s-res-list { + display: flex; + flex-direction: column; + gap: 1rem; +} + +/* Einzelner Beitrag */ +.s-res-item { + background-color: #ffffff; + border: 1px solid #e2e8f0; + border-radius: 8px; + padding: 1.25rem; + display: flex; + justify-content: space-between; + align-items: center; + transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; +} + +.s-res-item:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); + border-color: #cbd5e1; +} + +.s-res-content { + flex: 1; +} + +.s-res-item-title { + font-size: 1.25rem; + margin: 0 0 0.25rem 0; + font-weight: 600; +} + +.s-res-link { + color: #3182ce; + text-decoration: none; + transition: color 0.2s ease; +} + +.s-res-link:hover { + text-decoration: underline; + color: #2b6cb0; +} + +.s-res-author { + font-size: 0.875rem; + color: #4a5568; + margin: 0; +} + +.s-res-author-name { + font-weight: 600; + color: #2d3748; +} + +.s-res-arrow { + font-size: 1.5rem; + color: #a0aec0; + padding-left: 1rem; + transition: color 0.2s ease, transform 0.2s ease; +} + +.s-res-item:hover .s-res-arrow { + color: #3182ce; + transform: translateX(3px); +} + +/* --- ERGEBNISSE PRO SEITE & PAGINIERUNG --- */ +.s-res-pagination-footer { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 2rem; + padding-top: 1.5rem; + border-top: 1px solid #e2e8f0; +} + +/* Dropdown-Auswahl */ +.s-res-limit-selector { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.s-res-limit-label { + font-size: 0.9rem; + color: #4a5568; +} + +.s-res-limit-select { + padding: 0.35rem 1.5rem 0.35rem 0.5rem; + font-size: 0.9rem; + color: #2d3748; + background-color: #ffffff; + border: 1px solid #cbd5e1; + border-radius: 4px; + cursor: pointer; + outline: none; + transition: border-color 0.2s; + + /* Diskreter nativer Pfeil-Style */ + appearance: none; + background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://w3.org' viewBox='0 0 24 24' fill='none' stroke='%234a5568' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 0.4rem center; + background-size: 1em; +} + +.s-res-limit-select:focus { + border-color: #3182ce; +} + +/* Seitennummern Navigation */ +.s-res-page-navigation { + display: flex; + gap: 0.25rem; +} + +.s-res-page-btn { + background-color: #ffffff; + border: 1px solid #cbd5e1; + color: #4a5568; + padding: 0.35rem 0.75rem; + font-size: 0.9rem; + font-weight: 500; + border-radius: 4px; + cursor: pointer; + transition: all 0.2s ease; +} + +.s-res-page-btn:hover:not(:disabled) { + background-color: #f8f9fa; + border-color: #cbd5e1; + color: #2d3748; +} + +.s-res-page-btn-active { + background-color: #3182ce; + border-color: #3182ce; + color: #ffffff; + cursor: default; +} + +.s-res-page-btn:disabled { + background-color: #f1f5f9; + border-color: #e2e8f0; + color: #94a3b8; + cursor: not-allowed; +} + +/* --- RESPONSIVE DESIGN (MOBILGERÄTE) --- */ +@media (max-width: 768px) { + .s-res-layout-grid { + grid-template-columns: 1fr; /* Stapelt Seitenleiste und Inhalt untereinander */ + gap: 1.5rem; + margin: 1rem auto; + } + .s-res-pagination-footer { + flex-direction: column; + gap: 1rem; + align-items: flex-start; + } +} + diff --git a/index.php b/index.php index 2e76396..a333e59 100644 --- a/index.php +++ b/index.php @@ -23,6 +23,7 @@ require_once $abs_path . "/php/controller/index-controller.php"; + diff --git a/php/controller/search-results-controller.php b/php/controller/search-results-controller.php new file mode 100644 index 0000000..30b02a8 --- /dev/null +++ b/php/controller/search-results-controller.php @@ -0,0 +1,29 @@ +search($search); // TODO: Methode implementieren. + } catch (Exception $e){ + $_SESSION["message"] = "internal_error"; + } + $_SESSION["message"] = "new_search_results"; + // TODO: Liste mit Artikeln in der Suchreihenfolge übertragen. + // Weiterleitung zur Suchergebnisanzeige + header("location: ../../index.php?pfad=search-results"); + exit(); + + } +} + +?> \ No newline at end of file