Skip to content

Major UI update #59

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
logicguy1 wants to merge 5 commits into
base: 1.20.2
Choose a base branch
from
Open

Major UI update #59

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4962fb1
Website UI update
logicguy1 Dec 3, 2023
c935546
Website UI update
logicguy1 Dec 3, 2023
eeedf81
MEGA MERGEE
logicguy1 Dec 3, 2023
259301f
General layout changes
logicguy1 Dec 5, 2023
a6cf978
Merge branch 'Zergatul:1.20.2' into 1.20.2
logicguy1 Dec 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
164 changes: 127 additions & 37 deletions common/resources/web/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
body {
padding: 1em;
margin: 0;
}

button.faded {
opacity: 0.2;
opacity: 0.3;
}

table.main-table > thead > tr > th {
Expand All @@ -18,19 +23,35 @@ table.main-table > tbody > tr > td > button {

button {
box-sizing: border-box;
border-radius: 10px;
border-width: 4px;
border-style: solid;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: bold;
font-size: 14px;
height: 32px;
min-height: 32px;
width: 15em;
background-color: #333;
border-color: transparent;
}

:not(.main-container) .child :is(button) {
border-color: transparent;
background-color: transparent;
width: 100%;
}

button:hover:not(:disabled) {
filter: brightness(80%);
cursor: pointer;
}

button + button {
margin-left: 16px;
}

button + button + button {
width: unset !important;
min-width: 220px !important;
}

select {
display: inline-block;
box-sizing: border-box;
Expand Down Expand Up @@ -167,7 +188,7 @@ ul.add-entity-list button.edit {
gap: 8px;
}

.entity-info-classname {
.entitSy-info-classname {
display: inline-block;
}

Expand Down Expand Up @@ -258,8 +279,18 @@ input[type=number] {
font-size: 14px;
}

.search-wrapper {
position: fixed;
bottom: 1em;
left: 1em;
}

input.search {
width: 300px;
padding: 0.4em;
border: none;
outline: none;
border-radius: 0px;
}

div.module-main {
Expand Down Expand Up @@ -429,16 +460,11 @@ div.edit-block-settings {
}

fieldset {
border-width: 4px;
border-style: solid;
border-radius: 10px;
width: 1000px;
}

div.module-sections {
display: flex;
flex-direction: column;
gap: 16px;
background-color: #15151580;
width: calc(100% - 30px);
border: none;
color: #fff;
width: 1000px;
}

legend {
Expand All @@ -447,6 +473,20 @@ legend {
font-size: 14px;
display: flex;
align-items: center;

background-color: #2F81F7;
color: #fff;

width: calc(100% + 24px);
padding: 10px;
box-sizing: border-box;
transform: translateX(-12px);
}

div.module-sections {
display: flex;
flex-direction: column;
gap: 16px;
}

legend > label {
Expand Down Expand Up @@ -781,32 +821,36 @@ table.inputs-table {

@media (prefers-color-scheme: light) {
body {
background-color: #FFFFFF;
color: #000000;
background:
linear-gradient(
to bottom right,
#ffffff,
#999999
);
min-height: 100vh;
}

a, a:visited {
color: #2F81F7;
color: #9FD0FB;
text-decoration: none;
}

a:hover {
color: #2F81F7;
color: #9FD0FB;
text-decoration: underline;
}

button {
border-color:#333AA3;
background-color: #FFFFFF;
color: #000000;
color: #ddd;
}

button.active {
background-color: #C6FFBA;
color: #61a2ff;
}

button:hover:not(:disabled) {
background-color: #BBBFFF;
color: #ddd;
}

.button-highlight {
Expand All @@ -833,26 +877,27 @@ table.inputs-table {

ul.list-base > li {
background: linear-gradient(0deg, #CCCCCC, #FFFFFF 50%, #CCCCCC 100%);
color: #000;
}

ul.list-base > li + li {
border-top-color: #FFFFFF;
}

div.entity-info-interface:after {
color: #8A5F10;
color: #ddd;
}

div.entity-info-id {
color: #008000;
}

div.section-description {
color: #92711f;
color: #ffe7b8;
}

div.input-description {
color: #92711f;
color: #ddd;
}

fieldset {
Expand Down Expand Up @@ -884,12 +929,22 @@ table.inputs-table {
ul.refs .comment {
color: #277813;
}

ul.refs {
background-color: #242424;
}
}

@media (prefers-color-scheme: dark) {
body {
background-color: #3C3F41;
color: #BBBBBB;
background:
linear-gradient(
to bottom right,
#101010,
#292929
);
min-height: 100vh;
}

a, a:visited {
Expand All @@ -903,17 +958,11 @@ table.inputs-table {
}

button {
background-color: #4C5052;
border-color: #5E6060;
color: #BBBBBB;
}

button.active {
background-color: #3F523C;
}

button:hover:not(:disabled) {
background-color: #365880;
color: #2f81f7;
}

.button-highlight {
Expand Down Expand Up @@ -957,7 +1006,7 @@ table.inputs-table {
}

div.section-description {
color: #FFC66D;
color: #ffe7b8;
}

div.input-description {
Expand Down Expand Up @@ -993,4 +1042,45 @@ table.inputs-table {
ul.refs .comment {
color: #43CE21;
}
}

ul.refs {
background-color: #242424;
}
}

/* Main page styles */
.main-container {
display: flex;
width: 100%;
justify-content: space-between;
gap: 20px;
}

.main-container > div {
flex: 1;
}

.main-container .child {
flex: 1;
background-color: #15151580;
height: auto;
}

.main-container .title {
height: 2em;
line-height: 2em;
text-align: center;

background-color: #2F81F7;
color: #fff;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: bold;
}

legend .switch-label {
align-items: unset !important;
}

legend .switch-label span {
margin-bottom: 4px !important;
}
6 changes: 3 additions & 3 deletions common/resources/web/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ import { addComponent } from '/components/Loader.js'
loadModule('ElytraTunnelConfig', ['elytra', 'tunnel']);
loadModule('FreeCamConfig', ['freecam', 'camera']);
loadModule('LockInputsConfig', ['lock', 'inputs']);
loadModule('MovementHackConfig', ['movement', 'hack']);
loadModule('MovementHackConfig', ['movement', 'hack', 'anti knockback', 'speed', 'highjump']);
loadModule('ScaffoldConfig', ['scaffold']);
loadModule('AdvancedTooltipsConfig', ['advanced', 'tooltips']);
loadModule('FogConfig', ['fog']);
Expand Down Expand Up @@ -152,7 +152,7 @@ import { addComponent } from '/components/Loader.js'
loadModule('VillagerRollerConfig', ['villager', 'roller']);
loadModule('AutoHotbarConfig', ['auto', 'hotbar']);
loadModule('InvMoveConfig', ['inventory', 'move', 'keys']);
loadModule('AreaMineConfig', ['area', 'mine']);
loadModule('AreaMineConfig', ['area', 'mine', 'nuker']);
loadModule('ServerPluginsConfig', ['server', 'plugins']);
loadModule('HitboxSizeConfig', ['hitbox', 'size']);
loadModule('BedrockBreakerConfig', ['bedrock', 'breaker']);
Expand All @@ -161,4 +161,4 @@ import { addComponent } from '/components/Loader.js'
let app = Vue.createApp(args);
app.mount('#vue-app');

})();
})();
44 changes: 25 additions & 19 deletions common/resources/web/components/AdvancedTooltipsConfig.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,29 @@
<div>
<button style="width: 200px;" @click="$emit('back')">Back</button>
</div>
<fieldset style="padding-top: 16px;" v-if="config">
<legend>Advanced Tooltips</legend>
<div>
<label class="switch-label">
<input type="checkbox" class="switch"
v-model="config.beeContainer"
@change="update()">
<span>Show additional information in tooltips for Bee Hive and Bee Nest</span>
</label>
<div class="module-main">
<h2 class="module-header">Advanced Tooltips</h2>
<div class="description">
Show extra tooltip information in the inventory GUI.
</div>
<div>
<label class="switch-label">
<input type="checkbox" class="switch"
v-model="config.repairCost"
@change="update()">
<span>Repair cost. Can be useful for enchanting.</span>
</label>
</div>
</fieldset>
</div>
<fieldset style="padding-top: 16px;" v-if="config">
<legend>Configuration</legend>
<div>
<label class="switch-label">
<input type="checkbox" class="switch"
v-model="config.beeContainer"
@change="update()">
<span>Show additional information in tooltips for Bee Hive and Bee Nest</span>
</label>
</div>
<div>
<label class="switch-label">
<input type="checkbox" class="switch"
v-model="config.repairCost"
@change="update()">
<span>Repair cost. Can be useful for enchanting.</span>
</label>
</div>
</fieldset>
</div>
</div>
11 changes: 6 additions & 5 deletions common/resources/web/components/AntiRespawnResetConfig.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,19 @@
<div>
<button style="width: 200px;" @click="$emit('back')">Back</button>
</div>
<fieldset style="padding-top: 16px;" v-if="config">
<legend>Anti Respawn Reset</legend>
<div class="module-main" v-if="config">
<h2 class="module-header">Anti Respawn Reset</h2>
<div class="description">
Prevents accidental right clicks on beds/respawn anchors.
</div>
<div>

<div class="module-sections">
<label class="switch-label">
<input type="checkbox" class="switch"
v-model="config.enabled"
@change="update()">
<span>Enabled</span>
</label>
</div>
</fieldset>
</div>
</div>
</div>
Loading