Skip to content

Commit

Permalink
#47 - overlaying logo fix (#129)
Browse files Browse the repository at this point in the history
  • Loading branch information
@krzysztofrewak
krzysztofrewak authored Aug 21, 2024
1 parent 44c446f commit fc58cfb
Show file tree
Hide file tree
Showing 3 changed files with 28 additions and 63 deletions.
37 changes: 13 additions & 24 deletions resources/js/Layouts/PublicLayout.vue
View file
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
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
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

0 comments on commit fc58cfb

Please sign in to comment.