Changed the way we show and edit data on the user accounts page - now defaults to showing socials by default even if you're logged in, with the option to edit.
This commit is contained in:
parent
822cf32242
commit
490afb3a4f
@ -57,7 +57,7 @@ try { // Try opening the SQL database connection
|
||||
<label for="discord" class="newLine">Discord:</label>
|
||||
<input type="text" placeholder="<?php echo $userData["discord"] ?>" id="discord" name="discord" class="newLine" style="width:100%" maxlength="50"/>
|
||||
<label for="discord" class="newLine">Discord Link:</label>
|
||||
<input type="text" placeholder="<?php echo $userData["discordLink"] ?>" id="discordLink" name="discordLink" class="newLine" style="width:100%" maxlength="50"/>
|
||||
<input type="text" placeholder="<?php echo $userData["discordLink"] ?>" id="discordLink" name="discordLink" class="newLine" style="width:100%" pattern="[0-9]*" maxlength="50"/>
|
||||
<label for="twitch" class="newLine">Twitch:</label>
|
||||
<input type="text" placeholder="<?php echo $userData["twitch"] ?>" id="twitch" name="twitch" class="newLine" style="width:100%" maxlength="50" />
|
||||
<label for="youtube" class="newLine">Youtube:</label>
|
||||
|
||||
@ -172,6 +172,30 @@ function togglePWChange() {
|
||||
}
|
||||
}
|
||||
|
||||
function toggleAccountEdit() {
|
||||
// This function handles the switch between showing the regular socials display, and the edit panel
|
||||
var socialsDiv = document.getElementById("accountSocialsPanel");
|
||||
|
||||
var socialsEdit = document.getElementById("accountSocialsPanelEdit");
|
||||
|
||||
if (socialsEdit.style.display == "none") {
|
||||
socialsDiv.style.display = "none";
|
||||
socialsDiv.style.zIndex = "-1";
|
||||
socialsEdit.style.display = "flex";
|
||||
socialsEdit.style.zIndex = "1";
|
||||
} else if (socialsEdit.style.display == "flex") {
|
||||
socialsDiv.style.display = "flex";
|
||||
socialsDiv.style.zIndex = "1";
|
||||
socialsEdit.style.display = "none";
|
||||
socialsEdit.style.zIndex = "-1";
|
||||
} else {
|
||||
socialsDiv.style.display = "none";
|
||||
socialsDiv.style.zIndex = "-1";
|
||||
socialsEdit.style.display = "flex";
|
||||
socialsEdit.style.zIndex = "1";
|
||||
}
|
||||
}
|
||||
|
||||
function editUser() {
|
||||
console.log("YAASSS");
|
||||
var div = document.getElementById("userEditFrameDiv");
|
||||
@ -179,7 +203,7 @@ function editUser() {
|
||||
var html = "";
|
||||
|
||||
|
||||
html += "<iframe src=\"/admin/user_management/user_edit_form.php?username=" + username + "\" name=\"dataFrame\" class=\"dataFrame\" id=\"dataFrame\" onload=\"resizeIframe(this);var obj=parent.document.getElementById('dataFrame');resizeIframe(obj);\"></iframe>";
|
||||
html += "<iframe src=\"/admin/user_management/user_edit_form.php?username=" + username + "\" name=\"dataFrame\" class=\"dataFrame\" id=\"dataFrame\" onload=\"resizeIframe(this);resizeIframe(parent.document.getElementById('dataFrame'));\"></iframe>";
|
||||
|
||||
div.innerHTML = html;
|
||||
|
||||
|
||||
@ -229,6 +229,39 @@ For all the things at the bottom of the page; log in/out, 'my account', etc.
|
||||
color: rgb(60, 60, 60);
|
||||
}
|
||||
|
||||
/* TOOLTIP */
|
||||
|
||||
/* Tooltip container */
|
||||
.tooltip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
/*border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
|
||||
}
|
||||
|
||||
/* Tooltip text */
|
||||
.tooltip .tooltipText {
|
||||
visibility: hidden;
|
||||
width: 180px;
|
||||
background-color: black;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 5px 10px;
|
||||
border-radius: 6px;
|
||||
|
||||
/* Position the tooltip text - see examples below! */
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
margin-left: -90px;
|
||||
}
|
||||
|
||||
/* Show the tooltip text when you mouse over the tooltip container */
|
||||
.tooltip:hover .tooltipText {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -51,6 +51,28 @@
|
||||
}
|
||||
|
||||
|
||||
#accountSocialsPanelEdit {
|
||||
z-index: -1;
|
||||
display: none;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
width: 45%;
|
||||
border: 1px solid black;
|
||||
border-radius: 8px;
|
||||
margin-right: 2%;
|
||||
padding: 5px;
|
||||
padding-bottom: 25px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#accountSocialsPanelEdit p {
|
||||
height: 25px;
|
||||
}
|
||||
#accountSocialsPanelEdit h3 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#passwordChangePanel {
|
||||
z-index: -1;
|
||||
@ -181,6 +203,30 @@
|
||||
transform: translateY(2px);
|
||||
}
|
||||
|
||||
#editAccountButton {
|
||||
margin: auto;
|
||||
padding: 5px 10px;
|
||||
font-weight: 600;
|
||||
font-size: 75%;
|
||||
text-decoration: none;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
border-radius: 3px;
|
||||
border: 1px solid rgb(0, 0, 255);
|
||||
box-shadow: 0px 2px 4px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
#editAccountButton:hover {
|
||||
color: black;
|
||||
background-color: rgba(255, 165, 0, .6);
|
||||
}
|
||||
|
||||
#editAccountButton:active {
|
||||
box-shadow: 0px 0px 2px;
|
||||
transform: translateY(2px);
|
||||
}
|
||||
|
||||
|
||||
|
||||
#textInputArea {
|
||||
|
||||
@ -118,26 +118,26 @@ try { // Try opening the SQL database connection
|
||||
if (isset($_SESSION["userID"])) {
|
||||
if (mb_strtolower($username) == mb_strtolower($_SESSION["username"])) {
|
||||
echo ("
|
||||
<div id=\"accountSocialsPanel\">
|
||||
<div id=\"accountSocialsPanelEdit\">
|
||||
<h3 class=\"newLine\">Edit</h3>
|
||||
<p></p>
|
||||
<div class=\"accountDetailsLeftSide\">
|
||||
<p>Twitch (name):</p>
|
||||
<p>YouTube (name):</p>
|
||||
<p>YouTube (link):</p>
|
||||
<p>Discord (name):</p>
|
||||
<p>Discord (UserID):</p>
|
||||
<p class=\"tooltip\">Twitch (name):<span class=\"tooltipText\">Your Twitch username</span></p>
|
||||
<p class=\"tooltip\">YouTube (name):<span class=\"tooltipText\">Your YouTube username</span></p>
|
||||
<p class=\"tooltip\">YouTube (link):<span class=\"tooltipText\">Link to your YouTube channel</span></p>
|
||||
<p class=\"tooltip\">Discord (name):<span class=\"tooltipText\">You Discord name (how it's displayed)</span></p>
|
||||
<p class=\"tooltip\">Discord (UserID):<span class=\"tooltipText\">This is the numerical User ID from Discord. Right-click your profile name to copy your ID</span></p>
|
||||
<p> </p>
|
||||
<p><a id=\"changePasswordButton\" style=\"text-align:center;\" onclick=\"togglePWChange();\">Change Password</a></p>
|
||||
<p><a id=\"editAccountButton\" style=\"text-align:center;\" onclick=\"toggleAccountEdit();resizeIframe(parent.document.getElementById('dataFrame'));\">Back</a></p>
|
||||
<p> </p>
|
||||
</div>
|
||||
<div class=\"accountDetailsRightSide\">
|
||||
<form id=\"editUserDetails\" action=\"/admin/user_management/edit_user.php\" method=\"post\">
|
||||
<p><input type=\"text\" placeholder=\"" . $userDetails["twitch"] . "\" id=\"twitch\" name=\"twitch\"></p>
|
||||
<p><input type=\"text\" placeholder=\"" . $userDetails["youtube"] . "\" id=\"youtube\" name=\"youtube\"></p>
|
||||
<p><input type=\"text\" placeholder=\"" . $userDetails["youtubeLink"] . "\" id=\"youtubeLink\" name=\"youtubeLink\"></p>
|
||||
<p><input type=\"text\" placeholder=\"" . $userDetails["discord"] . "\" id=\"discord\" name=\"discord\"></p>
|
||||
<p><input type=\"text\" placeholder=\"" . $userDetails["discordLink"] . "\" id=\"discordLink\" name=\"discordLink\"></p>
|
||||
<p class=\"tooltip\"><input type=\"text\" placeholder=\"" . $userDetails["twitch"] . "\" id=\"twitch\" name=\"twitch\"></p>
|
||||
<p class=\"tooltip\"><input type=\"text\" placeholder=\"" . $userDetails["youtube"] . "\" id=\"youtube\" name=\"youtube\"></p>
|
||||
<p class=\"tooltip\"><input type=\"text\" placeholder=\"" . $userDetails["youtubeLink"] . "\" id=\"youtubeLink\" name=\"youtubeLink\"></p>
|
||||
<p class=\"tooltip\"><input type=\"text\" placeholder=\"" . $userDetails["discord"] . "\" id=\"discord\" name=\"discord\"></p>
|
||||
<p class=\"tooltip\"><input type=\"text\" placeholder=\"" . $userDetails["discordLink"] . "\" id=\"discordLink\" name=\"discordLink\" pattern=\"[0-9]*\"></p>
|
||||
<p> </p>
|
||||
<div class=\"accountUpdateButton\">
|
||||
<input type=\"submit\" id=\"submitButton\" value=\"Update\">
|
||||
@ -175,13 +175,64 @@ try { // Try opening the SQL database connection
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
");
|
||||
} else {
|
||||
echo ("
|
||||
<script>console.log('test');</script>
|
||||
"/* */ . "
|
||||
"/* PLAIN DISPLAY */ . "
|
||||
"/* */ . "
|
||||
<div id=\"accountSocialsPanel\">
|
||||
<h3>Socials</h3>
|
||||
<p class=\"newLine\"></p>
|
||||
<h3 class=\"newLine\">Socials</h3>
|
||||
<p></p>
|
||||
<div class=\"accountDetailsLeftSide\">
|
||||
<p>Twitch:</p>
|
||||
<p>YouTube:</p>
|
||||
<p>Discord:</p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p><a id=\"changePasswordButton\" style=\"text-align:center;\" onclick=\"togglePWChange();\">Change Password</a></p>
|
||||
<p> </p>
|
||||
</div>
|
||||
<div class=\"accountDetailsRightSide\">
|
||||
");
|
||||
if (isset($userDetails["twitch"]) && $userDetails["twitch"] != "") {
|
||||
echo ("<p><a href=\"#\" id=\"twitchURL\" onclick=\"redirect('twitch', '" . $userDetails["twitch"] . "')\" class=\"plainLinkBlue\">" . $userDetails["twitch"] . "</a></p>");
|
||||
} else {
|
||||
echo ("<p>none</p>");
|
||||
}
|
||||
|
||||
if (isset($userDetails["youtube"]) && $userDetails["youtube"] != "") {
|
||||
if (isset($userDetails["youtubeLink"]) && $userDetails["youtubeLink"] != "") {
|
||||
echo ("<p><a href=\"#\" id=\"youtubeURL\" onclick=\"redirect('youtube', '" . $userDetails["youtubeLink"] . "')\" class=\"plainLinkBlue\">" . $userDetails["youtube"] . "</a></p>");
|
||||
} else {
|
||||
echo ("<p>" . $userDetails["youtube"] . "</a></p>");
|
||||
}
|
||||
} else {
|
||||
echo ("<p>none</p>");
|
||||
}
|
||||
|
||||
if (isset($userDetails["discord"]) && $userDetails["discord"] != "") {
|
||||
if (isset($userDetails["discordLink"]) && $userDetails["discordLink"] != "") {
|
||||
echo ("<a href=\"#\" id=\"discordURL\" onclick=\"redirect('discord', '" . $userDetails["discordLink"] . "')\" class=\"plainLinkBlue\"> " . $userDetails["discord"] . "</a></p>");
|
||||
} else {
|
||||
echo ("<p>" . $userDetails["discord"] . "</a></p>");
|
||||
}
|
||||
} else {
|
||||
echo ("<p>none</p>");
|
||||
}
|
||||
|
||||
|
||||
echo ("
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p><a id=\"editAccountButton\" style=\"text-align:center;\" onclick=\"toggleAccountEdit();resizeIframe(parent.document.getElementById('dataFrame'));\">Edit Socials</a></p>
|
||||
<p> </p>
|
||||
</div>
|
||||
</div>
|
||||
");
|
||||
} else {
|
||||
echo ("
|
||||
<div id=\"accountSocialsPanel\">
|
||||
<h3 class=\"newLine\">Socials</h3>
|
||||
<p></p>
|
||||
<div class=\"accountDetailsLeftSide\">
|
||||
<p>Twitch:</p>
|
||||
<p>YouTube:</p>
|
||||
@ -228,7 +279,6 @@ try { // Try opening the SQL database connection
|
||||
}
|
||||
} else {
|
||||
echo ("
|
||||
<script>console.log('test');</script>
|
||||
<div id=\"accountSocialsPanel\">
|
||||
<h3>Socials</h3>
|
||||
<p class=\"newLine\"></p>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user