valentijn/Discord-Bot-Builder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changed some more styling, and responsiveness

Browse Source
This commit is contained in:
HerpieDerpie@example.com
2024-01-11 12:10:38 +01:00
parent 3443ed8d3c
commit 224898afac
3 changed files with 29 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
httpdocs/project.html
View File

@@ -13,9 +13,10 @@
<div id="main"> <div id="main">
<div id="container" onload="loadData()"> <div id="container" onload="loadData()">
<h1 id="title"></h1> <h1 id="title"></h1>
<button id="editProjectName" onclick="editProjectName()">Edit Name</button> <div id="projectButtons">
<button id="exportProject" onclick="exportProject()">Export Project</button> <button id="editProjectName" onclick="editProjectName()">Edit Name</button>
<h2 id="description"></h2><br> <button id="exportProject" onclick="exportProject()">Export Project</button>
</div>
<h3 id="section-title">Commands:</h3> <h3 id="section-title">Commands:</h3>
<div id="grid" class="bot-list"> <div id="grid" class="bot-list">

1
scripts/project.js
View File

@@ -204,7 +204,6 @@ function loadData() {
let jsonResponse = JSON.parse(xhr.responseText); let jsonResponse = JSON.parse(xhr.responseText);
if (jsonResponse != {}){ if (jsonResponse != {}){
document.querySelector("#title").innerHTML = jsonResponse.projectName.toUpperCase(); document.querySelector("#title").innerHTML = jsonResponse.projectName.toUpperCase();
document.querySelector("#description").innerHTML = "Project Id: "+jsonResponse.projectId;
} }
} else { } else {
console.error('Request failed. Status: ' + xhr.status); console.error('Request failed. Status: ' + xhr.status);

29
styles/project.css
View File

@@ -60,12 +60,19 @@
font-size: large; font-size: large;
} }
#editProjectName, #projectButtons {
#exportProject { display: flex;
color: black !important; justify-content: space-around;
height: 80px;
width: 80%;
} }
#projectButtons > button {
width: 35% !important;
background: var(--dark-steel);
border: 1px solid var(--discord-blue);
border-radius: 10px;
}
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
#main { #main {
@@ -94,11 +101,25 @@
grid-auto-rows: 200px; grid-auto-rows: 200px;
gap:10px !important; gap:10px !important;
} }
#grid:last-child {
margin-bottom: 30px;
}
.grid-btn { .grid-btn {
width: 100% !important; width: 100% !important;
height: 100% !important; height: 100% !important;
} }
#projectButtons {
flex-direction: column;
align-items: center;
height: 200px !important;
row-gap: 5px;
}
#projectButtons > button {
width: 40% !important;
height: 80px;
}
} }
@media only screen and (max-width: 768px) and (min-width: 500px) { @media only screen and (max-width: 768px) and (min-width: 500px) {