Design review fixes

primefaces · Dec 1, 2022 · 5e1c2d0 · 5e1c2d0
1 parent 58ac76b
commit 5e1c2d0
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 56 deletions.
diff --git a/src/layout/AppMenu.vue b/src/layout/AppMenu.vue
@@ -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>

diff --git a/src/views/pages/Landing.vue b/src/views/pages/Landing.vue
@@ -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> -->
diff --git a/src/views/uikit/Input.vue b/src/views/uikit/Input.vue
@@ -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>

diff --git a/src/views/utilities/Documentation.vue b/src/views/utilities/Documentation.vue
@@ -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>
@@ -42,31 +36,27 @@ npm run dev
 
                 <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>
-                
+
                 <div class="video-container">
                     <iframe className="video" width="560" height="315" src="https://www.youtube.com/embed/AHeSjJFR3ZE" frameborder="0" allowfullscreen></iframe>
                 </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&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>
+                <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>
-<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>
@@ -79,7 +69,7 @@ $transitionDuration:.2s;        /* transition duration of layout elements e.g. s
         width: 100%;
         height: 0;
         padding-bottom: 56.25%;
-    
+
         iframe {
             position: absolute;
             top: 0;
@@ -89,4 +79,4 @@ $transitionDuration:.2s;        /* transition duration of layout elements e.g. s
         }
     }
 }
-</style>
+</style>
diff --git a/src/views/utilities/Icons.vue b/src/views/utilities/Icons.vue
@@ -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,51 +34,46 @@ 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-&#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>
-&lt;i class="pi pi-check"&gt;&lt;/i&gt;
-&lt;i class="pi pi-times"&gt;&lt;/i&gt;
-</CodeHighlight>
+            <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-times"></i>
 
             <h5>Size</h5>
             <p>Size of the icons can easily be changed using font-size property.</p>
 
-<CodeHighlight>
-&lt;i class="pi pi-check"&gt;&lt;/i&gt;
-</CodeHighlight>
+            <CodeHighlight> &lt;i class="pi pi-check"&gt;&lt;/i&gt; </CodeHighlight>
 
             <i class="pi pi-check"></i>
 
-<CodeHighlight>
-&lt;i class="pi pi-check" style="font-size: 2rem"&gt;&lt;/i&gt;
-</CodeHighlight>
+            <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>
 
             <h5>Spinning Animation</h5>
             <p>Special pi-spin class applies continuous rotation to an icon.</p>
-<CodeHighlight>
-&lt;i class="pi pi-spin pi-spinner" style="font-size: 2rem"&gt;&lt;/i&gt;
-</CodeHighlight>
+            <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>
 
             <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" />