nicolas-arnaud
/
Transcendence
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

some css :), need to remove the hamburger button from the nav bar (bug)

master
WalidMoovin 2 years ago
parent
5e111fbc7a
commit
9353909350
11 changed files with 347 additions and 103 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      front/volume/index.html
  2. 41
      front/volume/public/global.css
  3. BIN
      front/volume/public/img/pong.png
  4. 30
      front/volume/src/App.svelte
  5. 83
      front/volume/src/components/Channels.svelte
  6. 128
      front/volume/src/components/Chat.svelte
  7. 47
      front/volume/src/components/Friends.svelte
  8. 23
      front/volume/src/components/Leaderboard.svelte
  9. 27
      front/volume/src/components/MatchHistory.svelte
  10. 20
      front/volume/src/components/NavBar.svelte
  11. 32
      front/volume/src/components/Profile.svelte

1
front/volume/index.html
View File

@ -6,6 +6,7 @@
<meta name='viewport' content='width=device-width,initial-scale=1'> <meta name='viewport' content='width=device-width,initial-scale=1'>
<title>Pong</title> <title>Pong</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap" />
<link rel='icon' type='image/png' href='/img/pog.jpg'> <link rel='icon' type='image/png' href='/img/pog.jpg'>
<link rel='stylesheet' href='/global.css'> <link rel='stylesheet' href='/global.css'>
<script type="module" src="src/main.ts"></script> <script type="module" src="src/main.ts"></script>

41
front/volume/public/global.css
View File

@ -5,16 +5,21 @@ html, body {
height: 100%; height: 100%;
} }
body, input, button {
font-family: 'Press Start 2P', cursive;
font-size: 16px;
}
body { body {
color: #333; color: #e8e6e3;
margin: 0; margin: 0;
padding: 8px; padding: 8px;
box-sizing: border-box; box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; background-color: #212529;
} }
a { a {
color: rgb(0,100,200); color: #198754;
text-decoration: none; text-decoration: none;
} }
@ -23,7 +28,7 @@ a:hover {
} }
a:visited { a:visited {
color: rgb(0,80,160); color: #157347;
} }
label { label {
@ -33,32 +38,40 @@ label {
input, button, select, textarea { input, button, select, textarea {
font-family: inherit; font-family: inherit;
font-size: inherit; font-size: inherit;
-webkit-padding: 0.4em 0; padding: 0.4em 0;
padding: 0.4em;
margin: 0 0 0.5em 0; margin: 0 0 0.5em 0;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid #ccc; border: 1px solid #495057;
border-radius: 2px; border-radius: 4px;
background-color: #343a40;
color: #e8e6e3;
} }
input:disabled { input:disabled {
color: #ccc; color: #6c757d;
} }
button { button {
color: #333; color: #e8e6e3;
background-color: #f4f4f4; background-color: #198754;
border: none;
cursor: pointer;
padding: 0.5rem 1rem;
border-radius: 4px;
transition: background-color 0.2s ease-in-out;
font-size: 1rem;
outline: none; outline: none;
} }
button:disabled { button:disabled {
color: #999; color: #6c757d;
cursor: not-allowed;
} }
button:not(:disabled):active { button:not(:disabled):active {
background-color: #ddd; background-color: #157347;
} }
button:focus { button:focus {
border-color: #666; box-shadow: 0 0 0 2px rgba(25, 135, 84, 0.25);
} }

BIN
front/volume/public/img/pong.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

30
front/volume/src/App.svelte
View File

@ -201,11 +201,20 @@
</div> </div>
<style> <style>
:global(body) {
background-color: #212529;
color: #e8e6e3;
margin: 0;
padding: 0;
}
.login-div { .login-div {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
margin-top: 10vh; justify-content: center;
height: 100vh;
gap: 1rem;
} }
.img-42 { .img-42 {
@ -216,6 +225,23 @@
} }
.login-button { .login-button {
display: inline; display: inline-block;
background-color: #198754;
border: none;
color: #fff;
padding: 0.5rem 1rem;
border-radius: 4px;
cursor: pointer;
font-size: 1rem;
transition: background-color 0.2s ease-in-out;
}
.login-button:hover {
background-color: #157347;
}
.login-button:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(25, 135, 84, 0.25);
} }
</style> </style>

83
front/volume/src/components/Channels.svelte
View File

@ -191,52 +191,71 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.channels { .channels {
background-color: #fff; background-color: #5f5e5e;
border: 1px solid #ccc; border: 1px solid #dedede;
border-radius: 5px; border-radius: 5px;
padding: 1rem; padding: 1rem;
width: 300px; width: 300px;
display: flex;
flex-direction: column;
overflow: auto;
}
h2 {
font-size: 18px;
margin-bottom: 1rem;
}
p {
font-size: 14px;
margin-bottom: 1rem;
}
li {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 14px;
margin-bottom: 0.5rem;
flex-wrap: wrap;
}
button {
background-color: #6B8E23;
color: #ffffff;
border: none;
border-radius: 5px;
padding: 0.5rem 1rem;
font-size: 14px;
cursor: pointer;
outline: none;
white-space: nowrap;
margin-bottom: 5px;
} }
select { select {
width: 100%; width: 100%;
height: 15%; padding: 0.5rem;
padding: 5px; border: 1px solid #dedede;
border-radius: 4px; border-radius: 5px;
background: #eee; background-color: #5e5d5d;
border: none; font-size: 14px;
outline: grey; margin-bottom: 1rem;
display: inline-block;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; appearance: none;
cursor: pointer; cursor: pointer;
} }
.button { .button {
color: white; background-color: #6B8E23;
margin:0 auto; color: #ffffff;
margin: auto;
width: 45%;
height: 15%;
padding: 5px;
border-radius: 4px;
background: #6B8E23;
border: none; border: none;
outline: grey; border-radius: 5px;
display:block; padding: 0.5rem 1rem;
-webkit-appearance: none; font-size: 14px;
-moz-appearance: none;
appearance: none;
cursor: pointer; cursor: pointer;
} outline: none;
width: 100%;
span {
color: rgb(0, 0, 0);
font-size: 150%;
position: relative;
padding: 10px;
top: 2px;
} }
</style> </style>

128
front/volume/src/components/Chat.svelte
View File

@ -11,7 +11,6 @@ import type { ChannelsType } from "./Channels.svelte";
import type User from "./Profile.svelte"; import type User from "./Profile.svelte";
</script> </script>
//--------------------------------------------------------------------------------/
<script lang="ts"> <script lang="ts">
let blockedUsers: Array<User> = []; let blockedUsers: Array<User> = [];
@ -270,10 +269,10 @@ import type User from "./Profile.svelte";
<form on:submit|preventDefault={ sendMessage }> <form on:submit|preventDefault={ sendMessage }>
<input type="text" placeholder = "Type a message..." bind:value={ newText } /> <input type="text" placeholder = "Type a message..." bind:value={ newText } />
<button> <button>
<img src="img/send.png" alt = "send" /> <img src="img/send.png" alt = "send" />
</button> </button>
</form> </form>
<button on:click|stopPropagation={ toggleChatMembers } on:keydown|stopPropagation > Chat Members </button> <button on:click|stopPropagation={ toggleChatMembers } on:keydown|stopPropagation > Chat Members </button>
{ #if showChatMembers } { #if showChatMembers }
<div <div
class="chatMembers" class="chatMembers"
@ -300,38 +299,101 @@ import type User from "./Profile.svelte";
</div> </div>
<style> <style>
.overlay { .overlay {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.chat { .chat {
background-color: #fff; background-color: #5f5e5e;
border: 1px solid #ccc; border: 1px solid #dedede;
border-radius: 5px; border-radius: 5px;
padding: 1rem; padding: 1rem;
width: 300px; width: 300px;
} display: flex;
flex-direction: column;
}
.messages { .messages {
height: 200px; height: 200px;
overflow-y: scroll; overflow-y: scroll;
} border-bottom: 1px solid #dedede;
padding-bottom: 1rem;
margin-bottom: 1rem;
}
.message {
font-size: 14px;
line-height: 1.4;
margin-bottom: 0.5rem;
}
.message-name {
font-weight: 600;
color: #4c4c4c;
}
input[type="text"] {
width: 100%;
padding: 0.5rem;
border: 1px solid #dedede;
border-radius: 5px;
font-size: 14px;
outline: none;
margin-bottom: 1rem;
}
button {
background-color: #6B8E23;
color: #ffffff;
border: none;
border-radius: 5px;
padding: 0.5rem 1rem;
font-size: 14px;
cursor: pointer;
outline: none;
margin-bottom: 1rem;
}
button:last-child {
margin-bottom: 0;
}
img {
width: 16px;
height: 16px;
}
.profile-menu,
.chatMembers { .chatMembers {
position: absolute; position: absolute;
background-color: #fff; background-color: #ffffff;
border: 1px solid #ccc; border: 1px solid #dedede;
border-radius: 5px; border-radius: 5px;
padding: 1rem; padding: 1rem;
max-height: 100px; max-height: 100px;
overflow-y: scroll; overflow-y: scroll;
} z-index: 1;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
margin-bottom: 0.5rem;
}
li:last-child {
margin-bottom: 0;
}
</style> </style>

47
front/volume/src/components/Friends.svelte
View File

@ -89,7 +89,7 @@
{:else} {:else}
<p>No invitations to display</p> <p>No invitations to display</p>
{/if} {/if}
<div> <div class="friends-controls">
<h3>Add a friend</h3> <h3>Add a friend</h3>
<form on:submit={addFriend}> <form on:submit={addFriend}>
<input type="text" /> <input type="text" />
@ -115,11 +115,16 @@
} }
.friends { .friends {
background-color: #fff; background-color: #343a40;
border: 1px solid #ccc; border: 1px solid #198754;
border-radius: 5px; border-radius: 5px;
padding: 1rem; padding: 1rem;
width: 300px; width: 300px;
color: #e8e6e3;
}
h2, h3 {
color: #e8e6e3;
} }
.friends-list, .friends-list,
@ -127,4 +132,40 @@
overflow-y: scroll; overflow-y: scroll;
max-height: 200px; max-height: 200px;
} }
input[type="text"], button {
background-color: #198754;
border: none;
color: #e8e6e3;
padding: 0.25rem 0.5rem;
margin: 0.25rem;
}
input[type="text"]::placeholder {
color: rgba(232, 230, 227, 0.5);
}
input[type="text"]:focus {
outline: none;
box-shadow: 0 0 2px 1px rgba(25, 135, 84, 0.5);
}
button:hover {
background-color: #28a745;
}
.friends-controls {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
input[type="text"] {
flex-grow: 1;
margin-right: 0.25rem;
}
button {
flex-shrink: 0;
}
</style> </style>

23
front/volume/src/components/Leaderboard.svelte
View File

@ -67,8 +67,8 @@
} }
.history { .history {
background-color: #fff; background-color: #343a40;
border: 1px solid #ccc; border: 1px solid #198754;
border-radius: 5px; border-radius: 5px;
padding: 1rem; padding: 1rem;
width: 300px; width: 300px;
@ -76,12 +76,29 @@
justify-content: center; justify-content: center;
max-height: 500px; max-height: 500px;
overflow-y: scroll; overflow-y: scroll;
color: #e8e6e3;
} }
td { td {
border: 1px solid #333; border: 1px solid #198754;
text-align: center; text-align: center;
max-width: 12ch; max-width: 12ch;
overflow: hidden; overflow: hidden;
padding: 0.25rem 0.5rem;
}
table {
border-collapse: collapse;
width: 100%;
}
table thead th {
background-color: #198754;
color: #e8e6e3;
padding: 0.5rem 0;
}
table tbody tr:nth-child(odd) {
background-color: rgba(255, 255, 255, 0.1);
} }
</style> </style>

27
front/volume/src/components/MatchHistory.svelte
View File

@ -121,8 +121,8 @@
} }
.history { .history {
background-color: #fff; background-color: #343a40;
border: 1px solid #ccc; border: 1px solid #198754;
border-radius: 5px; border-radius: 5px;
padding: 1rem; padding: 1rem;
width: 300px; width: 300px;
@ -130,12 +130,33 @@
justify-content: center; justify-content: center;
max-height: 500px; max-height: 500px;
overflow-y: scroll; overflow-y: scroll;
color: #e8e6e3;
} }
td { td {
border: 1px solid #111; border: 1px solid #198754;
text-align: center; text-align: center;
max-width: 15ch; max-width: 15ch;
overflow: hidden; overflow: hidden;
padding: 0.25rem 0.5rem;
}
table {
border-collapse: collapse;
width: 100%;
}
table thead th {
background-color: #198754;
color: #e8e6e3;
padding: 0.5rem 0;
}
table tbody tr:nth-child(odd) {
background-color: rgba(255, 255, 255, 0.1);
}
p {
color: #e8e6e3;
} }
</style> </style>

20
front/volume/src/components/NavBar.svelte
View File

@ -78,7 +78,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: #f5f5f5; background-color: #343a40;
padding: 1rem; padding: 1rem;
max-height: 5vh; max-height: 5vh;
} }
@ -101,11 +101,28 @@
} }
.navigation-bar button { .navigation-bar button {
background-color: transparent;
color: #e8e6e3;
border: none; border: none;
padding: 0.5rem 1rem;
border-radius: 4px;
cursor: pointer;
font-size: 1rem;
transition: background-color 0.2s ease-in-out;
outline: none;
}
.navigation-bar button:hover {
background-color: #198754;
}
.navigation-bar button:focus {
box-shadow: 0 0 0 2px rgba(25, 135, 84, 0.25);
} }
.hamburger { .hamburger {
display: none; display: none;
fill: #e8e6e3;
} }
.links { .links {
@ -134,7 +151,6 @@
.hamburger { .hamburger {
display: block; display: block;
/* margin: 0 auto; */
} }
.links { .links {

32
front/volume/src/components/Profile.svelte
View File

@ -143,12 +143,13 @@
} }
.profile { .profile {
background-color: #fff; background-color: #343a40;
border: 1px solid #ccc; border: 1px solid #495057;
border-radius: 5px; border-radius: 5px;
padding: 1rem; padding: 1rem;
max-width: 80%; max-width: 80%;
width: 375px; width: 375px;
color: #e8e6e3;
} }
.profile-header { .profile-header {
@ -191,4 +192,31 @@
#logout { #logout {
float: right; float: right;
} }
mark {
background-color: #198754;
padding: 0 0.2rem;
color: #e8e6e3;
}
button {
background-color: #198754;
border: none;
color: #e8e6e3;
padding: 0.5rem 1rem;
border-radius: 4px;
cursor: pointer;
font-size: 1rem;
transition: background-color 0.2s ease-in-out;
outline: none;
margin: 0.5rem;
}
button:hover {
background-color: #157347;
}
button:focus {
box-shadow: 0 0 0 2px rgba(25, 135, 84, 0.25);
}
</style> </style>

Write Preview
Loading…
Cancel
Save