diff --git a/README.md b/README.md index 56e6731c..7c082496 100644 --- a/README.md +++ b/README.md @@ -5,14 +5,14 @@ Project setup is based on [cookiecutter-django](https://github.com/cookiecutter/ ## Run for development ```bash -# run tailwind cli (on project root folder!) -npm run tailwind - # run vue vite dev server cd client && npm run dev # reset db and run django dev server ./prepare_server.sh + +# run tailwind cli (for tailwind support on django templates) +cd client && npm run tailwind ``` ## Installation @@ -61,7 +61,7 @@ npm run dev ### General part -Cypress and TailwindCSS ist installed for client and server, so there is this package.json on the project root directory +Cypress is installed for client and server, so there is this package.json on the project root directory ```bash # in project root directory diff --git a/client/cypress/fixtures/example.json b/client/cypress/fixtures/example.json deleted file mode 100644 index 02e42543..00000000 --- a/client/cypress/fixtures/example.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "name": "Using fixtures to represent data", - "email": "hello@cypress.io", - "body": "Fixtures are a great way to mock data for responses to routes" -} diff --git a/client/cypress/integration/example.spec.ts b/client/cypress/integration/example.spec.ts deleted file mode 100644 index 7a8c909f..00000000 --- a/client/cypress/integration/example.spec.ts +++ /dev/null @@ -1,8 +0,0 @@ -// https://docs.cypress.io/api/introduction/api.html - -describe('My First Test', () => { - it('visits the app root url', () => { - cy.visit('/') - cy.contains('h1', 'You did it!') - }) -}) diff --git a/client/cypress/plugins/index.ts b/client/cypress/plugins/index.ts deleted file mode 100644 index c6679b40..00000000 --- a/client/cypress/plugins/index.ts +++ /dev/null @@ -1,19 +0,0 @@ -/* eslint-env node */ -// *********************************************************** -// This example plugins/index.ts can be used to load plugins -// -// You can change the location of this file or turn off loading -// the plugins file with the 'pluginsFile' configuration option. -// -// You can read more here: -// https://on.cypress.io/plugins-guide -// *********************************************************** - -// This function is called when a project is opened or re-opened (e.g. due to -// the project's config changing) - -export default ((on, config) => { - // `on` is used to hook into various events Cypress emits - // `config` is the resolved Cypress config - return config -}) as Cypress.PluginConfig diff --git a/client/cypress/plugins/tsconfig.json b/client/cypress/plugins/tsconfig.json deleted file mode 100644 index b5aedd53..00000000 --- a/client/cypress/plugins/tsconfig.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "extends": "@vue/tsconfig/tsconfig.node.json", - "include": ["./**/*"], - "compilerOptions": { - "module": "CommonJS", - "preserveValueImports": false, - "types": ["node", "cypress/types/cypress"] - } -} diff --git a/client/cypress/support/commands.ts b/client/cypress/support/commands.ts deleted file mode 100644 index 119ab03f..00000000 --- a/client/cypress/support/commands.ts +++ /dev/null @@ -1,25 +0,0 @@ -// *********************************************** -// This example commands.js shows you how to -// create various custom commands and overwrite -// existing commands. -// -// For more comprehensive examples of custom -// commands please read more here: -// https://on.cypress.io/custom-commands -// *********************************************** -// -// -// -- This is a parent command -- -// Cypress.Commands.add('login', (email, password) => { ... }) -// -// -// -- This is a child command -- -// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... }) -// -// -// -- This is a dual command -- -// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... }) -// -// -// -- This will overwrite an existing command -- -// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... }) diff --git a/client/cypress/support/index.ts b/client/cypress/support/index.ts deleted file mode 100644 index d68db96d..00000000 --- a/client/cypress/support/index.ts +++ /dev/null @@ -1,20 +0,0 @@ -// *********************************************************** -// This example support/index.js is processed and -// loaded automatically before your test files. -// -// This is a great place to put global configuration and -// behavior that modifies Cypress. -// -// You can change the location of this file or turn off -// automatically serving support files with the -// 'supportFile' configuration option. -// -// You can read more here: -// https://on.cypress.io/configuration -// *********************************************************** - -// Import commands.js using ES2015 syntax: -import './commands' - -// Alternatively you can use CommonJS syntax: -// require('./commands') diff --git a/client/cypress/tsconfig.json b/client/cypress/tsconfig.json deleted file mode 100644 index a2dbf9e3..00000000 --- a/client/cypress/tsconfig.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "extends": "@vue/tsconfig/tsconfig.web.json", - "include": ["./integration/**/*", "./support/**/*"], - "compilerOptions": { - "isolatedModules": false, - "target": "es5", - "lib": ["es5", "dom"], - "types": ["cypress"] - } -} diff --git a/client/package.json b/client/package.json index 2eb81179..eea590d3 100644 --- a/client/package.json +++ b/client/package.json @@ -4,10 +4,12 @@ "scripts": { "dev": "vite", "build": "vue-tsc --noEmit && vite build && cp ./dist/index.html ../server/vbv_lernwelt/templates/vue/index.html && cp -r ./dist/static/vue ../server/vbv_lernwelt/static/", + "build:tailwind": "tailwindcss -i tailwind.css -o ../server/vbv_lernwelt/static/css/tailwind.css --minify", "test": "vitest run", "coverage": "vitest run --coverage", "typecheck": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false", - "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore" + "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore", + "tailwind": "tailwindcss -i tailwind.css -o ../server/vbv_lernwelt/static/css/tailwind.css --watch" }, "dependencies": { "@headlessui/vue": "^1.6.4", @@ -33,18 +35,19 @@ "@vue/eslint-config-typescript": "^10.0.0", "@vue/test-utils": "^2.0.0-rc.18", "@vue/tsconfig": "^0.1.3", - "autoprefixer": "^10.4.4", + "autoprefixer": "^10.4.7", "cypress": "^9.5.3", "eslint": "^8.5.0", "eslint-plugin-cypress": "^2.12.1", "eslint-plugin-vue": "^8.2.0", "happy-dom": "^5.3.1", - "postcss": "^8.4.12", + "postcss": "^8.4.14", "postcss-import": "^14.1.0", "prettier": "^2.5.1", "sass": "^1.50.1", "sass-loader": "^12.6.0", "start-server-and-test": "^1.14.0", + "tailwindcss": "^3.1.4", "typescript": "~4.6.3", "vite": "^2.9.1", "vitest": "^0.15.1", diff --git a/client/postcss.config.js b/client/postcss.config.js new file mode 100644 index 00000000..33ad091d --- /dev/null +++ b/client/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} diff --git a/client/src/App.vue b/client/src/App.vue index 4036fbd1..8dd258e8 100644 --- a/client/src/App.vue +++ b/client/src/App.vue @@ -1,8 +1,14 @@ diff --git a/client/src/assets/styles/index.scss b/client/src/assets/styles/index.scss deleted file mode 100644 index a47067f8..00000000 --- a/client/src/assets/styles/index.scss +++ /dev/null @@ -1 +0,0 @@ -@import "../../../../server/vbv_lernwelt/static/css/tailwind.css"; diff --git a/client/src/components/MainNavigationBar.vue b/client/src/components/MainNavigationBar.vue index 9e73317d..64d53f5c 100644 --- a/client/src/components/MainNavigationBar.vue +++ b/client/src/components/MainNavigationBar.vue @@ -1,7 +1,16 @@ + + diff --git a/client/src/components/circle/LearningContent.vue b/client/src/components/circle/LearningContent.vue index 8871e809..3df552b7 100644 --- a/client/src/components/circle/LearningContent.vue +++ b/client/src/components/circle/LearningContent.vue @@ -47,8 +47,16 @@ const block = computed(() => { +
+