Quicktips werden jetzt komplett vom Server abgefragt und korrekt angezeigt

resources/assets/js/scriptResultPage.js

@@ -564,7 +564,8 @@ function getQuicktips (search, locale, sprueche, loadedHandler) {
             }
           }).toArray(),
           url: $(this).children('url').text(),
-          gefVon: $(this).children('gefVon').text()
+          gefVon: $(this).children('gefVon').text(),
+          priority: $(this).children('priority').text()
         };
       }).toArray();
       loadedHandler(quicktips);
@@ -574,28 +575,71 @@ function getQuicktips (search, locale, sprueche, loadedHandler) {
   }, 'xml');
 }
 
+/**
+ * <div id="quicktips">
+ *   <div class="quicktip" type="TYPE">
+ *     <details>
+ *       <summary>
+ *         <h1><a href="URL">TITLE
+ *         <p>SUMMARY
+ *       <div class="quicktip-detail">
+ *         <h1><a href="DETAILURL">DETAILTITLE
+ *         <p>DETAILSUMMARY
+ *     <span>GEFVON
+ * </...>
+ *             
+ * 
+ * @param {*} quicktips 
+ */
 function createQuicktips (quicktips) {
+  console.log(quicktips);
   var quicktipsDiv = $('#quicktips');
-  quicktips.forEach(function (quicktip) {
-    var detailsElem;
+  quicktips.sort(function (a, b) {
+    return b.priority - a.priority;
+  }).forEach(function (quicktip) {
+    var mainElem;
     if (quicktip.details.length > 0) {
-      detailsElem = $('<details><summary><h1>' + quicktip.title + '</h1></summary></details>');
+      mainElem = $('<details>');
+      var summaryElem = $('<summary class="quicktip-summary">');
+      var headlineElem = $('<h1>');
+      if (quicktip.url.length > 0) {
+        headlineElem.append('<a href=' + quicktip.url + '>' + quicktip.title + '</a>');
+      } else {
+        headlineElem.text(quicktip.title);
+      }
+      summaryElem
+        .append(headlineElem)
+        .append('<p>' + quicktip.summary + '</p>');
+      mainElem.append(summaryElem);
       quicktip.details.forEach(function (detail) {
-        var detailDiv = $('<div>');
-        detailDiv
-          .append('<h2>' + detail.title + '</h2>')
+        var detailElem = $('<div class="quicktip-detail">');
+        var detailHeadlineElem = $('<h2>');
+        if (detail.url.length > 0) {
+          detailHeadlineElem.append('<a href=' + detail.url + '>' + detail.title + '</a>');
+        } else {
+          detailHeadlineElem.text(detail.title);
+        }
+        detailElem
+          .append(detailHeadlineElem)
           .append('<p>' + detail.text + '</p>');
-        // .append('<a href=' + detail.url + '>TODO</a>')
-        detailsElem.append(detailDiv);
+          mainElem.append(detailElem);
       });
     } else {
-      detailsElem = $('<h1>' + quicktip.title + '</h1>');
+      mainElem = $('<div class="quicktip-summary">');
+      var headlineElem = $('<h1>');
+      if (quicktip.url.length > 0) {
+        headlineElem.append('<a href=' + quicktip.url + '>' + quicktip.title + '</a>');
+      } else {
+        headlineElem.text(quicktip.title);
+      }
+      mainElem
+        .append(headlineElem)
+        .append('<p>' + quicktip.summary + '</p>');
     }
-    var quicktipDiv = $('<div>');
+    var quicktipDiv = $('<div class="quicktip" type="' + quicktip.type + '">');
     quicktipDiv
-      .append(detailsElem)
-      // .append('<a href=' + quicktip.url + '>TODO</a>')
-      .append('<span>' + quicktip.gefVon + '</span>');
+      .append(mainElem)
+      .append('<span class="gefVon">' + quicktip.gefVon + '</span>');
     quicktipsDiv.append(quicktipDiv);
   });
 }

resources/assets/less/metager/result-page.less

@@ -130,7 +130,7 @@ footer {
     }
 }
 
-.fa.fa-twitter{
+.fa.fa-twitter {
     color: #6faedc
 }
 
@@ -425,7 +425,10 @@ a {
             li:not(.option-title):hover {
                 background-color: #e0e0e0;
             }
-            a, a:hover, a:focus, a:visited {
+            a,
+            a:hover,
+            a:focus,
+            a:visited {
                 color: black;
                 display: block;
             }
@@ -620,4 +623,89 @@ a {
         padding-left: 0;
         padding-right: 0;
     }
+}
+
+
+/*
+ * <div id="quicktips">
+ *   <div class="quicktip" type="TYPE">
+ *     <details>
+ *       <summary>
+ *         <h1><a href="URL">TITLE
+ *         <p>SUMMARY
+ *       <div class="quicktip-detail">
+ *         <h1><a href="DETAILURL">DETAILTITLE
+ *         <p>DETAILSUMMARY
+ *     <span>GEFVON
+ * </...>
+ */
+
+#quicktips {
+    display: flex;
+    flex-direction: column;
+    // border: 2px solid #ccc;
+    .quicktip {
+        margin: 10px 0px;
+        padding-left: 10px;
+        border-left: 3px solid #fb0;
+        .quicktip-summary {
+            h1 {
+                font-size: 16px;
+                font-weight: bold;
+            }
+            p {}
+        }
+        .quicktip-detail {
+            border-top: 1px solid #ddd;
+            border-bottom: 1px solid #ddd;
+            h2 {
+                margin: 10px 0px;
+                font-size: 14px;
+                font-weight: bold;
+            }
+            p {
+                display: none;
+                font-size: 12px;
+            }
+        }
+        .gefVon {
+            font-size: 14px;
+        }
+        &[type=spruch] {
+            border-left: 3px solid #070;
+            p {
+                color: #070;
+                .author {
+                    color: #404040;
+                    font-style: italic;
+                }
+            }
+        }
+        &[type=spendenaufruf] {
+            border-left: #ddd;
+            color: #ff8000;
+            .quicktip-summary {
+                display: flex;
+                justify-content: space-between;
+                h1 {
+                    margin-right: 15px;
+                }
+                p {
+                    margin: 5px;
+                    .spendenaufruf-btn {
+                        color: white;
+                        background-color: #ff8000;
+                        font-size: 16px;
+                    }
+                }
+            }
+        }
+        &[type=dictCC] {
+            .quicktip-summary {
+                p {
+                    font-weight: bold;
+                }
+            }
+        }
+    }
 }
\ No newline at end of file

resources/assets/less/metager/static-pages.less

@@ -425,24 +425,6 @@ textarea#message {
     margin-bottom: 5px;
 }
 
-.quicktip {
-    margin-bottom: 15px;
-    padding: 10px;
-    line-height: 1.2 !important;
-    font-family: Georgia, "Times New Roman", Palatino, Times, serif;
-    color: @quicktip-color;
-    border-left: 3px solid @quicktip-border-left-color;
-    font-size: 14px;
-    h1 {
-        font-size: 22px;
-        margin-top: 0px;
-    }
-    &.aufruf {
-        color: @quicktip-aufruf-color;
-        border-left: 3px solid @quicktip-aufruf-border-left-color;
-    }
-}
-
 .wikiqtextract {
     font-family: Georgia, "Times New Roman", Palatino, Times, serif;
 }