42/42_INT_14_transcendence
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

merge stuff

Browse Source
This commit is contained in:
Me
2023-01-05 12:33:51 +01:00
parent 730b8c4e4a 9889eae77f
commit b35082148c
19 changed files with 977 additions and 21511 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21097
srcs/requirements/svelte/api_front/public/build/bundle.js
View File

File diff suppressed because it is too large Load Diff

1
srcs/requirements/svelte/api_front/public/build/bundle.js.map
View File

File diff suppressed because one or more lines are too long

1
srcs/requirements/svelte/api_front/src/pages/SplashPage.svelte
View File

@@ -3,7 +3,6 @@
import { push } from "svelte-spa-router";
import { onMount } from 'svelte';
let user;
onMount(async () => {

2
srcs/requirements/svelte/api_front/src/pages/profile/ProfileDisplay.svelte
View File

@@ -23,7 +23,7 @@
<div class="outer">
<!-- OHHHH i could use #await instead of if and have an nice loading page! -->
{#if user !== undefined}
<GenerateUserDisplay {user} primary={true}/>
<GenerateUserDisplay user={user} primary={true}/>
{:else}
<!-- might be unnecessary since you can't access the page without fetching the user -->
<h2>Sorry</h2>

464
srcs/requirements/svelte/api_front/src/pages/profile/ProfileFriends.svelte
View File

@@ -1,217 +1,356 @@
<script lang="ts">
import { onMount } from "svelte";
import { binding_callbacks } from "svelte/internal";
import { binding_callbacks, empty } from "svelte/internal"; // WTF is this?
import Button from "../../pieces/Button.svelte";
import DisplayAUser from "../../pieces/DisplayAUser.svelte";
import Tabs from "../../pieces/Tabs.svelte";
let errors = {friendRequest: '',};
let set = {friendUsername: '', friendId: Number}
let set = {friendUsername: ''}
let user;
let allUsers;
let myFriends;
let myFriendships;
let requestsMade, requestsRecieved;
let userBeingViewed;
let blockedUsers;
let usernameBeingViewed;
let friendshipStatusFull; // id, date, senderUsername, reveiverUsername, status
/**** Layout variables ****/
let tabItems: string[] = ['All Users', 'My Friends', 'Friend Requests', 'Blocked Users']
let activeTabItem: string = 'All Users';
onMount( async() => {
// DO I ACTUALLY NEED TO ON MOUNT ALL THIS STUFF?
// ALSO I COULD JUST USE THE FUNCITONS I MADE...
// yea no idea what
// i mean do i fetch user? i will for now
user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user`)
.then( (x) => x.json() );
fetchAll();
// ok this shit works!
// const interval = setInterval(() => {
// fetchAll();
// }, 1000);
myFriends = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/myfriends`)
.then( (x) => x.json() );
// return () => clearInterval(interval);
});
const fetchAll = async() => {
// no need to await i think it can load in the background
fetchAllUsers();
fetchMyFriendships();
fetchRequestsMade();
fetchRequestsReceived();
fetchBlockedUsers();
}
/***** Fetch basic things *****/
const fetchAllUsers = async() => {
allUsers = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user/all`)
.then( x => x.json() );
console.log('got all users ')
console.log({...allUsers})
};
// it's more like fetch friendships
// then i need to extract the users
const fetchMyFriendships = async() => {
myFriendships = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/myfriends`)
.then( x => x.json() );
console.log('got my friends ')
console.log({...myFriendships})
};
const fetchRequestsMade = async() => {
requestsMade = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/pending`)
.then( x => x.json() );
console.log('got requests made ')
console.log({...requestsMade})
};
const fetchRequestsReceived = async() => {
requestsRecieved = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/received`)
.then( x => x.json() );
allUsers = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user/all`)
.then( x => x.json() );
})
const displayAllUsers = async() => {
allUsers = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user/all`)
.then( x => x.json() );
// console.log('got all users ' + allUsers)
console.log('got requests received ')
console.log({...requestsRecieved})
};
const displayAllFriends = async() => {
myFriends = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/myfriends`)
const fetchBlockedUsers = async() => {
blockedUsers = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/blocked`)
.then( x => x.json() );
// console.log('got all friends ' + allFriends)
console.log('got blocked users, is it empty?')
console.log({...blockedUsers})
console.log(Object.keys(blockedUsers))
};
/**** END OF MAIN FETCH ****/
// returns everything but BLOCKED
const fetchFriendshipFull = async(aUsername) => {
console.log('fetch friendship from a username')
console.log(aUsername)
friendshipStatusFull = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/myfriends?username=${aUsername}`)
.then( x => x.json());
console.log({...friendshipStatusFull})
};
const displayRequestsMade = async() => {
requestsMade = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/pending`)
.then( x => x.json() );
// console.log('got requests made ' + requestsMade)
};
let sentFriendRequest;
const sendFriendRequest = async(potentialFriendUsername) => {
set.friendUsername = '';
errors.friendRequest = '';
let valid = false;
if (potentialFriendUsername === user.username) {
errors.friendRequest = "You can't friend yourself."
valid = false;
} else {
set.friendUsername = potentialFriendUsername;
valid = true;
}
if (valid) {
sentFriendRequest = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/myfriends`, {
method : "POST",
headers: { 'Content-Type': 'application/json'},
body: JSON.stringify({
"receiverUsername": set.friendUsername,
"status": "R"
})
const sendFriendRequest = async(aUsername) => {
console.log('sending a friend request')
console.log(aUsername)
const resp = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/relations`, {
method : "POST",
headers: { 'Content-Type': 'application/json'},
body: JSON.stringify({
"receiverUsername": aUsername,
"status": "R"
})
.then( x => x.json())
})
.then( x => x.json())
// .catch( x => console.log({...x}))
// "status": "A"
console.log({...resp})
fetchFriendshipFull(aUsername);
};
const viewAUser = async(aUsername) => {
console.log('Profile Friend updating userBeingViewed')
usernameBeingViewed = aUsername;
// friendshipStatusFull = undefined;
// id, date, senderUsername, reveiverUsername, status
await fetchFriendshipFull(aUsername);
console.log('Friendship Status Full')
console.log({...friendshipStatusFull})
};
const acceptFriendRequest = async(relationshipId) => {
console.log('accept friend request')
const resp = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/relations/${relationshipId}/accept`, {
method: "PATCH"})
.then( x => x.json());
// maybe not the most robust things, not super reusable cuz it depends on outside vars but works for now...
console.log('accepted friend request, now response')
console.log({...resp})
await fetchFriendshipFull(usernameBeingViewed);
// will this make it reload? C'est un peu bourain... do i even need it?
activeTabItem = activeTabItem;
};
const declineFriendRequest = async(relationshipId) => {
console.log('decline friend request')
const resp = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/relations/${relationshipId}/decline`, {
method: "PATCH"})
.then( x => x.json());
// maybe not the most robust things, not super reusable cuz it depends on outside vars but works for now...
console.log('declined friend request, now response')
console.log({...resp})
await fetchFriendshipFull(usernameBeingViewed);
};
const unfriend = async(relationshipId) => {
console.log('Unfriend')
const resp = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/relations/${relationshipId}`, {
method: "DELETE"})
.then( x => x.json());
// friendshipStatusFull = undefined;
// OR
await fetchFriendshipFull(usernameBeingViewed);
if (Object.keys(friendshipStatusFull).length === 0)
friendshipStatusFull = undefined;
// will this make it reload? C'est un peu bourain... do i even need it?
activeTabItem = activeTabItem;
};
const blockANonFriendUser = async(aUsername) => {
console.log('Block a non friend user, their username')
console.log(aUsername)
sentFriendRequest = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/relations`, {
method : "POST",
headers: { 'Content-Type': 'application/json'},
body: JSON.stringify({
"receiverUsername": aUsername,
"status": "B"
})
})
.then( x => x.json())
await fetchBlockedUsers();
await fetchAllUsers();
usernameBeingViewed = undefined;
friendshipStatusFull = undefined;
// will this make it reload?
activeTabItem = activeTabItem;
};
const blockAFriend = async(relationshipId) => {
console.log('blocking a friend, the relationshipID')
console.log(relationshipId)
const resp = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/relations/${relationshipId}/block`, {method: "PATCH"})
.then( x => x.json() );
console.log('blocked a user response')
console.log({...resp})
await fetchBlockedUsers();
await fetchAllUsers();
usernameBeingViewed = undefined;
friendshipStatusFull = undefined;
// will this make it reload?
activeTabItem = activeTabItem;
};
const unblockAUser = async(relationshipId) => {
// it's basically the same as unfriending someone cuz unfriending them means the relationship is deleted
await unfriend(relationshipId);
};
const switchTab = async(e) => {
activeTabItem = e.detail;
if (activeTabItem === 'All Users') {
await fetchAllUsers();
} else if (activeTabItem === 'My Friends') {
await fetchMyFriendships();
} else if (activeTabItem === 'Friend Requests') {
await fetchRequestsReceived();
} else if (activeTabItem === 'Blocked Users') {
await fetchBlockedUsers();
console.log('blocked users: ')
console.log({...blockedUsers})
}
};
// let sendUsername;
const viewAUser = async(aUser) => {
userBeingViewed = aUser;
// sendUsername = userBeingViewed.username;
// prolly like fetch if you're friends or not?
// GET `http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/networks/myfriends?username=aUser` but i need to make that as long as Cherif
// doesn't have a better option
// like i want this thing to return the Friendship ID ideally
};
const blockAUser = async(friendshipId) => {
};
</script>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="top-grid">
<div class="all-users-sidebar">
<h3>All Users</h3>
{#if allUsers === undefined}
<div class="error">Failed to load all users</div>
{:else}
<!-- let tabItems: string[] = ['All Users', 'My Friends', 'Friend Requests']
let activeTabItem: string = 'All Users'; -->
<!-- maybe add numbers at the botton? like for how many of each there are? -->
<div class="sidebar-list">
<Tabs items={tabItems} activeItem={activeTabItem} size="small" on:tabChange={switchTab}/>
{#if activeTabItem === 'All Users' && allUsers !== undefined}
<h3>{activeTabItem}</h3>
<!-- problem, i can't use user.id since Cherif doesn't want to expost that to the front...
is there something else i could use? -->
<!-- add a thing so it doesn't display the current user just all the other users -->
{#if Object.keys(allUsers).length === 0}
<div class="tip">You are alone on this platform...</div>
{/if}
<!-- does this work? -->
<!-- {#each allUsers as aUser (aUser.username)} -->
{#each allUsers as aUser }
<!-- <div class="a-user" on:click={() => displayAUser(aUser.username)}>{aUser.username}</div> -->
<div class="a-user" on:click={() => viewAUser(aUser)}>{aUser.username}</div>
<!-- {#each allUsers as aUser (aUser.id)} -->
{#each allUsers as aUser}
<div class="sidebar-item" on:click={() => viewAUser(aUser.username)}>{aUser.username}</div>
<!-- i could make an indicator component? like green for connected or something?
i could use words but color them?
i could make it so if they're in a game -->
<div class="status a-user">{aUser.status}</div>
<div class="status sidebar-item">{aUser.status}</div>
<br>
{/each}
{:else if activeTabItem === 'My Friends' && myFriendships !== undefined}
<h3>{activeTabItem}</h3>
{#if Object.keys(myFriendships).length === 0}
<div class="tip">You don't have any Friends... Yet!</div>
{/if}
<!-- {#each myFriends as aUser (aUser.id)} -->
{#each myFriendships as aFriendship}
{#if aFriendship.senderUsername !== user.username}
<div class="sidebar-item" on:click={() => viewAUser(aFriendship.senderUsername)}>{aFriendship.senderUsername}</div>
{:else if aFriendship.receiverUsername !== user.username}
<div class="sidebar-item" on:click={() => viewAUser(aFriendship.receiverUsername)}>{aFriendship.receiverUsername}</div>
{/if}
<br>
{/each}
{:else if activeTabItem === 'Friend Requests' && requestsRecieved !== undefined}
<h3>{activeTabItem}</h3>
{#if Object.keys(requestsRecieved).length === 0}
<div class="tip">You don't have any Friend Requests</div>
{/if}
<!-- {#each requestsRecieved as aUser (aUser.id)} -->
{#each requestsRecieved as aUser}
<div class="sidebar-item" on:click={() => viewAUser(aUser.senderUsername)}>{aUser.senderUsername}</div>
<div class="status sidebar-item">{aUser.status}</div>
<br>
{/each}
{:else if activeTabItem === 'Blocked Users' && blockedUsers !== undefined}
<h3>{activeTabItem}</h3>
<!-- seems a little excessive... maybe a lighter way of doing this? doesn't seem like it, i hate it but at least only happens sometimes.default... -->
{#if Object.keys(blockedUsers).length === 0}
<div class="tip">You have not Blocked any Users</div>
{/if}
<!-- {#each blockedUsers as aUser (aUser.id)} -->
{#each blockedUsers as aUser}
<div class="sidebar-item" on:click={() => viewAUser(aUser.receiverUsername)}>{aUser.receiverUsername}</div>
<div class="status sidebar-item">{aUser.status}</div>
<br>
{/each}
{/if}
</div>
<div class="main-display">
{#if usernameBeingViewed !== undefined}
<!-- <DisplayAUser aUsername={usernameBeingViewed}/> -->
<DisplayAUser aUsername={usernameBeingViewed}/>
<h1>Main Display</h1>
<!-- use an #await here too? -->
<!-- you can do better, like an on load sort of thing -->
<!-- {#if userBeingViewed !== undefined && userBeingViewed === tmpUserBeingViewed} -->
<!-- {#if userBeingViewed !== undefined} -->
{#if userBeingViewed}
<div>{userBeingViewed.username}</div>
<DisplayAUser aUsername={userBeingViewed.username}/>
<!-- <DisplayAUser aUsername={sendUsername}/> -->
<Button type="secondary" on:click={() => sendFriendRequest(userBeingViewed.username)}>Add Friend</Button>
<!-- {#if user not blocked}
<Button on:click={() => blockAUser(userBeingViewed.username)}>Add Friend</Button>
does it have to be friendship IDs? can't i just use username?
i mean i guess friendship ID is more secure, and also easier in the back
but if i'm using friendshi ID i need a good way of getting them
{/if} -->
<!-- {:else if userBeingViewed !== undefined} -->
<div class="buttons-area">
{#if friendshipStatusFull && friendshipStatusFull.id}
{#if friendshipStatusFull.status === 'R'}
{#if friendshipStatusFull.senderUsername === user.username}
<div class="tile">Friend Request Sent</div>
{:else}
<!-- <Button type="secondary" on:click={() => acceptFriendRequest(usernameBeingViewed)}>Unfriend</Button> -->
<Button type="secondary" on:click={() => acceptFriendRequest(friendshipStatusFull.id)}>Accept Friend Request</Button>
<Button on:click={() => declineFriendRequest(friendshipStatusFull.id)}>Decline Friend Request</Button>
{/if}
<Button on:click={() => blockAFriend(friendshipStatusFull.id)}>Block User</Button>
{:else if friendshipStatusFull.status === 'A'}
<div class="tile">You are Friends</div>
<Button on:click={() => unfriend(friendshipStatusFull.id)}>Unfriend</Button>
<Button on:click={() => blockAFriend(friendshipStatusFull.id)}>Block User</Button>
{:else if friendshipStatusFull.status === 'D'}
{#if friendshipStatusFull.senderUsername === user.username}
<div class="tile">Your friend request was declined, hang in there bud.</div>
{:else}
<div class="tile">You declined the friend request, but you could still change your mind</div>
<Button on:click={() => acceptFriendRequest(friendshipStatusFull.id)}>Accept Friend Request</Button>
{/if}
<Button on:click={() => blockAFriend(friendshipStatusFull.id)}>Block User</Button>
{:else if friendshipStatusFull.status === 'B'}
{#if friendshipStatusFull.senderUsername === user.username}
<Button on:click={() => unblockAUser(friendshipStatusFull.id)}>Unblock User</Button>
{/if}
{/if}
{:else}
<Button type="secondary" on:click={() => sendFriendRequest(usernameBeingViewed)}>Add Friend</Button>
<Button on:click={() => blockANonFriendUser(usernameBeingViewed)}>Block User</Button>
{/if}
<!-- <Button type="secondary" on:click={() => sendFriendRequest(usernameBeingViewed)}>Add Friend</Button> -->
</div>
{:else}
<div class="placeholder">
<h1>Click on a user!</h1>
<h4>You'll see them displayed here</h4>
</div>
{/if}
<!-- {#await userBeingViewed}
<p>... waiting</p>
{:then}
<div>{userBeingViewed.username}</div>
<DisplayAUser aUsername={userBeingViewed.username}/>
<Button type="secondary" on:click={() => sendFriendRequest(userBeingViewed.username)}>Add Friend</Button>
{:catch}
<p>No user to view yet</p>
{/await} -->
<!-- {#if user not blocked}
<Button on:click={() => blockAUser(userBeingViewed.username)}>Add Friend</Button>
does it have to be friendship IDs? can't i just use username?
i mean i guess friendship ID is more secure, and also easier in the back
but if i'm using friendshi ID i need a good way of getting them
{/if} -->
<!-- {:else if userBeingViewed !== undefined} -->
<!-- <Button on:click={displayAllUsers}>Get All Users</Button>
{#if allUsers !== undefined}
{#each allUsers as user}
<div>{user.username}</div>
{/each}
{/if}
<br> -->
<!-- <Button on:click={displayMyFriends}>Get All My Friends</Button>
{#if myFriends !== undefined}
<div>{myFriends}</div>
{#each myFriends as friend}
<div>{friend}{friend.username}</div>
{/each}
{/if} -->
<!-- <br> <br> -->
<!-- here i want to list all the requests you and have an accept and a decline button -->
<!-- {#each requestsRecieved as request} -->
<!-- <br> <br> -->
<!-- I want to list all the requests made by this user -->
<!-- <Button on:click={displayRequestsMade}>Display Requests Made</Button>
{#if requestsMade !== undefined}
{#each requestsMade as requestMade}
<div>{requestMade}</div>
{/each}
{/if} -->
</div>
</div>
@@ -227,12 +366,12 @@
/* margin: 0; */
}
div.all-users-sidebar{
div.sidebar-list{
grid-column: 1 / span 2;
background: white;
}
div.a-user{
div.sidebar-item{
/* yea i mean that seems fine... */
display: inline-block;
/* somehting about the buttons too, smaller ? */
@@ -243,7 +382,7 @@
}
/* selector attributes to get only divs with .a-user */
/* you gotta be careful with Svelte cuz it tacks classes on to the end of basically all elems! */
div[class^="a-user"]:hover{
div[class^="sidebar-item"]:hover{
text-decoration: underline;
font-weight: bold;
cursor: pointer;
@@ -253,6 +392,21 @@
grid-column: 3 / span 10;
}
div.placeholder{
color: darkgray;
text-align: center;
}
div.buttons-area{
text-align: center;
}
div.tip{
color: darkgray;
font-size: 0.8em;
font-weight: bold;
}
.error{
font-size: 0.8em;

28
srcs/requirements/svelte/api_front/src/pieces/DisplayAUser.svelte
View File

@@ -1,8 +1,9 @@
<script lang="ts">
import { onMount } from 'svelte';
import { onMount, afterUpdate } from 'svelte';
import GenerateUserDisplay from './GenerateUserDisplay.svelte';
// export let aUsername;
export let aUsername;
let user;
@@ -11,24 +12,35 @@
//`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user?username=NomDuUserATrouve`
user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user?username=${aUsername}`)
.then( (x) => x.json() );
})
// sadly created an infinite loop
// afterUpdate( async() => {
// console.log('Display Update aUser username: '+ aUsername)
// // http://transcendance:8080/api/v2/user?username=NomDuUserATrouver
// user = await fetch(`http://transcendance:8080/api/v2/user?username=${aUsername}`)
// .then( (x) => x.json() );
// })
const updateUser = async(updatedUser) => {
console.log('Display Update aUser username: '+ updateUser)
//`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user?username=NomDuUserATrouve`
user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user?username=${updateUser}`)
export const updateUser = async() => {
// console.log('Display Update aUser username: '+ aUsername)
// http://transcendance:8080/api/v2/user?username=NomDuUserATrouver
// user = await fetch(`http://transcendance:8080/api/v2/user?username=${aUsername}`)
user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user?username=${aUsername}`)
.then( (x) => x.json() );
};
// $: aUsername, updateUser();
$: aUsername, updateUser();
</script>
{#if user !== undefined}
<GenerateUserDisplay bind:user={user} primary={true}/>
<GenerateUserDisplay user={user} primary={true}/>
<!-- <GenerateUserDisplay user={user} primary={true}/> -->
{:else}
<h2>Sorry</h2>
<div>Failed to load user {aUsername}</div>

1
srcs/requirements/svelte/api_front/src/pieces/GenerateUserDisplay.svelte
View File

@@ -21,7 +21,6 @@
}
})
if (user.loseGame > user.winGame) {
rank = 'Bitch Ass Loser!'
} else if (user.loseGame === user.winGame) {

41
srcs/requirements/svelte/api_front/src/pieces/Tabs.svelte
View File

@@ -2,17 +2,19 @@
import { createEventDispatcher } from "svelte";
export let items;
export let activeItem;
export let size = 'medium';
// big, medium, small
const dispatch = createEventDispatcher();
</script>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="tabs">
<div class="tabs" class:size={size}>
<!-- creates a list, can be done other ways -->
<ul>
{#each items as item}
<li on:click={() => dispatch('tabChange', item)}>
<li class={size} on:click={() => dispatch('tabChange', item)}>
<!-- the class active is attributed if the condition is met -->
<div class:active={activeItem === item}>{item}</div>
</li>
@@ -21,8 +23,20 @@
</div>
<style>
.tabs{
/* .tabs{
margin-bottom: 40px;
} */
.tab.big{
margin-bottom: 50px;
/* guessing at size */
}
.tab.medium{
margin-bottom: 40px;
/* the OG size */
}
.tab.small{
margin-bottom: 10px;
/* need it small */
}
ul{
display: flex;
@@ -31,11 +45,28 @@
list-style-type: none;
}
li{
margin: 0 16px;
font-size: 18px;
/* margin: 0 16px; */
/* font-size: 18px; */
color: #555;
cursor: pointer;
}
li.big{
margin: 0 20px;
font-size: 22px;
/* guessing at size */
}
li.medium{
margin: 0 16px;
font-size: 18px;
/* the OG size */
}
li.small{
margin: 8px;
font-size: 10px;
/* need it small */
}
.active{
color: #d91b42;
border-bottom: 2px solid #d91b42;