tailwind

2023-04-29 00:29:25 +02:00
parent 3f9393f09b
commit dc6f10afd8
19 changed files with 1673 additions and 153 deletions
--- a/.prettierrc
+++ b/.prettierrc
@@ -2,5 +2,8 @@
  "tabWidth": 2,
  "useTabs": false,
  "semi": false,
-  "singleQuote": true
+  "singleQuote": true,
+  "plugins": [
+    "prettier-plugin-tailwindcss"
+  ]
 }
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
    <title>Contexted</title>
  </head>
  <body>
-    <div id="app" class="bg-light"></div>
+    <div id="app" class="bg-gray-100"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -9,17 +9,23 @@
    "preview": "vite preview"
  },
  "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.4.0",
    "@popperjs/core": "^2.11.7",
    "@vueuse/core": "^10.1.0",
-    "bootstrap": "^5.3.0-alpha3",
    "bootstrap-icons": "^1.10.5",
    "firebase": "^9.20.0",
+    "font-awesome": "^4.7.0",
    "hamburgers": "^1.2.1",
    "vue": "^3.2.47"
  },
  "devDependencies": {
    "@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",
+    "tailwindcss": "^3.3.2",
    "typescript": "^5.0.2",
    "vite": "^4.3.2",
    "vue-tsc": "^1.4.2"
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/src/App.vue
+++ b/src/App.vue
@@ -20,39 +20,18 @@ const activeViewMode = ref(viewModes[0])
    :side-bar-collapsed="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
      :view-modes="viewModes"
      :active-view-mode="activeViewMode"
      @set-view-mode="(viewMode) => (activeViewMode = viewMode)"
-      class="py-3"
-      style="margin-top: 50px"
+      class="mt-[50px] px-3 py-6"
    />
-    <div
-      id="main"
-      class="bg-white border-start border-end px-4 py-3"
-      :class="{ 'side-bar-collapsed': sideBarCollapsed }"
+    <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="sideBarCollapsed ? 'ml-0' : 'ml-sidebar'"
    >
      <Note v-if="activeNote" :note="activeNote" />
-    </div>
+    </main>
  </div>
 </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>
--- a/src/assets/_variables.scss
+++ b/src/assets/_variables.scss
@@ -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;
--- a/src/assets/style.scss
+++ b/src/assets/style.scss
@@ -1,14 +0,0 @@
-@import 'bootstrap/scss/functions';
-@import './_variables';
-@import 'bootstrap/scss/bootstrap';
-
-body,
-body > div,
-html {
-  height: 100%;
-}
-
-body {
-  overflow-y: scroll;
-}
-
--- a/src/components/Hamburger.vue
+++ b/src/components/Hamburger.vue
@@ -20,13 +20,13 @@ const emit = defineEmits<{
  </button>
 </template>
 <style scoped lang="scss">
-$hamburger-layer-color: $white;
+$hamburger-layer-color: white;
 $hamburger-layer-width: 25px;
 $hamburger-layer-height: 3px;
 $hamburger-layer-spacing: 3px;
 $hamburger-padding-x: 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';
@if index($hamburger-types, spin-r) {
--- a/src/components/Logo.vue
+++ b/src/components/Logo.vue
@@ -0,0 +1,3 @@
+<template>
+  <i class="fa-brands fa-staylinked"></i>
+</template>
--- a/src/components/Note.vue
+++ b/src/components/Note.vue
@@ -4,13 +4,9 @@ defineProps<{
 }>()
 </script>
 <template>
-  <h1 class="d-flex align-items-center">
-    <i class="root bi bi-house text-body-tertiary me-2" v-if="note.isRoot"></i>{{ note.title }}
+  <h1 class="flex items-center text-3xl pb-2">
+    <i class="bi bi-house mr-2 text-secondary text-base" v-if="note.isRoot"></i
+    >{{ note.title }}
  </h1>
  <div>{{ note.content }}</div>
 </template>
-<style scoped>
-i.root {
-  font-size: 50%;
-}
-</style>
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -13,7 +13,10 @@ const emit = defineEmits<{
 }>()
 </script>
 <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>
      <template #header>Root note</template>
      <template #items>
@@ -40,10 +43,3 @@ const emit = defineEmits<{
    </SideBarMenu>
  </div>
 </template>
-<style lang="scss">
-#sidebar {
-  gap: 1rem;
-  overflow-y: auto;
-  width: $sidebar-width;
-}
-</style>
--- a/src/components/SideBar/SideBarMenu.vue
+++ b/src/components/SideBar/SideBarMenu.vue
@@ -1,13 +1,8 @@
 <template>
  <div>
-    <div class="text-uppercase fw-semibold header text-body-secondary">
+    <div class="text-sm font-semibold uppercase text-secondary">
      <slot name="header"></slot>
    </div>
    <slot name="items"></slot>
  </div>
 </template>
-<style scoped>
-.header {
-  font-size: 0.9rem;
-}
-</style>
--- a/src/components/SideBar/SideBarMenuItem.vue
+++ b/src/components/SideBar/SideBarMenuItem.vue
@@ -6,19 +6,10 @@ const props = defineProps<{
 </script>
 <template>
  <a
-    class="text-decoration-none w-100 d-block"
-    :class="props.active ? 'link-primary fw-bolder' : 'link-secondary'"
+    class="mt-1 block w-full cursor-pointer rounded hover:bg-gray-200"
+    :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>
  </a>
 </template>
-<style scoped lang="scss">
-a {
-  cursor: pointer;
-  border-radius: var(--bs-border-radius);
-}
-a:hover {
-  background-color: var(--bs-gray-300);
-}
-</style>
--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import Hamburger from './Hamburger.vue'
+import Logo from './Logo.vue'
 const props = defineProps<{
  sideBarCollapsed: boolean
 }>()
@@ -9,25 +10,16 @@ const emit = defineEmits<{
 }>()
 </script>
 <template>
-  <div
-    id="topbar"
-    class="bg-primary position-absolute top-0 start-0 end-0 d-flex"
-    style="height: 50px"
-  >
-    <div id="topbar-container" class="g-3 h-100 d-flex align-items-center text-white mx-auto">
-      <Hamburger
-        class="me-3"
-        :side-bar-collapsed="props.sideBarCollapsed"
-        @toggle-side-bar="emit('toggleSideBar')"
-      /><span>Contexted</span>
+  <div class="absolute left-0 right-0 top-0 z-[500] flex h-[50px] bg-primary">
+    <div class="mx-auto flex w-full max-w-app items-center gap-3 text-white">
+      <div class="flex w-sidebar items-center pl-3">
+        <Hamburger
+          :side-bar-collapsed="props.sideBarCollapsed"
+          @toggle-side-bar="emit('toggleSideBar')"
+        />
+        <Logo class="ml-auto text-2xl" />
+      </div>
+      <div class="mr-3 flex-1 bg-gray-800">hey</div>
    </div>
  </div>
 </template>
-<style scoped lang="scss">
-#topbar {
-  z-index: 500;
-}
-#topbar-container {
-  max-width: $app-width;
-}
-</style>
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,5 +1,7 @@
 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 App from './App.vue'
 import { setDefaultNotes } from './composables/useNotes'
--- a/src/style.css
+++ b/src/style.css
@@ -0,0 +1,13 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body,
+body > div,
+html {
+  height: 100%;
+}
+
+body {
+  overflow-y: auto;
+}
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -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: [],
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -4,13 +4,4 @@ import vue from '@vitejs/plugin-vue'
 // https://vitejs.dev/config/
 export default defineConfig({
  plugins: [vue()],
-  css: {
-    preprocessorOptions: {
-      scss: {
-        additionalData: `
-          @import "./src/assets/_variables.scss";
-        `,
-      },
-    },
-  },
 })