Madmin
/
Erant-OldApp
1
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

MVP #5.3 #75

Merged
matthieu42morin merged 25 commits from master into deploy/prod 2023-03-16 15:12:10 +00:00
Conversation 0 Commits 25 Files Changed 54 +266 -82
7 changed files with 266 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 8cc6ca417a - Show all commits

2
package.json
View File

@ -4,7 +4,7 @@
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"dev": "vite --host",
"build": "vite build",
"preview": "vite preview",
"appwrite": "docker compose -f ./appwrite/docker-compose.yml up"

181
src/lib/components/Interests/Interests.svelte Normal file
View File

@ -0,0 +1,181 @@
<script lang="ts">
import { user } from '$lib/appwrite'
import collections from '$lib/collections'
import { Query } from 'appwrite'
import { navigate } from 'svelte-routing'
export let current_state = 1
$: [userInfo] = collections.users.getDocument([Query.equal('userId', $user?.$id || '')])
$: console.log($user)
let container
let scroll_distance
let selected_inputs = {}
function change_state(){
const input = event.currentTarget as HTMLInputElement
if (input){
var input_type = input.parentElement.parentElement.parentElement.classList[1]
selected_inputs[input_type] = input.parentElement.querySelector("p").innerText
console.log(selected_inputs)
}
if (current_state + 1 === 4){
navigate(`/profile/${$userInfo?.erantId}`)
return
}
setTimeout(() => {
current_state = current_state + 1
container.scroll({
top: 0,
left: scroll_distance * (current_state-1),
behavior: 'smooth'
})
}, 300)
}
</script>
<div bind:this={container} bind:clientWidth={scroll_distance} class="container">
<div class="container_page interests">
<h2>What are you most interested in?</h2>
<div class="radio_container">
<label class="item">
<input type="radio" on:change={change_state} name="interests">
<div>
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"/>
<p>Fun</p>
</div>
</label>
<label class="item">
<input type="radio" on:change={change_state} name="interests">
<div>
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"/>
<p>Fun</p>
</div>
</label>
</div>
</div>
<div class="container_page travel">
<h2>Who do you like to travel with?</h2>
<div class="radio_container">
<label class="item">
<input type="radio" on:change={change_state} name="travel">
<div>
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"/>
<p>Fun</p>
</div>
</label>
</div>
</div>
<div class="container_page to_us">
<h2>What brought you to our app?</h2>
<div class="radio_container">
<label class="item">
<input type="radio" on:change={change_state} name="to_us">
<div>
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"/>
<p>Fun</p>
</div>
</label>
</div>
</div>
</div>
<style lang="scss">
.container{
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
overflow-x: hidden;
overflow-y: hidden;
white-space: nowrap;
position: relative;
scroll-snap-type: x mandatory;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
height: 100%;
&::-webkit-scrollbar {
display: none;
}
.container_page {
min-width: 100%;
min-height: 100%;
padding: 0px 22px;
scroll-snap-align: center;
display: flex;
flex-direction: column;
gap: 20px;
h2{
text-align: center;
font-weight: 600;
font-size: 18px;
}
.radio_container {
display: flex;
flex-wrap: wrap;
gap: 10px;
.item{
input{
display: none;
}
div{
display: flex;
flex-direction: column;
align-self: center;
text-align: center;
position: relative;
gap: 8px;
padding: 7px;
width: 145px;
/* Main Blue */
border-radius: 20px;
position: relative;
border: 1px solid #4264eb00;
img {
aspect-ratio: 1/1;
object-fit: cover;
border-radius: 18px;
width: 100%;
}
p{
font-weight: 700;
font-size: 17px;
padding: 0;
}
}
}
.item:has(input:checked){
div{
border: 1px dashed #4263EB;
p{
color: #4263EB;
}
}
}
}
}
}
</style>

2
src/lib/components/Layouts/NavigationBarLayout.svelte
View File

@ -44,7 +44,7 @@
<div class={'section w-full h-[calc(100%-100px)] overflow-auto ' + className}><slot /></div>
<div class="footer">
{#each items as { name, url, image_url }}
{#if location.pathname === url || location.pathname.includes(url + '/')}
{#if location.pathname === url || location.pathname.includes("/" + url.split("/")[0] + '/')}
<FooterItem on:click={() => navigate(url)} active={true} {name} {url}>
<img alt="" style="filter: invert(44%) sepia(66%) saturate(6619%) hue-rotate(222deg) brightness(98%) contrast(88%);" src={image_url} />
</FooterItem>

3
src/routes/explore/Components/Search.svelte
View File

@ -50,11 +50,14 @@
transition: flex-grow 2s;
transition-delay: 2000ms;
border: none;
&::placeholder{
color: #AFB1B6;
}
&:focus, &:focus-visible {
flex-grow: 1;
box-shadow: none;
border: none;
outline: none;
}

82
src/routes/profile/functions/Interests-Update.svelte
View File

@ -1,70 +1,58 @@
<script lang="ts">
import Line from "$lib/components/Common/Line.svelte";
function select_tag(){
const target = event.currentTarget as HTMLElement
import Interests from "$lib/components/Interests/Interests.svelte"
console.log(target)
if (target.parentElement.classList.contains("tag-container-selected")){
target.parentElement.parentElement.querySelector(".tag-container").appendChild(target)
}
else{
target.parentElement.parentElement.querySelector(".tag-container-selected").appendChild(target)
}
}
let current_state = 1
</script>
<div class="container">
<p class="headline">What are you most interested in?</p>
<div class="tag-container-selected">
<Interests bind:current_state={current_state} />
</div>
<Line />
<div class="tag-container">
<button class="tag" on:click={select_tag}>History</button>
<button class="tag" on:click={select_tag}>Pubs</button>
<div class="navigation">
{#each Array(3) as _, index (index)}
{#if index === current_state-1}
<div class="selected" />
{:else}
<div />
{/if}
{/each}
</div>
</div>
<style lang="scss">
.container{
padding: 0 24px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
flex-grow: 1;
overflow-y: scroll;
overflow-x: hidden;
text-align: left;
.headline{
width: 100%;
/* Label Large - Source Sans Pro/Medium 16/24 . +0.2 */
position: relative;
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 600;
font-size: 18px;
line-height: 28px;
/* or 156% */
.navigation {
position: absolute;
height: 12px;
bottom: 15px;
left: 50%;
transform: translate(-50%, -0%);
display: flex;
align-items: center;
letter-spacing: 0.2px;
gap: 8px;
color: #000000;
div{
background-color: #BBD1C5;
border-radius: 12px;
width: 12px;
height: 12px;
}
.tag-container, .tag-container-selected{
width: 100%;
display: flex;
margin: 16px 0;
flex-wrap: wrap;
gap: 16px 24px;
.tag{
padding: 4px 10px;
background: #FFFFFF;
box-shadow: 0px 0px 20px -6px rgba(0, 0, 0, 0.45);
border-radius: 6px;
.selected{
transition-delay: 0.25s;
width: 46px;
background-color: #14A6AE;
}
}
}
</style>

17
src/routes/profile/profile-functions.svelte
View File

@ -24,7 +24,8 @@
}
</script>
<div class="head">
<div class="main">
<div class="head">
<button
on:click={() => {
navigate('/profile')
@ -33,12 +34,20 @@
<ArrowBack />
</button>
<h1>{data.display_name}</h1>
</div>
<svelte:component this={data.view} />
</div>
<svelte:component this={data.view} />
<style lang="scss">
.main{
display: flex;
flex-direction: column;
align-items: center;
justify-content: stretch;
height: 100%;
.head {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
@ -47,6 +56,7 @@
margin-bottom: 20px;
position: relative;
h1 {
font-weight: 600;
font-size: 32px;
@ -63,4 +73,5 @@
min-height: 30px;
}
}
}
</style>

3
src/routes/profile/profile.svelte
View File

@ -16,9 +16,10 @@
import collections from '$lib/collections'
import { Query } from 'appwrite'
export let params: { erantId: string }
//
$: [userInfo] = collections.users.getDocument([Query.equal('erantId', params.erantId)])
$: [userInfo] = collections.users.getDocument([Query.equal('userID', params.erantId)])
$: console.log($user)