wbuezas
/
salix-front-mindshore-fork2
forked from verdnatura/salix-front
0
0
Fork 0
Code Pull Requests Activity

style updates

This commit is contained in:
Javier Segarra 2024-05-17 13:52:45 +02:00
parent dba42a6001
commit 24eeb5519a
1 changed files with 26 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/ui/FetchedTags.vue
View File

@ -26,7 +26,9 @@ const tags = computed(() => {
.filter((i) => i.startsWith(`${$props.tag}`)) .filter((i) => i.startsWith(`${$props.tag}`))
.reduce((acc, tag) => { .reduce((acc, tag) => {
const n = tag.split(`${$props.tag}`)[1]; const n = tag.split(`${$props.tag}`)[1];
acc[$props.item[`${$props.tag}${n}`]] = $props.item[`${$props.value}${n}`]; const key = `${$props.tag}${n}`;
const value = `${$props.value}${n}`;
acc[$props.item[key] ?? key] = $props.item[value] ?? '';
return acc; return acc;
}, {}); }, {});
}); });
@ -49,11 +51,29 @@ const tags = computed(() => {
<style lang="scss" scoped> <style lang="scss" scoped>
.fetchedTags { .fetchedTags {
align-items: center; // display: flex;
/* width: 100%; */
/* flex: 2; */
/* flex-direction: column; */
/* flex-wrap: wrap; */
/* align-items: flex-start; */
/* align-content: flex-end; */
// justify-content: flex-start;
display: grid;
grid-template-columns: repeat(3, 0.15fr); /* Tres columnas de igual tamaño */
grid-template-rows: repeat(2, auto); /* Dos filas con alto automático */
// gap: 5px; /* Espacio entre las celdas */
.wrap { .wrap {
width: 100%; /* width: 100%; */
flex-wrap: wrap; /* flex-wrap: wrap; */
display: flex; // display: flex;
/* flex-direction: row; */
/* flex: 1; */
// flex: 0 50%;
/* padding: 5px; */
/* box-sizing: border-box; */
/* border: 1px solid #000;*/
display: contents;
} }
.inline-tag { .inline-tag {
@ -67,7 +87,7 @@ const tags = computed(() => {
border: 1px solid $color-spacer; border: 1px solid $color-spacer;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
min-width: 4rem; min-width: 7rem;
max-width: 4rem; max-width: 4rem;
} }