Design review fixes
This commit is contained in:
Bahadır Sofuoğlu
@@ -166,7 +166,7 @@ const model = ref([
|
||||
<li v-if="item.separator" class="menu-separator"></li>
|
||||
</template>
|
||||
<li>
|
||||
<a href="https://www.primefaces.org/primeblocks-ng/#/">
|
||||
<a href="https://www.primefaces.org/primeblocks-vue/#/" target="_blank">
|
||||
<img src="/layout/images/banner-primeblocks.png" alt="Prime Blocks" class="w-full mt-3" />
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@@ -57,7 +57,7 @@ const logoUrl = computed(() => {
|
||||
<div
|
||||
id="hero"
|
||||
class="flex flex-column pt-4 px-4 lg:px-8 overflow-hidden"
|
||||
style="background: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), radial-gradient(77.36% 256.97% at 77.36% 57.52%, #eeefaf 0%, #c3e3fa 100%); clip-path: ellipse(150% 87% at 93% 13%)"
|
||||
style="background: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), radial-gradient(77.36% 256.97% at 77.36% 57.52%, rgb(238, 239, 175) 0%, rgb(195, 227, 250) 100%); clip-path: ellipse(150% 87% at 93% 13%)"
|
||||
>
|
||||
<div class="mx-4 md:mx-8 mt-0 md:mt-4">
|
||||
<h1 class="text-6xl font-bold text-gray-900 line-height-2"><span class="font-light block">Eu sem integer</span>eget magna fermentum</h1>
|
||||
@@ -271,7 +271,7 @@ const logoUrl = computed(() => {
|
||||
<div class="my-5 text-center">
|
||||
<span class="text-5xl font-bold mr-2 text-900">$0</span>
|
||||
<span class="text-600">per month</span>
|
||||
<button pButton pRipple label="Get Started" class="block mx-auto mt-4 p-button-rounded border-none ml-3 font-light line-height-2 bg-blue-500 text-white"></button>
|
||||
<Button label="Get Started" class="block mx-auto mt-4 p-button-rounded border-none ml-3 font-light line-height-2 bg-blue-500 text-white"></Button>
|
||||
</div>
|
||||
<Divider class="w-full bg-surface-200"></Divider>
|
||||
<ul class="my-5 list-none p-0 flex text-900 flex-column">
|
||||
@@ -302,7 +302,7 @@ const logoUrl = computed(() => {
|
||||
<div class="my-5 text-center">
|
||||
<span class="text-5xl font-bold mr-2 text-900">$1</span>
|
||||
<span class="text-600">per month</span>
|
||||
<button pButton pRipple label="Try Free" class="block mx-auto mt-4 p-button-rounded border-none ml-3 font-light line-height-2 bg-blue-500 text-white"></button>
|
||||
<Button label="Try Free" class="block mx-auto mt-4 p-button-rounded border-none ml-3 font-light line-height-2 bg-blue-500 text-white"></Button>
|
||||
</div>
|
||||
<Divider class="w-full bg-surface-200"></Divider>
|
||||
<ul class="my-5 list-none p-0 flex text-900 flex-column">
|
||||
@@ -333,7 +333,7 @@ const logoUrl = computed(() => {
|
||||
<div class="my-5 text-center">
|
||||
<span class="text-5xl font-bold mr-2 text-900">$999</span>
|
||||
<span class="text-600">per month</span>
|
||||
<button pButton pRipple label="Get a Quote" class="block mx-auto mt-4 p-button-rounded border-none ml-3 font-light line-height-2 bg-blue-500 text-white"></button>
|
||||
<Button label="Get a Quote" class="block mx-auto mt-4 p-button-rounded border-none ml-3 font-light line-height-2 bg-blue-500 text-white"></Button>
|
||||
</div>
|
||||
<Divider class="w-full bg-surface-200"></Divider>
|
||||
<ul class="my-5 list-none p-0 flex text-900 flex-column">
|
||||
@@ -409,7 +409,7 @@ const logoUrl = computed(() => {
|
||||
<AppConfig simple />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
<!-- <style scoped>
|
||||
#hero {
|
||||
background: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), radial-gradient(77.36% 256.97% at 77.36% 57.52%, #eeefaf 0%, #c3e3fa 100%);
|
||||
height: 700px;
|
||||
@@ -454,4 +454,4 @@ const logoUrl = computed(() => {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style> -->
|
||||
|
||||
@@ -146,7 +146,7 @@ const searchCountry = (event) => {
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<h5>Rating</h5>
|
||||
<Rating v-model="ratingValue" />
|
||||
<Rating v-model="ratingValue" style="position: relative" />
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<h5>ColorPicker</h5>
|
||||
|
||||
@@ -7,24 +7,18 @@
|
||||
|
||||
<h5>Getting Started</h5>
|
||||
<p>
|
||||
Sakai is an application template for Vue based on the <a href="https://github.com/vuejs/create-vue" class="font-medium text-primary hover:underline">create-vue</a>, the recommended way to start a <strong>Vite-powered</strong> Vue projects. To get started, clone the
|
||||
<a href="https://github.com/primefaces/sakai-vue" class="font-medium">repository</a> from GitHub and install the dependencies with npm or yarn.
|
||||
Sakai is an application template for Vue based on the <a href="https://github.com/vuejs/create-vue" class="font-medium text-primary hover:underline">create-vue</a>, the recommended way to start a <strong>Vite-powered</strong> Vue
|
||||
projects. To get started, clone the <a href="https://github.com/primefaces/sakai-vue" class="font-medium">repository</a> from GitHub and install the dependencies with npm or yarn.
|
||||
</p>
|
||||
<CodeHighlight>
|
||||
npm install
|
||||
</CodeHighlight>
|
||||
<CodeHighlight> npm install </CodeHighlight>
|
||||
|
||||
or
|
||||
|
||||
<CodeHighlight>
|
||||
yarn
|
||||
</CodeHighlight>
|
||||
<CodeHighlight> yarn </CodeHighlight>
|
||||
|
||||
<p>Next step is running the application using the serve script and navigate to <i>http://localhost:5173/</i> to view the application. That is it, you may now start with the development of your application using the Sakai template.</p>
|
||||
|
||||
<CodeHighlight>
|
||||
npm run dev
|
||||
</CodeHighlight>
|
||||
<CodeHighlight> npm run dev </CodeHighlight>
|
||||
|
||||
<h5>Structure</h5>
|
||||
<p>Sakai consists of a couple folders, demos and layout have been separated so that you can easily remove what is not necessary for your application.</p>
|
||||
@@ -48,25 +42,21 @@ npm run dev
|
||||
</div>
|
||||
|
||||
<h5>PrimeVue Theme</h5>
|
||||
<p>
|
||||
Sakai theming is based on the PrimeVue theme being used. Default theme is <b>lara-light-indigo</b>.
|
||||
</p>
|
||||
<p>Sakai theming is based on the PrimeVue theme being used. Default theme is <b>lara-light-indigo</b>.</p>
|
||||
|
||||
<h5>SASS Variables</h5>
|
||||
<p>
|
||||
In case you'd like to customize the main layout variables, open <b>_variables.scss</b> file under src/layout folder. Saving the changes will be reflected instantly at your browser.
|
||||
</p>
|
||||
<p>In case you'd like to customize the main layout variables, open <b>_variables.scss</b> file under src/layout folder. Saving the changes will be reflected instantly at your browser.</p>
|
||||
|
||||
<h6>src/layout/_variables.scss</h6>
|
||||
<CodeHighlight>
|
||||
/* General */
|
||||
<br>
|
||||
$scale:14px; /* main font size */
|
||||
<br>
|
||||
$borderRadius:12px; /* border radius of layout element e.g. card, sidebar */
|
||||
<br>
|
||||
$transitionDuration:.2s; /* transition duration of layout elements e.g. sidebar, overlay menus */
|
||||
</CodeHighlight>
|
||||
<CodeHighlight>
|
||||
/* General */
|
||||
<br />
|
||||
$scale:14px; /* main font size */
|
||||
<br />
|
||||
$borderRadius:12px; /* border radius of layout element e.g. card, sidebar */
|
||||
<br />
|
||||
$transitionDuration:.2s; /* transition duration of layout elements e.g. sidebar, overlay menus */
|
||||
</CodeHighlight>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, computed } from 'vue';
|
||||
import { ref, onMounted, computed } from 'vue';
|
||||
import { useLayout } from '@/layout/composables/layout';
|
||||
|
||||
const { contextPath } = useLayout();
|
||||
@@ -34,22 +34,20 @@ onMounted(() => {
|
||||
<div>
|
||||
<div class="card">
|
||||
<h3>Icons</h3>
|
||||
<p>PrimeVue components internally use <a href="https://github.com/primefaces/primeicons" class="font-medium text-primary hover:underline">PrimeIcons</a> library, the official icons suite from <a href="https://www.primetek.com.tr" class="font-medium text-primary hover:underline">PrimeTek</a>.</p>
|
||||
<p>
|
||||
PrimeVue components internally use <a href="https://github.com/primefaces/primeicons" class="font-medium text-primary hover:underline">PrimeIcons</a> library, the official icons suite from
|
||||
<a href="https://www.primetek.com.tr" class="font-medium text-primary hover:underline">PrimeTek</a>.
|
||||
</p>
|
||||
|
||||
<h5>Download</h5>
|
||||
<p>PrimeIcons is available at npm, run the following command to download it to your project.</p>
|
||||
|
||||
<CodeHighlight>
|
||||
npm install primeicons --save
|
||||
</CodeHighlight>
|
||||
<CodeHighlight> npm install primeicons --save </CodeHighlight>
|
||||
|
||||
<h5>Getting Started</h5>
|
||||
<p>PrimeIcons use the <strong>pi pi-{icon}</strong> syntax such as <strong>pi pi-check</strong>. A standalone icon can be displayed using an element like <i>i</i> or <i>span</i></p>
|
||||
|
||||
<CodeHighlight>
|
||||
<i class="pi pi-check"></i>
|
||||
<i class="pi pi-times"></i>
|
||||
</CodeHighlight>
|
||||
<CodeHighlight> <i class="pi pi-check"></i> <i class="pi pi-times"></i> </CodeHighlight>
|
||||
|
||||
<i class="pi pi-check" style="margin-right: 0.5rem"></i>
|
||||
<i class="pi pi-times"></i>
|
||||
@@ -57,28 +55,25 @@ npm install primeicons --save
|
||||
<h5>Size</h5>
|
||||
<p>Size of the icons can easily be changed using font-size property.</p>
|
||||
|
||||
<CodeHighlight>
|
||||
<i class="pi pi-check"></i>
|
||||
</CodeHighlight>
|
||||
<CodeHighlight> <i class="pi pi-check"></i> </CodeHighlight>
|
||||
|
||||
<i class="pi pi-check"></i>
|
||||
|
||||
<CodeHighlight>
|
||||
<i class="pi pi-check" style="font-size: 2rem"></i>
|
||||
</CodeHighlight>
|
||||
<CodeHighlight> <i class="pi pi-check" style="font-size: 2rem"></i> </CodeHighlight>
|
||||
|
||||
<i class="pi pi-check" style="font-size: 2rem"></i>
|
||||
|
||||
<h5>Spinning Animation</h5>
|
||||
<p>Special pi-spin class applies continuous rotation to an icon.</p>
|
||||
<CodeHighlight>
|
||||
<i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
|
||||
</CodeHighlight>
|
||||
<CodeHighlight> <i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i> </CodeHighlight>
|
||||
|
||||
<i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
|
||||
|
||||
<h5>List of Icons</h5>
|
||||
<p>Here is the current list of PrimeIcons, more icons are added periodically. You may also <a href="https://github.com/primefaces/primeicons/issues" class="font-medium text-primary hover:underline">request new icons</a> at the issue tracker.</p>
|
||||
<p>
|
||||
Here is the current list of PrimeIcons, more icons are added periodically. You may also <a href="https://github.com/primefaces/primeicons/issues" class="font-medium text-primary hover:underline">request new icons</a> at the issue
|
||||
tracker.
|
||||
</p>
|
||||
|
||||
<InputText v-model="filter" class="w-full p-3 mt-3 mb-5" placeholder="Search an icon" />
|
||||
|
||||
|
||||
Reference in New Issue
Block a user