add option for reviewers to filter for entries awaiting review

static/index.css

@@ -1,5 +1,6 @@
 :root {
   --header-footer-color: AliceBlue;
+  --filter-bar-color: Aquamarine;
 }
 
 .header, .footer, .header-banner {
@@ -17,7 +18,7 @@
     background: orange;
 }
 
-.header {
+.header{
     position: sticky;
     top: 0;
     left:0;
@@ -67,6 +68,10 @@ main {
     font-style: italic;
 }
 
+.bold-text {
+    font-weight: bold;
+}
+
 .login-form {
     display: grid;
     grid-gap: 5px;
@@ -219,7 +224,7 @@ main {
     border-width: 2px;
 }
 
-.joboffer-index-entry-content.AwaitingReview, .joboffer-index-entry-content.UnPublished {
+.joboffer-index-entry.AwaitingReview, .joboffer-index-entry.UnPublished {
     background: pink;
 }
 
@@ -293,6 +298,33 @@ input.modal-open-check:not(:checked) + .modal-confirm-box > .modal-submit-button
     display: none;
 }
 
-:checked.hideable-toggle ~ .hideable-target {
+
+.joboffer-filters {
+    display: flex;
+    align-items: center;
+    position: sticky;
+    background: var(--filter-bar-color);
+    top: 120px;
+    box-sizing: border-box;
+    left:0;
+    margin-bottom: 5px;
+    padding: 5px;
+    width: 100%;
+    box-shadow: 0px 0px 10px 0px gray;
+}
+
+.joboffer-filters > .filter-label[for="awaiting-review"] {
+    border: solid;
+    padding: 5px;
+    border-color: gray;
+    border-radius: 20px;
+    border-width: 2px;
+}
+
+#awaiting-review:checked ~ .joboffer-filters > .filter-label[for="awaiting-review"] {
+    background: cyan;
+}
+
+#awaiting-review:checked ~ .joboffer-index > .joboffer-index-entry:not(.AwaitingReview) {
     display: none;
 }

templates/job_offer/overview-entry.hb

@@ -1,10 +1,10 @@
-<section class="joboffer-index-entry">
+<section class="joboffer-index-entry {{#if user}}{{job_offer.status.review_status}}{{/if}}">
     {{!
         the job offers should be filtered in the rust code,
         so that either there is a user or the offers are limited to published ones
     }}
 
-    <div class="joboffer-index-entry-content {{#if user}}{{job_offer.status}}{{/if}}">
+    <div class="joboffer-index-entry-content">
         <h2 class="joboffer-title centered centered-text">{{job_offer.title}}</h2>
         <div class="joboffer-offering-party centered centered-text italic-text">
             {{job_offer.offering_party}}

templates/job_offer/overview.hb

@@ -1,4 +1,8 @@
 {{#> base}}
+    {{#if user}}
+        <input id="awaiting-review" class="hidden" type="checkbox">
+        <div class="joboffer-filters .shadow"><span class="bold-text">Filter:</span> <label class="filter-label" for="awaiting-review">Awaiting Review</label></div>
+    {{/if}}
     <div class="joboffer-index">
         {{#each job_offers as |job_offer|}}
             {{> job_offer/overview-entry job_offer=job_offer base=../base user=../user}}