jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged PR 2: Added vuetify, lint and mdi/font

Browse Source 
Added packages
vuetify3,
Lint  // Check js code and give advice.
mdi/font  // Widely used fonts and logo package ( used by vuetify3 )

Code formatting

Added a settings file to share vs code settings
This commit is contained in:
Dominic Villemure
2024-02-26 23:06:30 +00:00
committed by Pascal Marchesseault
parent 675f180034 017d5163a4
commit a4765405c3
18 changed files with 1488 additions and 281 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
.eslintrc.json Normal file
View File

@@ -0,0 +1,18 @@
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:vue/vue3-essential"
],
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": [
"vue"
],
"rules": {}
}

1
.gitignore vendored
View File

@@ -18,7 +18,6 @@ coverage
/cypress/screenshots/ /cypress/screenshots/
# Editor directories and files # Editor directories and files
.vscode/*
!.vscode/extensions.json !.vscode/extensions.json
.idea .idea
*.suo *.suo

8
.vscode/settings.json vendored Normal file
View File

@@ -0,0 +1,8 @@
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": [
"javascript"
]
}

3
index.html
View File

@@ -1,13 +1,16 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title> <title>Vite App</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.js"></script> <script type="module" src="/src/main.js"></script>
</body> </body>
</html> </html>

9
jsconfig.json
View File

@@ -1,8 +1,13 @@
{ {
"compilerOptions": { "compilerOptions": {
"paths": { "paths": {
"@/*": ["./src/*"] "@/*": [
"./src/*"
]
} }
}, },
"exclude": ["node_modules", "dist"] "exclude": [
"node_modules",
"dist"
]
} }

1121
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
package.json
View File

@@ -9,14 +9,18 @@
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"@mdi/font": "^7.4.47",
"axios": "^1.6.7", "axios": "^1.6.7",
"pinia": "^2.1.7", "pinia": "^2.1.7",
"vue": "^3.4.15", "vue": "^3.4.15",
"vue-router": "^4.2.5" "vue-router": "^4.2.5",
"vuetify": "^3.5.6"
}, },
"devDependencies": { "devDependencies": {
"@vitejs/plugin-vue": "^5.0.3", "@vitejs/plugin-vue": "^5.0.3",
"autoprefixer": "^10.4.17", "autoprefixer": "^10.4.17",
"eslint": "^8.57.0",
"eslint-plugin-vue": "^9.22.0",
"postcss": "^8.4.35", "postcss": "^8.4.35",
"tailwindcss": "^3.4.1", "tailwindcss": "^3.4.1",
"vite": "^5.0.11" "vite": "^5.0.11"

52
src/cssstyle/index.css
View File

@@ -1,32 +1,48 @@
/* Arrière-plan de la page */ /* Arrière-plan de la page */
body { body {
background-color: #f0f0f0; /* Couleur d'arrière-plan de la page */ background-color: #f0f0f0;
margin: 0; /* Supprimer les marges par défaut */ /* Couleur d'arrière-plan de la page */
padding: 0; /* Supprimer les espaces de remplissage par défaut */ margin: 0;
/* Supprimer les marges par défaut */
padding: 0;
/* Supprimer les espaces de remplissage par défaut */
} }
.top-aligned-column { .top-aligned-column {
display: flex; display: flex;
flex-direction: row; /* Afficher les colonnes en ligne */ flex-direction: row;
justify-content: space-between; /* Espacement égal entre les colonnes */ /* Afficher les colonnes en ligne */
align-items: flex-start; /* Aligner le contenu en haut */ justify-content: space-between;
min-height: 100vh; /* Ajustez selon vos besoins */ /* Espacement égal entre les colonnes */
padding: 20px; /* Ajouter un espace autour du contenu */ align-items: flex-start;
box-sizing: border-box; /* Inclure le padding dans la hauteur */ /* Aligner le contenu en haut */
overflow-y: auto; /* Activer le défilement vertical */ min-height: 100vh;
/* Ajustez selon vos besoins */
padding: 20px;
/* Ajouter un espace autour du contenu */
box-sizing: border-box;
/* Inclure le padding dans la hauteur */
overflow-y: auto;
/* Activer le défilement vertical */
} }
/* Style de la colonne */ /* Style de la colonne */
.column { .column {
flex: 1; /* Chaque colonne occupe autant d'espace que possible */ flex: 1;
padding: 20px; /* Espacement interne */ /* Chaque colonne occupe autant d'espace que possible */
padding: 20px;
/* Espacement interne */
} }
.center-column { .center-column {
flex: 1; /* Augmenter la taille de la colonne centrale */ flex: 1;
background-color: #ffffff; /* Couleur de fond de la colonne */ /* Augmenter la taille de la colonne centrale */
border-radius: 20px; /* Arrondir les coins de la colonne */ background-color: #ffffff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Ajouter une ombre à la colonne */ /* Couleur de fond de la colonne */
text-align: center; /* Centrer le contenu */ border-radius: 20px;
/* Arrondir les coins de la colonne */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
/* Ajouter une ombre à la colonne */
text-align: center;
/* Centrer le contenu */
} }

59
src/layouts/DefaultLayout.vue
View File

@@ -14,18 +14,24 @@
</div> </div>
<div class="menu-center flex space-x-12"> <div class="menu-center flex space-x-12">
<router-link :to="{ name: 'home' }" class="text-green-700"> <router-link :to="{ name: 'home' }" class="text-green-700">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8 text-custom"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
<path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" /> stroke="currentColor" class="w-8 h-8 text-custom">
<path stroke-linecap="round" stroke-linejoin="round"
d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
</svg> </svg>
</router-link> </router-link>
<router-link :to="{ name: 'contact' }" class="text-green-700"> <router-link :to="{ name: 'contact' }" class="text-green-700">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8 text-custom"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
<path stroke-linecap="round" stroke-linejoin="round" d="M18 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0ZM3 19.235v-.11a6.375 6.375 0 0 1 12.75 0v.109A12.318 12.318 0 0 1 9.374 21c-2.331 0-4.512-.645-6.374-1.766Z" /> stroke="currentColor" class="w-8 h-8 text-custom">
<path stroke-linecap="round" stroke-linejoin="round"
d="M18 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0ZM3 19.235v-.11a6.375 6.375 0 0 1 12.75 0v.109A12.318 12.318 0 0 1 9.374 21c-2.331 0-4.512-.645-6.374-1.766Z" />
</svg> </svg>
</router-link> </router-link>
<router-link :to="{ name: 'creatorfolio' }" class="text-green-700"> <router-link :to="{ name: 'creatorfolio' }" class="text-green-700">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8 text-custom"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" /> stroke="currentColor" class="w-8 h-8 text-custom">
<path stroke-linecap="round" stroke-linejoin="round"
d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
</svg> </svg>
</router-link> </router-link>
</div> </div>
@@ -58,43 +64,52 @@
} }
.text-custom { .text-custom {
color: #000000; /* Couleur de texte spécifique */ color: #000000;
/* Couleur de texte spécifique */
} }
/* CSS pour le texte du menu-left */ /* CSS pour le texte du menu-left */
.menu-left a { .menu-left a {
color: #000000; /* Couleur du texte */ color: #000000;
font-weight: bold; /* Gras */ /* Couleur du texte */
text-decoration: none; /* Pas de soulignement */ font-weight: bold;
font-size: 24px; /* Taille de la police en pixels */ /* Gras */
text-decoration: none;
/* Pas de soulignement */
font-size: 24px;
/* Taille de la police en pixels */
} }
/* CSS pour le texte des liens du menu-center */ /* CSS pour le texte des liens du menu-center */
.menu-center { .menu-center {
display: flex; display: flex;
justify-content: center; /* Centrer les éléments horizontalement */ justify-content: center;
align-items: center; /* Centrer les éléments verticalement */ /* Centrer les éléments horizontalement */
flex: 1; /* Utiliser tout l'espace disponible */ align-items: center;
/* Centrer les éléments verticalement */
flex: 1;
/* Utiliser tout l'espace disponible */
} }
/* CSS pour le texte du menu-right */ /* CSS pour le texte du menu-right */
.menu-right a { .menu-right a {
color: #e4e4e4; /* Couleur du texte */ color: #e4e4e4;
/* Couleur du texte */
} }
.bg-custom { .bg-custom {
background-color: #ffffff; /* Définissez la couleur de fond souhaitée */ background-color: #ffffff;
/* Définissez la couleur de fond souhaitée */
} }
.textLogo { .textLogo {
font-size: 35px; /* Taille de la police en pixels */ font-size: 35px;
/* Taille de la police en pixels */
} }
.logo { .logo {
margin-right: 5px; /* Réduire la marge entre le logo et le texte */ margin-right: 5px;
/* Réduire la marge entre le logo et le texte */
} }</style>
</style>

21
src/main.js
View File

@@ -1,17 +1,26 @@
import './assets/main.css' import './assets/main.css'
import { createApp } from 'vue' import { createApp } from 'vue'
import { createPinia } from 'pinia' import { createPinia } from 'pinia'
import App from './App.vue' import App from './App.vue'
import router from './router' import router from './router'
import axios from 'axios' import axios from 'axios'
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
axios.defaults.baseURL = 'http://127.0.0.1:8000' const vuetify = createVuetify({
components,
directives
});
const app = createApp(App) axios.defaults.baseURL = 'http://127.0.0.1:8000';
app.use(createPinia()) const app = createApp(App);
app.use(router, axios)
app.use(createPinia());
app.use(vuetify);
app.use(router, axios);
app.mount('#app') app.mount('#app')

23
src/views/LoginView.vue
View File

@@ -4,9 +4,15 @@
<div class="p-12 bg-white border border-gray-200 rounded-lg"> <div class="p-12 bg-white border border-gray-200 rounded-lg">
<h1 class="mb-6 text-2xl font-bold">Log in</h1> <h1 class="mb-6 text-2xl font-bold">Log in</h1>
<p class = "mb-6 texte-gray-500"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> <p class="mb-6 texte-gray-500"> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
took a galley of type and scrambled it to make a type specimen book. It has survived not only five
centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was
popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
<p class = "font-bold"> Don't have an account ? <RouterLink :to="{'name': 'signup'}" class="underline">Click here</RouterLink> to create one! </p> <p class="font-bold"> Don't have an account ? <RouterLink :to="{ 'name': 'signup' }" class="underline">Click
here</RouterLink> to create one! </p>
</div> </div>
</div> </div>
@@ -14,16 +20,17 @@
<div class="p-12 bg-white border border-gray-200 rounded-lg"> <div class="p-12 bg-white border border-gray-200 rounded-lg">
<form class="space-y-6"> <form class="space-y-6">
<div> <div>
<label>E-mail</label> <br> <label>E-mail</label> <br>
<input type="email" placeholder="Your e-mail adress" class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg"> <input type="email" placeholder="Your e-mail adress"
class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg">
</div> </div>
<div> <div>
<label>Password</label> <br> <label>Password</label> <br>
<input type="password" placeholder="Your password" class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg"> <input type="password" placeholder="Your password"
class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg">
</div> </div>
@@ -32,12 +39,6 @@
<button class="py-4 px-6 bg-purple-600 text-white rounded-lg"> Log in</button> <button class="py-4 px-6 bg-purple-600 text-white rounded-lg"> Log in</button>
</div> </div>
</form> </form>
</div> </div>
</div> </div>

25
src/views/SignupView.vue
View File

@@ -4,9 +4,15 @@
<div class="p-12 bg-white border border-gray-200 rounded-lg"> <div class="p-12 bg-white border border-gray-200 rounded-lg">
<h1 class="mb-6 text-2xl font-bold">Sign up</h1> <h1 class="mb-6 text-2xl font-bold">Sign up</h1>
<p class = "mb-6 texte-gray-500"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> <p class="mb-6 texte-gray-500"> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
took a galley of type and scrambled it to make a type specimen book. It has survived not only five
centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was
popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
<p class = "font-bold"> Already have an account ? <RouterLink :to="{'name': 'login'}" class="underline">Click here</RouterLink> to log in! </p> <p class="font-bold"> Already have an account ? <RouterLink :to="{ 'name': 'login' }" class="underline">Click
here</RouterLink> to log in! </p>
</div> </div>
</div> </div>
@@ -16,25 +22,29 @@
<div> <div>
<label>Name</label> <br> <label>Name</label> <br>
<input type="text" placeholder="Your full name" class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg"> <input type="text" placeholder="Your full name"
class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg">
</div> </div>
<div> <div>
<label>E-mail</label> <br> <label>E-mail</label> <br>
<input type="email" placeholder="Your e-mail adress" class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg"> <input type="email" placeholder="Your e-mail adress"
class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg">
</div> </div>
<div> <div>
<label>Password</label> <br> <label>Password</label> <br>
<input type="password" placeholder="Your password" class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg"> <input type="password" placeholder="Your password"
class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg">
</div> </div>
<div> <div>
<label>Repeat Password</label> <br> <label>Repeat Password</label> <br>
<input type="password" placeholder="Repeat your password" class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg"> <input type="password" placeholder="Repeat your password"
class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg">
</div> </div>
@@ -52,5 +62,4 @@
</div> </div>
</div> </div>
</div> </div></template>
</template>

9
src/views/main/HomeView.vue
View File

@@ -1,9 +1,6 @@
<template> <template>
<DefaultLayout></DefaultLayout> <DefaultLayout></DefaultLayout>
<main class="top-aligned-column"> <main class="top-aligned-column">
<div class="column"> <div class="column">
</div> </div>
@@ -15,11 +12,15 @@
<div class="column"> <div class="column">
</div> </div>
<v-btn variant="outlined">
Button
</v-btn>
</main> </main>
</template> </template>
<script setup> <script setup>
import DefaultLayout from '@/layouts/DefaultLayout.vue'; import DefaultLayout from '@/layouts/DefaultLayout.vue';
</script> </script>