ami/tl-vikunja
1
0
Fork 0
Code

feat: improve variable naming for ProjectCardGrid

Browse Source
This commit is contained in:
Dominik Pschenitschni 2023-01-19 14:30:14 +01:00 committed by Gitea
parent 060a573fe9
commit a4be973e29
1 changed files with 10 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/project/partials/ProjectCardGrid.vue
View File

@ -39,34 +39,30 @@ const filteredProjects = computed(() => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$project-height: 150px;
$project-spacing: 1rem;
.project-grid { .project-grid {
--project-grid-item-height: 150px;
--project-grid-gap: 1rem;
margin: 0; // reset li margin: 0; // reset li
project-style-type: none; list-style-type: none;
display: grid; display: grid;
grid-template-columns: repeat(var(--project-columns), 1fr); grid-template-columns: repeat(var(--project-grid-columns), 1fr);
grid-auto-rows: $project-height; grid-auto-rows: var(--project-grid-item-height);
gap: $project-spacing; gap: var(--project-grid-gap);
@media screen and (min-width: $mobile) { @media screen and (min-width: $mobile) {
--project-rows: 4; --project-grid-columns: 1;
--project-columns: 1;
} }
@media screen and (min-width: $mobile) and (max-width: $tablet) { @media screen and (min-width: $mobile) and (max-width: $tablet) {
--project-columns: 2; --project-grid-columns: 2;
} }
@media screen and (min-width: $tablet) and (max-width: $widescreen) { @media screen and (min-width: $tablet) and (max-width: $widescreen) {
--project-columns: 3; --project-grid-columns: 3;
--project-rows: 3;
} }
@media screen and (min-width: $widescreen) { @media screen and (min-width: $widescreen) {
--project-columns: 5; --project-grid-columns: 5;
--project-rows: 2;
} }
} }