Add TailwindCSS (#1252)

* Setup TailwindCSS

* Fully setup configuration

* Refactor some tailwind variables
This commit is contained in:
Evan Song
2024-07-06 20:57:32 -07:00
committed by GitHub
parent 0f2ddb452c
commit abec2e48d4
176 changed files with 7905 additions and 7433 deletions

View File

@@ -119,14 +119,14 @@
<p>
Changes will be applied to
<strong>{{ selectedProjects.length }}</strong> project{{
selectedProjects.length > 1 ? 's' : ''
selectedProjects.length > 1 ? "s" : ""
}}.
</p>
<ul>
<li
v-for="project in selectedProjects.slice(
0,
editLinks.showAffected ? selectedProjects.length : 3
editLinks.showAffected ? selectedProjects.length : 3,
)"
:key="project.id"
>
@@ -300,24 +300,24 @@
</template>
<script>
import { Multiselect } from 'vue-multiselect'
import { Multiselect } from "vue-multiselect";
import Badge from '~/components/ui/Badge.vue'
import Checkbox from '~/components/ui/Checkbox.vue'
import Modal from '~/components/ui/Modal.vue'
import Avatar from '~/components/ui/Avatar.vue'
import ModalCreation from '~/components/ui/ModalCreation.vue'
import CopyCode from '~/components/ui/CopyCode.vue'
import Badge from "~/components/ui/Badge.vue";
import Checkbox from "~/components/ui/Checkbox.vue";
import Modal from "~/components/ui/Modal.vue";
import Avatar from "~/components/ui/Avatar.vue";
import ModalCreation from "~/components/ui/ModalCreation.vue";
import CopyCode from "~/components/ui/CopyCode.vue";
import SettingsIcon from '~/assets/images/utils/settings.svg?component'
import TrashIcon from '~/assets/images/utils/trash.svg?component'
import IssuesIcon from '~/assets/images/utils/issues.svg?component'
import PlusIcon from '~/assets/images/utils/plus.svg?component'
import CrossIcon from '~/assets/images/utils/x.svg?component'
import EditIcon from '~/assets/images/utils/edit.svg?component'
import SaveIcon from '~/assets/images/utils/save.svg?component'
import AscendingIcon from '~/assets/images/utils/sort-asc.svg?component'
import DescendingIcon from '~/assets/images/utils/sort-desc.svg?component'
import SettingsIcon from "~/assets/images/utils/settings.svg?component";
import TrashIcon from "~/assets/images/utils/trash.svg?component";
import IssuesIcon from "~/assets/images/utils/issues.svg?component";
import PlusIcon from "~/assets/images/utils/plus.svg?component";
import CrossIcon from "~/assets/images/utils/x.svg?component";
import EditIcon from "~/assets/images/utils/edit.svg?component";
import SaveIcon from "~/assets/images/utils/save.svg?component";
import AscendingIcon from "~/assets/images/utils/sort-asc.svg?component";
import DescendingIcon from "~/assets/images/utils/sort-desc.svg?component";
export default defineNuxtComponent({
components: {
@@ -339,97 +339,97 @@ export default defineNuxtComponent({
DescendingIcon,
},
async setup() {
const { formatMessage } = useVIntl()
const { formatMessage } = useVIntl();
const user = await useUser()
await initUserProjects()
return { formatMessage, user: ref(user) }
const user = await useUser();
await initUserProjects();
return { formatMessage, user: ref(user) };
},
data() {
return {
projects: this.updateSort(this.user.projects, 'Name'),
projects: this.updateSort(this.user.projects, "Name"),
versions: [],
selectedProjects: [],
sortBy: 'Name',
sortBy: "Name",
descending: false,
editLinks: {
showAffected: false,
source: {
val: '',
val: "",
clear: false,
},
discord: {
val: '',
val: "",
clear: false,
},
wiki: {
val: '',
val: "",
clear: false,
},
issues: {
val: '',
val: "",
clear: false,
},
},
}
};
},
head: {
title: 'Projects - Modrinth',
title: "Projects - Modrinth",
},
created() {
this.UPLOAD_VERSION = 1 << 0
this.DELETE_VERSION = 1 << 1
this.EDIT_DETAILS = 1 << 2
this.EDIT_BODY = 1 << 3
this.MANAGE_INVITES = 1 << 4
this.REMOVE_MEMBER = 1 << 5
this.EDIT_MEMBER = 1 << 6
this.DELETE_PROJECT = 1 << 7
this.UPLOAD_VERSION = 1 << 0;
this.DELETE_VERSION = 1 << 1;
this.EDIT_DETAILS = 1 << 2;
this.EDIT_BODY = 1 << 3;
this.MANAGE_INVITES = 1 << 4;
this.REMOVE_MEMBER = 1 << 5;
this.EDIT_MEMBER = 1 << 6;
this.DELETE_PROJECT = 1 << 7;
},
methods: {
updateDescending() {
this.descending = !this.descending
this.projects = this.updateSort(this.projects, this.sortBy, this.descending)
this.descending = !this.descending;
this.projects = this.updateSort(this.projects, this.sortBy, this.descending);
},
updateSort(projects, sort, descending) {
let sortedArray = projects
let sortedArray = projects;
switch (sort) {
case 'Name':
case "Name":
sortedArray = projects.slice().sort((a, b) => {
return a.title.localeCompare(b.title)
})
break
case 'Status':
return a.title.localeCompare(b.title);
});
break;
case "Status":
sortedArray = projects.slice().sort((a, b) => {
if (a.status < b.status) {
return -1
return -1;
}
if (a.status > b.status) {
return 1
return 1;
}
return 0
})
break
case 'Type':
return 0;
});
break;
case "Type":
sortedArray = projects.slice().sort((a, b) => {
if (a.project_type < b.project_type) {
return -1
return -1;
}
if (a.project_type > b.project_type) {
return 1
return 1;
}
return 0
})
break
return 0;
});
break;
default:
break
break;
}
if (descending) {
sortedArray = sortedArray.reverse()
sortedArray = sortedArray.reverse();
}
return sortedArray
return sortedArray;
},
async bulkEditLinks() {
try {
@@ -438,60 +438,60 @@ export default defineNuxtComponent({
source_url: this.editLinks.source.clear ? null : this.editLinks.source.val.trim(),
wiki_url: this.editLinks.wiki.clear ? null : this.editLinks.wiki.val.trim(),
discord_url: this.editLinks.discord.clear ? null : this.editLinks.discord.val.trim(),
}
};
if (!baseData.issues_url?.length ?? 1 > 0) {
delete baseData.issues_url
delete baseData.issues_url;
}
if (!baseData.source_url?.length ?? 1 > 0) {
delete baseData.source_url
delete baseData.source_url;
}
if (!baseData.wiki_url?.length ?? 1 > 0) {
delete baseData.wiki_url
delete baseData.wiki_url;
}
if (!baseData.discord_url?.length ?? 1 > 0) {
delete baseData.discord_url
delete baseData.discord_url;
}
await useBaseFetch(
`projects?ids=${JSON.stringify(this.selectedProjects.map((x) => x.id))}`,
{
method: 'PATCH',
method: "PATCH",
body: baseData,
}
)
},
);
this.$refs.editLinksModal.hide()
this.$refs.editLinksModal.hide();
this.$notify({
group: 'main',
title: 'Success',
group: "main",
title: "Success",
text: "Bulk edited selected project's links.",
type: 'success',
})
this.selectedProjects = []
type: "success",
});
this.selectedProjects = [];
this.editLinks.issues.val = ''
this.editLinks.source.val = ''
this.editLinks.wiki.val = ''
this.editLinks.discord.val = ''
this.editLinks.issues.clear = false
this.editLinks.source.clear = false
this.editLinks.wiki.clear = false
this.editLinks.discord.clear = false
this.editLinks.issues.val = "";
this.editLinks.source.val = "";
this.editLinks.wiki.val = "";
this.editLinks.discord.val = "";
this.editLinks.issues.clear = false;
this.editLinks.source.clear = false;
this.editLinks.wiki.clear = false;
this.editLinks.discord.clear = false;
} catch (e) {
this.$notify({
group: 'main',
title: 'An error occurred',
group: "main",
title: "An error occurred",
text: e,
type: 'error',
})
type: "error",
});
}
},
},
})
});
</script>
<style lang="scss" scoped>
.grid-table {
@@ -543,7 +543,7 @@ export default defineNuxtComponent({
.grid-table__row {
display: grid;
grid-template: 'checkbox icon name type settings' 'checkbox icon id status settings';
grid-template: "checkbox icon name type settings" "checkbox icon id status settings";
grid-template-columns:
min-content min-content minmax(min-content, 2fr)
minmax(min-content, 1fr) min-content;
@@ -580,7 +580,7 @@ export default defineNuxtComponent({
}
.grid-table__header {
grid-template: 'checkbox settings';
grid-template: "checkbox settings";
grid-template-columns: min-content minmax(min-content, 1fr);
:nth-child(2),
@@ -596,7 +596,7 @@ export default defineNuxtComponent({
@media screen and (max-width: 560px) {
.grid-table__row {
display: grid;
grid-template: 'checkbox icon name settings' 'checkbox icon id settings' 'checkbox icon type settings' 'checkbox icon status settings';
grid-template: "checkbox icon name settings" "checkbox icon id settings" "checkbox icon type settings" "checkbox icon status settings";
grid-template-columns: min-content min-content minmax(min-content, 1fr) min-content;
:nth-child(5) {
@@ -605,7 +605,7 @@ export default defineNuxtComponent({
}
.grid-table__header {
grid-template: 'checkbox settings';
grid-template: "checkbox settings";
grid-template-columns: min-content minmax(min-content, 1fr);
}
}
@@ -644,7 +644,7 @@ export default defineNuxtComponent({
width: fit-content;
}
.label-button[data-active='true'] {
.label-button[data-active="true"] {
--background-color: var(--color-red);
--text-color: var(--color-brand-inverted);
}