Skip to content

Commit

Permalink
Element Settings Menu
Browse files Browse the repository at this point in the history 
Scrollable image options (desktop)
Arrow Theme
Condensed check into one function
  • Loading branch information
@cassiancc
cassiancc committed Aug 21, 2022
1 parent c096b98 commit 6c45b59
Show file tree
Hide file tree
Showing 10 changed files with 150 additions and 71 deletions.
10 changes: 7 additions & 3 deletions css/green.css → css/arrow.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,11 @@ header, .title-header {
border: transparent;
border-bottom: #e89f30 solid;
}

h1 {
content: url("/lib/arrow_ta.png");
width: 160px;
margin: 5px;
}

/*6b6b6b BORDER*/
.button:hover, #export-buttons .button:hover, .input-upload:hover, .button-border:hover {
Expand Down Expand Up @@ -81,15 +85,15 @@ footer, #image-options, header, .title-header {
.button, .main-text, .header-button:hover, .del-tier:hover, .input-upload::file-selector-button, #desc p, .header-button {
color: black;
}
#new:hover, #trash, #tier-move button:hover, #list-header, h1, .title-header, footer .main-text, footer, p#upload-images-info {
#plus-button:hover, #trash, #tier-move button:hover, #list-header, h1, .title-header, footer .main-text, footer, p#upload-images-info {
color: white;
}
/*RED TEXT*/
#github:hover, footer a:hover, #change-theme-button:hover {
color: #e89f30
}
/*6b6b6b TEXT*/
#new, #tier-move button, .del-tier {
#plus-button, #tier-move button, .del-tier {
color: #6b6b6b;
}
.button {
Expand Down
8 changes: 4 additions & 4 deletions css/dark.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ body, .header-button {
background-color: #1f1f1f;
}
/*222222 BACKGROUND*/
.button, #add-tier-colour, #urlselect, #text-select, #add-tier {
.button, #add-tier-colour, #urlselect, .text-input {
background-color: #222222;
}
/*393939 BACKGROUND*/
Expand All @@ -74,7 +74,7 @@ footer, #image-options, header, .title-header {
}

/*WHITE TEXT*/
.button, .main-text, #new:hover, #tier-move button:hover, .header-button:hover, .del-tier:hover, .input-upload::file-selector-button {
.button, .main-text, #plus-button:hover, #tier-move button:hover, .header-button:hover, .del-tier:hover, .input-upload::file-selector-button {
color: white;
}

Expand All @@ -83,7 +83,7 @@ footer, #image-options, header, .title-header {
color: #d22d59
}
/*6b6b6b TEXT*/
#trash, #new, #tier-move button, .del-tier, .header-button {
#trash, #plus-button, #tier-move button, .del-tier, .header-button {
color: #6b6b6b;
}
/*BLACK TEXT*/
Expand All @@ -93,6 +93,6 @@ th:not(.header) {
.settings-grid p {
border-color: white;
}
#urlselect:focus, #text-select:focus, #add-tier:focus, .tierheader:focus, #list-header:focus {
#urlselect:focus, .text-input:focus, .tierheader:focus, #list-header:focus {
outline-color: white;
}
8 changes: 5 additions & 3 deletions css/desktop.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,24 +4,26 @@
}
/*style the uploaded image options*/
#image-options {
min-height: 100px;
height: 100px;
display: flex;
position: fixed;
bottom: 0;
width: 100%;
min-height: min-content;
overflow: hidden;
overflow-x: auto;
flex-wrap: wrap;
}
/*fancy footer*/
footer {
margin-left: auto;
margin-right: auto;
text-align: center;
position: bottom;
bottom:0;
bottom: 0;
width: 100%;
display: flex;
justify-content: space-between;

}
td, th {
width: 10vh;
Expand Down
4 changes: 2 additions & 2 deletions css/light.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ footer, #image-options, header {


/*WHITE TEXT*/
.button, .github, #new:hover, #tier-move button:hover, .del-tier:hover, footer a, body, header button:hover, .menu-button, #fileselect::file-selector-button {
.button, .github, #plus-button:hover, #tier-move button:hover, .del-tier:hover, footer a, body, header button:hover, .menu-button, #fileselect::file-selector-button {
color: black;
}

Expand All @@ -88,7 +88,7 @@ footer, #image-options, header {
color: #55091d
}
/*6b6b6b TEXT*/
#trash, #new, #tier-move button, .del-tier {
#trash, #plus-button, #tier-move button, .del-tier {
color: #6b6b6b;
}
/*BLACK TEXT*/
Expand Down
4 changes: 2 additions & 2 deletions css/luke.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ footer, #image-options, header, .title-header {
}

/*WHITE TEXT*/
.button, .main-text, #new:hover, #tier-move button:hover, .header-button:hover, .del-tier:hover, .input-upload::file-selector-button {
.button, .main-text, #plus-button:hover, #tier-move button:hover, .header-button:hover, .del-tier:hover, .input-upload::file-selector-button {
color: white;
}

Expand All @@ -86,7 +86,7 @@ footer, #image-options, header, .title-header {
color: #d22d59
}
/*6b6b6b TEXT*/
#trash, #new, #tier-move button, .del-tier, .header-button {
#trash, #plus-button, #tier-move button, .del-tier, .header-button {
color: #6b6b6b;
}
/*BLACK TEXT*/
Expand Down
8 changes: 4 additions & 4 deletions css/terminal.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ body, .header-button {
background-color: #1f1f1f;
}
/*222222 BACKGROUND*/
.button, #add-tier-colour, #urlselect, #text-select, #add-tier {
.button, #add-tier-colour, .text-input, #add-tier {
background-color: #222222;
}
/*393939 BACKGROUND*/
Expand All @@ -74,7 +74,7 @@ footer, #image-options, header, .title-header {
}

/*WHITE TEXT*/
.button, .main-text, #new:hover, #tier-move button:hover, .del-tier:hover, .input-upload::file-selector-button {
.button, .main-text, #plus-button:hover, #tier-move button:hover, .del-tier:hover, .input-upload::file-selector-button {
color: #2dd243;

}
Expand All @@ -87,7 +87,7 @@ footer, #image-options, header, .title-header {
color: #2dd243
}
/*6b6b6b TEXT*/
#trash, #new, #tier-move button, .del-tier, .header-button {
#trash, #plus-button, #tier-move button, .del-tier, .header-button {
color: #6b6b6b;
}
/*BLACK TEXT*/
Expand All @@ -97,6 +97,6 @@ th:not(.header) {
.settings-grid p {
border-color: #2dd243;
}
#urlselect:focus, #text-select:focus, #add-tier:focus, .tierheader:focus, #list-header:focus {
#urlselect:focus, .text-input:focus, .tierheader:focus, #list-header:focus {
outline-color: #2dd243;
}
38 changes: 37 additions & 1 deletion css/web.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,22 @@ header {
font-size: medium;
flex-wrap: wrap;
}
#add-text-to-image {
padding-bottom: 10px;
padding-top: 10px;
width: 100%;
height: 40px;
font-size: medium;
flex-wrap: wrap;
}
#text-colour-picker {
margin-bottom: 10px;
margin-top: 10px;
width: 40%;
height: 40px;
font-size: medium;
flex-wrap: wrap;
}
#urlselect, #text-select, #add-tier {
width: 100%;
margin-right: 10px;
Expand Down Expand Up @@ -242,10 +258,30 @@ table {
border-color: transparent;

}
#new, #tier-move button, .del-tier {
#plus-button, #tier-move button, .del-tier {
transition: color .1s;

}
.preview {
height: 10vh;
width: 10vh;
text-align: center;
margin-top: auto;
margin-bottom: auto;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: inline-table;
}
#preview {
width: fit-content;
flex-direction: column;
display: flex;
}
.drag-text {
height: fit-content;
width: fit-content;
}
/*give margin to links*/
#desc, #upload-images-info {
margin-left: 10px;
Expand Down
22 changes: 18 additions & 4 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,14 +40,28 @@ <h1>Tier Away</h1>
<table id="tierlist"><thead><tr id="tablehead">
<th oninput="screenTitle()" id="list-header" class="header" contenteditable="true" colspan="2">
Tier List
</th><th data-html2canvas-ignore id="new" title="Click here (or press +) to add to the tier list." class="header" onclick="openMenu(`plus`)"><i class="fa fa-plus fa-2x"></i>
</th><th data-html2canvas-ignore id="plus-button" title="Click here (or press +) to add to the tier list." class="header" onclick="openMenu(`plus`)"><i class="fa fa-plus fa-2x"></i>

</th>
</tr></thead><tbody></tbody></table>
<div style="transition: opacity .3s; opacity: 0;" id="plus" class="hidden">
</div>
<div style="transition: opacity .3s; opacity: 0;" id="export" class="hidden">
</div>
<div style="transition: opacity .3s; opacity: 0;" id="element" class="hidden">
<h2 class="title-header">
<i class="fa fa-cog" aria-hidden="true"></i>
Element Settings
</h2>
<div style="display: flex">
<div id="preview">
</div>
<div style="display: flex; width: 100%;">
<input value="" oninput="changeText()" type="text" id="add-text-to-image" class="main-text button-border text-input">
<input oninput="changeTextColour()" type="color" class="button button-border" id="text-colour-picker">
</div>
</div>
</div>
<div style="transition: opacity .3s; opacity: 0;" id="settings" class="hidden">
<h2 class="title-header">
<i class="fa fa-cog" aria-hidden="true"></i>
Expand All @@ -63,9 +77,9 @@ <h3 class="left-header">Theme Settings</h3>
<i id="light-icon" class="fa fa-times" aria-hidden="true"></i>
Light
</button>
<button onclick="changeSetting('theme-green')" class="button menu-button theme-button">
<i id="green-icon" class="fa fa-times" aria-hidden="true"></i>
Green
<button onclick="changeSetting('theme-arrow')" class="button menu-button theme-button">
<i id="arrow-icon" class="fa fa-times" aria-hidden="true"></i>
Arrow
</button>
<button onclick="changeSetting('theme-luke')" class="button menu-button theme-button">
<i id="luke-icon" class="fa fa-times" aria-hidden="true"></i>
Expand Down
Binary file added lib/arrow_ta.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 6c45b59

Please sign in to comment.