Skip to content

Commit

Permalink
Fully working with Nuxt3
Browse files Browse the repository at this point in the history 
Signed-off-by: Cole Gentry <[email protected]>
  • Loading branch information
@SomethingNew71
SomethingNew71 committed Jun 5, 2023
1 parent 7999bae commit f89aa35
Show file tree
Hide file tree
Showing 5 changed files with 112 additions and 109 deletions.
57 changes: 47 additions & 10 deletions components/NeedleTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,16 +10,53 @@
</h2>
</div>
<div class="card-content">
<o-table
:data="table.items"
:columns="table.columns"
:narrowed="true"
:hoverable="true"
:paginated="table.items.length >= 14 ? true : false"
:per-page="10"
icon-pack="fas"
:mobile-cards="false"
/>
<client-only>
<o-table
:data="table.items"
:narrowed="true"
:hoverable="true"
:paginated="table.items.length >= 14 ? true : false"
:per-page="10"
icon-pack="fas"
:mobile-cards="false"
>
<o-table-column
field="engineSize"
label="Engine Size"
v-slot:default="props"
>
<span v-html="props.row.engineSize"></span>
</o-table-column>
<o-table-column
field="needleStd"
label="Needle Std"
v-slot:default="props"
>
<span v-html="props.row.needleStd"></span>
</o-table-column>
<o-table-column
field="needleRich"
label="Needle Rich"
v-slot:default="props"
>
<span v-html="props.row.needleRich"></span>
</o-table-column>
<o-table-column
field="needleLean"
label="Needle Lean"
v-slot:default="props"
>
<span v-html="props.row.needleLea"></span>
</o-table-column>
<o-table-column
field="springType"
label="Spring Type"
v-slot:default="props"
>
<span v-html="props.row.springType"></span>
</o-table-column>
</o-table>
</client-only>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion nuxt.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ export default defineNuxtConfig({
** Plugins to load before mounting the App
*/
plugins: [
{ src: '~/plugins/oruga.js', mode: 'client' },
'~/plugins/oruga.js',
{ src: '~/plugins/highcharts.js', mode: 'client' },
{ src: '~/plugins/vue-navigation-bar.js', mode: 'client' },
{ src: '~/plugins/vue-gtag.js', mode: 'client' },
Expand Down
7 changes: 7 additions & 0 deletions pages/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -346,6 +346,13 @@
webp: 'https://classicminidiy.s3.amazonaws.com/cloud-icon/icons8-color-palette-100.webp',
to: '/technical/colors',
},
{
title: 'Parts Equivalency',
image:
'https://classicminidiy.s3.amazonaws.com/cloud-icon/icons8-support-100.png',
webp: 'https://classicminidiy.s3.amazonaws.com/cloud-icon/icons8-support-100.webp',
to: '/technical/parts',
},
{
title: 'Compression Ratio Calculator',
image:
Expand Down
21 changes: 11 additions & 10 deletions pages/technical/parts.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,16 +47,17 @@
</h2>
</div>
<div class="card-content">
<o-table
:data="table.items"
:columns="table.columns"
:narrowed="true"
:hoverable="true"
:paginated="table.items.length >= 14 ? true : false"
:per-page="10"
icon-pack="fas"
:mobile-cards="false"
/>
<client-only>
<o-table
:data="table.items"
:columns="table.columns"
:narrowed="true"
:hoverable="true"
:paginated="table.items.length >= 14 ? true : false"
:per-page="10"
icon-pack="fas"
:mobile-cards="false"
/></client-only>
</div>
</div>
</div>
Expand Down
134 changes: 46 additions & 88 deletions pages/technical/wheels.vue
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,6 @@
<template>
<div>
<hero
:title="title"
:subtitle="subtitle"
:centered="centered"
:navigation="true"
/>
<hero :navigation="true" />
<section class="section">
<div class="columns">
<div class="column is-12">
Expand Down Expand Up @@ -80,7 +75,7 @@
Use the search below to search by wheel name, offset, size
or material.
</p>
<o-field class="mb-4" position="left">
<o-field class="mb-4" :position="'left'">
<o-input
v-model="searchString"
placeholder="Ex. Minilite"
Expand Down Expand Up @@ -110,7 +105,7 @@
</o-button>
<o-tooltip
v-else
position="top"
:position="'top'"
:label="`Already displaying all ${selectedSize} inch wheels`"
>
<o-button disabled expanded class="button is-primary">
Expand Down Expand Up @@ -146,18 +141,14 @@
class="column is-6"
>
<o-pagination
v-model="currentPage"
v-model:current="currentPage"
:total="totalResults"
:simple="true"
:range-before="2"
:range-after="2"
:order="'is-right'"
:per-page="perPage"
:icon-pack="'fa'"
aria-next-label="Next page"
aria-previous-label="Previous page"
aria-page-label="Page"
aria-current-label="Current page"
@change="changePages()"
>
</o-pagination>
Expand All @@ -176,8 +167,8 @@
label="Suggest changes to the details of this wheel"
animated
multilined
type="is-light"
position="left"
:type="'light'"
:position="'left'"
class="edit-icon-link"
>
<o-button
Expand All @@ -188,13 +179,12 @@
@click="editWheel(wheel)"
/>
</o-tooltip>
<figure class="image is-square">
<div class="image is-square">
<img
:src="wheel.imagewebp"
:webp-fallback="wheel.imagepath"
:src="wheel.imagepath"
:alt="`Image of ${wheel.name}`"
/>
</figure>
</div>
</div>
<div class="card-content">
<div class="media mb-1">
Expand Down Expand Up @@ -232,49 +222,32 @@
</div>
</div>
<div v-if="wheel.notes" class="content">
<o-collapse
animation="slide"
:open="false"
position="top"
>
<a slot="trigger" slot-scope="props">
<o-icon
pack="fad"
:icon="
!props.open ? 'chevron-down' : 'chevron-up'
"
></o-icon>
{{
!props.open
? 'Additional details'
: 'Hide details'
}}
</a>
<div>
<p v-html="wheel.notes"></p>
</o-collapse>
</div>
</div>
</div>
</article>
</div>
<div
<!-- <div
v-if="index === 3 || index === 9 || index === 20"
:key="index"
class="column is-4"
>
<article class="card">
<div class="card-content">
<!-- <InFeedAdsense
<InFeedAdsense
data-ad-layout-key="+2a+rs+2z-6m+25"
data-ad-client="ca-pub-0523971861051053"
data-ad-slot="4011964258"
class="adsbygoogle"
style="display: block"
data-ad-format="fluid"
>
</InFeedAdsense> -->
</InFeedAdsense>
</div>
</article>
</div>
</div> -->
</template>
</div>
<div
Expand All @@ -293,17 +266,13 @@
class="column is-12"
>
<o-pagination
v-model="currentPage"
v-model:current="currentPage"
:total="totalResults"
:range-before="2"
:range-after="2"
:rangeBefore="2"
:rangeAfter="2"
:order="'is-centered'"
:per-page="perPage"
:icon-pack="'fad'"
aria-next-label="Next page"
aria-previous-label="Previous page"
aria-page-label="Page"
aria-current-label="Current page"
:perPage="perPage"
:iconPack="'fad'"
@change="changePages()"
>
</o-pagination>
Expand All @@ -329,18 +298,14 @@
<script>
import Fuse from 'fuse.js';
import { debounce } from 'debounce';
import { useProgrammatic } from '@oruga-ui/oruga-next';
import tenInchWheels from '~/data/wheels/10.json';
import twelveInchWheels from '~/data/wheels/12.json';
import thirteenInchWheels from '~/data/wheels/13.json';
import PatreonCard from '~/components/PatreonCard';
import SkeletonLoader from '~/components/SkeletonLoader';
import WheelEditForm from '~/components/WheelEditForm';
const { oruga } = useProgrammatic();
export default {
components: {
PatreonCard,
SkeletonLoader,
},
export default defineComponent({
data() {
return {
allWheelsVisible: true,
Expand All @@ -350,30 +315,28 @@
isLoading: false,
noResults: false,
currentPage: 1,
perPage: 10,
perPage: 9,
};
},
head() {
return {
title: 'Technical - Wheel Dictionary',
meta: [
{
hid: 'description',
name: 'description',
content:
'The Classic Mini DIY wheel dictionary is here to help you compare all the different wheel options sold on the Classic Mini. Whether looking for something stock or race inspired learn about your options here.',
},
{
property: 'og:title',
content: 'Technical - Wheel Dictionary',
},
{
property: 'og:image',
content:
'https://classicminidiy.s3.amazonaws.com/cloud-icon/icons8-fiat-500-100.png',
},
],
};
head: {
title: 'Technical - Wheel Dictionary',
meta: [
{
hid: 'description',
name: 'description',
content:
'The Classic Mini DIY wheel dictionary is here to help you compare all the different wheel options sold on the Classic Mini. Whether looking for something stock or race inspired learn about your options here.',
},
{
property: 'og:title',
content: 'Technical - Wheel Dictionary',
},
{
property: 'og:image',
content:
'https://classicminidiy.s3.amazonaws.com/cloud-icon/icons8-fiat-500-100.png',
},
],
},
computed: {
// Computed value of the total amount of wheels in the selected results.
Expand Down Expand Up @@ -488,19 +451,14 @@
},
editWheel(wheel) {
this.$buefy.modal.open({
parent: this,
props: {
wheel,
},
oruga.modal.open({
props: { wheel },
component: WheelEditForm,
hasModalCard: true,
trapFocus: true,
canCancel: ['escape', 'outside'],
});
},
},
};
});
</script>

<style lang="scss" scoped>
Expand Down

1 comment on commit f89aa35

@vercel
Copy link

@vercel vercel bot commented on f89aa35 Jun 5, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

classicminidiy – ./

classicminidiy.vercel.app
classicminidiy-git-master-classicminidiy.vercel.app
classicminidiy-classicminidiy.vercel.app
classicminidiy.com
www.classicminidiy.com

Please sign in to comment.