landing adjustments and fixes

This commit is contained in:
ATAKAN TEPE 2023-03-07 13:49:25 +03:00
parent fd4fef7679
commit 21e87c9c1d
17 changed files with 341 additions and 190 deletions

View file

@ -2,7 +2,7 @@
<section class="landing-designer py-8">
<div class="section-header">Theme Designer</div>
<p class="section-detail">Designer is the ultimate tool to create your own PrimeVue experience powered by a SASS based theme engine with 500+ variables and a Visual Designer.</p>
<div class="designer-main mt-7 justify-content-center pad-section" :style="{ backgroundImage: `url('https://primefaces.org/cdn/primevue/images/landing/wave-${$appState.darkTheme ? 'dark' : 'light'}.svg')`, backgroundSize: 'cover' }">
<div class="designer-main mt-7 justify-content-center px-5 lg:px-8" :style="{ backgroundImage: `url('https://primefaces.org/cdn/primevue/images/landing/wave-${$appState.darkTheme ? 'dark' : 'light'}.svg')`, backgroundSize: 'cover' }">
<div class="box p-4 flex flex-column md:flex-row z-1 designer-editor">
<div class="mr-0 md:mr-4 p-4 designer-controls box border-bottom-1 border-left-none border-right-none border-top-none md:border-bottom-none md:border-right-1" style="border-radius: '10px'">
<div class="text-center mb-4">
@ -21,16 +21,16 @@
<Dropdown v-model="font" :options="fonts" optionLabel="label" @change="changeFont"></Dropdown>
<span class="font-semibold block mt-4 mb-3">Size</span>
<div class="flex align-items-center">
<div class="flex flex-wrap gap-4 align-items-center">
<div class="flex align-items-center">
<RadioButton id="size-small" v-model="size" value="small" name="sizevalue" />
<label for="size-small" class="ml-2 font-medium">Small</label>
</div>
<div class="flex align-items-center ml-4">
<div class="flex align-items-center ">
<RadioButton id="size-normal" v-model="size" value="normal" name="sizevalue" />
<label for="size-normal" class="ml-2 font-medium">Normal</label>
</div>
<div class="flex align-items-center ml-4">
<div class="flex align-items-center">
<RadioButton id="size-large" v-model="size" value="large" name="sizevalue" />
<label for="size-large" class="ml-2 font-medium">Large</label>
</div>
@ -55,7 +55,7 @@
</div>
</div>
<div :ref="editorRef" :class="editorclass" style="border-radius: '10px'">
<div class="p-fluid formgrid grid">
<div class="p-fluid formgrid grid pt-3">
<div class="field col-12 xl:col-6">
<label for="username" class="font-semibold mb-3 p-component">Username</label>
<InputText id="username" type="text" />
@ -159,7 +159,7 @@ export default {
computed: {
editorclass() {
return [
'p-4 designer-demo',
'designer-demo',
{
'p-input-filled': this.$primevue.config.inputStyle === 'filled',
'demo-size-small': this.size === 'small',