Merge pull request #912 from NFDI4Chem/development

fix: layout bug fixes

resources/js/Layouts/AppLayout.vue

@@ -297,31 +297,34 @@
  -->
  </div>
  <flash-messages />
- <notification
- ref="notificationElement"
- :notification="$page.props.user.notifications"
- />
  <div class="ml-4 flex items-center md:ml-6">
- <div class="ml-5 tooltip">
- <a
- class="cursor-pointer"
- @click="openShowNotificationDialog"
- >
- <BellIcon
- class="w-6 h-6 fill-current text-gray-600"
- />
- </a>
+ <span v-if="$page.props.user.first_name != null">
+ <div class="ml-5 mt-2 tooltip">
+ <a
+ class="cursor-pointer"
+ @click="openShowNotificationDialog"
+ >
+ <BellIcon
+ class="w-6 h-6 fill-current text-gray-600"
+ />
+ </a>
+ <span
+ class="bg-gray-900 text-center text-white px-2 py-1 shadow-lg rounded-md tooltiptextbottom"
+ >View Notifications</span
+ >
+ </div>
  <span
- class="bg-gray-900 text-center text-white px-2 py-1 shadow-lg rounded-md tooltiptextbottom"
- >View Notifications</span
+ v-if="hasUnreadNotification()"
+ class="inline-flex items-center justify-center px-1.5 py-0.5 text-xs font-bold leading-none text-red-100 bg-red-600 rounded-full"
  >
- </div>
- <span
- v-if="hasUnreadNotification()"
- class="inline-flex items-center justify-center px-1.5 py-0.5 text-xs font-bold leading-none text-red-100 bg-red-600 rounded-full"
- >
- {{ countNotification() }}</span
- >
+ {{ countNotification() }}</span
+ >
+ <notification
+ ref="notificationElement"
+ :notification="$page.props.user.notifications"
+ />
+ </span>
+
  <div class="ml-5 tooltip">
  <a
  id="tour-step-documentation"

resources/js/Pages/Public/Projects.vue

@@ -3,7 +3,7 @@
  <template #header>
  <div class="relative border-b border-zinc-900/5">
  <div
- class="relative pt-10 dark:border-white/5 mx-8 max-w-7xl py-12 sm:py-12"
+ class="relative pt-10 dark:border-white/5 mx-8 py-12 sm:py-12"
  >
  <div
  class="absolute inset-0 bg-gradient-to-r from-[#36b49f] to-[#DBFF75] opacity-40 [mask-image:radial-gradient(farthest-side_at_top,white,transparent)] dark:from-[#36b49f]/30 dark:to-[#DBFF75]/30 dark:opacity-100"
@@ -198,9 +198,7 @@
  </h2>
  </div>
  <div v-if="filters.mode == 'grid'">
- <div
- class="mt-4 mx-auto max-w-md grid gap-8 sm:max-w-lg lg:grid-cols-4 lg:max-w-7xl"
- >
+ <div class="mt-4 mx-auto grid gap-8 lg:grid-cols-4 w-full">
  <span
  v-for="project in projects.data.filter(
  (p) => p.owner

resources/js/Pages/Public/Studies.vue

@@ -3,7 +3,7 @@
  <template #header>
  <div class="relative border-b border-zinc-900/5">
  <div
- class="relative pt-10 dark:border-white/5 mx-8 max-w-7xl py-12 sm:py-12"
+ class="relative pt-10 dark:border-white/5 mx-8 py-12 sm:py-12"
  >
  <div
  class="absolute inset-0 bg-gradient-to-r from-[#36b49f] to-[#DBFF75] opacity-40 [mask-image:radial-gradient(farthest-side_at_top,white,transparent)] dark:from-[#36b49f]/30 dark:to-[#DBFF75]/30 dark:opacity-100"
@@ -200,9 +200,7 @@
  </h2>
  </div>
  <div v-if="filters.mode == 'grid'">
- <div
- class="mt-4 mx-auto max-w-md grid gap-8 sm:max-w-lg lg:grid-cols-4 lg:max-w-7xl"
- >
+ <div class="mt-4 mx-auto grid gap-8 lg:grid-cols-4">
  <span v-for="study in studies.data" :key="study.id">
  <StudyPublicCard
  :mode="filters.mode"

resources/js/Pages/Welcome.vue

@@ -42,6 +42,12 @@
  >
  Spectra
  </Link>
+ <Link
+ href="/compounds"
+ class="text-base font-medium text-gray-500 hover:text-gray-900"
+ >
+ Compounds
+ </Link>
  <a
  target="_blank"
  href="https://docs.nmrxiv.org"