Skip to content

Commit

Permalink
Rendering and CSS improvements; Style updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@Maingron
Maingron committed Sep 12, 2021
1 parent 630f755 commit 09d2e42
Show file tree
Hide file tree
Showing 4 changed files with 149 additions and 119 deletions.
2 changes: 1 addition & 1 deletion css/style.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

227 changes: 123 additions & 104 deletions css/style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,13 @@
$editbuttonSize: 20px;
$editbuttonSize: 24px;

* {
box-sizing: border-box;
}

html {
background: #000;
}

body {
font-size: 1.4rem;
margin: 0;
Expand All @@ -12,13 +16,41 @@ body {
padding: 0;
overflow: hidden;
p,b,a,span,button:not(.editbutton) {
color:red;
color:#ffff00aa;
}

.designer {
.designer { // Don't display the designer when not in editing mode
display: none;
}

main {
height: 100vh;
width: 100%;
z-index: 20;
margin: 0;
padding: 0;
display: inline-block;
position: relative;
overflow: hidden;
}

.block {
position: absolute;
display: inline;
padding: .2rem;
user-select: none;

div {
display: inline-block;
position: relative;
}

}
&,* {
font-family: -apple-system, system-ui, 'Helvetica Neue', 'Helvetica', 'Segoe UI', 'Segoe UI Variable', 'Roboto', 'Tahoma', 'Ubuntu', sans-serif;
}


.edittools {
position: fixed;
z-index: 999;
Expand All @@ -28,134 +60,121 @@ body {
height: auto;
width: auto;

.addblock {
display: none;
}
&,button {
font-size: 1.5rem;
font-size: 1.75rem;
line-height: 1;
padding: 0;
}

button {
border: 0;
background: transparent;
height: 3rem;
width: 3rem;
&:hover {
background: rgba(255,255,255,.4);
background: rgba(255,255,255,.2);
color: #ff0;
}
}
}

main {
height: 100vh;
width: 100%;
z-index: 20;
margin: 0;
padding: 0;
display: inline-block;
}
.block {
position: absolute;
display: inline-block;
padding: .2rem;
div {
display: inline-block;
position: relative;
.addblock {
display: none;
}
}
&,* {
font-family: -apple-system, system-ui, 'Helvetica Neue', 'Helvetica', 'Segoe UI', 'Segoe UI Variable', 'Roboto', 'Tahoma', 'Ubuntu', sans-serif;
}
}

body.editing { // When in editing mode
min-height: calc(100vh + 80px);
overflow: auto;

code {
background-color: orange;
}

select {
max-width: 100%;
width: 100%;
overflow: hidden;
}

#designer {
display: inline-block;
position: sticky;
height: auto;
width: 100%;
background: rgba(255,255,255,.5);
bottom: 0;
padding: 1.2rem;
box-sizing: border-box;
border: 0;
margin: 0;
overflow: hidden;
}

.block {
user-select: none;
&>div {
.editdiv {
display: none;
}


// Editing:

body {
&.editing {
min-height: calc(100vh + 80px);
overflow: auto;

code {
background-color: orange;
}

select {
max-width: 100%;
width: 100%;
overflow: hidden;
}
.editdiv {
position: absolute;
height: calc(100% + #{$editbuttonSize} / 2);

#designer {
display: block;
z-index: 21;
position: sticky;
height: auto;
width: 100%;
top: -($editbuttonSize / 2);
background-color: rgba(255,0,0,.2);
outline: 1px solid red;
border-top: ($editbuttonSize / 2) solid blue;
background: rgba(255,255,255,.5);
bottom: 0;
padding: 1.2rem;
box-sizing: border-box;
>button {
padding:0;
position: absolute;
display: inline-block;
top:-($editbuttonSize / 2);
height: $editbuttonSize;
width: $editbuttonSize;
border:0;
&,* {
font-size: $editbuttonSize;
text-align: center;
line-height: 1;
}
&.dragger {
cursor: move;
left: 0;
background: lime;
}
&.resizer {
border: 0;
margin: 0;
overflow: hidden;
}

.block {
&>div {
.editdiv {
display: none;
// &.smaller {
// left: 1 * $editbuttonSize;
// background: orange;
// }
// &.bigger {
// left: 2 * $editbuttonSize;
// background: orangered;
// }
}
}

&.designer {
left: 1 * $editbuttonSize;
background: purple;
}

&.remover {
left: 2 * $editbuttonSize;
background: red;
.editdiv {
position: absolute;
height: calc(100%);
width: 100%;
background-color: rgba(255,0,0,.2);
outline: 1px solid #ff0;
box-sizing: border-box;
>button {
padding: 0;
position: absolute;
display: inline-block;
height: $editbuttonSize;
width: $editbuttonSize;
border:0;
z-index: 9;
&,* {
font-size: $editbuttonSize;
text-align: center;
line-height: 1;
}
&.dragger {
cursor: move;
left: 0;
background: lime;
}
&.resizer {
display: none;
}

&.designer {
left: 1 * $editbuttonSize;
background: purple;
}

&.remover {
left: 2 * $editbuttonSize;
background: red;
}
}
}

}
}

.edittools {
.addblock {
display: inline-block;
.edittools {
.addblock {
display: inline-block;
}
}
}
}
}
11 changes: 6 additions & 5 deletions js/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,16 @@ if(config.edit == true) { // Only load edit tools if we want to edit

document.body.classList.add("editing");

window.setTimeout(function() { // Make sure we don't end up with this pasted everywhere by waiting until everything else is rendered
window.setTimeout(function() { // Make sure we don't end up with this pasted everywhere by waiting a duration of 0
for(let myTemplate of templates) {
myTemplate.innerHTML = document.getElementById("block-edit").innerHTML + myTemplate.innerHTML;
}
}, config.ticktime);
}, 0);

function drag(which) {
if(mouseClick == true) {
which.style.left = mousePos[0] + "px";
which.style.top = mousePos[1] + "px";
which.style.left = mousePos[0] - 12 + "px"; // 12 is half the size of one edit button
which.style.top = mousePos[1] - 12 + "px"; // 12 is half the size of one edit button
// which.style.top = mousePos[1] - (which.offsetHeight / 2) + "px";

if(which.id) {
Expand Down Expand Up @@ -77,6 +77,8 @@ if(config.edit == true) { // Only load edit tools if we want to edit
console.log(which);
designerApplyTo = which.id;

console.log(which);

// document.getElementById("designer").style.left = config.clock1[designerApplyTo].position[0];
// document.getElementById("designer").style.top = -60 + parseInt(config.clock1[designerApplyTo].position[1]) + "px";
}
Expand All @@ -90,7 +92,6 @@ if(config.edit == true) { // Only load edit tools if we want to edit
spawnBlock(config.clock1[designerApplyTo]); // Respawn

saveConfig();

}


Expand Down
28 changes: 19 additions & 9 deletions js/scripts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,26 +61,36 @@ function spawnBlock(which) {
clock.appendChild(newElement); // Append block to clock frame
}




function handleString(whichString) {
for(var j = 0; j < whichString.split("|").length; j++) {
whichString = whichString.replace("|" + whichString.split("|")[1] + "|", tick(whichString.split("|")[1])); // Replace variables with actual value
}
return whichString;
}

// Ticking

window.setInterval(function() {
generalTick()
}, config.ticktime)

function generalTick() { // Ticks everything; Similar to tick() functions in other programs
for(let myElement of document.getElementsByClassName("block")) { // Tick the blocks
var myTempInnerHTML = document.getElementById(myElement.getAttribute("template")).innerHTML;
for(var j = 0; j < myElement.getAttribute("variables"); j++) {
myTempInnerHTML = myTempInnerHTML.replace("|" + myTempInnerHTML.split("|")[1] + "|", tick(myTempInnerHTML.split("|")[1])); // Replace variables with actual value
}

myElement.innerHTML = myTempInnerHTML;
}

time = new Date();
}, config.ticktime)
}

generalTick(); // Initial tick so we don't see the template strings when loading the page


function handleString(whichString) {
for(var j = 0; j < whichString.split("|").length; j++) {
whichString = whichString.replace("|" + whichString.split("|")[1] + "|", tick(whichString.split("|")[1])); // Replace variables with actual value
}
return whichString;
}

function tick(which) { // Render template values
var result = "";
Expand Down

0 comments on commit 09d2e42

Please sign in to comment.