From 49cbd9aedb39be7c37e62ce200d0a60336bd1bd8 Mon Sep 17 00:00:00 2001
From: HeMa <MaximeEugene.Herbez@formation.orif.ch>
Date: Thu, 6 Jan 2022 13:19:50 +0100
Subject: [PATCH] Fixed design style

---
 orif/plafor/Views/acquisition_status/view.php |  2 +-
 orif/plafor/Views/apprentice/list.php         |  2 +-
 orif/plafor/Views/apprentice/view.php         | 12 ++---
 orif/plafor/Views/course_plan/list.php        | 14 ++---
 .../Views/operational_competence/view.php     | 53 +++++++++++++++++--
 orif/plafor/Views/user_course/view.php        |  4 +-
 public/css/MY_styles.css                      | 24 ++++++++-
 7 files changed, 89 insertions(+), 22 deletions(-)

diff --git a/orif/plafor/Views/acquisition_status/view.php b/orif/plafor/Views/acquisition_status/view.php
index 8977c1a8..c382f840 100644
--- a/orif/plafor/Views/acquisition_status/view.php
+++ b/orif/plafor/Views/acquisition_status/view.php
@@ -23,7 +23,7 @@
             <p class="bg-primary text-white"><?=lang('plafor_lang.field_linked_comments')?></p>
 		</div>
 		<?php if($_SESSION['user_access'] >= config('\User\Config\UserConfig')->access_lvl_trainer) { ?>
-		<a href="<?= base_url('plafor/apprentice/add_comment/'.$acquisition_status['id']); ?>" class="btn btn-primary"><?= lang('plafor_lang.title_comment_new'); ?></a>
+		<a style="margin-left: 15px" href="<?= base_url('plafor/apprentice/add_comment/'.$acquisition_status['id']); ?>" class="btn btn-primary"><?= lang('plafor_lang.title_comment_new'); ?></a>
 		<?php } ?>
         <div class="col-md-12">
             <table class="table table-hover">
diff --git a/orif/plafor/Views/apprentice/list.php b/orif/plafor/Views/apprentice/list.php
index 2ca24fa3..75447d48 100644
--- a/orif/plafor/Views/apprentice/list.php
+++ b/orif/plafor/Views/apprentice/list.php
@@ -16,7 +16,7 @@
             <div style="display:flex;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap: wrap">
                 <?php
                 echo form_open(base_url('plafor/apprentice/list_apprentice/'), ['method' => 'GET']);
-                echo form_dropdown('trainer_id', $trainers, strval($trainer_id), ['class' => 'form-control', 'style' => 'width:unset!important;display:unset!important;margin-left:-10px;']);
+                echo form_dropdown('trainer_id', $trainers, strval($trainer_id), ['class' => 'form-control', 'style' => 'width:unset!important;display:unset!important;']);
                 echo form_submit(null, lang('common_lang.btn_search'), ['class' => 'btn btn-primary', 'style' => 'vertical-align:unset!important;']); ?>
                 <?php
                 echo form_close();
diff --git a/orif/plafor/Views/apprentice/view.php b/orif/plafor/Views/apprentice/view.php
index 9bd15958..d3251b7a 100644
--- a/orif/plafor/Views/apprentice/view.php
+++ b/orif/plafor/Views/apprentice/view.php
@@ -76,9 +76,9 @@
             <table class="table table-hover table-borderless user-course-details-table">
                 <tbody>
                 <tr>
-                    <td class="user-course-details-begin-date"><?=$userCourseMax['date_begin']?></td>
-                    <td class="user-course-details-end-date"><?=$userCourseMax['date_end']?></td>
-                    <td class="user-course-details-status"><?=$user_course_status[$userCourseMax['fk_status']]['name']?></td>
+                    <td class="user-course-details-begin-date"><?=isset($userCourseMax)?$userCourseMax['date_begin']:null?></td>
+                    <td class="user-course-details-end-date"><?=isset($userCourseMax)?$userCourseMax['date_end']:null?></td>
+                    <td class="user-course-details-status"><?=isset($userCourseMax)?$user_course_status[$userCourseMax['fk_status']]['name']:null?></td>
 
                 </tr>
                 </tbody>
@@ -98,15 +98,15 @@
     <div class="row mt-2">
         <div class="col-md-12">
             <p class="bg-primary text-white"><?=lang('plafor_lang.title_course_plan_status')?></p>
-            <p class="font-weight-bold user-course-details-course-plan-name"><?= $course_plans[$userCourseMax['fk_course_plan']]['official_name'] ?></p>
-            <div id="detailsArray" apprentice_id="<?= $apprentice['id'] ?>" course_plan_id="<?=$userCourseMax['fk_course_plan']?>"></div>
+            <p class="font-weight-bold user-course-details-course-plan-name"><?= isset($userCourseMax)?$course_plans[$userCourseMax['fk_course_plan']]['official_name']:null ?></p>
+            <div id="detailsArray" apprentice_id="<?= $apprentice['id'] ?>" course_plan_id="<?=isset($userCourseMax)?$userCourseMax['fk_course_plan']:null?>"></div>
         </div>
     </div>
 </div>
 
 <script type="text/babel">
     $(document).ready(()=>{
-        $('#usercourseSelector').val(<?=$userCourseMax['id']?>);
+        $('#usercourseSelector').val(<?=isset($userCourseMax)?$userCourseMax['id']:null?>);
             displayDetails(null,<?=json_encode($userCourseMax)?>,'integrated',"<?=base_url("plafor/apprentice/getcourseplanprogress")?>"+'/',"<?=base_url('plafor/apprentice/view_user_course')?>");
             $('#usercourseSelector').change((event)=>{
                 let userCourses=<?= json_encode($user_courses)?>;
diff --git a/orif/plafor/Views/course_plan/list.php b/orif/plafor/Views/course_plan/list.php
index 2a9837fe..874e8673 100644
--- a/orif/plafor/Views/course_plan/list.php
+++ b/orif/plafor/Views/course_plan/list.php
@@ -16,17 +16,17 @@
         </div>
     </div>
     <div class="row" style="justify-content:space-between">
-        <div class="col-sm-3 text-left">
+        <div class="col-sm-3">
             <a href="<?= base_url('plafor/courseplan/save_course_plan'); ?>" class="btn btn-primary">
                 <?= lang('common_lang.btn_new_m'); ?>
             </a>
         </div>
-            <div style="align-self:flex-end;">
-                <?=form_checkbox('toggle_deleted', '', $with_archived, [
-                    'id' => 'toggle_deleted', 'class' => 'form-check-input'
-                ]);?>
-                <?=form_label(lang('common_lang.btn_show_disabled'), 'toggle_deleted', ['class' => 'form-check-label']);?>
-            </div>
+        <div style="margin-left: 20px; width:100%; padding: 0 15px 0 15px">
+            <?=form_checkbox('toggle_deleted', '', $with_archived, [
+                'id' => 'toggle_deleted', 'class' => 'form-check-input'
+            ]);?>
+            <?=form_label(lang('common_lang.btn_show_disabled'), 'toggle_deleted', ['class' => 'form-check-label']);?>
+        </div>
     </div>
     <div class="row mt-2">
      <div class="col-sm-3 offset-6">
diff --git a/orif/plafor/Views/operational_competence/view.php b/orif/plafor/Views/operational_competence/view.php
index 88bcb46e..59f997c4 100644
--- a/orif/plafor/Views/operational_competence/view.php
+++ b/orif/plafor/Views/operational_competence/view.php
@@ -65,7 +65,7 @@
             <?php if (service('session')->get('user_access')>=config('\User\Config\UserConfig')->access_lvl_admin): ?>
             <a href="<?=base_url('plafor/courseplan/save_objective/0/'.$operational_competence['id']) ?>" class="btn btn-primary"><?= lang('common_lang.btn_new_m')?></a>
             <?php endif;?>
-            <table class="table table-hover">
+            <table class="responsiveTable table table-hover">
             <thead>
                 <tr>
                     <th><span class="font-weight-bold"><?=lang('plafor_lang.field_objectives_symbols')?></span></th>
@@ -81,8 +81,15 @@
             if (isset($objectives)):
             foreach ($objectives as $objective){
                 ?><tr>
-                    <td><a class="font-weight-bold" href="<?= base_url('plafor/courseplan/view_objective/'.$objective['id'])?>"><?=$objective['symbol']?></a></td>
-                    <td><a href="<?= base_url('plafor/courseplan/view_objective/'.$objective['id'])?>"><?=$objective['taxonomy']?></a></td>
+                    <td>
+                        <a class="font-weight-bold" href="<?= base_url('plafor/courseplan/view_objective/'.$objective['id'])?>"><?=$objective['symbol']?></a>
+
+                    </td>
+                    <td>
+                        <span class="font-weight-bold descTitle" style="display: none"><?=lang('plafor_lang.field_taxonomy')?></span>
+                        <a href="<?= base_url('plafor/courseplan/view_objective/'.$objective['id'])?>"><?=$objective['taxonomy']?></a>
+
+                    </td>
                     <td><a href="<?= base_url('plafor/courseplan/view_objective/'.$objective['id'])?>"><?=$objective['name']?></a></td>
                 <?php if(service('session')->get('user_access')>=config('\User\Config\UserConfig')->access_lvl_admin):?>
                     <td><a href="<?= base_url('plafor/courseplan/save_objective/'.$objective['id'].'/'.$operational_competence['id']); ?>"><?= lang('common_lang.btn_edit')?></a></td>
@@ -95,4 +102,42 @@
             </table>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
+<script type="text/javascript" defer>
+    window.addEventListener('resize',()=>{
+
+        if (window.innerWidth<476){
+
+            if (document.querySelectorAll('.responsiveTable td:nth-child(2) .descTitle').item(0)!==null?window.getComputedStyle(document.querySelectorAll('.responsiveTable td:nth-child(2) .descTitle').item(0)).display!=="none":false)
+            document.querySelectorAll('.responsiveTable td:nth-child(2)').forEach((element)=>{
+                let tax=document.createElement('span');
+                tax.innerHTML=`<span class='taxonomyResponsive'>${element.innerHTML}<span>`
+
+                element.previousElementSibling.appendChild(tax);
+                element.remove();
+
+            })
+        }
+        else{
+            document.querySelectorAll('.responsiveTable td:nth-child(1) .taxonomyResponsive').forEach((element)=>{
+                let td=document.createElement('td');
+                td.innerHTML=element.innerHTML;
+                if (element.parentElement.parentElement.nextElementSibling.querySelector('.descTitle')==null)
+                element.parentElement.parentElement.after(td);
+                element.remove();
+            })
+        }
+
+    });
+    if (window.getComputedStyle(document.querySelectorAll('.responsiveTable td:nth-child(2) .descTitle').item(0)).display!=="none")
+    document.querySelectorAll('.responsiveTable td:nth-child(2)').forEach((element)=>{
+        let tax=document.createElement('span');
+        tax.innerHTML=`<span class='taxonomyResponsive'>${element.innerHTML}<span>`
+
+        element.previousElementSibling.appendChild(tax);
+        element.remove();
+
+    })
+
+
+</script>
\ No newline at end of file
diff --git a/orif/plafor/Views/user_course/view.php b/orif/plafor/Views/user_course/view.php
index df8a029d..39900c5d 100644
--- a/orif/plafor/Views/user_course/view.php
+++ b/orif/plafor/Views/user_course/view.php
@@ -35,8 +35,8 @@
         || ($_SESSION['user_access'] == config('\User\Config\UserConfig')->access_lvl_trainer && in_array($_SESSION['user_id'], $trainers_id))
         || ($_SESSION['user_access'] == config('\User\Config\UserConfig')->access_level_apprentice && $user_course['fk_user'] == $apprentice['id'])): ?>
     <div class="row">
-        <p class="font-weight-bold"><?= lang('plafor_lang.field_user_course_objectives_status') ?></p>
-        <div class="col-md-12">
+        <p style="margin-left: 15px" class="font-weight-bold"><?= lang('plafor_lang.field_user_course_objectives_status') ?></p>
+        <div class="col-md-12" >
             <table class="table table-hover" id="objectiveListContent">
                 <thead>
                     <tr>
diff --git a/public/css/MY_styles.css b/public/css/MY_styles.css
index 2c2e5114..c56ac114 100644
--- a/public/css/MY_styles.css
+++ b/public/css/MY_styles.css
@@ -154,4 +154,26 @@ p.bg-primary {
         display: none;
     }
 
-}
\ No newline at end of file
+}
+@media all and (max-width: 475px){
+
+    .responsiveTable th{
+        display: none;
+    }
+    .responsiveTable td .descTitle{
+        display: block!important;
+        font-size: 0.8rem;
+        color: #665d40;
+    }
+    .responsiveTable tr{
+        display: flex;
+    }
+    .responsiveTable td{
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        padding-bottom: 10px!important;
+    }
+    .responsiveTable td:nth-child(2){
+    }
+}