much better ProfileUser CSS, not perfect by any stretch, but i don't absolutly hate it anymore, slightly better Tab responsiveness, oh and i added a pop of color

2023-01-17 18:03:51 +01:00
parent 06f491cba5
commit 715fce65af
5 changed files with 80 additions and 78 deletions
--- a/srcs/requirements/svelte/api_front/src/pages/profile/ProfileSettings.svelte
+++ b/srcs/requirements/svelte/api_front/src/pages/profile/ProfileSettings.svelte
@@ -191,6 +191,7 @@
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
    /* text-align: center; */
+		margin-bottom: 10px;
  }

  img {
--- a/srcs/requirements/svelte/api_front/src/pages/profile/ProfileUsers.svelte
+++ b/srcs/requirements/svelte/api_front/src/pages/profile/ProfileUsers.svelte
@@ -321,16 +321,15 @@


 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<div class="background-pages">
+<!-- <div class="background-pages"> -->
 <div class="top-grid">

  <!-- let tabItems: string[] = ['All Users', 'My Friends', 'Friend Requests']
  let activeTabItem: string = 'All Users'; -->

-  <div class="sidebar-list">
-    <Tabs items={tabItems} activeItem={activeTabItem} size="medium" on:tabChange={switchTab}/>
+  <div class="sidebar-list background-pages">
+    <Tabs items={tabItems} activeItem={activeTabItem} size="default" on:tabChange={switchTab}/>
    {#if activeTabItem === 'All Users' && allUsers}
-      <!-- <h3>{activeTabItem}</h3> -->
      {#if Object.keys(allUsers).length === 0}
        <div class="tip">You are alone on this platform...</div>
      {/if}
@@ -355,7 +354,6 @@
        <br>
      {/each}
    {:else if activeTabItem === 'My Friends' && myFriendships}
-      <!-- <h3>{activeTabItem}</h3> -->
      {#if Object.keys(myFriendships).length === 0}
        <div class="tip">You don't have any Friends... Yet!</div>
      {/if}
@@ -380,7 +378,6 @@
        <br>
      {/each}
    {:else if activeTabItem === 'Friend Requests' && requestsRecieved}
-      <!-- <h3>{activeTabItem}</h3> -->
      {#if Object.keys(requestsRecieved).length === 0}
        <div class="tip">You don't have any Friend Requests</div>
      {/if}
@@ -397,7 +394,6 @@
        <br>
      {/each}
    {:else if activeTabItem === 'Blocked Users' && blockedUsers}
-      <!-- <h3>{activeTabItem}</h3> -->
      {#if Object.keys(blockedUsers).length === 0}
        <div class="tip">You have not Blocked any Users</div>
      {/if}
@@ -417,12 +413,9 @@
  </div>


-  <!-- This next bit needs to all be in a window thing above the whatever -->
-
 	{#if showModal && usernameBeingViewed}
 	<div class="backdrop"></div>
-  <div class="main-display box" use:clickOutside on:outclick={() => unViewAUser()}>
-    <!-- {#if usernameBeingViewed} -->
+  <div class="box background-pages" use:clickOutside on:outclick={() => unViewAUser()}>
      <DisplayAUser aUsername={usernameBeingViewed} bind:loaded={loadedUser}/>

      {#if loadedUser === true}
@@ -459,18 +452,10 @@
        {/if}
      </div>
      {/if}
-    <!-- {:else}
-      <div class="placeholder">
-        <h1>Click on a user!</h1>
-        <h4>You'll see them displayed here</h4>
-      </div> -->
-    <!-- {/if} -->
-
 		<button on:click={() => unViewAUser()}>Close</button>
  </div>
 	{/if}
 </div>
-</div>


 <style>
@@ -482,24 +467,11 @@
    /* grid-template-columns: repeat(8, 1fr); */
    /* max-height: calc(100vh - 30vh); */
    height: 85vh;
+		/* display: block; */
+		position: relative;
    /* margin: 0; */
  }

-  /* div.sidebar-list{
-    grid-column: 1 / span 2;
-    background: #FB8B24;
-    padding: 1vw;
-    font-size: smaller;
-    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;
-    border-bottom: 4px solid #071013;
-    overflow-wrap: break-word;
-  } */
-
 	div.sidebar-list{
    /* grid-column: 1 / span 2; */
    /* grid-column: 3 / span 4; */
@@ -517,7 +489,6 @@
 		text-align: center;
  }

-
  div.sidebar-item{
    /* yea i mean that seems fine... */
    display: inline-block;
@@ -537,14 +508,41 @@
    cursor: pointer;
  }

-  div.main-display{
-    grid-column: 3 / span 10;
+	/* Modal Stuff */
+
+	.backdrop {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    background: rgba(0,0,0,0.50)
  }

-  div.placeholder{
-    color: white;
-    text-align: center;
-  }
+	.box {
+		--width: 70vw;
+		--height: 60vh;
+		/* --height: auto; */
+		position: absolute;
+		width: var(--width);
+		/* width: auto; */
+		/* height: var(--height); */
+		height: auto;
+		left: calc(50% - var(--width) / 2);
+		/* left: 0px; */
+		top: calc(50% - var(--height) / 2);
+		/* top: 0px; */
+		/* top: calc(50% - ); */
+		/* display: flex; */
+		align-items: center;
+		padding: 8px;
+		border: 2px solid white;
+		border-radius: 7px;
+		/* background-color: #ff3e00; */
+		/* color: #fff; */
+		text-align: center;
+		font-weight: bold;
+	}

  div.buttons-area{
    text-align: center;
@@ -567,35 +565,9 @@
 		transform: translateY(-50%); */
 	}

-
-	/* Modal Stuff */
-
-	.box {
-		--width: 70vw;
-		--height: 60vh;
-		position: absolute;
-		width: var(--width);
-		height: var(--height);
-		left: calc(50% - var(--width) / 2);
-		top: calc(50% - var(--height) / 2);
-		display: flex;
-		align-items: center;
-		padding: 8px;
-		border-radius: 7px;
-		/* background-color: #ff3e00; */
-		/* color: #fff; */
-		text-align: center;
-		font-weight: bold;
+	div.tile {
+		margin: 5px;
 	}

-	.backdrop {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    left: 0;
-    background: rgba(0,0,0,0.50)
-  }
-
-
+	
 </style>
--- a/srcs/requirements/svelte/api_front/src/pieces/GenerateUserDisplay.svelte
+++ b/srcs/requirements/svelte/api_front/src/pieces/GenerateUserDisplay.svelte
@@ -91,7 +91,7 @@
    </div>
    <section class="main-stats">
      <h4>Match Statistics</h4>
-      <p>Victories: {user.stats.winGame}</p>
+      <p>Wins: {user.stats.winGame}</p>
      <p>Losses: {user.stats.loseGame}</p>
      <p>Draws: {user.stats.drawGame}</p>
      <p class="highlight">Total: {user.stats.totalGame}</p>
@@ -119,6 +119,7 @@
 /* Normal CSS stuff */
  .avatar{
    max-width: 150px;
+    /* width: 1em; */
    /* padding: 5px; */
  }

--- a/srcs/requirements/svelte/api_front/src/pieces/Header.svelte
+++ b/srcs/requirements/svelte/api_front/src/pieces/Header.svelte
@@ -100,4 +100,10 @@
    max-width: 10%;
    float: left;
  }
+
+  button:hover{
+    cursor: pointer;
+    background-color: rgb(0, 166, 255) !important;
+  }
+
 </style>
--- a/srcs/requirements/svelte/api_front/src/pieces/Tabs.svelte
+++ b/srcs/requirements/svelte/api_front/src/pieces/Tabs.svelte
@@ -3,7 +3,7 @@
  export let items;
  export let activeItem;
  export let size = 'medium';
-  // big, medium, small
+  // big, medium, small, default (responsive)

  const dispatch = createEventDispatcher();

@@ -11,11 +11,9 @@

 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="tabs" class:size={size}>
-  <!-- creates a list, can be done other ways -->
  <ul>
    {#each items as 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>
    {/each}
@@ -23,9 +21,7 @@
 </div>

 <style>
-  /* .tabs{
-    margin-bottom: 40px;
-  } */
+
  .tab.big{
    margin-bottom: 50px;
    /* guessing at size */
@@ -66,10 +62,36 @@
    /* need it small */
  }

-
  .active{
    color: #d91b42;
    border-bottom: 2px solid #d91b42;
    padding-bottom: 8px;
  }
+
+  li div:hover {
+    color: rgb(0, 166, 255) !important;
+  }
+
+  /* default is medium */
+  .tab.default {
+    margin-bottom: 40px;
+  }
+  li.default{
+    margin: 0 16px;
+    font-size: 18px;
+    /* the OG size */
+  }
+
+  @media screen and (max-width: 700px) {
+    /* they turn .small */
+    .tab.default {
+      margin-bottom: 10px;
+    }
+    li.default {
+      margin: 8px;
+      font-size: 10px;
+    }
+  }
+
+
 </style>