8000 landing page setup · WilliamBostrom/Nuxt-vue@d4eb2a3 · GitHub
[go: up one dir, main page]
Skip 8000 to content

Commit d4eb2a3

Browse files
WilliamBostromWilliamBostrom
committed
landing page setup
1 parent 91e18da commit d4eb2a3

File tree

7 files changed

+1459
-2760
lines changed

7 files changed

+1459
-2760
lines changed

‎components/MenuDetails.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<template>
22
<div class="card">
33
<div class="grid grid-cols-2 gap-10">
4-
<div class="p-7">
5-
<img :src="recipe.image" alt="recipe image" class="mx-auto my-7" />
4+
<div class="p-7 mx-auto my-7">
5+
<img :src="recipe.image" alt="recipe image" />
66
</div>
77
<div class="p-7">
88
<h2 class="text-4xl my-7">{{ recipe.name }}</h2>

‎components/TodoList.vue

Lines changed: 13 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -38,15 +38,15 @@ function handleToggleTodo(id: number, value: boolean): void {
3838
</script>
3939

4040
<template>
41-
<div class="card">
41+
<div class="card border-2">
4242
<p v-if="type === 'isLoading'" class="state-text">Loading...</p>
4343
<p v-else-if="type === 'error'" class="state-text">{{ error }}</p>
4444
<div v-else-if="type === 'todos'" class="todo-list">
45-
<div bind:offsetHeight="{listDivScrollHeight}">
45+
<div>
4646
<p v-if="props.todos.length === 0" class="state-text">No todos yet</p>
4747
<ul>
4848
<li v-for="todo in props.todos" :key="todo.id">
49-
<div class="bg-gray-300" :class="todo.completed ? 'completed' : ''">
49+
<div class="card" :class="todo.completed ? 'completed' : ''">
5050
<label>
5151
<input
5252
type="checkbox"
@@ -72,18 +72,12 @@ function handleToggleTodo(id: number, value: boolean): void {
7272
</ul>
7373
</div>
7474
</div>
75-
<!-- .add-todo-form {
76-
padding: 15px;
77-
background-color: #303030;
78-
display: flex;
79-
flex-wrap: wrap;
80-
border-top: 1px solid #4b4b4b;
81-
} -->
82-
<form
83-
class="card p-[15px] flex flex-wrap border-t border-gray-50"
84-
@submit.prevent="handleAddTodo"
85-
>
86-
<input class="bg-gray-300" placeholder="New Todo" v-model="inputText" />
75+
<form class="card p-[15px] flex flex-wrap" @submit.prevent="handleAddTodo">
76+
<input
77+
class="bg-gray-50 focus:outline-none focus:ring-2 focus:ring-[#12b488]"
78+
placeholder="New Todo"
79+
v-model="inputText"
80+
/>
8781
<button class="btn" type="submit" :disabled="!inputText || disableAdding">
8882
Add
8983
</button>
@@ -92,11 +86,6 @@ function handleToggleTodo(id: number, value: boolean): void {
9286
</template>
9387

9488
<style scoped>
95-
/* .todo-list-wrapper {
96-
background-color: #424242;
97-
border: 2px solid #4b4b4b;
98-
border-radius: 5px;
99-
} */
10089
.state-text {
10190
margin: 0;
10291
padding: 15px;
@@ -153,13 +142,12 @@ input[type="checkbox"] {
153142
154143
input {
155144
flex: 1;
156-
border: 1px solid #4b4b4b;
157145
padding: 10px;
158-
color: #fff;
146+
color: black;
159147
border-radius: 5px;
160148
margin-right: 10px;
161149
}
162-
/* .add-todo-button:disabled {
163-
background-color: #42b883aa;
164-
} */
150+
input:focus {
151+
border: none;
152+
}
165153
</style>

‎nuxt.config.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
export default defineNuxtConfig({
33
compatibilityDate: "2024-11-01",
44
devtools: { enabled: true },
5-
modules: ["@nuxtjs/tailwindcss"],
5+
modules: ["@nuxtjs/tailwindcss", "@nuxt/image"],
66
app: {
77
head: {
88
title: "NuxtChas",
@@ -12,4 +12,4 @@ export default defineNuxtConfig({
1212
],
1313
},
1414
},
15-
});
15+
});

0 commit comments

Comments
 (0)
0