chore:tailwind (#889)

* intial migration push * migrated `img-responsive` * removed custom css for the `DetailsInfoSection` * fixed padding * fixed the theme of tailwind and spectre not being alighed * migrated the about page * migrated the about page * made the e2e script more robust * documented the theme variable * more docs * more docs * made a flaky testcase more robust
TUM-Dev · Nov 18, 2023 · 309373c · 309373c
1 parent 3ede09c
commit 309373c
Show file tree

Hide file tree

Showing 18 changed files with 376 additions and 77 deletions.
diff --git a/webclient/README.md b/webclient/README.md
@@ -77,43 +77,41 @@ Each of those files are similar but differ in some aspects.
 If you serve the release build with a webserver (such as Nginx) you need to select the correct files based on the request URL and headers.
 
 ```plain
-<theme>-<lang>.html
-   ↑       ↑
-   │       └── The page language. Either "de" or "en" at the moment.
-   │           It should be selected based on the "lang" Cookie or else the "Accept-Language" header.
+<theme>.html
+   ↑
    └── The page theme. Either "light" or "dark" at the moment.
        It should be selected based on the "theme" Cookie ("light" by default).
 ```
 
 The language-selector is working in development and this differentialtion is only happening in the build.  
 For the theme we can not do so for some reason (If you know of a better way, hit us up).  
-To test a different theme, you can change `$theme` [here](./src/assets/variables.scss). Values are `light` and `dark`.
+To test a different theme, you can change `$theme` [here](./src/assets/variables.scss) and `theme='...'` [here](./index.html). Values are `light` and `dark`.
 
 ## Architecture
 
 The NavigaTUM webclient is made as a single-page application based on [Vue.js](https://vuejs.org/) and [Vue Router](https://router.vuejs.org/).  
-For state management we use [pinia](https://pinia.vuejs.org/) and our CSS framework is [Spectre.css](https://picturepan2.github.io/spectre/).
+For state management we use [pinia](https://pinia.vuejs.org/).
+Our CSS framework is currently being migrated from [Spectre.css](https://picturepan2.github.io/spectre/) to [Tailwind](https://tailwindcss.com/). (if you're interested in helping out, please contact us ^^)
 
 ### Directory structure (only the important parts)
 
 ```plain
 webclient
 ├── public/         # 🠔 Static assets such as icons, which cannot get inlined
 ├── src/
-│   ├── codegen/    # 🠔 code generated via openapi.yaml for typechecking reasons
+│   ├── api_types/  # 🠔 code generated via openapi.yaml for typechecking reasons
 │   ├── assets/     # 🠔 Static assets such as icons
 │   │   ├── md/                 # 🠔 Static pages written in markdown. Served at `/about/<filename>`.
 │   │   ├── variables.scss      # 🠔 Include-script for Spectre.CSS
 │   │   ├── main.scss           # 🠔 Sass CSS code for all non-view parts
 │   │   ├── spectre-all.scss    # 🠔 Include-script for Spectre.CSS
 │   │   └── logos               # 🠔 The Logos used by the app
 │   ├── components/ # 🠔 Vue components, which are used in views.
-│   ├── views/      # 🠔 The views are parts of App.vue, which are loaded dynamically based on our routes.
-│   ├── router.ts   # 🠔 The views are parts of App.vue, which are loaded dynamically based on our routes.
+│   ├── pages/      # 🠔 The views are parts of App.vue, which are loaded dynamically based on our routes.
+│   ├── router.ts   # 🠔 The routes of our app. This is where the views are loaded.
 │   ├── App.vue     # 🠔 Main view
-│   └── main.ts     # 🠔 Inialization of Vue.js. This is the entrypoint of our app, from which App.vue and associated Views/Components are loaded
+│   └── main.ts     # 🠔 Inialization of Vue.js. This is the entrypoint of our app, from which App.vue and associated views/components are loaded
 ├── vite.config.ts  # 🠔 Build configuration
-├── gulpfile.js     # 🠔 Gulp configuration
 └── package.json    # 🠔 Node package definition and dependencies
 ```
 
@@ -130,24 +128,38 @@ The reason behind these tests is that they fundamentally increase the future pro
 
 There are a few ways of running cypress
 
-#### Running headless
+#### e2e tests
 
-For running headless, it is assumed, that you are on a normal machine (not a mac) and have [Chrome](https://www.google.com/intl/de/chrome/) + [Firefox Developer Edition](https://www.mozilla.org/de/firefox/developer/) installed.
+For running e2e tests, it is assumed, that you
+
+- are on a normal machine (not a mac)
+- have [Chrome](https://www.google.com/intl/de/chrome/) + [Firefox Developer Edition](https://www.mozilla.org/de/firefox/developer/) installed.
+- have the webclient running on `http://localhost:3000` (i.e. `npm run dev`)
+
+The interface for interacting with cypress can be opened via
+
+```bash
+pnpm run cy:open
+```
+
+##### Running headless
 
 ```bash
 pnpm run test
 ```
 
 There are also some subtargets preconfigured like `cy:run:chrome` and `cy:run:firefox`, but likely for debugging you want the second mode.
 
-#### Running headed
-
-The interface for interacting with cypress can be opened via
+#### component tests
 
 ```bash
-pnpm run cy:open
+pnpm run test:components
 ```
 
+Currently, these are not run in CI, as I could not get cypress to behave in [#892](https://github.com/TUM-Dev/NavigaTUM/pull/892)
+
+#### Running headed
+
 ### Writing Tests
 
 Our Cypress test suite is located in the cypress directory, organized into different files and folders based on the features and components being tested.

diff --git a/webclient/build.sh b/webclient/build.sh
@@ -7,8 +7,9 @@ rm -fr ../dist
 
 for THEME in light dark
 do
-  # make sure we are really only building the right theme and language
+  # make sure we are really only building the right theme
   sed -i "s/\$theme: .*/\$theme: \"${THEME}\";/" src/assets/variables.scss
+  sed -i 's/class="light"/class="${THEME}"/' index.html
 
   echo "Building ${THEME}"
   npm run build-only

diff --git a/webclient/cypress/e2e/frontpage.cy.ts b/webclient/cypress/e2e/frontpage.cy.ts
@@ -1,10 +1,10 @@
 describe("Check if navigating from the frontpage works as expected", () => {
-  it("navigating to the mi", () => {
+  it("navigating to the mri", () => {
     cy.intercept("GET", "/api/get/root?lang=de", { fixture: "get/root.de.json" });
     cy.visit("http://localhost:3000/");
     cy.intercept("GET", "/api/get/mi?lang=de", { fixture: "get/mi.de.json" });
-    cy.contains("Informatik").click();
-    cy.url().should("include", "/building/mi");
+    cy.contains("MRI").click();
+    cy.url().should("to.match", /(site|campus|view)\/mri/);
   });
   it("navigating to an initally hidden entry", () => {
     cy.intercept("GET", "/api/get/root?lang=de", { fixture: "get/root.de.json" });

diff --git a/webclient/index.html b/webclient/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="de" prefix="og: https://ogp.me/ns#">
+<html lang="de" prefix="og: https://ogp.me/ns#" class="light">
   <head>
     <script type="application/ld+json">
       {

diff --git a/webclient/package.json b/webclient/package.json
@@ -37,14 +37,17 @@
     "@vue/eslint-config-typescript": "12.0.0",
     "@vue/tsconfig": "0.4.0",
     "@yankeeinlondon/link-builder": "1.2.1",
+    "autoprefixer": "^10.4.16",
     "cypress": "13.5.0",
     "eslint": "8.54.0",
     "eslint-plugin-vue": "9.18.1",
     "isomorphic-fetch": "3.0.0",
     "npm-run-all": "4.1.5",
+    "postcss": "^8.4.31",
     "prettier": "3.1.0",
     "sass": "1.69.5",
     "stylelint-scss": "5.3.1",
+    "tailwindcss": "^3.3.5",
     "typescript": "5.2.2",
     "vite": "4.5.0",
     "vite-plugin-md": "0.21.5",