Skip to content

Commit 8c19beb

Browse files
xrayianxrayian
committed
added tailwind, ui is chaos
1 parent 498624f commit 8c19beb

12 files changed

+773
-80
lines changed

‎package-lock.json

+649
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+3
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,12 @@
2222
"@vitejs/plugin-vue": "^2.3.3",
2323
"@vue/eslint-config-typescript": "^11.0.0",
2424
"@vue/tsconfig": "^0.1.3",
25+
"autoprefixer": "^10.4.7",
2526
"eslint": "^8.5.0",
2627
"eslint-plugin-vue": "^9.0.0",
2728
"npm-run-all": "^4.1.5",
29+
"postcss": "^8.4.14",
30+
"tailwindcss": "^3.1.3",
2831
"typescript": "~4.7.2",
2932
"unplugin-auto-import": "^0.8.8",
3033
"unplugin-vue-components": "^0.19.6",

‎postcss.config.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
}

‎src/App.vue

+22-2
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@ import FooterMenu from './components/FooterMenu.vue';
55
</script>
66

77
<template>
8-
<el-container>
8+
<el-container class="flex flex-col h-screen">
99
<el-header>
1010
<nav-menu />
1111
</el-header>
12-
<el-main>
12+
<el-main class="flex-grow">
1313
<RouterView />
1414
</el-main>
1515
<el-footer>
@@ -24,4 +24,24 @@ import FooterMenu from './components/FooterMenu.vue';
2424
:root {
2525
font-family: 'Poppins', sans-serif;
2626
}
27+
28+
*::-webkit-scrollbar {
29+
width: 8px;
30+
}
31+
32+
*::-webkit-scrollbar-track {
33+
border-radius: 100vh;
34+
background: var(--el-color-primary-light-9);
35+
}
36+
37+
*::-webkit-scrollbar-thumb {
38+
background: var(--el-color-primary-light-3);
39+
40+
border-radius: 100vh;
41+
/* border: 3px solid #f6f7ed; */
42+
}
43+
44+
*::-webkit-scrollbar-thumb:hover {
45+
background: var(--el-color-primary);
46+
}
2747
</style>

‎src/components/FooterMenu.vue

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<template>
2-
<p>
3-
Study Management Helper by <el-link target="_blank" href="https://www.rayianmahi.com">Rayian Mahi</el-link>
2+
<p class="text-right m-5 text-base">
3+
Study Management Helper by <a class='text-indigo-400' target="_blank" href="https://www.rayianmahi.com">Rayian
4+
Mahi</a>
45
</p>
56
</template>

‎src/components/NavMenu.vue

+2-13
Original file line numberDiff line numberDiff line change
@@ -6,21 +6,10 @@
66

77
<template>
88
<el-menu mode="horizontal" :ellipsis="false" router>
9-
<p class="logo">Amar Progress</p>
9+
<p class="my-4 ml-2">Amar Progress</p>
1010
<div class="flex-grow"></div>
1111
<el-menu-item index="0" :route="{ name: 'home' }"> Home </el-menu-item>
1212
<el-menu-item index="1" :route="{ name: 'progress-control' }"> Progress </el-menu-item>
1313
<el-menu-item index="2" :route="{ name: 'about' }"> About </el-menu-item>
1414
</el-menu>
15-
</template>
16-
17-
<style scoped>
18-
.flex-grow {
19-
flex-grow: 1;
20-
}
21-
22-
.logo {
23-
font-size: 1.0em;
24-
padding-left: 1em;
25-
}
26-
</style>
15+
</template>

‎src/index.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;

‎src/main.ts

+1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { createApp } from "vue";
22
import ElementPlus from "element-plus";
33
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
44
import "element-plus/dist/index.css";
5+
import "./index.css";
56
import App from "./App.vue";
67
import router from "./router";
78

‎src/views/AboutView.vue

+20-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,24 @@
11
<template>
2-
<el-container>
2+
<div class="container">
33
<el-main>
4-
<h1>About Page</h1>
5-
<p>This is a progress tracking app for students. Get started by making a new account!</p>
4+
<h1 class="text-6xl mb-5">About Us</h1>
5+
<p class="text-sm mb-10"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis quae
6+
consectetur
7+
vero, quam
8+
consequuntur, quos eveniet exercitationem accusantium, sit adipisci dolore. Laborum, consequatur
9+
provident? Rem odit tenetur placeat pariatur quas.</p>
10+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam, at hic non expedita labore minus eum,
11+
consequuntur ex assumenda incidunt aperiam odit atque nemo cumque. Ut eos ducimus optio neque adipisci
12+
quidem temporibus officiis perspiciatis reiciendis placeat fuga id, dolor inventore quaerat rem
13+
aspernatur tenetur velit dolores, iste voluptates qui veritatis ullam minus. Officia nihil modi
14+
voluptatum in eaque neque, quia harum. Sequi quaerat eligendi quidem, quos illum dolore reiciendis
15+
temporibus maiores, recusandae fuga, consectetur quam ipsa et magnam inventore reprehenderit suscipit
16+
veritatis? Praesentium dicta repudiandae velit ipsa iste consequuntur veniam beatae aliquam! Debitis
17+
officia quas velit delectus harum quisquam doloribus cumque molestias nemo eum! Nam esse facilis,
18+
nostrum, perferendis consectetur nesciunt in tempora expedita, eaque quas suscipit adipisci labore quo
19+
aliquid repellat aut unde delectus omnis saepe reiciendis. Quae itaque cum provident molestiae
20+
asperiores consectetur officia perspiciatis cumque. Officiis fuga, iure autem nulla in nemo
21+
reprehenderit ipsam facilis rerum.</p>
622
</el-main>
7-
</el-container>
23+
</div>
824
</template>

‎src/views/HomeView.vue

+3-3
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
</script>
33

44
<template>
5-
<el-container>
5+
<div class="container">
66
<el-main>
7-
<h1>Hello World!</h1>
7+
<h1 class="text-6xl pb-5">Hello World!</h1>
88
<p>This is a progress tracking app for students. Get started by making a new account!</p>
99
</el-main>
10-
</el-container>
10+
</div>
1111
</template>

‎src/views/ProgressControl.vue

+52-56
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const item = ref({
88
progress: true,
99
})
1010
const activeSubject = ref('Bangla 1st Paper')
11-
const tableData = ref(Array.from({ length: 20 }).fill(item.value))
11+
const tableData = ref(Array.from({ length: 12 }).fill(item.value))
1212
const handleOpen = (key: string, keyPath: string[]) => {
1313
console.log(key, keyPath)
1414
}
@@ -25,63 +25,62 @@ const handleSelect = (key: string, keyPath: string[]) => {
2525

2626

2727
<template>
28-
<el-container>
29-
<el-aside width="350px">
28+
<div class="flex flex-row gap-2">
29+
<div class="w-100">
30+
<el-menu :default-openeds="['1', '2']" default-active="bangla-1" @open="handleOpen" @close="handleClose"
31+
@select="handleSelect">
32+
<el-sub-menu index="1">
33+
<template #title>
34+
<el-icon>
35+
<Management />
36+
</el-icon>Basic
37+
</template>
38+
<el-menu-item index="bangla-1">Bengali 1st Paper</el-menu-item>
39+
<el-menu-item index="bangla-2">Bengali 2nd Paper</el-menu-item>
40+
<el-menu-item index="english-1">English 1st Paper</el-menu-item>
41+
<el-menu-item index="english-2">English 2nd Paper</el-menu-item>
42+
</el-sub-menu>
43+
<el-sub-menu index="2">
44+
<template #title>
45+
<el-icon>
46+
<Magnet />
47+
</el-icon>
48+
Science
49+
</template>
50+
<el-menu-item index="physics-1">Physics 1st Paper</el-menu-item>
51+
<el-menu-item index="physics-2">Physics 2nd Paper</el-menu-item>
52+
<el-menu-item index="chemistry-1">Chemistry 1st Paper</el-menu-item>
53+
<el-menu-item index="chemistry-2">Chemistry 2nd Paper</el-menu-item>
54+
<el-menu-item index="higher-maths-1">Higher-Maths 1st Paper</el-menu-item>
55+
<el-menu-item index="higher-maths-2">Higher-Maths 2nd Paper</el-menu-item>
56+
<el-menu-item-group title="Fourth Subjects">
57+
<el-menu-item index="biology-1">Biology 1st Paper</el-menu-item>
58+
<el-menu-item index="biology-2">Biology 2nd Paper</el-menu-item>
59+
</el-menu-item-group>
60+
</el-sub-menu>
61+
</el-menu>
62+
</div>
63+
<div class="grow">
64+
<el-header>
65+
<h3 class="text-right text-xl">{{ activeSubject }}</h3>
66+
</el-header>
3067
<el-scrollbar>
31-
<el-menu :default-openeds="['1', '2']" default-active="bangla-1" @open="handleOpen" @close="handleClose"
32-
@select="handleSelect">
33-
<el-sub-menu index="1">
34-
<template #title>
35-
<el-icon>
36-
<Management />
37-
</el-icon>Basic
38-
</template>
39-
<el-menu-item index="bangla-1">Bengali 1st Paper</el-menu-item>
40-
<el-menu-item index="bangla-2">Bengali 2nd Paper</el-menu-item>
41-
<el-menu-item index="english-1">English 1st Paper</el-menu-item>
42-
<el-menu-item index="english-2">English 2nd Paper</el-menu-item>
43-
</el-sub-menu>
44-
<el-sub-menu index="2">
45-
<template #title>
46-
<el-icon>
47-
<Magnet />
48-
</el-icon>
49-
Science
50-
</template>
51-
<el-menu-item index="physics-1">Physics 1st Paper</el-menu-item>
52-
<el-menu-item index="physics-2">Physics 2nd Paper</el-menu-item>
53-
<el-menu-item index="chemistry-1">Chemistry 1st Paper</el-menu-item>
54-
<el-menu-item index="chemistry-2">Chemistry 2nd Paper</el-menu-item>
55-
<el-menu-item index="higher-maths-1">Higher-Maths 1st Paper</el-menu-item>
56-
<el-menu-item index="higher-maths-2">Higher-Maths 2nd Paper</el-menu-item>
57-
<el-menu-item-group title="Fourth Subjects">
58-
<el-menu-item index="biology-1">Biology 1st Paper</el-menu-item>
59-
<el-menu-item index="biology-2">Biology 2nd Paper</el-menu-item>
60-
</el-menu-item-group>
61-
</el-sub-menu>
62-
</el-menu>
68+
<el-table :data="tableData">
69+
<el-table-column prop="chapter_number" label="Chapter #" width="100px" />
70+
<el-table-column prop="chapter_name" label="Name" width="400px" />
71+
<el-table-column prop="progress" label="Progress" />
72+
</el-table>
6373
</el-scrollbar>
64-
</el-aside>
65-
66-
<el-container>
67-
<el-main>
68-
<el-header>
69-
<h3>{{ activeSubject }}</h3>
70-
</el-header>
71-
<el-scrollbar>
72-
<el-table :data="tableData">
73-
<el-table-column prop="chapter_number" label="Chapter #" width="100px" />
74-
<el-table-column prop="chapter_name" label="Name" width="400px" />
75-
<el-table-column prop="progress" label="progress" />
76-
</el-table>
77-
</el-scrollbar>
78-
</el-main>
79-
</el-container>
80-
</el-container>
74+
</div>
75+
</div>
8176
</template>
8277

8378

8479
<style scoped>
80+
* {
81+
border-radius: 10px !important;
82+
}
83+
8584
/* .layout-container-demo .el-header {
8685
position: relative;
8786
background-color: var(--el-color-primary-light-7);
@@ -90,16 +89,13 @@ const handleSelect = (key: string, keyPath: string[]) => {
9089
9190
.el-aside {
9291
color: var(--el-text-color-primary);
93-
background: var(--el-color-primary-light-8);
92+
/* background: var(--el-color-primary-light-8); */
9493
}
9594
9695
.el-menu {
9796
border-right: none;
9897
}
9998
100-
.el-main {
101-
padding: 0;
102-
}
10399
104100
.toolbar {
105101
display: inline-flex;

‎tailwind.config.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/* eslint-disable no-undef */
2+
/** @type {import('tailwindcss').Config} */
3+
module.exports = {
4+
content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
5+
theme: {
6+
extend: {},
7+
},
8+
plugins: [],
9+
};

0 commit comments

Comments
 (0)