Visual Implementation of Allow invites

1 year ago · f5f84953c9
parent f7a6503d4c
commit f5f84953c9
3 changed files with 89 additions and 32 deletions
--- a/public/css/dashboard.css
+++ b/public/css/dashboard.css
@ -12,6 +12,10 @@ body
 #userWrapper
 {
    position: absolute;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1em;  
+    justify-content: center;
    top:3vh;
    left:50%;
    transform: translateX(-50%);
@ -23,37 +27,35 @@ body
 }
 #avatar
 {
+    flex-direction: column;
    background-color: ivory;
    height: 10vh;
    width: 10vh;
    background-size: 10vh 10vh;
    position: relative;
    top:2vh;
-    left: 10%;
    border-radius: 10px;
 }
-#userName
+.userNameWrapper
 {
-    position: relative;
-    left: 50%;
-    top:-25%; 
-    font-size: larger;
-    font-family: 'Lato';
-    font-weight: bolder;
-    color: rgb(15, 98, 131);
+	display: flex;
+	flex-direction: column;
+	min-width: 20vh;
+	max-width: 70%;
+	height: 15vh;
+	justify-content: center;
+	text-align: center;
 }
-#guilds
+#userName
 {
-    position: relative;
-    top:20vh;
-    background-color: rgba(210, 252, 253, 0.541);
-    width: 80%;
-    height: 70%;
-    font-family: 'Lato';
+	margin: 0;
+	position: relative;
+
+	font-size: 2.5em;
+	font-family: 'Lato';
    font-weight: bolder;
-    text-align: center;
-    border-radius: 2%;
-    border: 2px solid #020608;
+    white-space: pre-wrap;
+    color: rgb(15, 98, 131);
 }
 .DiscordAddBtn
 {
@ -69,28 +71,69 @@ body
    
    
 }
-.material-symbols-outlined
+.close, .checkBox
 {
-    cursor: pointer;
+  cursor: pointer;
 }
-.popup .material-symbols-outlined
+.close
+{
+  position: relative;
+  top:-0.1em;
+  right:1vh;
+  float:right;
+}
+.popup .checkBox
 {
    position: relative;
    top:-0.1em;
    right:1vh;
    float:right;
 }
+.popup .info
+{
+  position: relative;  
+  font-size: 20px;
+}
+.popup .tooltip {
+  visibility: hidden;
+  width: 17vw;
+  background-color: rgba(37, 14, 165, 0.171);
+  color: ivory;
+  font-size: small;
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px 0;
+  white-space: pre-wrap;
+  /* Position the tooltip */
+  position: absolute;
+  z-index: 1;
+}
+
+.info:hover .tooltip{
+  visibility: visible;
+}
 .popup
 {
    position: absolute;
-    height: 30%;
+    min-height: 30%;
+	max-height: 50%;
    width: 50%;
    top:calc(50% - 15%);
-    background-color: rgba(210, 252, 253, 0.541);
+    background-color: rgba(210, 252, 253, 0.295);
    border-radius: 5px;
    border: 2px solid #020608;
    z-index: 10;
    text-align: center;
+	backdrop-filter: blur(3px); 
+}
+.popup p
+{
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+.popup h3
+{
+  margin-bottom: 1.7em;
 }
 h1
 {
--- a/public/js/dashboard.js
+++ b/public/js/dashboard.js
@ -26,7 +26,7 @@ function updateUser(accessToken, tokenType)
    {
        userID = response.id;
        avatar.style.backgroundImage = `url(https://cdn.discordapp.com/avatars/${response.id}/${response.avatar}.jpeg)`
-        userName.textContent = response.username+"'s servers:"
+        userName.textContent = response.username+"'s servers"
    })
    .catch(console.error);
 }
--- a/views/dashboard.ejs
+++ b/views/dashboard.ejs
@ -9,14 +9,16 @@
  <link rel="scr" type="text/js" href="js/dashboard.js"/>
  <link rel="stylesheet" type="text/css" href="/css/dashboard.css" id="pagesheet"/>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
-  
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
 </head>

 <body>
 </body>
    <div id="userWrapper">
        <div id="avatar"></div>
-        <h1><span id="userName">USERNAME</span></h1>
+        <div class="userNameWrapper">
+            <p id="userName">USERNAME</p>
+        </div>
    </div>
    <div id="Guilds">

@ -26,11 +28,23 @@
            cancel
        </i> 
        <h3 id="guild" class="guildname">PLACEHOLDER</h3>
-        <p>Activate Music: 
-            <span class="material-symbols-outlined" id="music">check_box_outline_blank</span></p>
-        
-        <p>Activate Strikes:
-            <span class="material-symbols-outlined" id="strikes">check_box_outline_blank </span>
+        <p>Activate Music: <span class="material-symbols-outlined info">
+            info
+            <span class="tooltip"> Allow your server to use music (Temporarly does nothing as its a WIP[work in progress]).</span>
+            </span>
+            <span class="material-symbols-outlined checkBox" id="music">check_box_outline_blank</span>
+        </p>
+        <p>Activate Strikes:<span class="material-symbols-outlined info">
+            info
+            <span class="tooltip"> Activate a 3 strike system before automatic ban. (Theese are to be validated before they are self-actionable)</span>
+            </span>
+            <span class="material-symbols-outlined checkBox" id="strikes">check_box_outline_blank </span>
+        </p>
+        <p>Activate Invites:<span class="material-symbols-outlined info">
+            info
+            <span class="tooltip"> Allow invites to other servers on your server.</span>
+            </span>
+            <span class="material-symbols-outlined checkBox" id="invites">check_box_outline_blank  </span>   
        </p>
        <p id="RoleRules" onclick="handleToggleRules(this)">Role rules</p>
        <p id="Feeds" onclick="handleToggleFeeds(this)">Feeds</p>