marco/contexted-v3
1
0
Fork 0
Code Issues 7 Pull Requests Packages Projects 1 Releases Wiki Activity

tailwind

Browse Source
This commit is contained in:
Marco Crapts
2023-04-29 00:29:25 +02:00
parent 3f9393f09b
commit dc6f10afd8
19 changed files with 1673 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.prettierrc
View File

@@ -2,5 +2,8 @@
"tabWidth": 2, "tabWidth": 2,
"useTabs": false, "useTabs": false,
"semi": false, "semi": false,
"singleQuote": true "singleQuote": true,
"plugins": [
"prettier-plugin-tailwindcss"
]
} }

2
index.html
View File

@@ -7,7 +7,7 @@
<title>Contexted</title> <title>Contexted</title>
</head> </head>
<body> <body>
<div id="app" class="bg-light"></div> <div id="app" class="bg-gray-100"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>
</html> </html>

1600
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

8
package.json
View File

@@ -9,17 +9,23 @@
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-free": "^6.4.0",
"@popperjs/core": "^2.11.7", "@popperjs/core": "^2.11.7",
"@vueuse/core": "^10.1.0", "@vueuse/core": "^10.1.0",
"bootstrap": "^5.3.0-alpha3",
"bootstrap-icons": "^1.10.5", "bootstrap-icons": "^1.10.5",
"firebase": "^9.20.0", "firebase": "^9.20.0",
"font-awesome": "^4.7.0",
"hamburgers": "^1.2.1", "hamburgers": "^1.2.1",
"vue": "^3.2.47" "vue": "^3.2.47"
}, },
"devDependencies": { "devDependencies": {
"@vitejs/plugin-vue": "^4.1.0", "@vitejs/plugin-vue": "^4.1.0",
"autoprefixer": "^10.4.14",
"postcss": "^8.4.23",
"prettier": "^2.8.8",
"prettier-plugin-tailwindcss": "^0.2.8",
"sass": "^1.62.1", "sass": "^1.62.1",
"tailwindcss": "^3.3.2",
"typescript": "^5.0.2", "typescript": "^5.0.2",
"vite": "^4.3.2", "vite": "^4.3.2",
"vue-tsc": "^1.4.2" "vue-tsc": "^1.4.2"

6
postcss.config.js Normal file
View File

@@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

33
src/App.vue
View File

@@ -20,39 +20,18 @@ const activeViewMode = ref(viewModes[0])
:side-bar-collapsed="sideBarCollapsed" :side-bar-collapsed="sideBarCollapsed"
@toggle-side-bar="sideBarCollapsed = !sideBarCollapsed" @toggle-side-bar="sideBarCollapsed = !sideBarCollapsed"
/> />
<div id="app-container" class="g-3 position-relative d-flex h-100 mx-auto"> <div class="relative mx-auto flex h-full max-w-app">
<SideBar <SideBar
:view-modes="viewModes" :view-modes="viewModes"
:active-view-mode="activeViewMode" :active-view-mode="activeViewMode"
@set-view-mode="(viewMode) => (activeViewMode = viewMode)" @set-view-mode="(viewMode) => (activeViewMode = viewMode)"
class="py-3" class="mt-[50px] px-3 py-6"
style="margin-top: 50px"
/> />
<div <main
id="main" class="transition[margin-left] absolute bottom-0 right-0 top-[50px] flex-1 overflow-auto border-x-[1px] bg-white px-10 py-6 duration-200 ease-out"
class="bg-white border-start border-end px-4 py-3" :class="sideBarCollapsed ? 'ml-0' : 'ml-sidebar'"
:class="{ 'side-bar-collapsed': sideBarCollapsed }"
> >
<Note v-if="activeNote" :note="activeNote" /> <Note v-if="activeNote" :note="activeNote" />
</div> </main>
</div> </div>
</template> </template>
<style scoped lang="scss">
#app-container {
max-width: $app-width;
}
#main {
overflow: auto;
flex: 1 1 0;
position: absolute;
top: 50px;
left: 0;
right: 0;
bottom: 0;
margin-left: $sidebar-width;
transition: margin $transition-duration ease-out;
&.side-bar-collapsed {
margin-left: 0;
}
}
</style>

20
src/assets/_variables.scss
View File

@@ -1,20 +0,0 @@
$primary: #1e4bc4;
$white: #fff !default;
$transition-duration: 0.2s;
$sidebar-width: 220px;
$app-width: 1260px;
// $grid-breakpoints: (
// xs: 0,
// sm: 576px,
// md: 768px,
// lg: 992px,
// xl: 1200px,
// // xxl: 1400px,
// ) !default;
// $container-max-widths: (
// sm: 540px,
// md: 720px,
// lg: 960px,
// xl: 1140px,
// // xxl: 1320px,
// ) !default;

14
src/assets/style.scss
View File

@@ -1,14 +0,0 @@
@import 'bootstrap/scss/functions';
@import './_variables';
@import 'bootstrap/scss/bootstrap';
body,
body > div,
html {
height: 100%;
}
body {
overflow-y: scroll;
}

4
src/components/Hamburger.vue
View File

@@ -20,13 +20,13 @@ const emit = defineEmits<{
</button> </button>
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">
$hamburger-layer-color: $white; $hamburger-layer-color: white;
$hamburger-layer-width: 25px; $hamburger-layer-width: 25px;
$hamburger-layer-height: 3px; $hamburger-layer-height: 3px;
$hamburger-layer-spacing: 3px; $hamburger-layer-spacing: 3px;
$hamburger-padding-x: 0px; $hamburger-padding-x: 0px;
$hamburger-padding-y: 0px; $hamburger-padding-y: 0px;
$hamburger-scale-speed: calc($transition-duration/.22s); $hamburger-scale-speed: calc(200ms / 0.22s);
@import 'hamburgers/_sass/hamburgers/hamburgers.scss'; @import 'hamburgers/_sass/hamburgers/hamburgers.scss';
@if index($hamburger-types, spin-r) { @if index($hamburger-types, spin-r) {

3
src/components/Logo.vue Normal file
View File

@@ -0,0 +1,3 @@
<template>
<i class="fa-brands fa-staylinked"></i>
</template>

10
src/components/Note.vue
View File

@@ -4,13 +4,9 @@ defineProps<{
}>() }>()
</script> </script>
<template> <template>
<h1 class="d-flex align-items-center"> <h1 class="flex items-center text-3xl pb-2">
<i class="root bi bi-house text-body-tertiary me-2" v-if="note.isRoot"></i>{{ note.title }} <i class="bi bi-house mr-2 text-secondary text-base" v-if="note.isRoot"></i
>{{ note.title }}
</h1> </h1>
<div>{{ note.content }}</div> <div>{{ note.content }}</div>
</template> </template>
<style scoped>
i.root {
font-size: 50%;
}
</style>

12
src/components/SideBar.vue
View File

@@ -13,7 +13,10 @@ const emit = defineEmits<{
}>() }>()
</script> </script>
<template> <template>
<div id="sidebar" class="position-relative pe-3 d-flex flex-column"> <div
id="sidebar"
class="relative flex w-sidebar flex-col gap-4 overflow-y-auto px-2 py-3"
>
<SideBarMenu> <SideBarMenu>
<template #header>Root note</template> <template #header>Root note</template>
<template #items> <template #items>
@@ -40,10 +43,3 @@ const emit = defineEmits<{
</SideBarMenu> </SideBarMenu>
</div> </div>
</template> </template>
<style lang="scss">
#sidebar {
gap: 1rem;
overflow-y: auto;
width: $sidebar-width;
}
</style>

7
src/components/SideBar/SideBarMenu.vue
View File

@@ -1,13 +1,8 @@
<template> <template>
<div> <div>
<div class="text-uppercase fw-semibold header text-body-secondary"> <div class="text-sm font-semibold uppercase text-secondary">
<slot name="header"></slot> <slot name="header"></slot>
</div> </div>
<slot name="items"></slot> <slot name="items"></slot>
</div> </div>
</template> </template>
<style scoped>
.header {
font-size: 0.9rem;
}
</style>

15
src/components/SideBar/SideBarMenuItem.vue
View File

@@ -6,19 +6,10 @@ const props = defineProps<{
</script> </script>
<template> <template>
<a <a
class="text-decoration-none w-100 d-block" class="mt-1 block w-full cursor-pointer rounded hover:bg-gray-200"
:class="props.active ? 'link-primary fw-bolder' : 'link-secondary'" :class="props.active ? 'font-bold text-primary' : 'text-secondary'"
> >
<i :class="`bi bi-${props.icon}`" class="me-2" v-if="props.icon"></i <i :class="`bi bi-${props.icon}`" class="mr-2" v-if="props.icon"></i
><slot></slot> ><slot></slot>
</a> </a>
</template> </template>
<style scoped lang="scss">
a {
cursor: pointer;
border-radius: var(--bs-border-radius);
}
a:hover {
background-color: var(--bs-gray-300);
}
</style>

24
src/components/TopBar.vue
View File

@@ -1,5 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import Hamburger from './Hamburger.vue' import Hamburger from './Hamburger.vue'
import Logo from './Logo.vue'
const props = defineProps<{ const props = defineProps<{
sideBarCollapsed: boolean sideBarCollapsed: boolean
}>() }>()
@@ -9,25 +10,16 @@ const emit = defineEmits<{
}>() }>()
</script> </script>
<template> <template>
<div <div class="absolute left-0 right-0 top-0 z-[500] flex h-[50px] bg-primary">
id="topbar" <div class="mx-auto flex w-full max-w-app items-center gap-3 text-white">
class="bg-primary position-absolute top-0 start-0 end-0 d-flex" <div class="flex w-sidebar items-center pl-3">
style="height: 50px"
>
<div id="topbar-container" class="g-3 h-100 d-flex align-items-center text-white mx-auto">
<Hamburger <Hamburger
class="me-3"
:side-bar-collapsed="props.sideBarCollapsed" :side-bar-collapsed="props.sideBarCollapsed"
@toggle-side-bar="emit('toggleSideBar')" @toggle-side-bar="emit('toggleSideBar')"
/><span>Contexted</span> />
<Logo class="ml-auto text-2xl" />
</div>
<div class="mr-3 flex-1 bg-gray-800">hey</div>
</div> </div>
</div> </div>
</template> </template>
<style scoped lang="scss">
#topbar {
z-index: 500;
}
#topbar-container {
max-width: $app-width;
}
</style>

4
src/main.ts
View File

@@ -1,5 +1,7 @@
import { createApp } from 'vue' import { createApp } from 'vue'
import './assets/style.scss' // import './assets/style.scss'
import './style.css'
import '@fortawesome/fontawesome-free/css/all.min.css'
import 'bootstrap-icons/font/bootstrap-icons.css' import 'bootstrap-icons/font/bootstrap-icons.css'
import App from './App.vue' import App from './App.vue'
import { setDefaultNotes } from './composables/useNotes' import { setDefaultNotes } from './composables/useNotes'

13
src/style.css Normal file
View File

@@ -0,0 +1,13 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
body,
body > div,
html {
height: 100%;
}
body {
overflow-y: auto;
}

31
tailwind.config.js Normal file
View File

@@ -0,0 +1,31 @@
const colors = require('tailwindcss/colors')
const appWidth = '1280px'
const sideBarWidth = '220px'
/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
theme: {
extend: {
colors: {
primary: '#1e4bc4',
secondary: 'red',
},
colors: {
primary: '#1e4bc4',
secondary: colors.gray[500],
},
maxWidth: {
app: appWidth,
sidebar: sideBarWidth,
},
width: {
sidebar: sideBarWidth,
},
margin: {
sidebar: sideBarWidth,
},
},
},
plugins: [],
}

9
vite.config.ts
View File

@@ -4,13 +4,4 @@ import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [vue()], plugins: [vue()],
css: {
preprocessorOptions: {
scss: {
additionalData: `
@import "./src/assets/_variables.scss";
`,
},
},
},
}) })