Commit 70bcb9b6 authored by Andgel Brissaud's avatar Andgel Brissaud
Browse files

feat: add animations to diver list

parent 5a4fc805

public/css/drop-down.css

0 → 100644
+22 −0
Original line number Diff line number Diff line 
.drop-down {

    margin-left: 2.5em;

    margin-bottom: 1em;

    margin-top: 1em;

    animation-duration: 0.5s;

    animation-name: slidein;

  }



.drop-down-items{

  margin-bottom: 0.5em;

  column-span: all;

}

  

  @keyframes slidein {

    from {

      transform: translateX(-100px);

    }

  

    to {

      transform: translateX(0px);

     }

  }
 
 No newline at end of file

public/js/drop-down.js

0 → 100644
+18 −0
Original line number Diff line number Diff line 
let buttons = document.getElementsByClassName('diveDropdownButton');



console.log(buttons.length)



for(let i = 0; i < buttons.length; i++){

    button = buttons[i]

    button.addEventListener('click', (evt) => {

        toggleDropDownMenu(evt);

    });

}



function toggleDropDownMenu(evt){

    let button = evt.currentTarget

    let sessionCode = button.id.split('-')[1];

    console.log('dropdown'+sessionCode);

    let disclosure = document.getElementById('dropdown'+sessionCode);

    disclosure.classList.toggle('hidden');

}
 
 No newline at end of file

resources/views/components/drop-down.blade.php

+1 −1
Original line number Diff line number Diff line 
<tr id="{{$id}}" class="odd:bg-white even:bg-gray-50 border-b hidden">

    <td>

    <td colspan='5'>

       {{$slot}} 

    </td>

</tr>
 
 No newline at end of file

resources/views/dives.blade.php

+5 −23
Original line number Diff line number Diff line 
<x-layout>

    <link rel="stylesheet" href="/css/drop-down.css">

    <x-page-title>Inscription aux plongées</x-page-title>

    <div class="shadow-md max-w-full rounded-lg overflow-hidden border-2">

        <table class="text-sm text-left text-gray-500 w-full">
@@ -55,34 +56,15 @@ 
                    @php

                    $participants = $dive->getParticipants();

                    @endphp



                    <div class="drop-down">

                    @foreach($participants as $user)   

                        <p>{{$user->US_NAME}} {{$user->US_FIRST_NAME}}</p>

                        <p class = "drop-down-items">{{$user->US_NAME}} {{$user->US_FIRST_NAME}}</p>

                    @endforeach

                    </div>

                </x-drop-down>

            @endforeach

            </tbody>

        </table>

    </div>



    <script>

        let buttons = document.getElementsByClassName('diveDropdownButton');



        console.log(buttons.length)



        for(let i = 0; i < buttons.length; i++){

            button = buttons[i]

            button.addEventListener('click', (evt) => {

                toggleDropDownMenu(evt);

            });

        }



        function toggleDropDownMenu(evt){

            let button = evt.currentTarget

            let sessionCode = button.id.split('-')[1];

            console.log('dropdown'+sessionCode);

            let disclosure = document.getElementById('dropdown'+sessionCode);

            disclosure.classList.toggle('hidden');

        }

    </script>

    <script type="text/javascript" src="/js/drop-down.js"></script>

</x-layout>

server.php

+1 −1
Original line number Diff line number Diff line
@@ -18,4 +18,4 @@ 
    return false;

}



require_once __DIR__.'/index.php';
 
require_once __DIR__.'/public/index.php';