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

changements de le couleur et de la font sur l'ensemble du site.

Browse Source
This commit is contained in:
cherif
2023-01-15 17:55:52 +01:00
parent d9652a5eab
commit 99c02ea0ab
8 changed files with 129 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
srcs/requirements/svelte/api_front/public/global.css
View File

@@ -1,4 +1,5 @@
html, body {
position: relative;
width: 100%;
@@ -12,11 +13,23 @@ body {
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
/* tmp? */
background: bisque;
background-color: #333;
display: flex;
flex-direction: column;
}
@font-face {
font-family: "Bit5x3";
src:
url("./fonts/Bit5x3.woff2") format("woff2"),
local("Bit5x3"),
url("./fonts/Bit5x3.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}
a {
color: rgb(0,100,200);
text-decoration: none;
@@ -30,6 +43,13 @@ a:visited {
color: rgb(0,80,160);
}
.background-pages {
background-color: #333;
font-family: "Bit5x3";
font-size: 2vw;
color: white;
}
label {
display: block;
}

28
srcs/requirements/svelte/api_front/src/pages/NotFound.svelte
View File

@@ -1,10 +1,26 @@
<script>
import { link } from "svelte-spa-router";
import Header from '../pieces/Header.svelte';
</script>
<h1>We are sorry!</h1>
<p>This isn't a url that we use.</p>
<p>Go home you're drunk.</p>
<a href="/" use:link>
<h2>Take me home →</h2>
</a>
<div class="background-pages">
<div class="content">
<h1>We are sorry!</h1>
<p>This isn't a url that we use.</p>
<p>Go home you're drunk.</p>
</div>
</div>
<style>
.content {
left: 50%;
position: absolute;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
</style>

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

@@ -78,8 +78,8 @@
.button-in {
background-color: #8c0000;
border-color: black;
border-width: 4px;
border-color: #071013;
border-width: 2px;
color: white;
font-family: "Bit5x3";
font-size: x-large;
@@ -88,8 +88,8 @@
.button-out {
background-color: #008c8c;
border-color: black;
border-width: 4px;
border-color: #071013;
border-width: 2px;
color: white;
font-family: "Bit5x3";
font-size: x-large;

4
srcs/requirements/svelte/api_front/src/pages/game/Ranking.svelte
View File

@@ -28,7 +28,7 @@
</script>
<Header />
<br />
<div class="background-pages">
<div class="principal-div">
<table class="stats-table">
<thead>
@@ -59,6 +59,7 @@
</tbody>
</table>
</div>
</div>
<style>
@@ -71,7 +72,6 @@
margin-left: auto;
margin-right: auto;
font-size: 0.9em;
font-family: sans-serif;
min-width: 400px;
}

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

@@ -19,6 +19,7 @@
<Chat color="bisque"/>
<div class="background-pages">
<div class="outer">
{#if user !== undefined}
<GenerateUserDisplay user={user}/>
@@ -28,13 +29,13 @@
<div>Failed to load current</div>
{/if}
</div>
</div>
<style>
div.outer{
max-width: 960px;
margin: 40px auto;
max-width: 100%;
text-align: center;
padding-bottom: 10px;
}
</style>

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

@@ -24,22 +24,10 @@
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);
// return () => clearInterval(interval);
});
const fetchAll = async() => {
@@ -234,6 +222,7 @@
</script>
<div class="background-pages">
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="top-grid">
@@ -353,7 +342,7 @@
</div>
</div>
</div>
<style>
/* ok so i want a 12 column grid with a sidebar */
@@ -368,7 +357,14 @@
div.sidebar-list{
grid-column: 1 / span 2;
background: white;
background: #FB8B24;
padding: 1vw;
max-width: 100%;
max-height: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border-right: 4px solid #071013;
}
div.sidebar-item{
@@ -393,7 +389,7 @@
}
div.placeholder{
color: darkgray;
color: white;
text-align: center;
}
@@ -402,7 +398,7 @@
}
div.tip{
color: darkgray;
color: white;
font-size: 0.8em;
font-weight: bold;
}

7
srcs/requirements/svelte/api_front/src/pages/profile/ProfileSettings.svelte
View File

@@ -106,6 +106,7 @@
<main>
<div class="background-pages">
<h2>Look! You can change stuff</h2>
<div class="cards">
<Card>
@@ -114,7 +115,7 @@
<div class="label">New Username</div>
<!-- it really hates {user.username} and ${user.username} -->
<!-- <input type="text" placeholder="current username: ${user.username}" bind:value={set.username}> -->
<input type="text" placeholder="current username: {nameTmp}" bind:value={set.username}>
<input type="text" placeholder="{nameTmp}" bind:value={set.username}>
<div class="success">{success.username}</div>
<div class="error">{errors.username}</div>
</div>
@@ -144,7 +145,7 @@
</form>
</Card>
</div>
</div>
</main>
@@ -158,6 +159,8 @@
grid-gap: 20px; */
}
div.cards{
display: grid;
grid-template-columns: 1fr 1fr;

135
srcs/requirements/svelte/api_front/src/pieces/Header.svelte
View File

@@ -21,101 +21,84 @@
<!-- svelte-ignore a11y-click-events-have-key-events -->
<header>
<img src="/img/potato_logo.png" alt="Potato Pong Logo" on:click={() => (push('/'))}>
<h1>Potato Pong</h1>
<nav>
<button class:selected="{current === '/game'}" on:click={() => (push('/game'))}>Play</button>
<button class:selected="{current === '/spectator'}" on:click={() => (push('/spectator'))}>Spectate</button>
<button class:selected="{current === '/ranking'}" on:click={() => (push('/ranking'))}>Ranking</button>
<button class:selected="{current === '/profile'}" on:click={() => (push('/profile'))}>My Profile</button>
<!-- <button class:selected="{current === '/profile/settings'}" on:click={() => (push('/profile/settings'))}>Settings</button> -->
<button class:selected="{current === '/profile/friends'}" on:click={() => (push('/profile/friends'))}>Friends</button>
<button on:click={handleClickLogout}>Log Out</button>
</nav>
</header>
<div class="header">
<img src="/img/logo_potato.png" alt="Potato Pong Logo" on:click={() => (push('/'))}>
<div class="center">
<button class:selected="{current === '/game'}" on:click={() => (push('/game'))}>Play</button>
<button class:selected="{current === '/spectator'}" on:click={() => (push('/spectator'))}>Spectate</button>
<button class:selected="{current === '/ranking'}" on:click={() => (push('/ranking'))}>Ranking</button>
<button class:selected="{current === '/profile'}" on:click={() => (push('/profile'))}>My Profile</button>
<button class:selected="{current === '/profile/friends'}" on:click={() => (push('/profile/friends'))}>Friends</button>
</div>
<button class="logout" on:click={handleClickLogout}>Log Out</button>
</div>
<style>
/* See "possible_fonts.css" for more font options... */
@font-face {
font-family: 'Bondi';
src:url('/fonts/Bondi.ttf.woff') format('woff'),
url('/fonts/Bondi.ttf.svg#Bondi') format('svg'),
url('/fonts/Bondi.ttf.eot'),
url('/fonts/Bondi.ttf.eot?#iefix') format('embedded-opentype');
font-family: "Bit5x3";
src:
url("/fonts/Bit5x3.woff2") format("woff2"),
local("Bit5x3"),
url("/fonts/Bit5x3.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}
.selected {
background-color: chocolate;
.header div.center button.selected {
text-decoration: underline;
/* TMP so it's obvious but we need to pick good colors */
background-color: #2B3A67;
}
.header div.center button {
background-color: #8c0000;
border-color: #071013;
color: white;
font-family: "Bit5x3";
border-width: 2px;
font-size: 2vw;
}
/* There is a bunch of unncessary shit in here... why so many flex grids, why is everything the same class? just seemed easier but... */
header{
/* background: #f7f7f7; */
background: #618174;
/* padding: 20px; */
margin: 0;
/* does nothing so far... */
/* display: flex; */
.header button.logout {
background-color: #008c8c;
border-color: #071013;
color: white;
font-family: "Bit5x3";
border-width: 2px;
font-size: 2vw;
}
header{
/* for some reason this doesn't do shit! */
position: sticky;
/* position: absolute; */
display: grid;
grid-template-columns: 1fr 1fr 1fr;
.header {
resize: vertical;
overflow: hidden;
background: #FB8B24;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border-bottom: 4px solid #071013;
position: relative;
display: block;
padding: 10px;
}
/* Headers */
h1{
font-family: 'Bondi';
}
h1{
margin: 0;
text-align: left;
/* max-width: 40px; */
/* this helped with the weird extra space under the image... */
display: flex;
.header div.center {
width: fit-content;
justify-self: center;
align-self: center;
position: absolute;
left: 50%;
display: inline-block;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
/* Images */
.header button.logout {
float: right;
}
img{
.header img{
cursor: pointer;
max-width: 40px;
padding: 7px 20px;
justify-self: left;
max-width: 10%;
float: left;
}
nav{
display: flex;
justify-content: right;
}
nav button{
margin: 7px 20px;
/* padding: 5px; */
border-radius: 4px;
}
/* .none{
} */
</style>