added mobile view for preorder

Layout/default/Preordercampaign/Index.php

@@ -3,8 +3,108 @@
   $pagination_baseurl_params = ["filter" => $filter];
   $pagination_entity_name = "Vorbestellkampagnen";
 ?>
+
 <?php include(realpath(dirname(__FILE__)."/../../$mfLayoutPackage")."/header.php"); ?>
 
+<style>
+    .preorder-campaign-import {
+        display: flex;
+        gap: 8px;
+        justify-content: flex-start;
+    }
+
+    .preorder-campaign-header, .preorder-campaign-header-buttons {
+        display: flex;
+        justify-content: space-between;
+    }
+
+
+    @media (max-width: 576px) {
+        .preorder-campaign-import, .preorder-campaign-header {
+            display: grid;
+            grid-template-columns: 1fr;
+            grid-gap: 8px;
+        }
+
+        .preorder-campaign-table-wrapper {
+            overflow-x: auto;
+        }
+
+        .preorder-campaign-header h4 {
+            text-align: center;
+        }
+
+        .preorder-campaign-header-buttons {
+            display:grid;
+            grid-template-columns: 1fr 1fr;
+            grid-gap: 8px;
+        }
+
+        .preorder-campaign-table-actions {
+            display: grid;
+            grid-gap: 4px;
+            grid-template-columns: auto auto auto;
+        }
+
+        .preorder-campaign-table-actions a {
+            text-align: center;
+            font-size: 24px;
+        }
+
+        .preorder-campaign-table-actions a[title="Vorbestellkampagne Löschen"] {
+            grid-column: 3;
+        }
+
+    }
+</style>
+
+<script>
+    $(document).ready(function () {
+        if (window.matchMedia('(min-width: 576px)').matches) {
+            return;
+        }
+
+        // in ul.pagination
+        // if .page-item.disabled.text-secondary exists
+        // only keep the first 2 .page-item, the last 2 .page-item and the .page-item.disabled.text-secondary and the one before and the one after that
+
+        const pagination = $("ul.pagination");
+        const disabled = pagination.find(".page-item.disabled.points");
+
+        if (disabled.length) {
+            const first = pagination.find(".page-item").first();
+            const firstNext = first.next();
+            const last = pagination.find(".page-item").last();
+            const lastNext = last.prev();
+            const prev = disabled.prev();
+            const next = disabled.next();
+            const notToDelete = [first, firstNext, last, lastNext, prev, next, disabled];
+
+            // loop through pagination.find(".page-item") and remove all but the first, last, prev, next, firstNext, lastNext
+
+            pagination.find(".page-item").each(function (index, item) {
+                // if (!notToDelete.includes($(item))) {
+                //     $(item).remove();
+                // } fix this becaues of we need [0] of notToDelete to compare
+                let check = false;
+                notToDelete.forEach(function (n) {
+                    if (n[0] === item) {
+                        check = true;
+                    }
+                });
+
+                if (!check) {
+                    $(item).remove();
+                }
+
+            });
+
+
+        }
+    });
+</script>
+
+
     <!-- start page title -->
     <div class="row">
       <div class="col-12">
@@ -31,7 +131,7 @@
             <form method="get" action="<?=self::getUrl("Preordercampaign")?>">
               <div class="row">
                 
-                <div class="col-2">
+                <div class="col-sm-12 col-md-2">
                   <label class="form-label" for="filter_network_id">Netzgebiet</label>
                   <select name="filter[network_id]" id="filter_network_id" class="form-control">
                     <option></option>
@@ -42,7 +142,7 @@
                 </div>
                 
                 <?php if($me->is("Admin")): ?>
-                <div class="col-2">
+                <div class="col-sm-12 col-md-2">
                   <label class="form-label" for="filter_netowner">Netzbesitzer</label>
                   <select name="filter[netowner]" id="filter_netowner" class="form-control">
                     <option></option>
@@ -53,19 +153,19 @@
                 </div>
                 <?php endif; ?>
                 
-                <div class="col-1">
+                <div class="col-sm-12 col-md-1">
                   <label class="form-label" for="filter_name">Name</label>
                   <input type="text" class="form-control" name="filter[name]" id="filter_name" value="<?=$filter['name'] ?? ""?>" />
                 </div>
                 
-                <div class="col-1">
+                <div class="col-sm-12 col-md-1">
                   <label class="form-label" for="filter_area">Gebiet</label>
                   <input type="text" class="form-control" name="filter[area]" id="filter_area" value="<?=$filter['area'] ?? ""?>" />
                 </div>
                 
               </div>
               <div class="row mt-2">
-                <div class="col">
+                <div class="col-sm-12 col-md-2">
                   <button type="submit" class="btn btn-primary">Filter anwenden</button>
                   <a class="btn btn-secondary" href="<?=self::getUrl("Preordercampaign")?>">Filter zurücksetzen</a>
                 </div>
@@ -78,7 +178,7 @@
 
           <?php if($me->address_id == 1 || $me->address_id == 4807): // xinon, rml ?>
           <div class="card">
-              <div class="card-body">
+              <div class="card-body preorder-campaign-import">
                   <a class="btn btn-purple" href="<?=self::getUrl("PreorderDiscount", "import")?>"><i class="fas fa-tags fa-fw"></i> Gutscheincodes importieren</a>
                   <a class="btn btn-purple ml-1" href="<?=self::getUrl("Preorder", "statusupdateimport")?>"><i class="fas fa-retweet fa-fw"></i> Statusupdates importieren</a>
               </div>
@@ -87,14 +187,13 @@
 
         <div class="card">
           <div class="card-body mb-3">
-            <div class="float-left">
-              <h4 class="header-title">Liste aller Vorbestellkampagnen</h4>
-            </div>
-            <div class="float-right">
-              <?php if($me->is("Admin")): ?>
-                <a class="btn btn-primary mb-2" href="<?=self::getUrl("Preordercampaign", "add")?>"><i class="fas fa-plus"></i> Neue Vorbestellkampagne anlegen</a>
-              <?php endif; ?>
-            </div>
+              <div class="preorder-campaign-header">
+                  <h4 class="header-title">Liste aller Vorbestellkampagnen</h4>
+                  <?php if ($me->is("Admin")): ?>
+                      <a class="btn btn-primary mb-2" href="<?= self::getUrl("Preordercampaign", "add") ?>"><i class="fas fa-plus"></i> Neue
+                          Vorbestellkampagne anlegen</a>
+                  <?php endif; ?>
+              </div>
             
 <div class="row">
   <div class="col">
@@ -102,8 +201,9 @@
 <?php include(realpath(dirname(__FILE__)."/../")."/tpl/pagination-summary.php"); ?>
   </div>
 </div>
-            
-            <table class="table table-striped table-hover">
+              <div class="preorder-campaign-table-wrapper">
+
+              <table class="table table-striped table-hover">
               <tr>
                 <th></th>
                 <th></th>
@@ -144,6 +244,7 @@
                 <td><?=date('d.m.Y',$camp->from)?></td>
                 <td><?=date('d.m.Y',$camp->to)?></td>
                 <td style="text-align: left; letter-spacing: 4px; font-size: 1.1em;">
+                    <div class="preorder-campaign-table-actions">
                   <a href="<?=self::getUrl("Preordercampaign", "downloadAddonServices", ["preordercampaign_id" => $camp->id])?>" title="Bestellte Zusatzdienste exportieren"><i class="far fa-sunset"></i></a>
                   <a href="<?=self::getUrl("Preordernotification", "Index", ["filter" => ["preordercampaign_id" => $camp->id]])?>" title="Email Aussendungen"><i class="far fa-envelope"></i></a>
                   <?php if($me->is("Admin")):  ?>
@@ -151,10 +252,12 @@
                     <a href="<?=self::getUrl("Preordercampaign", "admin", ["id" => $camp->id])?>"><i class="far fa-a"  title="Adminfunktionen"></i></a>
                     <a href="<?=self::getUrl("Preordercampaign", "delete", ["id" => $camp->id])?>" class="text-danger" onclick="if(!confirm('Vorbestellkampagne wirklich löschen?')) return false;" title="Vorbestellkampagne Löschen"><i class="fas fa-trash"></i></a>
                   <?php endif; ?>
+                    </div>
                 </td>
               </tr>
               <?php endforeach; ?>
             </table>
+              </div>
             
 <?php include(realpath(dirname(__FILE__)."/../")."/tpl/pagination-summary.php"); ?>            
 <?php include(realpath(dirname(__FILE__)."/../")."/tpl/pagination.php"); ?>