Skip to content

Commit

Permalink
Feat: Homepage
Browse files Browse the repository at this point in the history
  • Loading branch information
acosta-leandro committed Jun 1, 2024
1 parent eca6336 commit 54742e7
Show file tree
Hide file tree
Showing 16 changed files with 217 additions and 158 deletions.
19 changes: 15 additions & 4 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 3 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,12 @@
"build": "quasar build"
},
"dependencies": {
"axios": "^1.2.1",
"vue-i18n": "^9.0.0",
"@quasar/extras": "^1.16.4",
"axios": "^1.2.1",
"quasar": "^2.16.0",
"rfs": "^10.0.0",
"vue": "^3.4.18",
"vue-i18n": "^9.0.0",
"vue-router": "^4.0.0"
},
"devDependencies": {
Expand Down
Binary file modified public/favicon.ico
Binary file not shown.
Binary file modified public/icons/favicon-128x128.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/icons/favicon-16x16.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/icons/favicon-32x32.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/icons/favicon-96x96.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/video.mp4
Binary file not shown.
48 changes: 0 additions & 48 deletions src/components/EssentialLink.vue

This file was deleted.

65 changes: 65 additions & 0 deletions src/components/LandHeader.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
<template>
<q-header reveal elevated style=" width: 100vw">
<q-toolbar class="flex justify-between bg-primary text-white">
<router-link to="/">
<q-toolbar-title class="row" >
<div class="row items-baseline justify-start">
<div class="font-h65 text-white" style="flex: 1">Computational Biology - UM</div>
</div>
</q-toolbar-title>
</router-link>
<div>
</div>
<div class="flex items-end gt-sm q-mr-lg">
<q-btn flat to="/vpatch" target="_blank" :label="$t('vpatch')"/>
<q-btn flat to="/github" target="_blank" :label="$t('github')"/>
<q-btn flat to="/contact" target="_blank" :label="$t('contact')"/>
</div>

<div class="lt-md">
<q-btn-dropdown dropdown-icon="change_history">
<q-list class="bg-primary text-white">

<q-item clickable v-close-popup to="/vpatch">
<q-item-section>
<q-item-label>{{ $t('vpatch') }}</q-item-label>
</q-item-section>
</q-item>

<q-item clickable v-close-popup to="/github">
<q-item-section>
<q-item-label>{{ $t('github') }}</q-item-label>
</q-item-section>
</q-item>

<q-item clickable v-close-popup to="/contact">
<q-item-section>
<q-item-label>{{ $t('contact') }}</q-item-label>
</q-item-section>
</q-item>

</q-list>
</q-btn-dropdown>
</div>

</q-toolbar>
</q-header>
</template>

<script>
export default {
name: "LandHeader",
}
</script>

<style scoped>
a {
text-decoration: none;
}
.q-item.q-router-link--active, .q-item--active {
color: white;
}
</style>
13 changes: 13 additions & 0 deletions src/css/app.scss
Original file line number Diff line number Diff line change
@@ -1 +1,14 @@
// app global css in SCSS form
h1,h2,h3,h4,h5,h6, p{
margin: 0;
padding: 0;
}

.margins{
max-width: 1920px;
margin: 0 auto;
}
a{
text-decoration: none;
color: inherit;
}
46 changes: 45 additions & 1 deletion src/css/quasar.variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,9 @@
// It's highly recommended to change the default colors
// to match your app's branding.
// Tip: Use the "Theme Builder" on Quasar's documentation website.
@import "rfs/scss";

$primary : #1976D2;
$primary : #002147;
$secondary : #26A69A;
$accent : #9C27B0;

Expand All @@ -23,3 +24,46 @@ $positive : #21BA45;
$negative : #C10015;
$info : #31CCEC;
$warning : #F2C037;
$shadow-color: $primary;

$stepColor: #E6F7FF50;


.text-stepColor {
color: #E6F7FF50 !important;
}
.bg-stepColor {
background-color: #E6F7FF50 !important;
}


.font-h1, h1{
@include font-size(5rem);
line-height: 1.2em;
font-family: 'Roboto', sans-serif;
font-weight: 400;
}
.font-h2, h2{
@include font-size(6rem);
line-height: 1em;
}
.font-h3, h3{
@include font-size(4rem);
}
.font-h4, h4{
@include font-size(3rem);
}
.font-h5, h5{
@include font-size(2rem);
}
.font-h6, h6{
@include font-size(1.5rem);
}

.q-stepper__tab--active{
background-color: #E6F7FF50 !important;
}

.bg-light-blue-1{
background-color: #E6F7FF50 !important; //option 2 more transparent
}
5 changes: 4 additions & 1 deletion src/i18n/en-US/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,8 @@

export default {
failed: 'Action failed',
success: 'Action was successful'
success: 'Action was successful',
vpatch: 'Virtual Patch Clamp',
github: "Github",
contact: "Contact"
}
116 changes: 21 additions & 95 deletions src/layouts/MainLayout.vue
Original file line number Diff line number Diff line change
@@ -1,106 +1,32 @@
<template>
<q-layout view="lHh Lpr lFf">
<q-header elevated>
<q-toolbar>
<q-btn
flat
dense
round
icon="menu"
aria-label="Menu"
@click="toggleLeftDrawer"
/>
<q-layout class="">
<LandHeader/>
<div class="flex column no-wrap" style="height: 100vh">
<q-page-container>
<router-view/>
</q-page-container>
</div>

<q-toolbar-title>
Quasar App
</q-toolbar-title>

<div>Quasar v{{ $q.version }}</div>
</q-toolbar>
</q-header>

<q-drawer
v-model="leftDrawerOpen"
show-if-above
bordered
>
<q-list>
<q-item-label
header
>
Essential Links
</q-item-label>

<EssentialLink
v-for="link in linksList"
:key="link.title"
v-bind="link"
/>
</q-list>
</q-drawer>

<q-page-container>
<router-view />
</q-page-container>
</q-layout>

</template>

<script setup>
import { ref } from 'vue'
import EssentialLink from 'components/EssentialLink.vue'
<script>
import {defineComponent, onMounted} from 'vue';
import LandHeader from "components/LandHeader.vue";
defineOptions({
name: 'MainLayout'
})
const linksList = [
{
title: 'Docs',
caption: 'quasar.dev',
icon: 'school',
link: 'https://quasar.dev'
export default defineComponent({
name: 'MainLayout', components: {
LandHeader
},
{
title: 'Github',
caption: 'github.com/quasarframework',
icon: 'code',
link: 'https://github.com/quasarframework'
data() {
return {
drawerLeft: true
}
},
{
title: 'Discord Chat Channel',
caption: 'chat.quasar.dev',
icon: 'chat',
link: 'https://chat.quasar.dev'
setup() {
return {}
},
{
title: 'Forum',
caption: 'forum.quasar.dev',
icon: 'record_voice_over',
link: 'https://forum.quasar.dev'
},
{
title: 'Twitter',
caption: '@quasarframework',
icon: 'rss_feed',
link: 'https://twitter.quasar.dev'
},
{
title: 'Facebook',
caption: '@QuasarFramework',
icon: 'public',
link: 'https://facebook.quasar.dev'
},
{
title: 'Quasar Awesome',
caption: 'Community Quasar projects',
icon: 'favorite',
link: 'https://awesome.quasar.dev'
}
]
const leftDrawerOpen = ref(false)
function toggleLeftDrawer () {
leftDrawerOpen.value = !leftDrawerOpen.value
}
});
</script>
Loading

0 comments on commit 54742e7

Please sign in to comment.