vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Visual fixes

pull/4649/head
Cagatay Civici 2023-10-18 13:15:34 +03:00
parent de5ed34fd4
commit a8aa6e2d61
9 changed files with 17 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
assets/data/news.json
View File

@ -1,8 +1,8 @@
{
"id": 43,
"content": "Building Design Systems with Tailwind",
"id": 44,
"content": "🎉 Introduding the official Nuxt Module. ",
"linkText": "Learn More",
"linkHref": "https://primevue.org/tailwind",
"linkHref": "https://primevue.org/nuxt",
"backgroundStyle": "background-color:#059669",
"textStyle": "color:#ffffff;font-weight:500",
"linkStyle": "color:#ffffff;font-weight:700;text-decoration: underline;"

4
assets/menu/menu.json
View File

@ -579,7 +579,7 @@
},
{
"name": "Twitter",
"href": "https://twitter.com/primevue?lang=en"
"href": "https://twitter.com/primevue"
},
{
"name": "Newsletter",
@ -592,4 +592,4 @@
]
}
]
}
}

4
components/doc/DocSectionCode.vue
View File

@ -30,8 +30,8 @@
<template v-if="!hideStackBlitz">
<button v-tooltip.bottom="{ value: 'Edit in StackBlitz', class: 'doc-section-code-tooltip' }" type="button" class="h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center" @click="showStackblitz">
<svg role="img" viewBox="0 0 24 24" width="16" height="16" fill="currentColor" style="display: 'block'">
<path d="M0 15.98H8.15844L3.40299 27.26L19 11.1945H10.7979L15.5098 0L0 15.98Z" />
<svg role="img" width="13" height="18" viewBox="0 0 13 19" fill="currentColor" xmlns="http://www.w3.org/2000/svg" style="display: 'block'">
<path d="M0 10.6533H5.43896L2.26866 18.1733L12.6667 7.463H7.1986L10.3399 0L0 10.6533Z" />
</svg>
</button>
</template>

6
doc/tailwind/SetupDoc.vue
View File

@ -5,7 +5,7 @@
sure to apply the CSS layer configuration above when including the styles of Tailwind as well.
</p>
<p class="flex align-items-start gap-2">
<Badge value="1"></Badge>
<Badge value="1" class="mt-1"></Badge>
<span
>Tailwind uses PurgeCSS internally to remove unused classes, as PrimeVue components are loaded from <i>node_modules</i> the <i>content</i> property at <i>tailwind.config.js</i> needs to be aware of PrimeVue, otherwise the classes
utilized in the theme will be removed as well.</span
@ -13,7 +13,7 @@
</p>
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
<p class="flex align-items-start gap-2">
<Badge value="2"></Badge>
<Badge value="2" class="mt-1"></Badge>
<span
>Next step is enabling the <i>unstyled</i> option to remove the default style classes from the components and adding an empty <i>pt</i> so that they can be styled with Tailwind in the next section. Note that if you run your
application at this stage, functionality and accessibility of the components will still work but everything will be transparent as there is no style.</span
@ -22,7 +22,7 @@
<DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
<p class="flex align-items-start gap-2">
<Badge value="3"></Badge>
<Badge value="3" class="mt-1"></Badge>
<span
>At the final step, component styles are provided via a pass through configuration that utilizes Tailwind CSS. The default preset of each component is available at the Tailwind part under theming section of each component so you'll
able to copy paste instead of starting from scratch. Example below styles, inputtext and panel components;

2
pages/landing/BlockSection.vue
View File

@ -4,7 +4,7 @@
<p class="section-detail">400+ ready to copy-paste UI blocks to build spectacular applications in no time.</p>
<div class="flex justify-content-center mt-4">
<a href="https://blocks.primevue.org" class="font-semibold p-3 border-round flex align-items-center linkbox active z-2">
<span>Learn More</span>
<span>Explore All</span>
<i class="pi pi-arrow-right ml-2"></i>
</a>
</div>

2
pages/landing/FeaturesSection.vue
View File

@ -2,7 +2,7 @@
<section class="landing-features py-8">
<div class="section-header">Features</div>
<p class="section-detail">PrimeVue is the most complete solution for your UI requirements.</p>
<div class="mt-7 px-3 lg:px-8">
<div class="mt-7 px-5 lg:px-8">
<div class="features-container">
<div class="grid">
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center">

8
pages/landing/HeroSection.vue
View File

@ -73,13 +73,13 @@
</div>
<div class="box p-4 fadein animation-duration-500">
<ul class="list-none p-0 m-0">
<li class="flex mb-3">
<li class="flex align-items-center mb-3">
<span class="mr-3">
<img src="https://primefaces.org/cdn/primevue/images/landing/avatar.png" alt="Avatar" class="w-3rem h-3rem" />
</span>
<div class="flex flex-column">
<span class="font-bold mb-1">Amanda Williams</span>
<p class="m-0 text-secondary">Administrator</p>
<span class="text-secondary">Administrator</span>
</div>
</li>
<li class="flex">
@ -191,9 +191,7 @@ export default {
return {
plugins: {
legend: {
labels: {
color: textColor
}
display: false
}
},
scales: {

2
pages/landing/TemplateSection.vue
View File

@ -4,7 +4,7 @@
<p class="section-detail relative z-3">Professionally designed highly customizable application templates to get started in style.</p>
<div class="flex justify-content-center mt-4 relative z-3">
<a href="https://www.primefaces.org/store" class="font-semibold p-3 border-round flex align-items-center linkbox active">
<span>Learn More</span>
<span>Explore All</span>
<i class="pi pi-arrow-right ml-2"></i>
</a>
</div>

2
pages/landing/ThemeSection.vue
View File

@ -2,7 +2,7 @@
<section class="landing-themes py-8">
<div class="section-header">Themes</div>
<p class="section-detail">Crafted on a design-agnostic infrastructure, choose from a vast amount of themes such as Material, Bootstrap, Tailwind, PrimeOne or develop your own.</p>
<div class="flex flex-wrap justify-content-center">
<div class="flex flex-wrap justify-content-center px-5">
<button type="button" :class="['font-medium linkbox mr-3 mt-4', { active: theme && theme.startsWith('lara') }]" @click="changeTheme('lara', 'teal')">PrimeOne</button>
<button type="button" :class="['font-medium linkbox mr-3 mt-4', { active: theme && theme.startsWith('md') }]" @click="changeTheme('md', 'indigo')">Material</button>
<button type="button" :class="['font-medium linkbox mr-3 mt-4', { active: theme && theme.startsWith('bootstrap4') }]" @click="changeTheme('bootstrap4', 'blue')">Bootstrap</button>