Skip to content

Commit

Permalink
Merge pull request #16 from parameter1/allSortsOfChanges
Browse files Browse the repository at this point in the history
Initial pass at implementing the new design
  • Loading branch information
brandonbk authored Sep 23, 2021
2 parents d8b2114 + 9d25e23 commit 47ac63a
Show file tree
Hide file tree
Showing 26 changed files with 497 additions and 145 deletions.
1 change: 1 addition & 0 deletions app/app.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
<head {{ HEAD_ATTRS }}>
<link rel="stylesheet" href="https://use.typekit.net/ucp0yyn.css">
{{ HEAD }}
</head>
<body {{ BODY_ATTRS }} class="text-primary-1 antialiased">
Expand Down
35 changes: 35 additions & 0 deletions app/assets/styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -11,3 +11,38 @@
.prose a:hover {
text-decoration: underline !important;
}

.menu-item-link {
font-family: 'urw-din-semi-condensed';
font-size: 18px;
font-weight: 700;
text-transform: uppercase;
font-style: italic;
transform: skewX(-15deg);
}
.menu-item-link-wrapper {
border-bottom: solid 1px #E4E6E9;
}
.menu-item-link-contents {
transform: skewX(15deg);
}
.manage-profile {
background-color: #253746;
}

.manage-profile .menu-item-link,
.manage-profile .menu-item-link:hover {
color: #fff;
background-color: #253746;
border-bottom: none;
}

.intro-image-wrapper img {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 0%);
max-width: initial;
height: 288px;

}
2 changes: 1 addition & 1 deletion app/components/ag-view-solutions.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<a href="https://agviewsolutions.com" target="_blank" rel="noopener">
<img
class="w-16 h-16 print:h-10 print:w-10"
src="https://img.highoilsoy.com/ag-view-solutions-logo.png"
src="https://img.highoilsoy.com/ag-view-solutions-? 2x"
alt="Ag View Solutions logo"
>
</a>
Expand Down
11 changes: 9 additions & 2 deletions app/components/article-grid-list.vue
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
v-for="article in articles"
:key="article.id"
:title="article.title"
:image="getImagePath(article.image)"
:teaser="article.teaser"
:href="`/article/${article.slug}`"
/>
Expand Down Expand Up @@ -44,10 +45,16 @@ export default {
containerClasses: [
'grid',
'grid-cols-1',
'md:grid-cols-2',
'lg:grid-cols-4',
'sm:grid-cols-2',
'md:grid-cols-4',
'gap-4',
],
}),
methods: {
getImagePath(path) {
if (!path) return '';
return `${path}?fit=crop&w=300&h=200`;
},
},
};
</script>
15 changes: 1 addition & 14 deletions app/components/article-list-page.vue
Original file line number Diff line number Diff line change
@@ -1,10 +1,7 @@
<template>
<div class="pt-2 pb-6 md:py-6">
<div class="max-w-7xl mx-auto sm:px-6 md:px-8">
<div class="max-w-6xl mx-auto sm:px-6 md:px-8">
<div class="p-4">
<h1 class="text-3xl font-semibold mb-8">
{{ title }}
</h1>
<article-grid-list :alias="alias">
<template #grid-before>
<slot name="grid-before" />
Expand All @@ -27,10 +24,6 @@ export default {
},
props: {
title: {
type: String,
required: true,
},
path: {
type: String,
required: true,
Expand All @@ -42,11 +35,5 @@ export default {
return this.path.replace(/^\//, '');
},
},
head() {
return {
title: this.title,
};
},
};
</script>
42 changes: 40 additions & 2 deletions app/components/common/button.vue
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,9 @@ export default {
validator: (value) => [
'logo-blue',
'logo-green',
'logo-yellow',
'logo-white',
'logo-white-rd',
'red-600',
'secondary-3',
].includes(value),
Expand Down Expand Up @@ -65,8 +68,6 @@ export default {
'border-transparent',
'text-sm',
'font-bold',
'rounded-md',
'text-white',
'focus:outline-none',
'disabled:cursor-not-allowed',
'disabled:bg-gray-300',
Expand All @@ -90,27 +91,64 @@ export default {
'focus:border-logo-blue',
'focus:shadow-outline-gray',
'active:bg-opacity-85',
'text-white',
],
'logo-green': [
'bg-logo-green',
'focus:bg-opacity-85',
'focus:border-logo-green',
'focus:shadow-outline-gray',
'active:bg-opacity-85',
'text-white',
],
'logo-yellow': [
'bg-logo-yellow',
'focus:bg-opacity-85',
'focus:border-logo-yellow',
'focus:shadow-outline-gray',
'active:bg-opacity-85',
'text-gray-600',
],
'logo-white': [
'bg-logo-white',
'border-logo-blue',
'border-solid',
'color-logo-blue',
'focus:bg-opacity-85',
'focus:border-logo-blue',
'focus:shadow-outline-gray',
'active:bg-opacity-85',
'text-gray-600',
],
'logo-white-rd': [
'bg-logo-white',
'border-logo-blue',
'border-solid',
'rounded-full',
'color-logo-blue',
'focus:bg-opacity-85',
'focus:border-logo-blue',
'focus:shadow-outline-gray',
'active:bg-opacity-85',
'text-logo-blue',
'disabled:bg-logo-white',
'disabled:text-logo-blue',
],
'secondary-3': [
'bg-secondary-3',
'focus:bg-opacity-85',
'focus:border-secondary-3',
'focus:shadow-outline-gray',
'active:bg-opacity-85',
'text-white',
],
'red-600': [
'bg-red-600',
'focus:bg-opacity-85',
'focus:border-red-600',
'focus:shadow-outline-gray',
'active:bg-opacity-85',
'text-white',
],
};
const color = colors[this.color];
Expand Down
10 changes: 5 additions & 5 deletions app/components/common/home-page-article-block.vue
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
<template>
<div class="bg-white rounded-lg shadow flex flex-col h-full">
<div class="bg-white shadow flex flex-col h-full">
<nuxt-link :to="href">
<img class="rounded-t-lg w-full h-auto" :src="image">
<img class="w-full h-auto" :src="image">
</nuxt-link>
<div class="p-3 flex flex-col h-full">
<h3 class="text-xl font-bold">
<h3 class="font-bold italic text-logo-blue text-center flex-grow">
<nuxt-link :to="href">
{{ title }}
</nuxt-link>
</h3>
<p v-if="teaser" class="text-md mt-3 flex-grow">
<p v-if="teaser" class="text-sm text-center mt-3 flex-grow">
{{ teaser }}
</p>
<div class="flex">
<btn
class="text-md mt-3 mx-auto"
class="text-md mt-3 mx-auto text-upper"
type="button"
color="logo-blue"
@click="goToArticle"
Expand Down
22 changes: 16 additions & 6 deletions app/components/common/home-page-block.vue
Original file line number Diff line number Diff line change
@@ -1,12 +1,18 @@
<template>
<div :class="setDivClass">
<div :class="setSectionLabelSize">
<h1 v-if="isFirst" class="font-semibold text-center md:text-left">
<h1 v-if="isFirst" class="font-semibold text-white italic text-center">
{{ sectionLabel }}
</h1>
<h2 v-else class="font-semibold text-center md:text-left">
<h2 v-else class="font-semibold italic text-center">
{{ sectionLabel }}
</h2>
<p v-if="isFirst" class="text-center font-semibold text-white">
{{ sectionDescription }}
</p>
<p v-else class="text-center font-semibold">
{{ sectionDescription }}
</p>
</div>
<div class="md:w-1/3">
<btn
Expand Down Expand Up @@ -38,6 +44,10 @@ export default {
type: String,
default: '',
},
sectionDescription: {
type: String,
default: '',
},
isFirst: {
type: Boolean,
default: false,
Expand All @@ -53,14 +63,14 @@ export default {
computed: {
setSectionLabelSize() {
if (this.isFirst) {
return 'h-4/6 text-5xl';
return 'h-72 mb-12 text-5xl flex justify-center flex-col bg-tilling bg-no-repeat bg-center';
}
return 'h-4/5 text-4xl';
},
setDivClass() {
if (this.isFirst) {
return 'h-5/6';
}
// if (this.isFirst) {
// return 'h-5/6';
// }
return 'h-96 my-12';
},
},
Expand Down
93 changes: 93 additions & 0 deletions app/components/common/page-intro-block.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
<template>
<div :class="setDivClass">
<div :class="setSectionLabelSize">
<div class="intro-image-wrapper relative">
<img v-if="image" :src="image">
</div>
<div class="test h-full relative top right left flex justify-center flex-col">
<h1 :class="titleClasses">
{{ sectionLabel }}
</h1>
<p v-if="sectionTagline" :class="sectionTaglineClasses">
{{ sectionTagline }}
</p>
</div>
</div>
<p v-if="sectionText" class="text-sm w-4/6 mb-6 mx-auto text-center">
{{ sectionText }}
</p>
<div v-if="linkLocation" class="w-100% flex justify-center">
<btn
class="w-auto"
type="button"
:block="isBlock"
color="logo-yellow"
@click="sendTo(linkLocation)"
>
{{ buttonLabel }}
</btn>
</div>
</div>
</template>

<script>
import Btn from './button.vue';
export default {
components: {
Btn,
},
props: {
buttonLabel: {
type: String,
default: '',
},
backgroundImageClass: {
type: String,
default: '',
},
image: {
type: String,
default: '',
},
sectionLabel: {
type: String,
default: '',
},
sectionTagline: {
type: String,
default: '',
},
sectionText: {
type: String,
default: '',
},
linkLocation: {
type: String,
default: '',
},
},
data: () => ({
isBlock: false,
titleClasses: 'font-bold mb-3 mb:mb-6 text-3xl md:text-5xl px-6 italic text-white text-center text-shadow-dark',
sectionTaglineClasses: 'font-bold md:text-sm px-6 text-center text-white text-shadow-dark',
}),
computed: {
setSectionLabelSize() {
return `h-72 mb-6 ${this.backgroundImageClass} bg-cover bg-center overflow-hidden`;
},
setDivClass() {
// if (this.isFirst) {
// return 'h-5/6';
// }
return 'h-auto';
},
},
methods: {
sendTo(location) {
this.$router.push(location);
},
},
};
</script>
2 changes: 1 addition & 1 deletion app/components/left-menu/desktop.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div class="hidden lg:flex lg:flex-shrink-0 print:hidden">
<div class="flex flex-col w-250px xl:w-300px ">
<div class="flex flex-col w-300px xl:w-300px ">
<div :class="sidebarClasses">
<div class="flex items-center flex-shrink-0 px-8 my-4">
<nuxt-link
Expand Down
Loading

0 comments on commit 47ac63a

Please sign in to comment.