Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feature/new home page design #80

Open
wants to merge 3 commits into
base: new
Choose a base branch
from
Open

Feature/new home page design #80

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f21a960
fix bar height
mbifulco May 15, 2020
f4def32
clean up nav
mbifulco May 15, 2020
88a6a1a
header content
mbifulco May 15, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
121 changes: 15 additions & 106 deletions src/components/Navigation.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,8 @@
<router-link
class="text-xl font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white"
:to="{ name: 'Home' }"
>Protect.Earth</router-link
>
Protect.Earth
</router-link>

<button
class="cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none"
Expand All @@ -24,132 +23,42 @@
</button>
</div>
<div
class="lg:flex flex-grow items-center bg-white lg:bg-transparent lg:shadow-none hidden"
class="lg:flex flex-grow items-center lg:bg-transparent lg:shadow-none hidden"
id="example-collapse-navbar"
>
<ul class="flex flex-col lg:flex-row list-none mr-auto">
<li class="flex items-center">
<!-- Is used to be links over here -->
</li>
</ul>
<ul class="flex flex-col lg:flex-row list-none lg:ml-auto">
<li class="mr-3">
<ul class="flex flex-col lg:flex-row list-none lg:ml-auto items-center">
<li>
<search-bar
v-show="this.$route.path.toLowerCase().indexOf('search') === -1"
></search-bar>
</li>
<li>
<t-dropdown
text="I am a..."
size="sm"
:visible-arrow="false"
:button-props="{
baseClass: `border block rounded inline-flex items-center justify-center`,
}"
>
<template v-slot:button-content>
<span>I am a...</span>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
class="ml-1 h-5 w-5 fill-current text-gray-700"
style="width: 1.25rem; height: 1.25rem;"
>
<path
d="M15.3 9.3a1 1 0 0 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 1.4-1.4l3.3 3.29 3.3-3.3z"
/>
</svg>
</template>

<ul>
<li v-for="tag in tags" :key="tag.id">
<router-link
:to="{
name: 'TagShow',
params: { tagSlug: tag.id },
}"
href="#"
class="block no-underline px-4 py-2 hover:bg-pink-600 hover:text-white"
>
{{ tag.tagName }}
</router-link>
</li>
</ul>
</t-dropdown>
</li>
<li class="flex items-center">
<router-link
:to="{ name: 'About' }"
class=" text-gray-200 border-2 active:bg-gray-800 text-xs font-bold uppercase px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none lg:mr-1 lg:mb-0 ml-3 mb-3"
type="button"
style="transition: all 0.15s ease 0s;"
>
<i class="fas fa-arrow-alt-circle-down"></i>
About
</router-link>
<NavigationLink label="About" :to="{ name: 'About' }" />
</li>
<li class="flex items-center">
<a
class="lg:text-white lg:hover:text-gray-300 text-gray-800 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
href="https://twitter.com/_protectearth"
><i
class="lg:text-gray-300 text-gray-500 fab fa-twitter text-lg leading-lg "
></i
><span class="lg:hidden inline-block ml-2">Tweet</span></a
>
<!-- <li>
<NavigationLink label="Guides" :to="{ name: 'Guides' }" />
</li>
<li class="flex items-center">
<a
class="lg:text-white lg:hover:text-gray-300 text-gray-800 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
href="https://github.com/protect-earth"
><i
class="lg:text-gray-300 text-gray-500 fab fa-github text-lg leading-lg "
></i
><span class="lg:hidden inline-block ml-2">Star</span></a
>
<li>
<NavigationLink label="Forum" :to="{ name: 'Forum' }" />
</li>
<li>
<NavigationLink label="Contribute" :to="{ name: 'Contribute' }" />
</li> -->
</ul>
</div>
</div>
</nav>
</template>

<script>
import NavigationLink from './NavigationLink';

export default {
name: 'Navigation',
components: {
NavigationLink,
SearchBar: () => import('./search/SearchBar'),
},
data() {
return {
tags: [
{
id: 'commute',
tagName: 'Commuter',
},
{
id: 'business',
tagName: 'Business Owner',
},
{
id: 'home-owner',
tagName: 'Home Owner',
},
{
id: 'land-owner',
tagName: 'Land Owner',
},
{
id: 'nomad',
tagName: 'Nomad',
},
{
id: 'developers',
tagName: 'Programmer',
},
],
};
},
};
</script>

Expand Down
15 changes: 15 additions & 0 deletions src/components/NavigationLink.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<template>
<router-link
:to="to"
type="link"
class="pl-4 pr-0 text-gray-400 hover:text-pink-700"
>
{{ label }}
</router-link>
</template>

<script>
export default {
props: ['label', 'to'],
};
</script>
6 changes: 3 additions & 3 deletions src/components/search/SearchBar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
<template>
<form v-on:submit.prevent="onSubmit">
<div class="flex justify-center">
<div class="pt-2 relative mx-auto text-gray-600">
<div class="relative mx-auto text-gray-600">
<input
class="border-2 border-gray-300 bg-white h-8 px-5 pr-16 rounded-md text-sm focus:outline-none"
class="border-2 border-gray-300 bg-white h-8 px-2 pr-16 rounded-md text-sm focus:outline-none"
type="search"
name="search"
placeholder="Search"
v-model="searchTerm"
/>
<button type="submit" class="absolute right-0 top-0 mt-4 mr-4">
<button type="submit" class="absolute right-0 top-0 mt-2 mr-3">
<svg
class="text-gray-600 h-4 w-4 fill-current"
xmlns="http://www.w3.org/2000/svg"
Expand Down
15 changes: 8 additions & 7 deletions src/views/home/HeroWithCards.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,16 @@
></span>
</div>
<div class="container relative mx-auto">
<div class="items-center flex flex-wrap">
<div class="w-full lg:w-7/12 px-4 ml-auto mr-auto text-center">
<div class="flex flex-wrap items-start mt-20 mb-10">
<div class="w-full lg:w-8/12 px-4">
<div class="flex flex-col pr-12">
<h1 class="text-white font-semibold text-5xl">
Start saving the planet today.
</h1>
<p
class="mx-auto text-center mt-4 text-lg lg:w-10/12 text-gray-300"
<h1
class="text-white font-semibold text-4xl text-bold leading-tight"
>
We must cut global emissions in half by 2030, or face
<em>sea level rises</em>
</h1>
<p class="mt-4 text-lg lg:w-10/12 text-gray-300">
Protect.Earth is a list of strategies, products, services, and
companies focused on sustainability and environmental
protection. We are faced with a global existential crisis -
Expand Down