Skip to content

Commit 5e1c2d0

Browse files
bahadirsofuoglubahadirsofuoglu
committed
Design review fixes
1 parent 58ac76b commit 5e1c2d0

File tree

5 files changed

+41
-56
lines changed

5 files changed

+41
-56
lines changed

‎src/layout/AppMenu.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -166,7 +166,7 @@ const model = ref([
166166
<li v-if="item.separator" class="menu-separator"></li>
167167
</template>
168168
<li>
169-
<a href="https://www.primefaces.org/primeblocks-ng/#/">
169+
<a href="https://www.primefaces.org/primeblocks-vue/#/" target="_blank">
170170
<img src="/layout/images/banner-primeblocks.png" alt="Prime Blocks" class="w-full mt-3" />
171171
</a>
172172
</li>

‎src/views/pages/Landing.vue‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ const logoUrl = computed(() => {
5757
<div
5858
id="hero"
5959
class="flex flex-column pt-4 px-4 lg:px-8 overflow-hidden"
60-
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%)"
60+
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%)"
6161
>
6262
<div class="mx-4 md:mx-8 mt-0 md:mt-4">
6363
<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(() => {
271271
<div class="my-5 text-center">
272272
<span class="text-5xl font-bold mr-2 text-900">$0</span>
273273
<span class="text-600">per month</span>
274-
<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>
274+
<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>
275275
</div>
276276
<Divider class="w-full bg-surface-200"></Divider>
277277
<ul class="my-5 list-none p-0 flex text-900 flex-column">
@@ -302,7 +302,7 @@ const logoUrl = computed(() => {
302302
<div class="my-5 text-center">
303303
<span class="text-5xl font-bold mr-2 text-900">$1</span>
304304
<span class="text-600">per month</span>
305-
<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>
305+
<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>
306306
</div>
307307
<Divider class="w-full bg-surface-200"></Divider>
308308
<ul class="my-5 list-none p-0 flex text-900 flex-column">
@@ -333,7 +333,7 @@ const logoUrl = computed(() => {
333333
<div class="my-5 text-center">
334334
<span class="text-5xl font-bold mr-2 text-900">$999</span>
335335
<span class="text-600">per month</span>
336-
<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>
336+
<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>
337337
</div>
338338
<Divider class="w-full bg-surface-200"></Divider>
339339
<ul class="my-5 list-none p-0 flex text-900 flex-column">
@@ -409,7 +409,7 @@ const logoUrl = computed(() => {
409409
<AppConfig simple />
410410
</template>
411411

412-
<style scoped>
412+
<!-- <style scoped>
413413
#hero {
414414
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%);
415415
height: 700px;
@@ -454,4 +454,4 @@ const logoUrl = computed(() => {
454454
max-width: 100%;
455455
}
456456
}
457-
</style>
457+
</style> -->

‎src/views/uikit/Input.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -146,7 +146,7 @@ const searchCountry = (event) => {
146146
</div>
147147
<div class="col-12 md:col-6">
148148
<h5>Rating</h5>
149-
<Rating v-model="ratingValue" />
149+
<Rating v-model="ratingValue" style="position: relative" />
150150
</div>
151151
<div class="col-12 md:col-6">
152152
<h5>ColorPicker</h5>

‎src/views/utilities/Documentation.vue‎

Lines changed: 19 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -7,24 +7,18 @@
77

88
<h5>Getting Started</h5>
99
<p>
10-
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
11-
<a href="https://github.com/primefaces/sakai-vue" class="font-medium">repository</a> from GitHub and install the dependencies with npm or yarn.
10+
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
11+
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.
1212
</p>
13-
<CodeHighlight>
14-
npm install
15-
</CodeHighlight>
13+
<CodeHighlight> npm install </CodeHighlight>
1614

1715
or
1816

19-
<CodeHighlight>
20-
yarn
21-
</CodeHighlight>
17+
<CodeHighlight> yarn </CodeHighlight>
2218

2319
<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>
2420

25-
<CodeHighlight>
26-
npm run dev
27-
</CodeHighlight>
21+
<CodeHighlight> npm run dev </CodeHighlight>
2822

2923
<h5>Structure</h5>
3024
<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
4236

4337
<h5>Integration with Existing Vite Applications</h5>
4438
<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>
45-
39+
4640
<div class="video-container">
4741
<iframe className="video" width="560" height="315" src="https://www.youtube.com/embed/AHeSjJFR3ZE" frameborder="0" allowfullscreen></iframe>
4842
</div>
4943

5044
<h5>PrimeVue Theme</h5>
51-
<p>
52-
Sakai theming is based on the PrimeVue theme being used. Default theme is <b>lara-light-indigo</b>.
53-
</p>
45+
<p>Sakai theming is based on the PrimeVue theme being used. Default theme is <b>lara-light-indigo</b>.</p>
5446

5547
<h5>SASS Variables</h5>
56-
<p>
57-
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.
58-
</p>
48+
<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>
5949

6050
<h6>src/layout/_variables.scss</h6>
61-
<CodeHighlight>
62-
/* General */
63-
<br>
64-
$scale:14px; /* main font size */
65-
<br>
66-
$borderRadius:12px; /* border radius of layout element e.g. card, sidebar */
67-
<br>
68-
$transitionDuration:.2s; /* transition duration of layout elements e.g. sidebar, overlay menus */
69-
</CodeHighlight>
51+
<CodeHighlight>
52+
/* General */
53+
<br />
54+
$scale:14px; /* main font size */
55+
<br />
56+
$borderRadius:12px; /* border radius of layout element e.g. card, sidebar */
57+
<br />
58+
$transitionDuration:.2s; /* transition duration of layout elements e.g. sidebar, overlay menus */
59+
</CodeHighlight>
7060
</div>
7161
</div>
7262
</div>
@@ -79,7 +69,7 @@ $transitionDuration:.2s; /* transition duration of layout elements e.g. s
7969
width: 100%;
8070
height: 0;
8171
padding-bottom: 56.25%;
82-
72+
8373
iframe {
8474
position: absolute;
8575
top: 0;
@@ -89,4 +79,4 @@ $transitionDuration:.2s; /* transition duration of layout elements e.g. s
8979
}
9080
}
9181
}
92-
</style>
82+
</style>

‎src/views/utilities/Icons.vue‎

Lines changed: 14 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup>
2-
import { ref, reactive, onMounted, computed } from 'vue';
2+
import { ref, onMounted, computed } from 'vue';
33
import { useLayout } from '@/layout/composables/layout';
44
55
const { contextPath } = useLayout();
@@ -34,51 +34,46 @@ onMounted(() => {
3434
<div>
3535
<div class="card">
3636
<h3>Icons</h3>
37-
<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>
37+
<p>
38+
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
39+
<a href="https://www.primetek.com.tr" class="font-medium text-primary hover:underline">PrimeTek</a>.
40+
</p>
3841

3942
<h5>Download</h5>
4043
<p>PrimeIcons is available at npm, run the following command to download it to your project.</p>
4144

42-
<CodeHighlight>
43-
npm install primeicons --save
44-
</CodeHighlight>
45+
<CodeHighlight> npm install primeicons --save </CodeHighlight>
4546

4647
<h5>Getting Started</h5>
4748
<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>
4849

49-
<CodeHighlight>
50-
&lt;i class="pi pi-check"&gt;&lt;/i&gt;
51-
&lt;i class="pi pi-times"&gt;&lt;/i&gt;
52-
</CodeHighlight>
50+
<CodeHighlight> &lt;i class="pi pi-check"&gt;&lt;/i&gt; &lt;i class="pi pi-times"&gt;&lt;/i&gt; </CodeHighlight>
5351

5452
<i class="pi pi-check" style="margin-right: 0.5rem"></i>
5553
<i class="pi pi-times"></i>
5654

5755
<h5>Size</h5>
5856
<p>Size of the icons can easily be changed using font-size property.</p>
5957

60-
<CodeHighlight>
61-
&lt;i class="pi pi-check"&gt;&lt;/i&gt;
62-
</CodeHighlight>
58+
<CodeHighlight> &lt;i class="pi pi-check"&gt;&lt;/i&gt; </CodeHighlight>
6359

6460
<i class="pi pi-check"></i>
6561

66-
<CodeHighlight>
67-
&lt;i class="pi pi-check" style="font-size: 2rem"&gt;&lt;/i&gt;
68-
</CodeHighlight>
62+
<CodeHighlight> &lt;i class="pi pi-check" style="font-size: 2rem"&gt;&lt;/i&gt; </CodeHighlight>
6963

7064
<i class="pi pi-check" style="font-size: 2rem"></i>
7165

7266
<h5>Spinning Animation</h5>
7367
<p>Special pi-spin class applies continuous rotation to an icon.</p>
74-
<CodeHighlight>
75-
&lt;i class="pi pi-spin pi-spinner" style="font-size: 2rem"&gt;&lt;/i&gt;
76-
</CodeHighlight>
68+
<CodeHighlight> &lt;i class="pi pi-spin pi-spinner" style="font-size: 2rem"&gt;&lt;/i&gt; </CodeHighlight>
7769

7870
<i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
7971

8072
<h5>List of Icons</h5>
81-
<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>
73+
<p>
74+
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
75+
tracker.
76+
</p>
8277

8378
<InputText v-model="filter" class="w-full p-3 mt-3 mb-5" placeholder="Search an icon" />
8479

0 commit comments

Comments
 (0)