Skip to content

Commit

Permalink
Merge pull request #8 from IFB-ElixirFr/content_footer_tuto
Browse files Browse the repository at this point in the history 
Content footer tuto
  • Loading branch information
@imanemessak
imanemessak authored Aug 11, 2023
2 parents 3f8ce92 + 8c1d5ab commit 2be1b29
Show file tree
Hide file tree
Showing 3 changed files with 149 additions and 55 deletions.
51 changes: 49 additions & 2 deletions pages/[lang]/[...slug].vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,29 @@
<template>
<v-navigation-drawer
:width="325"
v-model="drawer"
absolute temporary
location="right">
<div v-for="(n, key) in navigation" :key="key">
<div v-for="(section, sectionKey) in n.children" :key="sectionKey">
<div v-for="(c, keyC) in section.children" :key="keyC">
<h3 class="text-black" style="margin-bottom: 2%; margin-left: 4%; margin-top: 4%;"> {{ c.title }}</h3>
<v-list>
<v-list-item
@click="changePath(section._path, c._dir)"
v-for="(c2, keyC2) in c.children" :key="keyC2">
<v-list-item-title style="margin-bottom: 2%; margin-left: 4%;">{{ c2.title }}</v-list-item-title>
<v-divider></v-divider>
</v-list-item>
</v-list>

</div>
</div>
</div>
</v-navigation-drawer>
<v-row class="fill-height">
<v-col class="fill-height overflow-y-auto">
<v-card class="fill-height">
<v-card class="fill-height" >
<v-card-text
class="fill-height overflow-y-auto"
style="max-height: calc(100% - 50px)"
Expand All @@ -25,8 +47,21 @@
class="me-2"
>Next</v-btn
>
<v-chip> {{ step + 1 }} / {{ tutosList.length }} </v-chip>
<v-btn class="bg-primary rounded-pill lighten-4 mx-4"
variant="Flat"
href="https://github.com/IFB-ElixirFr/Wasm4Learn/discussions"
target="_blank">Help
</v-btn>

<v-btn
@click.stop="drawer = !drawer"
class="rounded-pill"
variant="tonal"
> {{ step + 1 }} / {{ tutosList.length }}
</v-btn>

</v-card-actions>

</v-card>
</v-col>
<v-col class="fill-height">
Expand Down Expand Up @@ -124,6 +159,7 @@ export default {
pyodideLoaded: false,
canvasArray: [],
canvasPos: 0,
drawer: null,
};
},
async setup() {
Expand Down Expand Up @@ -189,7 +225,14 @@ export default {
}
}
const contentFolder = await queryContent("/" + lang).find();
const { data: navigation } = await useAsyncData("navigation", () =>
fetchContentNavigation("/" + lang + "/")
);
return {
contentFolder,
navigation,
webConsole,
tutosList,
store,
Expand Down Expand Up @@ -228,6 +271,10 @@ print("Welcome to the Pyodide terminal emulator 🐍\\n" + BANNER)
});
},
methods: {
changePath(pathParent, id) {
const router = useRouter();
router.push({ path: pathParent + "/", query: { id: id } });
},
changePlot(direction) {
this.updateCanvas();
if (direction == "next" && this.canvasPos + 1 < this.canvasArray.length) {
Expand Down
144 changes: 95 additions & 49 deletions pages/[lang]/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,55 +1,72 @@
<template>
<div v-for="(n, key) in navigation" :key="key">
<h1>
<img :src="n.image" alt="logo" style="height: 100px" /> {{ n.title }}
</h1>
<br />
<p class="text-subtitle-1">{{ n.description }}</p>
<div v-for="(section, sectionKey) in n.children" :key="sectionKey">
<h2>{{ section.title }}</h2>
<div class="d-flex flex-wrap">
<v-card
@click="changePath(section._path, c._dir)"
v-for="(c, keyC) in section.children"
:key="keyC"
width="300px"
class="ma-5"
>
<v-card-title>{{ c.title }}</v-card-title>
<v-card-text>
<div v-if="c.belt">
<v-chip
v-for="(b, kb) in c.belt"
:key="kb"
class="ma-1"
size="small"
:variant="b == 'white' ? 'outlined' : 'tonal'"
:color="b == 'white' ? '' : b"
>
{{ b }} belt
</v-chip>
</div>
<div v-if="c.tags">
<v-chip
v-for="(t, kt) in c.tags"
:key="kt"
class="ma-1"
size="small"
>
{{ t }}
</v-chip>
</div>
<p><b>Programme</b></p>
<ul class="ms-4">
<li v-for="(c2, keyC2) in c.children" :key="keyC2">
<v-sheet v-for="(n, keyC) in navigation" :key="keyC" class="pa-9" style="overflow: auto; margin : 0;">
<v-row no-gutters>
<v-col>
<v-sheet class="pa-2 ma-2">
<p class="text-h2 mdi mdi-school dividerline" style="color: #0080bc"> Learn {{ n.title }}</p>
</v-sheet>
<v-sheet class="pa-2 ma-2">
<h3 class="text-black text-h6" style="font-weight: normal;">{{ n.description }}</h3>
</v-sheet>
</v-col>
<v-col cols="2">
<v-sheet class="pa-6 rounded-lg justify-center">
<img :src="n.image" alt="logo" style="height: 150px; display: block;
margin-left: auto;
margin-right: auto;" />
</v-sheet>
</v-col>
</v-row>

<div v-for="(n, key) in navigation" :key="key">
<div v-for="(section, sectionKey) in n.children" :key="sectionKey">
<h2>{{ section.title }}</h2>
<div class="d-flex flex-wrap">
<v-card outlined elevation="3" v-for="(c, keyC) in section.children" :key="keyC" width="350px"
class="ma-5 rounded-xl">
<!-- @click="changePath(section._path, c._dir)"> -->
<v-card-text class="text-h6"><strong>{{ c.title }}</strong></v-card-text>
<v-card-text>
<div v-if="c.belt">
<v-chip v-for="(b, kb) in c.belt" :key="kb" class="ma-1" size="small"
:variant="b == 'white' ? 'outlined' : 'tonal'" :color="b == 'white' ? '' : b">
{{ b }} belt
</v-chip>
</div>
<div v-if="c.tags">
<v-chip v-for="(t, kt) in c.tags" :key="kt" class="ma-1" size="small">
{{ t }}
</v-chip>
</div>
<p><b>Description</b></p>
<v-card-text>
{{ c.description }}
</v-card-text>
<v-card-actions class="justify-space-between">
<v-menu open-on-hover>
<template v-slot:activator="{ props }">
<v-btn color="primary" v-bind="props" class="lighten-4 mx-0"><strong>Program<v-icon color="info"
class="mx-2" icon="mdi-plus" /></strong>
</v-btn>
</template>
<v-list>
<v-list-item @click="changePath(section._path, c._dir)" v-for="(c2, keyC2) in c.children"
:key="keyC2">
<v-list-item-title>{{ c2.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
<!-- <v-list v-for="(c2, keyC2) in c.children" :key="keyC2">
{{ c2.title }}
</li>
</ul>
</v-card-text>
</v-card>
</v-list> -->
<v-btn @click="changePath(section._path, c._dir)" class="bg-primary lighten-4 mx-1">Start Now</v-btn>
</v-card-actions>
</v-card-text>
</v-card>
</div>
</div>
</div>
</div>
</v-sheet>
</template>

<script>
Expand All @@ -59,7 +76,7 @@ export default {
let lang = route.params.lang;
const { data: navigation } = await useAsyncData("navigation", () =>
fetchContentNavigation("/" + lang + "/")
fetchContentNavigation("/" + lang + "/")
);
return { navigation };
},
Expand All @@ -73,4 +90,33 @@ export default {
</script>

<style>
/* .dividerline::after {
content: '';
display: block;
position: absolute;
background-color: #cddd00;
height: 10px;
width: 30%;
text-decoration: none;
position: relative;
} */
.dividerline:after {
position: absolute;
content: '';
height: 5px;
/* adjust this to move up and down. you may have to adjust the line height of the paragraph if you move it down a lot. */
bottom: -10px;
margin: 0;
left: 0;
right: 0;
width: 100%;
background: #cddd00;
}
.dividerline {
text-decoration: none;
position: relative;
}
</style>
9 changes: 5 additions & 4 deletions pages/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@
<v-sheet
v-for="(i, k) in instructors"
:key="k"
class="ma-2 pa-2"
class="ma-2 pa-2 rounded-xl"
width="200px"
elevation="6"
>
Expand Down Expand Up @@ -111,16 +111,17 @@
</p>
<p class="text-h4">By languages</p>
<div class="d-flex flex-wrap justify-center">
<v-card
<v-card
width="300px"
class="ma-5"
class="ma-5 rounded-xl"
v-for="(n, key) in navigation"
:key="key"
@click="changePath(n._path)"
elevation="5"
>

<v-card-text>
<div class="text-center">
<div class="text-center mb-10">
<img :src="n.image" alt="logo" style="height: 100px" />
</div>
<h1>{{ n.title }}</h1>
Expand Down

0 comments on commit 2be1b29

Please sign in to comment.