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

fixed responsive on cards and size filter #32

Merged
merged 2 commits into from
Sep 24, 2023
Merged

fixed responsive on cards and size filter #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f42959e
fixed responsive on cards and size filter
RosieHall Sep 24, 2023
0d0620c
Merge branch 'master' into new-refactored-cards
RosieHall Sep 24, 2023
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
4 changes: 4 additions & 0 deletions assets/css/tailwind.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@
.button {
@apply flex-1 text-white text-sm rounded-lg px-2 py-1;
}

.tag-button {
@apply flex-grow tablet:flex-nowrap bg-emerald-500 hover:bg-emerald-700 text-white text-base font-semibold rounded-lg tablet:rounded-none px-2 py-1 min-w-[90px] tablet:min-w-[60px];
}

.mush-slide {
@apply flex flex-col items-center mt-2 text-base font-semibold text-emerald-700;
Expand Down
4 changes: 3 additions & 1 deletion components/FooterBar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
<template>
<footer class="flex justify-center w-full desktop:hidden fixed bottom-0 left-0 right-0 bg-white text-center border-2">

<footer class="flex justify-center w-full desktop:hidden fixed bottom-0 left-0 right-0 bg-white text-center border-2 z-50">

<div class="w-11/12 left-0 right-0">
<div class="flex justify-between w-full left-0 right-0 mx-auto py-4">
<div class="quick-link">
Expand Down
69 changes: 32 additions & 37 deletions components/NavigationBar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,52 +1,47 @@
<!--Main Navbar-->
<template>
<!--Mobile + Tablet + Desktop-->
<div class=" bg-gray-100 relative" >
<div class="bg-gray-100 relative" >
<!--Extended Filter Button-->
<!--<div class="hidden desktop:block absolute z-10 right-0 left-10 top-[80px]">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="white" class="w-20 h-20">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 15.75l-2.489-2.489m0 0a3.375 3.375 0 10-4.773-4.773 3.375 3.375 0 004.774 4.774zM21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>-->
<!--Main banner-->
<div class="z-0 bg-emerald-700 relative py-14 tablet:py-24 desktop:py-28 shadow-md">
<h1 class="flex w-11/12 desktop:w-3/4 absolute left-0 right-0 mx-auto tablet:-mt-12 desktop:-mt-20 font-bold text-white text-lg tablet:text-2xl laptop:text-3xl desktop:text-5xl">Know what you're looking for?</h1>
<div class="z-0 bg-emerald-700 relative py-8 tablet:py-24 desktop:py-28 shadow-md">
<h1 class="flex w-11/12 desktop:w-3/4 mx-auto tablet:-mt-12 desktop:-mt-20 font-bold text-white text-lg tablet:text-2xl laptop:text-3xl desktop:text-5xl">Know what you're looking for?</h1>
<!--Search Bar-->
<div class="z-20 flex w-11/12 desktop:w-3/4 absolute left-0 right-0 mx-auto mt-5 tablet:mt-1 desktop:mt-1 shadow-md bg-white rounded-lg px-2 py-1 tablet:py-0 tablet:px-2">
<input v-model="searchInput" @input="search()" class="text-sm tablet:text-base text-gray-400 flex-grow outline-none px-1 tablet:px-2" type="text" placeholder="Search all mushrooms" />
<div class="flex py-1 rounded-lg">
<button @click="search()" class="bg-emerald-500 text-white text-sm tablet:text-base rounded-lg px-3 py-1 tablet:px-2 tablet:py-1 desktop:px-3 desktop:py-2 font-thin desktop:font-semibold desktop:tracking-wide">Search</button>
</div>
</div>
<!--Size Search Bar Row-->
<div class="flex w-11/12 desktop:w-3/4 absolute left-0 right-0 mx-auto mt-5 tablet:mt-4 desktop:mt-4">
<!--Stipe Length-->
<div class="flex-grow mr-2 pt-10">
<input v-model="stipeLen" @input="sizeFilter()" class="text-sm tablet:text-base text-gray-400 outline-none px-1 tablet:px-2" type="text" placeholder="Stipe Length" />
</div>
<!--Stipe Diameter-->
<div class="flex-grow mr-2 pt-10">
<input v-model="stipeDiam" @input="sizeFilter()" class="text-sm tablet:text-base text-gray-400 outline-none px-1 tablet:px-2" type="text" placeholder="Stipe Width" />
</div>
<!--Cap Diameter-->
<div class="flex-grow mr-2 mt-10">
<input v-model="capDiam" @input="sizeFilter()" class="text-sm tablet:text-base text-gray-400 outline-none px-1 tablet:px-2" type="text" placeholder="Cap Diameter" />
</div>
<!--Cap Thickness-->
<div class="flex-grow mr-2 pt-10">
<input v-model="capThick" @input="sizeFilter()" class="text-sm tablet:text-base text-gray-400 outline-none px-1 tablet:px-2" type="text" placeholder="Cap Thickness" />
</div>
</div>
</div>
<!--Edibility Quick Filter-->
<div class="tablet:bg-white desktop:bg-white rounded-lg w-11/12 desktop:w-3/4 desktop:p-2 absolute left-0 right-0 mx-auto mt-6 tablet:-mt-6 desktop:-mt-5 tablet:shadow-md desktop:shadow-md">
<div class="flex flex-wrap gap-2 desktop:gap-0 tablet:gap-0 p-2 desktop:p-0 tablet:p-2 w-full">
<button class="button bg-blue-500" @click="toggleTag('edible')">Edible</button>
<button class="button bg-orange-500" @click="toggleTag('gourmet')">Gourmet</button>
<button class="button bg-red-500" @click="toggleTag('poisonous')">Poisonous</button>
<button class="button bg-purple-500" @click="toggleTag('psychoactive')">Psychoactive</button>
<button class="button bg-yellow-500" @click="toggleTag('lookalike')">Lookalike</button>
<div class="flex w-11/12 desktop:w-3/4 absolute left-0 right-0 mx-auto mt-3 tablet:mt-1 desktop:mt-4 shadow-md bg-white rounded-lg px-2 py-1 tablet:py-0 tablet:px-2">
<input v-model="searchInput" @input="search()" class="text-sm tablet:text-base text-gray-400 flex-grow outline-none px-1 tablet:px-2" type="text" placeholder="Search all mushrooms" />
<div class="flex py-1 rounded-lg">
<button @click="search()" class="bg-emerald-500 text-white text-sm tablet:text-base rounded-lg px-3 py-1 tablet:px-2 tablet:py-1 desktop:px-3 desktop:py-2 font-thin desktop:font-semibold desktop:tracking-wide">Search</button>
</div>
</div>
</div>
<!--Size Search Bar Row-->
<div class="z-10 grid grid-cols-2 tablet:grid-cols-4 gap-2 w-11/12 px-2 desktop:w-3/4 mx-auto mt-7 tablet:-mt-16 tablet:mb-3 laptop:mt-[-60px] desktop:mt-[-70px] relative">
<!--Stipe Length-->
<input v-model="stipeLen" @input="sizeFilter()" class="text-sm tablet:text-base text-gray-400 outline-none px-1 tablet:px-2" type="text" placeholder="Stipe Length" />

<!--Stipe Diameter-->
<input v-model="stipeDiam" @input="sizeFilter()" class="text-sm tablet:text-base text-gray-400 outline-none px-1 tablet:px-2" type="text" placeholder="Stipe Width" />

<!--Cap Diameter-->
<input v-model="capDiam" @input="sizeFilter()" class="text-sm tablet:text-base text-gray-400 outline-none px-1 tablet:px-2" type="text" placeholder="Cap Diameter" />

<!--Cap Thickness-->
<input v-model="capThick" @input="sizeFilter()" class="text-sm tablet:text-base text-gray-400 outline-none px-1 tablet:px-2" type="text" placeholder="Cap Thickness" />
</div>
<!--Edibility Quick Filter-->
<div class="z-20 tablet:bg-white desktop:bg-white rounded-lg w-11/12 desktop:w-3/4 desktop:p-2 desktop:mt-4 mx-auto tablet:shadow-md desktop:shadow-md relative">
<div class="flex flex-wrap gap-2 desktop:gap-0 tablet:gap-0 p-2 desktop:p-0 tablet:p-2 w-full">
<button class="button tag-button" @click="toggleTag('edible')">Edible</button>
<button class="button tag-button" @click="toggleTag('gourmet')">Gourmet</button>
<button class="button tag-button" @click="toggleTag('poisonous')">Poisonous</button>
<button class="button tag-button" @click="toggleTag('psychoactive')">Psychoactive</button>
<button class="button tag-button" @click="toggleTag('lookalike')">Lookalike</button>
</div>
</div>
</div>
</template>
Expand Down
6 changes: 3 additions & 3 deletions components/ResultCards.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<template>
<div >
<div class="z-0 p-2">
<!-- Card Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-5 w-11/12 desktop:w-3/4 mx-auto">
<div class="grid grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 gap-5 justify-stretch justify-items-center w-11/12 desktop:w-3/4 mx-auto">
<!-- Create card for each item in the data file -->
<div
v-for="(mushroom, index) in filteredMushrooms"
:key="index"
class="block max-w-[18rem] rounded-lg bg-gray-200 tablet:shadow-md desktop:shadow-md dark:bg-neutral-700 flex flex-col overflow-hidden"
class=" rounded-lg bg-gray-200 tablet:shadow-md desktop:shadow-md flex flex-col overflow-hidden"
>
<div class="relative overflow-hidden bg-cover bg-no-repeat">
<img class="rounded-t-lg" src="~/assets/images/mushy.jpg" alt="this is a pic of a mushy" />
Expand Down
5 changes: 2 additions & 3 deletions pages/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,8 @@
<HeaderBar />
<NavigationBar @search="handleSearch" @toggleTag="handleTags" @sizeFilter="handleSizeFilter"/>
<FooterBar />
<div class="mt-16">
<ResultCards :filteredMushrooms="filteredMushrooms"/>
</div>
<ResultCards :filteredMushrooms="filteredMushrooms"/>


<!--Slideover for big screens only-->
<SlideOver />
Expand Down
Loading