Skip to content
Extraits de code Groupes Projets
Valider 7936d544 rédigé par Guillaume Schurck's avatar Guillaume Schurck
Parcourir les fichiers

add tailwind and daisyui

parent e74e8027
Branches master
Aucune étiquette associée trouvée
Aucune requête de fusion associée trouvée
Tout étendre Masquer les modifications d'espaces
En ligne Côte à côte
Affichage de
avec 969 ajouts et 183 suppressions
sg-frontend/index.html
+ 1
− 0
Voir le fichier @ 7936d544
......@@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link href="/dist/output.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Software Graph</title>
</head>
......
sg-frontend/package-lock.json
+ 858
− 92
Voir le fichier @ 7936d544
Ce diff est replié.
sg-frontend/package.json
+ 4
− 0
Voir le fichier @ 7936d544
......@@ -12,14 +12,18 @@
"devDependencies": {
"@sveltejs/vite-plugin-svelte": "^1.0.2",
"@tsconfig/svelte": "^3.0.0",
"autoprefixer": "^10.4.12",
"postcss": "^8.4.16",
"svelte": "^3.49.0",
"svelte-check": "^2.8.1",
"svelte-preprocess": "^4.10.7",
"tailwindcss": "^3.1.8",
"tslib": "^2.4.0",
"typescript": "^4.6.4",
"vite": "^3.1.0"
},
"dependencies": {
"daisyui": "^2.31.0",
"svelte-select": "^4.4.7"
}
}
sg-frontend/postcss.config.cjs 0 → 100644
+ 4
− 0
Voir le fichier @ 7936d544
module.exports = {
plugins: [require("tailwindcss"), require("autoprefixer")],
autoprefixer: {},
};
sg-frontend/src/App.svelte
+ 1
− 18
Voir le fichier @ 7936d544
......@@ -4,27 +4,10 @@
</script>
<main>
<Header />
<h1>Software Merger</h1>
<p>Find alternatives that have similar features between two softwares.</p>
<br />
<br />
<Header />
<SoftwareMerger />
</main>
<style>
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.svelte:hover {
filter: drop-shadow(0 0 2em #ff3e00aa);
}
.read-the-docs {
color: #888;
}
</style>
sg-frontend/src/app.css
+ 54
− 49
Voir le fichier @ 7936d544
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 400;
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
color: #535bf2;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
padding-top: 100px;
margin: 0;
display: flex;
justify-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
font-size: 3.2em;
line-height: 1.1;
}
.card {
padding: 2em;
padding: 2em;
}
#app {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
outline: 4px auto -webkit-focus-ring-color;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}
sg-frontend/src/components/Header.svelte
+ 17
− 17
Voir le fichier @ 7936d544
<div class="container">
<div class="container mb-10">
<div class="scrolling-words-container">
<div class="scrolling-words-box">
<ul>
<li style="color: #ea4335">Code</li>
<li style="color: #4285f4">Build</li>
<li style="color: #34a853">Create</li>
<li style="color: #fbbc04">Design</li>
<li style="color: #ea4335">Code</li>
<li style="color: #ea4335">Notion</li>
<li style="color: #4285f4">Word</li>
<li style="color: #34a853">Excel</li>
<li style="color: #ea4335">Notion</li>
<li style="color: #4285f4">Word</li>
</ul>
</div>
<span style="color: #5f6368">+</span>
<div class="scrolling-words-box">
<ul>
<li style="color: #ea4335">Code</li>
<li style="color: #4285f4">Build</li>
<li style="color: #34a853">Create</li>
<li style="color: #fbbc04">Design</li>
<li style="color: #ea4335">Code</li>
<li style="color: #ea4335">Word</li>
<li style="color: #4285f4">Trello</li>
<li style="color: #34a853">Notion</li>
<li style="color: #ea4335">Word</li>
<li style="color: #4285f4">Trello</li>
</ul>
</div>
<span style="color: #5f6368">=</span>
<div class="scrolling-words-box">
<ul>
<li style="color: #ea4335">Code</li>
<li style="color: #4285f4">Build</li>
<li style="color: #34a853">Create</li>
<li style="color: #fbbc04">Design</li>
<li style="color: #ea4335">Code</li>
<li style="color: #ea4335">Google Docs</li>
<li style="color: #4285f4">Notion</li>
<li style="color: #34a853">Google Sheets</li>
<li style="color: #ea4335">Google Docs</li>
<li style="color: #4285f4">Notion</li>
</ul>
</div>
</div>
......@@ -52,7 +52,7 @@
.scrolling-words-box ul {
margin: 0 0.625rem;
padding: 0;
animation: scrollUp 20s infinite;
animation: scrollUp 30s infinite;
}
.scrolling-words-box ul li {
display: flex;
......
sg-frontend/src/components/SoftwareMerger.svelte
+ 21
− 1
Voir le fichier @ 7936d544
......@@ -75,13 +75,33 @@
{/if}
<p>From {software1.label}</p>
<ul>
<!--
<ul class="list-disc">
{#each result as software}
<li>{software.name}</li>
{:else}
<p>No alternative in between</p>
{/each}
</ul>
-->
<div class="overflow-x-auto">
<table class="table w-full">
<thead>
<tr>
<th>Software</th>
</tr>
</thead>
<tbody>
{#each result as software}
<tr>
<td>{software.name}</td>
</tr>
{:else}
<p>No alternative in between</p>
{/each}
</tbody>
</table>
</div>
<p>To {software2.label}</p>
</div>
......
sg-frontend/src/components/SoftwareSelect.svelte
+ 1
− 1
Voir le fichier @ 7936d544
......@@ -30,7 +30,7 @@
<style>
form {
max-width: 400px;
max-width: 500px;
background: #f4f4f4;
padding: 20px;
border-radius: 4px;
......
sg-frontend/tailwind.config.cjs 0 → 100644
+ 4
− 0
Voir le fichier @ 7936d544
module.exports = {
content: ["./src/**/*.{svelte,js,ts}"],
plugins: [require("daisyui")],
};
sg-frontend/vite.config.ts
+ 4
− 5
Voir le fichier @ 7936d544
import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [svelte()]
})
plugins: [svelte()],
});
0% ou .
You are about to add 0 people to the discussion. Proceed with caution.
Terminez d'abord l'édition de ce message.
Veuillez vous inscrire ou vous pour commenter