Migrate from Windi to Tailwind #4614

pat-s · 2024-12-23T16:31:50Z

superseedes #3279

Had to add some scoped classes to resolve some padding and override clashes.
In addition, some width and height specifiers had to be changed as they are different between windi and tailwind.

woodpecker-bot · 2024-12-23T16:46:49Z

Deployment of preview was successful: https://woodpecker-ci-woodpecker-pr-4614.surge.sh

.yamllint.yaml

package.json

web/src/views/admin/AdminRepos.vue

web/vite.config.ts

pat-s · 2024-12-28T10:13:21Z

@xoxys @anbraten @qwerty287 Could you please check here again? Rebasing against renovate updates is a bit tedious, hence it would be great if we can get this merged before the next round of npm updates.

.yamllint.yaml

web/src/style.css

web/tailwind.config.js

pat-s · 2024-12-28T14:54:43Z

@xoxys If you wanna continue and resolve the new issue after merging main, feel free to. I am away until the end of the day.

xoxys · 2024-12-28T15:57:51Z

web/src/components/repo/pipeline/PipelineList.vue

@@ -3,6 +3,7 @@
    <PipelineItem
      v-for="pipeline in pipelines"
      :key="pipeline.id"
+      class="pipeline-list"


This class doesn't exist? Where is it coming from?

Might be an oversight.

xoxys · 2024-12-28T15:58:07Z

web/src/components/agent/AgentList.vue

@@ -65,3 +65,9 @@ defineEmits<{

 const date = useDate();
 </script>
+
+<style scoped>


Why do we need this here? Applying p-4 directly just works for me.

In the devtools it works, it didn't when applying it in the code and then building. Feel free to try again, I tried multiple times but maybe I made a mistake or overlooked something.

I alway build it locally not using dev tools.

It doesn't matter how you build it, inspecting a deployed instance vs localhost is the same in the end. Maybe we're talking about different things?
I don't think this matter though. Again, if you find a way to include it as a class directly, this would be great and better than this, but it didn't work for me.

xoxys · 2024-12-28T16:08:46Z

web/src/views/Login.vue

+  <main class="flex flex-col justify-center items-center w-full h-full">
+    <Error v-if="errorMessage" class="w-full md:max-w-3xl h-96">


Why do we need this change?

xoxys · 2024-12-28T16:09:32Z

web/src/views/Login.vue

      >
        <span>{{ errorUri }}</span>
      </a>
    </Error>

    <div
-      class="flex flex-col w-full overflow-hidden bg-wp-background-100 shadow border border-wp-background-400 dark:bg-wp-background-200 md:m-8 md:rounded-md md:flex-row md:w-3xl md:h-sm"
+      class="flex md:flex-row flex-col border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-200 shadow md:m-8 border md:rounded-md w-full md:max-w-3xl md:h-96 overflow-hidden"


Same here. Why do we need to change it to max-width?

Otherwise the Login item is fully horizontally stretched across the page with Tailwind.

xoxys · 2024-12-28T16:12:55Z

web/src/views/admin/AdminOrgs.vue

@@ -66,3 +66,9 @@ const { doSubmit: deleteOrg, isLoading: isDeleting } = useAsyncAction(async (_or
  resetPage();
 });
 </script>
+
+<style scoped>


Same question here, why do we need a scoped class for a single property?

I didn't work with overrides or normal injection. Classes collided with ones merged from parent divs and didn't take effect. Scoped classes seem to solve this.
If you know a better way to solve this, please propose it.

xoxys · 2024-12-28T16:14:30Z

web/src/views/admin/AdminUsers.vue

@@ -154,3 +154,9 @@ function showAddUser() {
  selectedUser.value = cloneDeep({ login: '' });
 }
 </script>
+
+<style scoped>


xoxys · 2024-12-28T16:16:55Z

web/tailwind.config.ts

+      borderWidth: {
+        6: '6px',
+      },


This seems to be new. Where is it coming from?

Its a custom class required to make some existing custom windi classes work.

Can you please add more details? Where do you got this from?

There is no tailwind class with a border width of 6px.

Sorry I still dont get it. Where exactly do we need a border with the width of 6px and how is it used?

woodpecker/web/src/components/atomic/Error.vue

Line 3 in 423a1cb

class="flex items-center gap-2 border-wp-error-300 dark:border-wp-error-300 bg-wp-error-100 dark:bg-wp-error-200 p-2 border border-l-6 border-solid rounded-md text-white"

Then is suggest to use 4 or 8 if thats the only location.

There's another one, best to grep for it. Maybe something for a different PR?

web/vite.config.ts

windi -> tailwind

7658ab7

pat-s added refactor delete or replace old code build_pr_images If set, the CI will build images for this PR and push to Dockerhub labels Dec 23, 2024

missed files

251b3bb

pat-s added 3 commits December 23, 2024 18:00

refactor custom hover class

11db140

standalone tailwind.css

96ac374

use .js

6e64b94

pat-s force-pushed the refactor/windi-to-tailwind branch from 15912d6 to 6e64b94 Compare December 23, 2024 17:30

pat-s added 15 commits December 23, 2024 19:00

working build

200f08f

format

18c5727

fix too large padding

3a73832

fix overflowing input field

160837b

max-w-full

877981f

yamllint ignore pnpm lock

44e78f5

use custom w-fill

627a9d3

readd p-4

ccac6de

fix login div

76c5952

use scoped admin repos style

4b53893

w and h for login

ec66deb

fromat

e1a09d7

override padding for pipeline list

c6c5c82

move p-4 to scoped class

7b05372

clean

f514def

pat-s marked this pull request as ready for review December 23, 2024 23:21

qwerty287 reviewed Dec 24, 2024

View reviewed changes

.yamllint.yaml Outdated Show resolved Hide resolved

package.json Outdated Show resolved Hide resolved

web/src/views/admin/AdminRepos.vue Show resolved Hide resolved

web/vite.config.ts Show resolved Hide resolved

pat-s added 4 commits December 24, 2024 11:52

delete package.json

99fd2d5

fix yamllint ignore

a270216

Merge branch 'main' into refactor/windi-to-tailwind

8229584

fix lockfiles

798cd3c

lint

141e134

pat-s mentioned this pull request Dec 24, 2024

Release plan for v3.0.0 #4320

Open

4 tasks

This comment was marked as resolved.

Sign in to view

pat-s added 4 commits December 25, 2024 15:01

border-b-1 -> border-b

99afa10

fix admin-agent list padding

a521d1b

remove rounded-non override for pipeline list

52876d4

also add sub-styles for admin orgs and admin users

0cd2fec

pat-s requested a review from xoxys December 25, 2024 14:20

pat-s mentioned this pull request Dec 28, 2024

Fix misaligned tab list indentation on mobile #4610

Draft

pat-s added 2 commits December 28, 2024 11:11

Merge branch 'main' into refactor/windi-to-tailwind

e728910

update

8649dd8

qwerty287 reviewed Dec 28, 2024

View reviewed changes

.yamllint.yaml Outdated Show resolved Hide resolved

web/src/style.css Outdated Show resolved Hide resolved

web/tailwind.config.js Outdated Show resolved Hide resolved

pat-s added 2 commits December 28, 2024 15:44

fix webkit colors

d345998

Merge branch 'main' into refactor/windi-to-tailwind

52908b3

xoxys added 2 commits December 28, 2024 16:18

use tailwind.config.ts and fix important modifier

1a763da

cleanup unused eslint-disable directive

c57745e

xoxys added the ui frontend related label Dec 28, 2024

xoxys added 2 commits December 28, 2024 16:44

switch back to ignore-from-file and add .yamlignore

947c62d

drop vite-plugin-windicss

648087a

xoxys reviewed Dec 28, 2024

View reviewed changes

use pre-defined class

7a09948

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Migrate from Windi to Tailwind #4614

Migrate from Windi to Tailwind #4614

pat-s commented Dec 23, 2024 •

edited

Loading

woodpecker-bot commented Dec 23, 2024 •

edited

Loading

This comment was marked as resolved.

pat-s commented Dec 28, 2024

pat-s commented Dec 28, 2024

xoxys Dec 28, 2024

pat-s Dec 29, 2024

xoxys Dec 28, 2024

pat-s Dec 29, 2024

xoxys Dec 29, 2024

pat-s Dec 29, 2024 •

edited

Loading

xoxys Dec 28, 2024

xoxys Dec 28, 2024

pat-s Dec 29, 2024

xoxys Dec 28, 2024

pat-s Dec 29, 2024

xoxys Dec 28, 2024

xoxys Dec 28, 2024

pat-s Dec 29, 2024

xoxys Dec 29, 2024

pat-s Dec 29, 2024

xoxys Dec 29, 2024

pat-s Dec 29, 2024

xoxys Dec 29, 2024

pat-s Dec 29, 2024

		<main class="flex flex-col justify-center items-center w-full h-full">
		<Error v-if="errorMessage" class="w-full md:max-w-3xl h-96">

Migrate from Windi to Tailwind #4614

Are you sure you want to change the base?

Migrate from Windi to Tailwind #4614

Conversation

pat-s commented Dec 23, 2024 • edited Loading

woodpecker-bot commented Dec 23, 2024 • edited Loading

This comment was marked as resolved.

pat-s commented Dec 28, 2024

pat-s commented Dec 28, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pat-s Dec 29, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pat-s commented Dec 23, 2024 •

edited

Loading

woodpecker-bot commented Dec 23, 2024 •

edited

Loading

pat-s Dec 29, 2024 •

edited

Loading