Gava/agenciapsilmno
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Design review fixes

Browse Source
This commit is contained in:
Bahadır Sofuoğlu
2022-12-01 14:50:40 +03:00
parent 58ac76b21e
commit 5e1c2d0a0f
5 changed files with 41 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/layout/AppMenu.vue
View File

@@ -166,7 +166,7 @@ const model = ref([
<li v-if="item.separator" class="menu-separator"></li> <li v-if="item.separator" class="menu-separator"></li>
</template> </template>
<li> <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" /> <img src="/layout/images/banner-primeblocks.png" alt="Prime Blocks" class="w-full mt-3" />
</a> </a>
</li> </li>

12
src/views/pages/Landing.vue
View File

@@ -57,7 +57,7 @@ const logoUrl = computed(() => {
<div <div
id="hero" id="hero"
class="flex flex-column pt-4 px-4 lg:px-8 overflow-hidden" 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"> <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> <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"> <div class="my-5 text-center">
<span class="text-5xl font-bold mr-2 text-900">$0</span> <span class="text-5xl font-bold mr-2 text-900">$0</span>
<span class="text-600">per month</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> </div>
<Divider class="w-full bg-surface-200"></Divider> <Divider class="w-full bg-surface-200"></Divider>
<ul class="my-5 list-none p-0 flex text-900 flex-column"> <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"> <div class="my-5 text-center">
<span class="text-5xl font-bold mr-2 text-900">$1</span> <span class="text-5xl font-bold mr-2 text-900">$1</span>
<span class="text-600">per month</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> </div>
<Divider class="w-full bg-surface-200"></Divider> <Divider class="w-full bg-surface-200"></Divider>
<ul class="my-5 list-none p-0 flex text-900 flex-column"> <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"> <div class="my-5 text-center">
<span class="text-5xl font-bold mr-2 text-900">$999</span> <span class="text-5xl font-bold mr-2 text-900">$999</span>
<span class="text-600">per month</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> </div>
<Divider class="w-full bg-surface-200"></Divider> <Divider class="w-full bg-surface-200"></Divider>
<ul class="my-5 list-none p-0 flex text-900 flex-column"> <ul class="my-5 list-none p-0 flex text-900 flex-column">
@@ -409,7 +409,7 @@ const logoUrl = computed(() => {
<AppConfig simple /> <AppConfig simple />
</template> </template>
<style scoped> <!-- <style scoped>
#hero { #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%); 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; height: 700px;
@@ -454,4 +454,4 @@ const logoUrl = computed(() => {
max-width: 100%; max-width: 100%;
} }
} }
</style> </style> -->

2
src/views/uikit/Input.vue
View File

@@ -146,7 +146,7 @@ const searchCountry = (event) => {
</div> </div>
<div class="col-12 md:col-6"> <div class="col-12 md:col-6">
<h5>Rating</h5> <h5>Rating</h5>
<Rating v-model="ratingValue" /> <Rating v-model="ratingValue" style="position: relative" />
</div> </div>
<div class="col-12 md:col-6"> <div class="col-12 md:col-6">
<h5>ColorPicker</h5> <h5>ColorPicker</h5>

48
src/views/utilities/Documentation.vue
View File

@@ -7,24 +7,18 @@
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p> <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 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
<a href="https://github.com/primefaces/sakai-vue" class="font-medium">repository</a> from GitHub and install the dependencies with npm or yarn. 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> </p>
<CodeHighlight> <CodeHighlight> npm install </CodeHighlight>
npm install
</CodeHighlight>
or or
<CodeHighlight> <CodeHighlight> yarn </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> <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> <CodeHighlight> npm run dev </CodeHighlight>
npm run dev
</CodeHighlight>
<h5>Structure</h5> <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> <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>
@@ -42,31 +36,27 @@ npm run dev
<h5>Integration with Existing Vite Applications</h5> <h5>Integration with Existing Vite Applications</h5>
<p>Only the folders that are related to the layout needs to move in to your project. We've created a short tutorial with details.</p> <p>Only the folders that are related to the layout needs to move in to your project. We've created a short tutorial with details.</p>
<div class="video-container"> <div class="video-container">
<iframe className="video" width="560" height="315" src="https://www.youtube.com/embed/AHeSjJFR3ZE" frameborder="0" allowfullscreen></iframe> <iframe className="video" width="560" height="315" src="https://www.youtube.com/embed/AHeSjJFR3ZE" frameborder="0" allowfullscreen></iframe>
</div> </div>
<h5>PrimeVue Theme</h5> <h5>PrimeVue Theme</h5>
<p> <p>Sakai theming is based on the PrimeVue theme being used. Default theme is <b>lara-light-indigo</b>.</p>
Sakai theming is based on the PrimeVue theme being used. Default theme is <b>lara-light-indigo</b>.
</p>
<h5>SASS Variables</h5> <h5>SASS Variables</h5>
<p> <p>In case you&apos;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>
In case you&apos;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> <h6>src/layout/_variables.scss</h6>
<CodeHighlight> <CodeHighlight>
/* General */ /* General */
<br> <br />
$scale:14px; /* main font size */ $scale:14px; /* main font size */
<br> <br />
$borderRadius:12px; /* border radius of layout element e.g. card, sidebar */ $borderRadius:12px; /* border radius of layout element e.g. card, sidebar */
<br> <br />
$transitionDuration:.2s; /* transition duration of layout elements e.g. sidebar, overlay menus */ $transitionDuration:.2s; /* transition duration of layout elements e.g. sidebar, overlay menus */
</CodeHighlight> </CodeHighlight>
</div> </div>
</div> </div>
</div> </div>
@@ -79,7 +69,7 @@ $transitionDuration:.2s; /* transition duration of layout elements e.g. s
width: 100%; width: 100%;
height: 0; height: 0;
padding-bottom: 56.25%; padding-bottom: 56.25%;
iframe { iframe {
position: absolute; position: absolute;
top: 0; top: 0;
@@ -89,4 +79,4 @@ $transitionDuration:.2s; /* transition duration of layout elements e.g. s
} }
} }
} }
</style> </style>

33
src/views/utilities/Icons.vue
View File

@@ -1,5 +1,5 @@
<script setup> <script setup>
import { ref, reactive, onMounted, computed } from 'vue'; import { ref, onMounted, computed } from 'vue';
import { useLayout } from '@/layout/composables/layout'; import { useLayout } from '@/layout/composables/layout';
const { contextPath } = useLayout(); const { contextPath } = useLayout();
@@ -34,22 +34,20 @@ onMounted(() => {
<div> <div>
<div class="card"> <div class="card">
<h3>Icons</h3> <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> <h5>Download</h5>
<p>PrimeIcons is available at npm, run the following command to download it to your project.</p> <p>PrimeIcons is available at npm, run the following command to download it to your project.</p>
<CodeHighlight> <CodeHighlight> npm install primeicons --save </CodeHighlight>
npm install primeicons --save
</CodeHighlight>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>PrimeIcons use the <strong>pi pi-&#123;icon&#125;</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> <p>PrimeIcons use the <strong>pi pi-&#123;icon&#125;</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> <CodeHighlight> &lt;i class="pi pi-check"&gt;&lt;/i&gt; &lt;i class="pi pi-times"&gt;&lt;/i&gt; </CodeHighlight>
&lt;i class="pi pi-check"&gt;&lt;/i&gt;
&lt;i class="pi pi-times"&gt;&lt;/i&gt;
</CodeHighlight>
<i class="pi pi-check" style="margin-right: 0.5rem"></i> <i class="pi pi-check" style="margin-right: 0.5rem"></i>
<i class="pi pi-times"></i> <i class="pi pi-times"></i>
@@ -57,28 +55,25 @@ npm install primeicons --save
<h5>Size</h5> <h5>Size</h5>
<p>Size of the icons can easily be changed using font-size property.</p> <p>Size of the icons can easily be changed using font-size property.</p>
<CodeHighlight> <CodeHighlight> &lt;i class="pi pi-check"&gt;&lt;/i&gt; </CodeHighlight>
&lt;i class="pi pi-check"&gt;&lt;/i&gt;
</CodeHighlight>
<i class="pi pi-check"></i> <i class="pi pi-check"></i>
<CodeHighlight> <CodeHighlight> &lt;i class="pi pi-check" style="font-size: 2rem"&gt;&lt;/i&gt; </CodeHighlight>
&lt;i class="pi pi-check" style="font-size: 2rem"&gt;&lt;/i&gt;
</CodeHighlight>
<i class="pi pi-check" style="font-size: 2rem"></i> <i class="pi pi-check" style="font-size: 2rem"></i>
<h5>Spinning Animation</h5> <h5>Spinning Animation</h5>
<p>Special pi-spin class applies continuous rotation to an icon.</p> <p>Special pi-spin class applies continuous rotation to an icon.</p>
<CodeHighlight> <CodeHighlight> &lt;i class="pi pi-spin pi-spinner" style="font-size: 2rem"&gt;&lt;/i&gt; </CodeHighlight>
&lt;i class="pi pi-spin pi-spinner" style="font-size: 2rem"&gt;&lt;/i&gt;
</CodeHighlight>
<i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i> <i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
<h5>List of Icons</h5> <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" /> <InputText v-model="filter" class="w-full p-3 mt-3 mb-5" placeholder="Search an icon" />