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

Jump to bottom

Add more eScience styling to background and improve rendering of module title in Module view #72

Merged
merged 5 commits into from
Sep 3, 2024
Merged

Add more eScience styling to background and improve rendering of module title in Module view #72

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
fe9bd28
Store module title on card click and display in module view
JaroCamphuijsen Aug 23, 2024
36954b5
add escience blobs and button response
JaroCamphuijsen Aug 23, 2024
2b5c5d0
Adjust blobs to show scrollbar on top and add border to presentations
JaroCamphuijsen Aug 27, 2024
7d37b0d
add center class to slides style
JaroCamphuijsen Sep 3, 2024
d83eae1
reset z-index of overlay to 0 to fix fragment issues
JaroCamphuijsen Sep 3, 2024
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
6 changes: 5 additions & 1 deletion app.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
<template>
<div class="flex flex-col w-screen bg-gentleBlue h-screen overflow-hidden">
<Banner />
<div class="flex-1 overflow-auto">
<div class="flex-1 z-10 overflow-auto">
<NuxtPage />
</div>
<Footer />

<div class="main-blob z-0 yellow-bottom slide-bottom"></div>
<div class="main-blob z-0 purple-top slide-top"></div>
</div>
</template>

<script setup lang="ts">

</script>
47 changes: 46 additions & 1 deletion assets/nlesc-decorations.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -256,6 +256,7 @@ $heading4Size: 1.5em;
height: 50vh;
border-radius: 0 0 10vw 10vw;
}

.box {
position: absolute;
right: 10vw;
Expand All @@ -267,6 +268,39 @@ $heading4Size: 1.5em;
}
}

.main-blob {
position: absolute;
z-index: 0;
}
.yellow-bottom {
transition: bottom 1s;
bottom: -50vh;
left: 0;
background-color: $eScienceYellow;
transition: bottom 1s;
width: 15vw;
height: 50vh;
border-radius: 0 15vw 0 0;
}
.slide-bottom {
transition: bottom 1s;
bottom: 0;
}
.purple-top {
transition: top 1s;
top: -40vh;
right: 0;
background-color: $eSciencePurple;
width: 25vw;
max-width: 40vh;
height: 40vh;
border-radius: 0 0 0 25vw;
}
.slide-top {
transition: top 1s;
top: 0;
}

#globe, #phone, #mail {
transition: left 1s;
position: absolute;
Expand Down Expand Up @@ -350,6 +384,18 @@ $heading4Size: 1.5em;
padding-left: 10%;
}
}
&.center {
h1, h2, h3, p, ul{
text-align: center;
padding-left: 0%;
}
iframe, img{
display: block;
border-style:none;
margin: 0 auto;

}
}
&.about {
@include logo-part-white;
@include blue-pane-left;
Expand Down Expand Up @@ -398,4 +444,3 @@ $heading4Size: 1.5em;
z-index: 10;
}
}

8 changes: 4 additions & 4 deletions components/Banner.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<template>
<div class="flex p-1 bg-eScienceWhite text-xl items-center text-eSciencePurple border-b-2">
<div class="flex p-1 bg-eScienceWhite text-xl items-center text-eSciencePurple z-10">
<div class="flex flex-1 gap-10 items-center ">
<NuxtLink :to="`/`">
<div class="text-2xl leading-6 mx-10 font-bold w-20">
<div class="text-2xl leading-6 mx-10 font-bold w-20 hover:text-eScienceBlue active:opacity-50">
{{ $config.public.title }}
</div>
</NuxtLink>
Expand All @@ -11,12 +11,12 @@
<div class="flex align-middle items-center">
<div class="flex p-5">

<NuxtLink :to="`/`" class="p-5 hover:text-eScienceBlue">
<NuxtLink :to="`/`" class="p-5 hover:text-eScienceBlue active:opacity-50">
Modules
</NuxtLink>

<ContentList :path="'/main'" v-slot="{ list }">
<nuxt-link v-for="page in list" :key="page._path" :to="page._path" class="p-5 hover:text-eScienceBlue">
<nuxt-link v-for="page in list" :key="page._path" :to="page._path" class="p-5 hover:text-eScienceBlue active:opacity-50">
{{ page.title }}
</nuxt-link>
</ContentList>
Expand Down
8 changes: 4 additions & 4 deletions components/ChapterBar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<template>
<div class="flex no-wrap text-left ml-20">
<div class="flex no-wrap text-left ml-20 z-10">
<div v-for="chapter in chapterList" :key="chapter._path">
<nuxt-link :to="chapter._path" role="button" class="flex max-h-20 m-4 ">
<div class="text-2xl px-1.5 py-3 content-center flex-none rounded-bl-xl bg-eScienceYellow">
<nuxt-link :to="chapter._path" role="button" class="flex max-h-20 m-4 rounded-bl-xl rounded-tr-xl active:border-2">
<div class="text-2xl px-1.5 py-3 content-center flex-none rounded-bl-xl bg-eScienceYellow">
<img v-if="chapter.type === `info`" src="/icons/info.svg" width="25"></img>
<img v-else-if="chapter.type === `exercise`" src="/icons/exercise.svg" width="25"></img>
<img v-else-if="chapter.type === `reading`" src="/icons/reading.svg" width="25"></img>
<img v-else-if="chapter.type === 'slides'" src="/icons/presentation.svg" width="25"></img>
</div>
<div class="p-4 flex-initial text-lg font-display font-semibold rounded-tr-xl bg-eScienceBlue bg-opacity-10 text-eSciencePurple hover:bg-eScienceWhite hover:text-eScienceBlue">
<div class="p-4 flex-initial text-lg font-display font-semibold rounded-tr-xl shadow-xl bg-gentleBlue text-eSciencePurple hover:bg-eScienceWhite hover:text-eScienceBlue ">
{{ chapter.title }}
</div>
</nuxt-link>
Expand Down
6 changes: 2 additions & 4 deletions components/Footer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
<template>
<div>
<div class="decoration-slice bg-gentleBlue p-4" />
<div id="footer" class="bg-eSciencePurple p-2 font-body text-eScienceWhite text-sm text-center">
<!-- <div class="decoration-slice bg-gentleBlue p-4" /> -->
<div id="footer" class="bg-eSciencePurple p-2 font-body text-eScienceWhite text-sm text-center z-10">
<div class="text-center">
These materials are developed by the <a href="https://www.esciencecenter.nl">Netherlands eScience Center</a>. Licensed under <a href="https://creativecommons.org/licenses/by/4.0/">CC-BY 4.0</a> unless otherwise noted.
</div>

</div>
</div>
</template>

<script>
Expand Down
39 changes: 21 additions & 18 deletions components/ModuleCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,30 @@
<template>
<NuxtLink :to="url">
<!-- relative parent needed for absolute positioning of svg badges-->
<div class="relative">
<!-- Module card -->
<div class="flex flex-row bg-eScienceWhite shadow-xl max-w-[485px] rounded-bl-3xl rounded-tr-3xl h-48">
<div class="prose font-display w-2/3 p-4 pr-10">
<h3>
{{ title }}
</h3>
<p>
{{ abstract }}
</p>
<NuxtLink :to="url" @click.native="store.modTitle = title" class="z-10">
<!-- relative parent needed for absolute positioning of svg badges-->
<div class="relative z-10">
<!-- Module card -->
<div class="flex flex-row bg-eScienceWhite shadow-xl max-w-[485px] rounded-bl-3xl rounded-tr-3xl active:border-2 h-48">
<div class="prose font-display w-2/3 p-4 pr-10">
<h3>
{{ title }}
</h3>
<p>
{{ abstract }}
</p>
</div>
<div class="w-1/3 " >
<img :src="thumbnail" alt="module icon" class="rounded-tr-3xl object-cover h-48">
</div>
</div>
<div class="w-1/3 " >
<img :src="thumbnail" alt="module icon" class="rounded-tr-3xl object-cover h-48">
</div>
</div>
</div>
</NuxtLink>
</NuxtLink>
</template>

<script>
<script setup>
const store = useMyStore()
</script>

<script>
export default {
props: {
title: {
Expand Down
2 changes: 1 addition & 1 deletion components/Slides.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="flex relative box-border h-full reveal">
<div class="flex relative box-border h-full reveal bg-eScienceWhite z-10">
<div class="slides flex h-full w-full">
<section
data-markdown
Expand Down
1 change: 1 addition & 0 deletions composables/store.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export const useMyStore = () => useState('store', () => ({modTitle: "No Title"}))
38 changes: 19 additions & 19 deletions pages/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,24 @@
<template>
<div class="flex flex-col pt-4 pb-6 pl-6 ml-16">
<!-- categories -->
<div v-for='category in config.categoryOrder' :key="category" class="flex flex-wrap gap-4 mb-8">
<h2 class="prose-2xl font-display font-bold text-eSciencePurple w-full pl-2">
<div class="flex flex-col pt-4 pb-6 pl-6 ml-16 z-10">
<!-- categories -->
<div v-for='category in config.categoryOrder' :key="category" class="flex flex-wrap gap-4 mb-8">
<h2 class="prose-2xl font-display font-bold text-eSciencePurple w-full pl-2 z-10">
{{ category }}
</h2>
<!-- modules -->
<ContentList :query="modQuery" v-slot="{ list }">
<ModuleCard v-for="modObject in list.filter(modObject => (modObject.category === category))"
:key="modObject.id"
:title="modObject.title"
:author="modObject.author"
:abstract="modObject.abstract"
:thumbnail="`/${config.baseURL}/${modObject._path}/media/${modObject.thumbnail}`"
:url="`${modObject._path}/info`"
/>
</ContentList>
</div>
</h2>
<!-- modules -->
<ContentList :query="modQuery" v-slot="{ list }" class="z-10">
<ModuleCard v-for="modObject in list.filter(modObject => (modObject.category === category))"
:key="modObject.id"
:title="modObject.title"
:author="modObject.author"
:abstract="modObject.abstract"
:thumbnail="`/${config.baseURL}/${modObject._path}/media/${modObject.thumbnail}`"
:url="`${modObject._path}/info`"
class="z-10"/>
</ContentList>
</div>
</div>

</template>

<script setup lang="ts">
Expand All @@ -31,6 +32,5 @@
where: [{ visibility: 'visible' }],
sort: [{ order:1, $numeric:true }]
}



</script>
4 changes: 2 additions & 2 deletions pages/modules/[module].vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

<ContentDoc v-slot="{ doc }">
<h2 class="prose-2xl font-display mx-16 font-bold text-eSciencePurple w-full pl-2">
Module: {{ route.params.module }}
{{ store.modTitle }}
</h2>
</ContentDoc>
<ChapterBar/>
Expand All @@ -13,5 +13,5 @@
</template>

<script setup lang="ts">
const route = useRoute();
const store = useMyStore()
</script>
2 changes: 1 addition & 1 deletion pages/modules/[module]/[chapter].vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>

<ContentDoc v-slot="{ doc }">
<div v-if="doc.type === 'slides'" class='overflow-hidden h-full '>
<div v-if="doc.type === 'slides'" class='overflow-hidden h-full border-8 rounded-xl border-eScienceWhite z-10'>
<Slides :slidescontent="doc.plainText"/>
</div>

Expand Down
7 changes: 7 additions & 0 deletions tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,13 @@ module.exports = {
eScienceYellow: '#FFB213',
eScienceWhite: '#FFFFFF',
gentleBlue: '#e5f5fb'
}),
borderColor: theme => ({
eSciencePurple: '#380339',
eScienceBlue: '#009DDD',
eScienceYellow: '#FFB213',
eScienceWhite: '#FFFFFF',
gentleBlue: '#e5f5fb'
})
}
}
Expand Down
Loading