Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

#47 - overlaying logo fix #129

Merged
merged 1 commit into from
Aug 21, 2024
Merged

#47 - overlaying logo fix #129

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 13 additions & 24 deletions resources/js/Layouts/PublicLayout.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import { ref } from 'vue'
import { Link } from '@inertiajs/inertia-vue3'
import { Dialog, DialogPanel } from '@headlessui/vue'
import { EllipsisHorizontalIcon, Bars3Icon, XMarkIcon } from '@heroicons/vue/24/outline'
import { Bars3Icon, EllipsisHorizontalIcon, XMarkIcon } from '@heroicons/vue/24/outline'

const navigation = [
{ name: 'Strona główna', href: '/' },
Expand All @@ -21,34 +21,30 @@ const mobileMenuOpen = ref(false)
<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"
>
<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="size-6" aria-hidden="true" />
</button>
</div>
<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"
>
<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 v-if="$page.props.auth.user" href="/dashboard" class="text-sm font-semibold leading-6 text-gray-900">
Dashboard <span aria-hidden="true">&rarr;</span>
Dashboard
<span aria-hidden="true">&rarr;</span>
</Link>
<Link v-else href="/login" class="text-sm font-semibold leading-6 text-gray-900">
Logowanie <span aria-hidden="true">&rarr;</span>
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"
>
<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>
Expand All @@ -58,21 +54,15 @@ const mobileMenuOpen = ref(false)
<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"
>
<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 v-if="$page.props.auth.user" href="/dashboard"
class="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
>
<Link v-if="$page.props.auth.user" href="/dashboard" class="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">
Dashboard
</Link>
<Link v-else href="/login"
class="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
>
<Link v-else href="/login" 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>
Expand All @@ -92,9 +82,8 @@ const mobileMenuOpen = ref(false)
<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>
<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>
Expand Down
26 changes: 8 additions & 18 deletions resources/js/Pages/Public/Home.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
<script setup>
import PublicLayout from '@/Layouts/PublicLayout.vue'
import {
EnvelopeIcon,
} from '@heroicons/vue/24/outline'
import { EnvelopeIcon } from '@heroicons/vue/24/outline'
import BackgroundGrid from '@/Components/BackgroundGrid.vue'
import SectionHeader from '@/Components/SectionHeader.vue'
import DOMPurify from 'dompurify'
Expand All @@ -27,7 +25,7 @@ defineProps({
<PublicLayout>
<div v-if="sectionSettings.banner_enabled" class="relative isolate bg-white pt-14">
<BackgroundGrid />
<img src="/cwup.png" alt="" class="absolute right-0 hidden w-1/2 opacity-10 lg:mt-16 lg:block xl:mt-10 2xl:mt-0">
<img src="/cwup.png" alt="" class="pointer-events-none absolute right-0 z-0 hidden w-1/2 opacity-10 lg:mt-16 lg:block xl:mt-10 2xl:mt-0">
<div class="mx-auto max-w-7xl px-6 py-24 sm:py-32 lg:flex lg:items-center lg:gap-x-10 lg:px-8 lg:py-32">
<div class="mx-auto max-w-7xl text-center lg:mx-0 lg:flex-auto">
<h1 class="mx-auto mt-10 max-w-4xl text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">
Expand Down Expand Up @@ -55,12 +53,8 @@ defineProps({
Kilka słów o mnie.
</template>
</SectionHeader>
<div
class="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 pt-10 lg:mx-0 lg:max-w-none lg:grid-cols-3"
>
<article v-for="section in about" :key="section.id"
class="flex max-w-xl flex-col items-start justify-between"
>
<div class="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 pt-10 lg:mx-0 lg:max-w-none lg:grid-cols-3">
<article v-for="section in about" :key="section.id" class="flex max-w-xl flex-col items-start justify-between">
<div class="group relative">
<h3 class="mt-3 text-lg font-semibold leading-6 text-gray-900">
{{ section.title }}
Expand All @@ -75,14 +69,9 @@ defineProps({
</div>

<div v-if="sectionSettings.counters_enabled && counters.length" class="relative isolate overflow-hidden bg-gray-900 py-24 sm:py-32">
<img
src="https://images.unsplash.com/photo-1542831371-29b0f74f9713?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8cHJvZ3JhbW1pbmd8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=2850&q=80&blend=111827&blend-mode=multiply&sat=-100&exp=15"
alt="" class="absolute inset-0 -z-10 size-full object-cover"
>
<img src="https://images.unsplash.com/photo-1542831371-29b0f74f9713?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8cHJvZ3JhbW1pbmd8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=2850&q=80&blend=111827&blend-mode=multiply&sat=-100&exp=15" alt="" class="absolute inset-0 -z-10 size-full object-cover">
<div class="relative mx-auto max-w-7xl px-6 lg:px-8">
<dl
class="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-10 text-white sm:grid-cols-2 sm:gap-y-16 lg:mx-0 lg:max-w-none lg:grid-cols-4"
>
<dl class="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-10 text-white sm:grid-cols-2 sm:gap-y-16 lg:mx-0 lg:max-w-none lg:grid-cols-4">
<div v-for="counter in counters" :key="counter.id" class="flex flex-col gap-y-3 border-l border-white pl-6">
<dt class="prose text-sm text-white" v-html="counter.value" />
<dd class="order-first text-5xl font-semibold tracking-tight">
Expand All @@ -107,7 +96,8 @@ defineProps({
<div class="mx-auto flex max-w-2xl py-12 xl:mx-0 xl:py-0">
<a :href="'mailto:' + email" class="flex w-full items-center justify-center text-center text-xl font-bold tracking-tight text-gray-900 sm:text-2xl">
<EnvelopeIcon class="mr-2 w-12" />
{{ email.split('@')[0] }}<span class="font-normal">@{{ email.split('@')[1] }}</span>
{{ email.split('@')[0] }}
<span class="font-normal">@{{ email.split('@')[1] }}</span>
</a>
</div>
</div>
Expand Down
28 changes: 7 additions & 21 deletions resources/js/Pages/Public/Login.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,44 +24,30 @@ function attemptLogin() {
<PublicLayout>
<div class="relative isolate bg-white pt-14">
<BackgroundGrid />
<img src="/cwup.png" alt="" class="absolute right-0 z-0 hidden w-1/2 opacity-10 lg:mt-16 lg:block xl:mt-10 2xl:mt-0">
<img src="/cwup.png" alt="" class="pointer-events-none absolute right-0 z-0 hidden w-1/2 opacity-10 lg:mt-16 lg:block xl:mt-10 2xl:mt-0">
<div class="mx-auto max-w-7xl px-6 py-24 sm:py-32 lg:flex lg:items-center lg:gap-x-10 lg:px-8 lg:py-40">
<div class="mx-auto max-w-7xl text-center lg:mx-0 lg:flex-auto">
<img :src="universityLogo" :alt="university" class="mx-auto w-[360px]">
<div class="sm:mx-auto sm:w-full sm:max-w-[480px]">
<div class="px-6 py-7 sm:px-12">
<form
class="z-10 space-y-6"
@submit.prevent="attemptLogin"
>
<div
v-if="loginForm.errors.email"
class="bg-wb-red-10 border-wb-red-20 text-wb-grey-80 rounded-md border px-4 py-3 text-center text-sm"
>
<form class="z-10 space-y-6" @submit.prevent="attemptLogin">
<div v-if="loginForm.errors.email" class="bg-wb-red-10 border-wb-red-20 text-wb-grey-80 rounded-md border px-4 py-3 text-center text-sm">
{{ loginForm.errors.email }}
</div>
<div>
<label for="email"
class="block text-sm font-medium leading-6 text-gray-900"
>Email</label>
<label for="email" class="block text-sm font-medium leading-6 text-gray-900">Email</label>
<div class="mt-2">
<input id="email" v-model="loginForm.email" name="email" type="email" autocomplete="email" required
class="top block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-black sm:text-sm sm:leading-6"
>
<input id="email" v-model="loginForm.email" name="email" type="email" autocomplete="email" required class="top block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-black sm:text-sm sm:leading-6">
</div>
</div>
<div>
<label for="password" class="block text-sm font-medium leading-6 text-gray-900">Hasło</label>
<div class="mt-2">
<input id="password" v-model="loginForm.password" name="password" type="password"
class="z-50 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-black sm:text-sm sm:leading-6"
>
<input id="password" v-model="loginForm.password" name="password" type="password" class=" block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-black sm:text-sm sm:leading-6">
</div>
</div>
<div>
<button type="submit"
class="flex w-full justify-center rounded-md bg-black px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
>
<button type="submit" class="flex w-full justify-center rounded-md bg-black px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">
Zaloguj się
</button>
</div>
Expand Down
Loading