Dev

app/Livewire/OnlineCalendar.php

@@ -46,35 +46,36 @@ public function mount()
             'year(start_date) year, month(start_date) month, monthname(start_date) monthname, count(*) data'
         )
             ->where($this->whereClause)
-//            ->where('start_date', '>=', Carbon::now())
             ->where('start_date', '>=', \Carbon\Carbon::now()->firstOfMonth())
             ->groupBy('year', 'month','monthname')
             ->orderBy('year', 'asc')
             ->orderBy('month', 'asc')
             ->get();
-
-        $this->months = [];
-
-        foreach ($byMonths as $result) {
-            $this->months[$result->month.'/'.$result->year] =
-                $result->monthname.' '.$result->year;
-        }
-
-        //Go back to start of array to get the first item
-        reset($this->months);
-        $parts = explode('/', key($this->months));
-        if ($parts[0] !== $this->selectedMonth) {
-            $this->selectedMonth = $parts[0];
+
+        // Format months as objects
+        $this->months = $byMonths->map(function ($result) {
+            return [
+                'id' => $result->month.'/'.$result->year,
+                'name' => $result->monthname.' '.$result->year
+            ];
+        })->toArray();
+
+        // Update logic for accessing first item
+        if (!empty($this->months)) {
+            $firstMonthId = $this->months[0]['id'];
+            $parts = explode('/', $firstMonthId);
+            if ($parts[0] !== $this->selectedMonth) {
+                $this->selectedMonth = $parts[0];
+            }
+            $this->selectedDate = $this->selectedMonth.'/'.$this->selectedYear;
         }
-
-        $this->selectedDate = $this->selectedMonth.'/'.$this->selectedYear;
     }
 
     public function render()
     {
         $parts = explode('/', $this->selectedDate);
         $this->selectedMonth = $parts[0];
-        $this->selectedYear = $parts[1];
+        $this->selectedYear = $parts[1] ?? null;
 
         $this->events = Event::where($this->whereClause)
             ->whereMonth('start_date', $this->selectedMonth)
@@ -107,7 +108,21 @@ public function render()
         $languages = $this->events
             ->groupBy('language')
             ->keys()
-            ->all();
+            ->filter(function ($language) {
+                return !empty($language);
+            })
+            ->map(function ($language) {
+                return [
+                    'id' => $language,
+                    'name' => __("base.languages.{$language}")
+                ];
+            })
+            ->values()
+            ->prepend([
+                'id' => '',
+                'name' => 'All Languages'
+            ])
+            ->toArray();
 
         return view('livewire.online-calendar', [
             'countries' => $countries,

app/Livewire/OnlineEventCard.php

@@ -17,12 +17,14 @@ class OnlineEventCard extends Component
 
     public $baseLanguage;
 
-    public function mount($event, $countryName)
+    public $loop;
+
+    public function mount($event, $countryName, $loop)
     {
         $this->event = $event;
         $this->countryName = $countryName;
         $this->baseLanguage = App::getLocale();
-
+        $this->loop = $loop;
     }
 
     public function render()

public/build/manifest.json

@@ -1,16 +1,16 @@
 {
   "resources/assets/sass/app.scss": {
-    "file": "assets/app-BVc3L7lm.css",
+    "file": "assets/app-D4lI0bhX.css",
     "src": "resources/assets/sass/app.scss",
     "isEntry": true
   },
   "resources/css/app.css": {
-    "file": "assets/app-CZMpQV4H.css",
+    "file": "assets/app-DMiI0jLB.css",
     "src": "resources/css/app.css",
     "isEntry": true
   },
   "resources/js/app.js": {
-    "file": "assets/app-BnisJ9m_.js",
+    "file": "assets/app-DtsPD-UJ.js",
     "name": "app",
     "src": "resources/js/app.js",
     "isEntry": true,

resources/assets/sass/components/forms.scss

@@ -225,6 +225,10 @@
   margin-right: 10px;
 }
 
+.dropdown-datepicker .multiselect__tags {
+  padding-left: 42px !important;
+}
+
 .codeweek-search-text input{
   width:100%;
   border-radius: 29px;

resources/js/app.js

@@ -22,7 +22,7 @@ import SearchPageComponent from "./components/SearchPageComponent.vue";
 import MatchMakingToolForm from "./components/matchmaking/MatchMakingToolForm.vue";
 import ToolCard from "./components/matchmaking/ToolCard.vue";
 import ToolDetailCard from "./components/matchmaking/ToolDetailCard.vue";
-
+import SelectField from "./components/form-fields/SelectField.vue";
 // import { createI18n } from 'vue-i18n';
 // import Locale from './vue-i18n-locales.generated';
 import AvatarForm from "./components/AvatarForm.vue";
@@ -64,4 +64,5 @@ app.component('ToolCard', ToolCard);
 app.component('ToolDetailCard', ToolDetailCard);
 app.component('EventCard', EventCard);
 app.component('EventDetail', EventDetail);
+app.component('SelectField', SelectField);
 app.mount("#app");

resources/js/components/CountrySelect.vue

@@ -1,13 +1,19 @@
 <template>
-  <div>
-
-    <select v-model="selected_country" class="codeweek-input-select" id="id_country" name="country_iso" @change="newCountry()">
+  <div class="relative">
+    <select v-model="selected_country" id="id_country" name="country_iso" @change="newCountry()"
+            class="border-2 border-solid border-dark-blue-200 w-full rounded-full h-12 px-4 appearance-none"
+    >
       <option value=""> All countries</option>
       <option disabled value="---">-&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;</option>
       <option v-for="country in countries" :value="country.iso">
         {{ country.name }} ({{ country.total }})
       </option>
     </select>
+    <div
+      class="cursor-pointer absolute top-1/2 right-4 -translate-y-1/2"
+    >
+      <img src="/images/select-arrow.svg" />
+    </div>
   </div>
 </template>
 

resources/js/components/ModerateEvent.vue

@@ -2,11 +2,13 @@
   <div class="moderate-event">
     <!-- HELLO !!! -->
 
-    <div class="actions" v-if="refresh">
-      <strong>Moderation:</strong>
-      <button @click="approve" class="codeweek-action-button green">Approve</button>
-      <button @click="toggleModal" class="codeweek-action-button">Reject</button>
-      <button @click="toggleDeleteModal" class="codeweek-action-button red">Delete</button>
+    <div class="px-6 flex items-center w-full gap-3" v-if="refresh">
+      <p class="text-default text-slate-500 flex items-center font-semibold p-0">Moderation:</p>
+      <div class="flex justify-between flex-1 items-center">
+        <button @click="approve" class="font-normal w-fit px-3 py-1 bg-dark-blue text-white rounded-full flex items-center">Approve</button>
+        <button @click="toggleModal" class="font-normal w-fit px-3 py-1 bg-primary text-white rounded-full flex items-center">Reject</button>
+        <button @click="toggleDeleteModal" class="font-normal w-fit px-3 py-1 bg-dark-orange text-white rounded-full flex items-center">Delete</button>
+      </div>
     </div>
 
     <div class="h-8 w-full grid grid-cols-3 gap-4 items-center" v-if="!refresh">

resources/views/badges/leaderboard.blade.php

@@ -1,121 +1,86 @@
-@extends('layout.base')
+@extends('layout.new_base')
 
 <x-tailwind></x-tailwind>
 
-@section('content')
-
-    <section id="codeweek-profile-page" class="codeweek-page">
-
+@php
+    $list = [
+        (object) ['label' => 'Badges Leaderboard', 'href' => ''],
+    ];
+@endphp
 
-        <!-- This example requires Tailwind CSS v2.0+ -->
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-
-            <div class="flex">
+@section('layout.breadcrumb')
+    @include('layout.breadcrumb', ['list' => $list])
+@endsection
 
+@section('content')
 
-                <div>
-                    <h1 class="mr-2">Badges Leaderboard for </h1>
-                </div>
-                <div>
-                    <form style="border:0px" id="faceted-search-events" method="get" action="/badges/leaderboard"
-                          enctype="multipart/form-data">
-                        <select id="year" name="year" onchange="this.form.submit()" class="codeweek-input-select">
-                            @foreach($years as $year_label)
-                                <option value="{{$year_label}}" {{ ($year_label == $year)?'selected':'' }} >
-                                    {{$year_label}}
-                                </option>
-                            @endforeach
-                        </select>
-                    </form>
+    <section id="codeweek-privacy-page" class="font-['Blinker'] overflow-hidden">
+        <section class="relative flex overflow-hidden">
+            <div class="flex relative transition-all w-full bg-blue-gradient py-10 tablet:py-28">
+                <div class="w-full overflow-hidden flex flex-col md:flex-row justify-end md:items-center flex-shrink-0">
+                    <div class="codeweek-container-lg flex items-center gap-6">
+                        <h2 class="text-white font-normal text-3xl tablet:font-medium tablet:text-5xl font-['Montserrat']">
+                            Badges Leaderboard for
+                        </h2>
+                    </div>
                 </div>
             </div>
-
-
-            <!-- We've used 3xl here, but feel free to try other max-widths based on your needs -->
-            <div class="max-w-6xl mx-auto">
-                <div class="bg-blue-100 overflow-hidden rounded-lg">
-
-                    <!-- This example requires Tailwind CSS v2.0+ -->
-                    <div class="flex flex-col">
-                        <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
-                            <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
-                                <div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
-                                    <table class="min-w-full divide-y divide-gray-200">
-                                        <thead class="bg-gray-50">
-                                        <tr>
-                                            <th scope="col"
-                                                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                                                Rank
-                                            </th>
-                                            <th scope="col"
-                                                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                                                Name
-                                            </th>
-                                            <th scope="col"
-                                                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                                                Points
-                                            </th>
-
-                                        </tr>
-                                        </thead>
-                                        <tbody>
-                                        <!-- Odd row -->
-                                        @foreach($users as $user)
-                                            @if($loop->odd)
-                                                <tr class="bg-gray-100">
-                                            @else
-                                                <tr class="bg-blue-100">
-                                                    @endif
-                                                    <td class="px-4 py-2 whitespace-nowrap text-sm font-medium text-gray-900">{{ $rank++}}</td>
-                                                    <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500"><a
-                                                                href="/badges/user/{{$user->id}}/{{$year}}">{{$user->fullName}}</a>
-                                                    </td>
-                                                    <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">{{$user->getPoints($year)}}</td>
-                                                </tr>
-
-                                                @endforeach
-                                        </tbody>
-                                    </table>
-                                </div>
-                                <div class="w-5/6">
-                                    {{$users->links()}}
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-
-                    {{--        <div class="px-4 py-5 sm:p-6">
-
-
-
-                                <div class="header">
-
-                                    <h1>Scoreboard {{$year}}</h1>
-
-
-
-                                    <ul>
-                                        @foreach($users as $user)
-
-                                            <li>{{ $rank++}}: <a href="/badges/user/{{$user->id}}/{{$year}}">{{$user->fullName}}</a>
-                                                - {{$user->getPoints($year)}}</li>
-                                        @endforeach
-                                    </ul>
-
-
-                                </div>
-
-
-
-
-                            </div>--}}
-
+        </section>
+
+        <section class="relative z-10 py-10 md:py-20 codeweek-container-lg">
+            <form class="relative w-40" id="faceted-search-events" method="get" action="/badges/leaderboard"
+                  enctype="multipart/form-data">
+                <select id="year" name="year" onchange="this.form.submit()" class="border-2 border-solid border-dark-blue-200 w-full rounded-full h-12 px-4 appearance-none">
+                    @foreach($years as $year_label)
+                        <option value="{{$year_label}}" {{ ($year_label == $year)?'selected':'' }} >
+                            {{$year_label}}
+                        </option>
+                    @endforeach
+                </select>
+                <div
+                    class="cursor-pointer absolute top-1/2 right-4 -translate-y-1/2"
+                >
+                    <img src="/images/select-arrow.svg" />
                 </div>
+            </form>
+            <div class="overflow-hidden rounded-2xl border-2 border-[#B399D6] mt-6">
+                <table class="w-full border-collapse">
+                    <thead class="bg-gray-50">
+                    <tr class="bg-[#410098] text-white">
+                        <th scope="col"
+                            class="border-r border-[#B399D6] px-6 py-4 text-left font-['Montserrat'] font-semibold text-xl">
+                            Rank
+                        </th>
+                        <th scope="col"
+                            class="border-r border-[#B399D6] px-6 py-4 text-left font-['Montserrat'] font-semibold text-xl">
+                            Name
+                        </th>
+                        <th scope="col"
+                            class="border-r border-[#B399D6] px-6 py-4 text-left font-['Montserrat'] font-semibold text-xl">
+                            Points
+                        </th>
+
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <!-- Odd row -->
+                    @foreach($users as $user)
+                        <tr class="{{ $loop->even ? 'bg-[#F5F2FA]' : 'bg-white' }}">
+                            <td class="border-r border-[#B399D6] px-6 py-4 text-xl">{{ $rank++}}</td>
+                            <td class="border-r border-[#B399D6] px-6 py-4 text-xl"><a class="text-dark-blue"
+                                        href="/badges/user/{{$user->id}}/{{$year}}">{{$user->fullName}}</a>
+                            </td>
+                            <td class="border-r border-[#B399D6] px-6 py-4 text-xl">{{$user->getPoints($year)}}</td>
+                        </tr>
+                    @endforeach
+                    </tbody>
+                </table>
             </div>
-        </div>
-
-
+            <!-- Pagination Links -->
+            <div class="mt-5">
+                {{ $users->links('vendor.pagination') }}
+            </div>
+        </section>
     </section>
 
 @endsection