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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      front/volume/index.html
  2. 43
      front/volume/public/global.css
  3. BIN
      front/volume/public/img/pong.png
  4. 32
      front/volume/src/App.svelte
  5. 87
      front/volume/src/components/Channels.svelte
  6. 130
      front/volume/src/components/Chat.svelte
  7. 49
      front/volume/src/components/Friends.svelte
  8. 25
      front/volume/src/components/Leaderboard.svelte
  9. 29
      front/volume/src/components/MatchHistory.svelte
  10. 22
      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'>
<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='stylesheet' href='/global.css'>
<script type="module" src="src/main.ts"></script>

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

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

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

@ -201,11 +201,20 @@
</div>
<style>
:global(body) {
background-color: #212529;
color: #e8e6e3;
margin: 0;
padding: 0;
}
.login-div {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 10vh;
justify-content: center;
height: 100vh;
gap: 1rem;
}
.img-42 {
@ -216,6 +225,23 @@
}
.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>

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

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

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

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

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

@ -89,7 +89,7 @@
{:else}
<p>No invitations to display</p>
{/if}
<div>
<div class="friends-controls">
<h3>Add a friend</h3>
<form on:submit={addFriend}>
<input type="text" />
@ -115,11 +115,16 @@
}
.friends {
background-color: #fff;
border: 1px solid #ccc;
background-color: #343a40;
border: 1px solid #198754;
border-radius: 5px;
padding: 1rem;
width: 300px;
color: #e8e6e3;
}
h2, h3 {
color: #e8e6e3;
}
.friends-list,
@ -127,4 +132,40 @@
overflow-y: scroll;
max-height: 200px;
}
</style>
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>

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

@ -67,8 +67,8 @@
}
.history {
background-color: #fff;
border: 1px solid #ccc;
background-color: #343a40;
border: 1px solid #198754;
border-radius: 5px;
padding: 1rem;
width: 300px;
@ -76,12 +76,29 @@
justify-content: center;
max-height: 500px;
overflow-y: scroll;
color: #e8e6e3;
}
td {
border: 1px solid #333;
border: 1px solid #198754;
text-align: center;
max-width: 12ch;
overflow: hidden;
padding: 0.25rem 0.5rem;
}
</style>
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>

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

@ -121,8 +121,8 @@
}
.history {
background-color: #fff;
border: 1px solid #ccc;
background-color: #343a40;
border: 1px solid #198754;
border-radius: 5px;
padding: 1rem;
width: 300px;
@ -130,12 +130,33 @@
justify-content: center;
max-height: 500px;
overflow-y: scroll;
color: #e8e6e3;
}
td {
border: 1px solid #111;
border: 1px solid #198754;
text-align: center;
max-width: 15ch;
overflow: hidden;
padding: 0.25rem 0.5rem;
}
</style>
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>

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

@ -78,7 +78,7 @@
display: flex;
justify-content: center;
align-items: center;
background-color: #f5f5f5;
background-color: #343a40;
padding: 1rem;
max-height: 5vh;
}
@ -101,11 +101,28 @@
}
.navigation-bar button {
background-color: transparent;
color: #e8e6e3;
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 {
display: none;
fill: #e8e6e3;
}
.links {
@ -134,11 +151,10 @@
.hamburger {
display: block;
/* margin: 0 auto; */
}
.links {
display: none;
}
}
</style>
</style>

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

@ -143,12 +143,13 @@
}
.profile {
background-color: #fff;
border: 1px solid #ccc;
background-color: #343a40;
border: 1px solid #495057;
border-radius: 5px;
padding: 1rem;
max-width: 80%;
width: 375px;
color: #e8e6e3;
}
.profile-header {
@ -191,4 +192,31 @@
#logout {
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>

Write Preview
Loading…
Cancel
Save