#23 - extended homepage (#33)

* - homepage tweaks * #23 - initial main page design * #23 - lintf * #23 - csf * #23 - sticky footer
blumilksoftware · Sep 18, 2023 · 673c5f1 · 673c5f1
1 parent 24c7386
commit 673c5f1
Show file tree

Hide file tree

Showing 11 changed files with 228 additions and 126 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -8,6 +8,9 @@ indent_style = space
 insert_final_newline = true
 trim_trailing_whitespace = true
 
+[*.vue]
+indent_size = 2
+
 [*.md]
 trim_trailing_whitespace = false
 

diff --git a/app/Http/Controllers/HomeController.php b/app/Http/Controllers/HomeController.php
diff --git a/app/Http/Controllers/Public/HomeController.php b/app/Http/Controllers/Public/HomeController.php
@@ -14,6 +14,7 @@ public function __invoke(): Response
         return inertia("Public/Home", [
             "title" => "mgr inż.",
             "name" => "Krzysztof Rewak",
+            "email" => "[email protected]",
             "department" => "Zakład Informatyki, Wydział Nauk Technicznych i Ekonomicznych",
             "university" => "Collegium Witelona Uczelnia Państwowa",
             "universityLogo" => "https://irg2023.collegiumwitelona.pl/assets/logos/cwup.png",
@@ -40,6 +41,12 @@ public function __invoke(): Response
                     ],
                 ],
             ],
+            "counters" => [
+                ["id" => 1, "name" => "lat prowadzenia zajęć dydaktycznych na uczelni", "value" => 7],
+                ["id" => 2, "name" => "kursów prowadzonych w tym semestrze", "value" => 5],
+                ["id" => 3, "name" => "studentów na wykładach i innych zajęciach", "value" => 345],
+                ["id" => 4, "name" => "średnia ocena wystawiona przez studentów w ankiecie nt. jakości kształcenia", "value" => 4.93],
+            ],
         ]);
     }
 }
diff --git a/app/Http/Controllers/Public/NewsController.php b/app/Http/Controllers/Public/NewsController.php
@@ -0,0 +1,18 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Http\Controllers\Public;
+
+use App\Http\Controllers\Controller;
+use Inertia\Response;
+
+class NewsController extends Controller
+{
+    public function __invoke(): Response
+    {
+        return inertia("Public/News", [
+            "title" => "mgr inż.",
+        ]);
+    }
+}
diff --git a/public/cwup.png b/public/cwup.png
diff --git a/resources/js/Components/BackgroundGrid.vue b/resources/js/Components/BackgroundGrid.vue
@@ -0,0 +1,30 @@
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  maskDirection: {
+    type: String,
+    default: 'right',
+  },
+})
+
+const maskImage = computed(() => '[mask-image:radial-gradient(100%_100%_at_top_' + props.maskDirection + ',white,transparent)]')
+</script>
+
+<template>
+  <svg class="absolute inset-0 -z-10 h-full w-full stroke-gray-200" :class="maskImage" aria-hidden="true">
+    <defs>
+      <pattern id="83fd4e5a-9d52-42fc-97b6-718e5d7ee527" width="200" height="200" x="50%" y="-1"
+               patternUnits="userSpaceOnUse"
+      >
+        <path d="M100 200V.5M.5 .5H200" fill="none" />
+      </pattern>
+    </defs>
+    <svg x="50%" y="-1" class="overflow-visible fill-gray-50">
+      <path d="M-100.5 0h201v201h-201Z M699.5 0h201v201h-201Z M499.5 400h201v201h-201Z M-300.5 600h201v201h-201Z"
+            stroke-width="0"
+      />
+    </svg>
+    <rect width="100%" height="100%" stroke-width="0" fill="url(#83fd4e5a-9d52-42fc-97b6-718e5d7ee527)" />
+  </svg>
+</template>
diff --git a/resources/js/Components/SectionHeader.vue b/resources/js/Components/SectionHeader.vue
@@ -0,0 +1,10 @@
+<template>
+  <div class="mx-auto max-w-2xl lg:mx-0">
+    <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
+      <slot name="header" />
+    </h2>
+    <p class="mt-1 text-lg leading-8 text-gray-600">
+      <slot name="subheader" />
+    </p>
+  </div>
+</template>
diff --git a/resources/js/Layouts/PublicLayout.vue b/resources/js/Layouts/PublicLayout.vue
@@ -1,68 +1,97 @@
 <script setup>
 import { ref } from 'vue'
+import { Link } from '@inertiajs/vue3'
 import { Dialog, DialogPanel } from '@headlessui/vue'
-import { Bars3Icon, XMarkIcon } from '@heroicons/vue/24/outline'
+import { EllipsisHorizontalIcon, Bars3Icon, XMarkIcon } from '@heroicons/vue/24/outline'
 
 const navigation = [
-  { name: 'Strona główna', href: '#' },
-  { name: 'Aktualności', href: '#' },
-  { name: 'Kursy i materiały', href: '#' },
-  { name: 'Oceny', href: '#' },
-  { name: 'FAQ', href: '#' },
-  { name: 'Kontakt', href: '#' },
+  { name: 'Strona główna', href: '/' },
+  { name: 'Aktualności', href: '/aktualnosci' },
+  { name: 'Kursy i materiały', href: '/kursy' },
+  { name: 'Oceny', href: '/oceny' },
+  { name: 'FAQ', href: '/faq' },
+  { name: 'Kontakt', href: '/kontakt' },
 ]
 
 const mobileMenuOpen = ref(false)
 </script>
 
 <template>
-  <header class="absolute inset-x-0 top-0 z-50">
-    <nav class="flex items-center justify-between p-6 lg:px-8" aria-label="Global">
-      <div class="flex lg:hidden">
-        <button type="button" class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700" @click="mobileMenuOpen = true">
-          <span class="sr-only">Otwórz menu</span>
-          <Bars3Icon class="h-6 w-6" aria-hidden="true" />
-        </button>
-      </div>
-      <div class="hidden lg:flex lg:gap-x-12">
-        <a v-for="item in navigation" :key="item.name" :href="item.href" class="text-sm font-semibold leading-6 text-gray-900">{{ item.name }}</a>
-      </div>
-      <div class="hidden lg:flex lg:flex-1 lg:justify-end">
-        <a href="#" class="text-sm font-semibold leading-6 text-gray-900">Logowanie <span aria-hidden="true">&rarr;</span></a>
-      </div>
-    </nav>
-    <Dialog as="div" class="lg:hidden" :open="mobileMenuOpen" @close="mobileMenuOpen = false">
-      <div class="fixed inset-0 z-50" />
-      <DialogPanel class="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white p-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
-        <div class="flex items-center justify-between">
-          <button type="button" class="-m-2.5 rounded-md p-2.5 text-gray-700" @click="mobileMenuOpen = false">
-            <span class="sr-only">Close menu</span>
-            <XMarkIcon class="h-6 w-6" aria-hidden="true" />
+  <div class="flex h-screen flex-col">
+    <header class="absolute inset-x-0 top-0 z-50">
+      <nav class="flex items-center justify-between p-6 lg:px-8" aria-label="Global">
+        <div class="flex lg:hidden">
+          <button type="button" class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
+                  @click="mobileMenuOpen = true"
+          >
+            <span class="sr-only">Otwórz menu</span>
+            <Bars3Icon class="h-6 w-6" aria-hidden="true" />
           </button>
         </div>
-        <div class="mt-6 flow-root">
-          <div class="-my-6 divide-y divide-gray-500/10">
-            <div class="space-y-2 py-6">
-              <a v-for="item in navigation" :key="item.name" :href="item.href" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">{{ item.name }}</a>
-            </div>
-            <div class="py-6">
-              <a href="#" class="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Logowanie</a>
+        <div class="hidden lg:flex lg:gap-x-12">
+          <Link v-for="item in navigation" :key="item.name" :href="item.href"
+                class="text-sm font-semibold leading-6 text-gray-900"
+          >
+            {{ item.name }}
+          </Link>
+        </div>
+        <div class="hidden lg:flex lg:flex-1 lg:justify-end">
+          <Link href="#" class="text-sm font-semibold leading-6 text-gray-900">
+            Logowanie <span
+              aria-hidden="true"
+            >&rarr;</span>
+          </Link>
+        </div>
+      </nav>
+      <Dialog as="div" class="lg:hidden" :open="mobileMenuOpen" @close="mobileMenuOpen = false">
+        <div class="fixed inset-0 z-50" />
+        <DialogPanel
+          class="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white p-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10"
+        >
+          <div class="flex items-center justify-between">
+            <button type="button" class="-m-2.5 rounded-md p-2.5 text-gray-700" @click="mobileMenuOpen = false">
+              <span class="sr-only">Close menu</span>
+              <XMarkIcon class="h-6 w-6" aria-hidden="true" />
+            </button>
+          </div>
+          <div class="mt-6 flow-root">
+            <div class="-my-6 divide-y divide-gray-500/10">
+              <div class="space-y-2 py-6">
+                <Link v-for="item in navigation" :key="item.name" :href="item.href"
+                      class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
+                >
+                  {{ item.name }}
+                </Link>
+              </div>
+              <div class="py-6">
+                <Link href="#"
+                      class="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
+                >
+                  Logowanie
+                </Link>
+              </div>
             </div>
           </div>
-        </div>
-      </DialogPanel>
-    </Dialog>
-  </header>
+        </DialogPanel>
+      </Dialog>
+    </header>
 
-  <slot />
+    <div class="flex-1">
+      <slot />
+    </div>
 
-  <footer class="bg-white">
-    <div class="mx-auto max-w-7xl px-6 py-12 md:flex md:items-center md:justify-center lg:px-8">
-      <div class="mt-8 md:order-1 md:mt-0">
-        <p class="text-center text-xs leading-5 text-gray-500">
-          &copy; 2023 keating management system
-        </p>
+    <footer class="bg-white">
+      <div class="mx-auto max-w-7xl px-6 py-12 md:flex md:items-center md:justify-center lg:px-8">
+        <div class="mt-8 md:order-1 md:mt-0">
+          <p class="text-center text-xs leading-5 text-gray-500">
+            2023
+            <EllipsisHorizontalIcon class="mx-2 inline-block w-6" />
+            <a class="font-semibold" href="https://github.com/blumilksoftware/keating" target="_blank">keating management system</a>
+            developed at
+            <a class="font-semibold" href="https://blumilk.pl/" target="_blank">Blumilk</a>
+          </p>
+        </div>
       </div>
-    </div>
-  </footer>
+    </footer>
+  </div>
 </template>