Skip to content

Commit

Permalink
Restyled plus menu content
Browse files Browse the repository at this point in the history
  • Loading branch information
@cassiancc
cassiancc committed Jul 24, 2022
1 parent 871697a commit 12aa4f7
Show file tree
Hide file tree
Showing 2 changed files with 123 additions and 59 deletions.
79 changes: 41 additions & 38 deletions script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,8 +89,8 @@ tierList.addTier(new Tier("#009376","f"));

//add new tier
function addTier() {
tierName = document.getElementById("addtier").value;
tierColour = document.getElementById("addtiercolour").value;
tierName = document.getElementById("add-tier").value;
tierColour = document.getElementById("add-tier-colour").value;
//Modify rendered HTML
tierList.addTier(new Tier(tierColour,tierName));
}
Expand Down Expand Up @@ -177,36 +177,37 @@ function addSelection(select) {
if (select == "upload") {
//Add Image from Upload
document.getElementById("addDrop").innerHTML =
`<div id="addimagediv">
<label>Add new image: </label>
`<div id="addimagediv">
<label>Add new Image: </label>
<input multiple onchange="imageRead('file')" type="file" accept="image/*" id="fileselect">
</div>`;
//Add Image from URL
} else if (select == "url") {
document.getElementById("addDrop").innerHTML =
`<div id="addurldiv">
<label>Add image from URL: </label>
<input type="url" name="urlselect" id="urlselect">
<button onclick="imageRead(document.getElementById('urlselect').value)" id="addtierbutton">Add Image</button>
`<div id="addurldiv">
<label>Add Image from URL: </label>
<div id="url-upload"><input type="url" placeholder="http://example.com/" name="urlselect" id="urlselect">
<button onclick="imageRead(document.getElementById('urlselect').value)" id="addtierbutton">Add Image</button></div>
</div>`;
//Add Text to Tier List
} else if (select == "text") {
document.getElementById("addDrop").innerHTML =
`<div id="addtextdiv">
<label>Add text: </label>
<input type="text" name="textselect" id="text-select">
<button onclick="addText()" id="add-text-button">Add Text</button>
`<div id="addtextdiv">
<label>Add Text: </label>
<div id="text-add">
<input type="text" placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." name="textselect" id="text-select">
<button onclick="addText()" id="add-text-button">Add Text</button>
</div>
</div>`;
//Add New Tier
} else if (select == "newtier") {
document.getElementById("addDrop").innerHTML =
`<div id="addtierdiv">
`<div id="addtierdiv">
<label>Add Tier: </label>
<div>
<input type="text" name="addtier" placeholder="S Tier" id="addtier">
<input type="color" name="addtiercolour" id="addtiercolour">
<button onclick="addTier()" id="addtierbutton">Add Tier</button>
<div id="add-tier-content">
<input type="text" name="add-tier" placeholder="S Tier" id="add-tier">
<input type="color" value="#780063" name="add-tier-colour" id="add-tier-colour">
<button onclick="addTier()" id="add-tier-button">Add Tier</button>
</div>
</div>`;
} else {
Expand All @@ -220,26 +221,28 @@ function openPlus() {
document.getElementById("addDrop").className = "dropshown";
document.getElementById("addDrop").style.opacity = 1;
document.getElementById("addDrop").innerHTML = `
<button onclick="addSelection('upload')">
<i class="fa fa-file-image-o fa-2x" aria-hidden="true"></i>
<p>Add Image from Upload</p>
</button>
<button onclick="addSelection('url')">
<i class="fa fa-external-link fa-2x" aria-hidden="true"></i>
<p>Add Image from URL</p>
</button>
<button onclick="addSelection('text')">
<i class="fa fa-file-text fa-2x" aria-hidden="true"></i>
<p>Add Text to Tier List</p>
</button>
<button onclick="addSelection('newtier')">
<i class="fa fa-plus fa-2x" aria-hidden="true"></i>
<p>Add New Tier</p>
</button>
<button onclick="addSelection('import')">
<i class="fa fa-upload fa-2x" aria-hidden="true"></i>
<p>Import Tier List (indev)</p>
</button>`;
<div id="button-panel">
<button onclick="addSelection('upload')">
<i class="fa fa-file-image-o fa-2x" aria-hidden="true"></i>
<p>Add Image from Upload</p>
</button>
<button onclick="addSelection('url')">
<i class="fa fa-external-link fa-2x" aria-hidden="true"></i>
<p>Add Image from URL</p>
</button>
<button onclick="addSelection('text')">
<i class="fa fa-file-text fa-2x" aria-hidden="true"></i>
<p>Add Text to Tier List</p>
</button>
<button onclick="addSelection('newtier')">
<i class="fa fa-plus fa-2x" aria-hidden="true"></i>
<p>Add New Tier</p>
</button>
<button onclick="addSelection('import')">
<i class="fa fa-upload fa-2x" aria-hidden="true"></i>
<p>Import Tier List (indev)</p>
</button>
</div`;
document.querySelector("body").addEventListener('click', checkPlus);
}
//closes the plus menu
Expand Down
103 changes: 82 additions & 21 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,23 +42,96 @@ header button:hover {
background-color: #222222;
border-color: #393939;
}
/*popup menu buttons*/
#button-panel button, .hidden button, .export-visible a {
width: 100%;
padding-bottom: 10px;
padding-top: 10px;
font-size: large;
background-color: #222222;
color: white;
border-color: #393939;
flex-wrap: wrap;
}
/*popup menu buttons hover*/
#button-panel button:hover, .export-visible a:hover {
background-color: #2b2b2b;
border-color: #6b6b6b
}
#addtierdiv, #addurldiv, #addtextdiv, #addimagediv {
display: flex;
width: 100%;
padding: 10px;
flex-direction: column;
margin-bottom: 10px;
align-items: center;
min-height: 150px;
}
#addurldiv label, #addtextdiv label, #addimagediv label, #addtierdiv label {
width: 20vh;
font-size: 3vh;
margin-bottom: 10px;
}
#fileselect {
height: 5vh;
height: 20vh;
width: 100%;
text-align: center;
border: solid #393939 1px;
}
#addtierdiv div {
#fileselect::file-selector-button {
padding-bottom: 10px;
padding-top: 10px;
font-size: large;
background-color: transparent;
color: white;
border-color: transparent;
flex-wrap: wrap;
}
#fileselect:hover {
background-color: #2b2b2b;
border-color: #6b6b6b;
transition: border-color .1s;
}
#url-upload, #text-add {
display: flex;
width: 100%;
}
#add-tier-content {
display: flex;
width: 100%;
}
#url-upload button, #text-add button, #add-tier-button, #add-tier-colour {
padding-bottom: 10px;
padding-top: 10px;
width: 40%;
height: 100%;
font-size: medium;
background-color: #222222;
color: white;
border-color: #393939;
flex-wrap: wrap;
}
/*popup menu buttons hover*/
#url-upload button:hover, #add-text-button:hover, #add-tier-button:hover, #add-tier-colour:hover {
background-color: #2b2b2b;
border-color: #6b6b6b
}
#urlselect, #text-select, #add-tier{
width: 100%;
background-color: #222222;
color: white;
border-color: #393939;
margin-right: 10px;


}
#urlselect:focus, #urlselect:hover, #text-select:focus, #text-select:hover {
background-color: #2b2b2b;
border-color: #6b6b6b;
outline: none;
}



/*new tier button margins*/
#addtierdiv div input, #addtierdiv label {
margin-right: 5px;
Expand Down Expand Up @@ -142,18 +215,21 @@ th:not(.header) {
display: flex;
position: absolute;
background-color: #1f1f1f;
padding: 10vh;
margin-left: auto;
margin-right: auto;
top: 25%;
left: 0;
right: 0;
width: 50%;
width: 80%;
text-align: center;
border: #222222 solid 5px;
border-radius: 10px;
justify-content: center;
}
#button-panel {
padding: 10vh;
display: flex;
}
/*fancy export menu*/
.export-visible {
position: absolute;
Expand Down Expand Up @@ -183,22 +259,7 @@ th:not(.header) {
padding: 5px;
text-decoration: none;
}
/*popup menu buttons*/
.dropshown button, .hidden button, .export-visible a {
width: 100%;
padding-bottom: 10px;
padding-top: 10px;
font-size: large;
background-color: #222222;
color: white;
border-color: #393939;
flex-wrap: wrap;
}
/*popup menu buttons hover*/
.dropshown button:hover, .export-visible a:hover {
background-color: #2b2b2b;
border-color: #6b6b6b
}

/*transparent background/border on tier move button and delete tier buttons in the table*/
#tier-move button, .del-tier {
background-color: transparent;
Expand Down

0 comments on commit 12aa4f7

Please sign in to comment.