From 49aaa526b5ee87e64f8d547e3a4aa5e1483e9127 Mon Sep 17 00:00:00 2001 From: Daniel Egger Date: Mon, 23 May 2022 16:27:56 +0200 Subject: [PATCH 01/16] Styling of circle page --- client/src/assets/circle-analyse.svg | 47 +++++++++++++++++ client/src/assets/styles/_fonts.scss | 4 +- client/src/views/CircleAnalyseExampleView.vue | 49 +++++++++++++++--- client/src/views/HomeView.vue | 5 +- client/tailwind.config.js | 18 ------- package.json | 2 + .../static}/fonts/BuenosAires-Regular.woff | Bin .../static}/fonts/BuenosAires-Regular.woff2 | Bin tailwind.config.js | 32 +++++++++--- tailwind/input.css | 17 ++++-- 10 files changed, 135 insertions(+), 39 deletions(-) create mode 100644 client/src/assets/circle-analyse.svg delete mode 100644 client/tailwind.config.js rename {client/src/assets/styles => server/vbv_lernwelt/static}/fonts/BuenosAires-Regular.woff (100%) rename {client/src/assets/styles => server/vbv_lernwelt/static}/fonts/BuenosAires-Regular.woff2 (100%) diff --git a/client/src/assets/circle-analyse.svg b/client/src/assets/circle-analyse.svg new file mode 100644 index 00000000..be722b24 --- /dev/null +++ b/client/src/assets/circle-analyse.svg @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/client/src/assets/styles/_fonts.scss b/client/src/assets/styles/_fonts.scss index f1812e34..9b7157da 100644 --- a/client/src/assets/styles/_fonts.scss +++ b/client/src/assets/styles/_fonts.scss @@ -1,8 +1,8 @@ @font-face { font-family: 'BuenosAires'; font-style: normal; - src: url("@/assets/styles/fonts/BuenosAires-Regular.woff2") format("woff2"), - url("@/assets/styles/fonts/BuenosAires-Regular.woff") format("woff"); + src: url("/static/fonts/BuenosAires-Regular.woff2") format("woff2"), + url("/static/fonts/BuenosAires-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; diff --git a/client/src/views/CircleAnalyseExampleView.vue b/client/src/views/CircleAnalyseExampleView.vue index 795b631e..a1996aeb 100644 --- a/client/src/views/CircleAnalyseExampleView.vue +++ b/client/src/views/CircleAnalyseExampleView.vue @@ -23,19 +23,52 @@ export default { diff --git a/client/src/views/HomeView.vue b/client/src/views/HomeView.vue index 16c2d953..3cce25dd 100644 --- a/client/src/views/HomeView.vue +++ b/client/src/views/HomeView.vue @@ -3,6 +3,9 @@ + + diff --git a/client/tailwind.config.js b/client/tailwind.config.js deleted file mode 100644 index bfe2b279..00000000 --- a/client/tailwind.config.js +++ /dev/null @@ -1,18 +0,0 @@ -// eslint-disable-next-line @typescript-eslint/no-var-requires -module.exports = { - content: [ - './index.html', - './src/**/*.{vue,js,ts,jsx,tsx}', - ], - theme: { - colors: { - 'white': '#FFFFFF', - 'blue-dark': '#00224D' - }, - fontFamily: { - sans: ['BuenosAires', 'sans-serif'], - }, - extend: {}, - }, - plugins: [], -} diff --git a/package.json b/package.json index 5e6a82aa..e648cbdd 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,8 @@ "tailwind": "tailwindcss -i ./tailwind/input.css -o ./server/vbv_lernwelt/static/css/tailwind.css --watch" }, "devDependencies": { + "@tailwindcss/forms": "^0.5.2", + "@tailwindcss/typography": "^0.5.2", "cypress": "^9.4.1", "tailwindcss": "^3.0.24" } diff --git a/client/src/assets/styles/fonts/BuenosAires-Regular.woff b/server/vbv_lernwelt/static/fonts/BuenosAires-Regular.woff similarity index 100% rename from client/src/assets/styles/fonts/BuenosAires-Regular.woff rename to server/vbv_lernwelt/static/fonts/BuenosAires-Regular.woff diff --git a/client/src/assets/styles/fonts/BuenosAires-Regular.woff2 b/server/vbv_lernwelt/static/fonts/BuenosAires-Regular.woff2 similarity index 100% rename from client/src/assets/styles/fonts/BuenosAires-Regular.woff2 rename to server/vbv_lernwelt/static/fonts/BuenosAires-Regular.woff2 diff --git a/tailwind.config.js b/tailwind.config.js index d1a6cdf4..d060cf08 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,18 +1,36 @@ +const colors = require('tailwindcss/colors') + module.exports = { content: [ './client/index.html', './client/src/**/*.{vue,js,ts,jsx,tsx}', './server/vbv_lernwelt/**/*.{html,js}', -], + ], theme: { - colors: { - 'white': '#FFFFFF', - 'blue-dark': '#00224D' - }, fontFamily: { sans: ['BuenosAires', 'sans-serif'], }, - extend: {}, + extend: { + spacing: { + '128': '32rem', + } + }, + colors: { + transparent: 'transparent', + current: 'currentColor', + black: colors.black, + white: colors.white, + blue: colors.blue, + gray: colors.gray, + emerald: colors.emerald, + indigo: colors.indigo, + yellow: colors.yellow, + slate: colors.slate, + 'blue-dark': '#00224D', + }, }, - plugins: [], + plugins: [ + require('@tailwindcss/typography'), + require('@tailwindcss/forms'), + ], } diff --git a/tailwind/input.css b/tailwind/input.css index 48373905..90dad3f1 100644 --- a/tailwind/input.css +++ b/tailwind/input.css @@ -2,16 +2,27 @@ @tailwind components; @tailwind utilities; +* { + @apply text-blue-dark; +} + @layer base { h1 { - @apply text-4xl font-bold + @apply text-6xl font-bold } h2 { - @apply text-2xl font-semibold + @apply text-4xl font-semibold } h3 { - @apply text-lg font-medium italic + @apply text-2xl font-medium } } + +@layer components { + .circle-title { + @apply text-9xl font-bold + } +} + From ff666086dc143322e8ce09bffa455ecdf52a7cea Mon Sep 17 00:00:00 2001 From: Daniel Egger Date: Mon, 23 May 2022 17:08:06 +0200 Subject: [PATCH 02/16] Refactor Circle page --- client/src/components/CircleSidebar.vue | 19 ---------- client/src/components/LearningPath.vue | 16 --------- client/src/components/LearningSequence.vue | 29 --------------- client/src/components/MainNavigationBar.vue | 18 +++++----- client/src/components/VBVNavigationBar.vue | 18 ---------- client/src/router/index.ts | 9 ++--- ...ircleAnalyseExampleView.vue => Circle.vue} | 9 +++-- client/src/views/CircleView.vue | 36 ------------------- tailwind/input.css | 4 --- 9 files changed, 19 insertions(+), 139 deletions(-) delete mode 100644 client/src/components/CircleSidebar.vue delete mode 100644 client/src/components/LearningPath.vue delete mode 100644 client/src/components/LearningSequence.vue delete mode 100644 client/src/components/VBVNavigationBar.vue rename client/src/views/{CircleAnalyseExampleView.vue => Circle.vue} (83%) delete mode 100644 client/src/views/CircleView.vue diff --git a/client/src/components/CircleSidebar.vue b/client/src/components/CircleSidebar.vue deleted file mode 100644 index 0dc94b35..00000000 --- a/client/src/components/CircleSidebar.vue +++ /dev/null @@ -1,19 +0,0 @@ - - - - - diff --git a/client/src/components/LearningPath.vue b/client/src/components/LearningPath.vue deleted file mode 100644 index f7ed978a..00000000 --- a/client/src/components/LearningPath.vue +++ /dev/null @@ -1,16 +0,0 @@ - - - - - diff --git a/client/src/components/LearningSequence.vue b/client/src/components/LearningSequence.vue deleted file mode 100644 index e858121d..00000000 --- a/client/src/components/LearningSequence.vue +++ /dev/null @@ -1,29 +0,0 @@ - - - - - diff --git a/client/src/components/MainNavigationBar.vue b/client/src/components/MainNavigationBar.vue index 760c41c4..954d7060 100644 --- a/client/src/components/MainNavigationBar.vue +++ b/client/src/components/MainNavigationBar.vue @@ -1,18 +1,18 @@ - - + + diff --git a/client/src/components/VBVNavigationBar.vue b/client/src/components/VBVNavigationBar.vue deleted file mode 100644 index f23cdf16..00000000 --- a/client/src/components/VBVNavigationBar.vue +++ /dev/null @@ -1,18 +0,0 @@ - - - - - diff --git a/client/src/router/index.ts b/client/src/router/index.ts index 5d5356d7..3b072d4c 100644 --- a/client/src/router/index.ts +++ b/client/src/router/index.ts @@ -27,8 +27,9 @@ const router = createRouter({ } }, { - path: '/analyse', - component: () => import('../views/CircleAnalyseExampleView.vue'), + path: '/circle/:circleSlug', + component: () => import('../views/Circle.vue'), + props: true }, { path: '/profile', @@ -38,10 +39,6 @@ const router = createRouter({ path: '/learningpath/:learningPathId', component: () => import('../views/LearningPathOverview.vue'), }, - { - path: '/learningpath/:learningPathId/circle/:circleId', - component: () => import('../views/CircleView.vue'), - } ] }) diff --git a/client/src/views/CircleAnalyseExampleView.vue b/client/src/views/Circle.vue similarity index 83% rename from client/src/views/CircleAnalyseExampleView.vue rename to client/src/views/Circle.vue index a1996aeb..c97d514d 100644 --- a/client/src/views/CircleAnalyseExampleView.vue +++ b/client/src/views/Circle.vue @@ -1,7 +1,10 @@