mirror
/
pixel-editor
mirror of https://github.com/lospec/pixel-editor.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Finally placed the window 

Could be a bit better, but I suck at CSS
This commit is contained in:
unsettledgames 2021-02-17 12:57:32 +01:00
parent 598bf20d46
commit 9c2677ea6e
2 changed files with 80 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
css/pixel-editor.scss
View File

@ -1610,10 +1610,9 @@ div#pb-options {
#sp-quickstart { #sp-quickstart {
position:relative; position:relative;
width: 80%; width: 70%;
margin-top:-20px; margin-top:-20px;
margin-left:10%; margin-left:20px
left:0px;
} }
#sp-quickstart-title { #sp-quickstart-title {
@ -1654,47 +1653,56 @@ div#pb-options {
} }
} }
#sp-mode-palette { #sp-newpixel {
text-align: center; display: inline-block;
position: absolute; width:35%;
width:70%; height:64vh;
bottom:40px; padding:20px;
font-size:18px; position:relative;
font-weight: bold; background-color:$basecolor;
top:-47px;
div.button-menu { #sp-mode-palette {
border:3px solid $basetextweak; text-align: center;
border-radius:5px; position: relative;
position:relative; float:bottom;
display:inline-block; font-size:18px;
padding: 0 0 0 0; font-weight: bold;
text-align:left;
-ms-transform: translateY(38%); div.button-menu {
transform: translateY(38%); border:3px solid $basetextweak;
border-radius:5px;
div { position:relative;
border:none; display:inline-block;
padding:none; padding: 0 0 0 0;
margin:none; text-align:left;
background-color:transparent; -ms-transform: translateY(38%);
width:100px; transform: translateY(38%);
float:left;
text-align: center; div {
height:30px; border:none;
cursor:pointer; padding:none;
margin:none;
p { background-color:transparent;
-ms-transform: translateY(-50%); width:100px;
transform: translateY(-50%); float:left;
text-align: center;
height:30px;
cursor:pointer;
p {
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
}
.bm-right {
border-left:3px solid $basetextweak;
}
.sp-interface-selected {
background-color: $basetextweak;
} }
}
.bm-right {
border-left:3px solid $basetextweak;
}
.sp-interface-selected {
background-color: $basetextweak;
} }
} }
} }

54
views/pixel-editor.hbs
View File

@ -331,38 +331,44 @@
</div> </div>
</div> </div>
<div id="sp-quickstart-title"> <div id = "sp-quickstart-container">
Quickstart <div id="sp-quickstart-title">
Quickstart
</div>
<div id="sp-quickstart">
<div class="sp-template"><p>Load</p></div>
<div class="sp-template"><p><span>New</span> Gameboy</p></div>
<div class="sp-template"><p><span>New</span> C64</p></div>
<div class="sp-template"><p><span>New</span> Pico8</p></div>
<div class="sp-template"><p><span>New</span> 32x32</p></div>
<div class="sp-template"><p><span>New</span> 64x64</p></div>
<div class="sp-template"><p><span>New</span> 128x128</p></div>
<div class="sp-template"><p><span>New</span> 256x256</p></div>
</div>
</div> </div>
<div id="sp-mode-palette"> <div id="sp-newpixel">
<span>Interface mode: <h1>New Custom Pixel</h1>
<!-- Editor mode-->
<h2>Editor mode</h2>
<div id="sp-mode-palette">
<div class="button-menu"> <div class="button-menu">
<div class="bm-left"><p>Basic</p></div> <div class="bm-left"><p>Basic</p></div>
<div class="sp-interface-selected bm-right"><p>Advanced</p></div> <div class="sp-interface-selected bm-right"><p>Advanced</p></div>
</div> </div>
</span> </div>
<span>Palette: <h2>Size</h2>
<button id="palette-button" class="dropdown-button">Choose a palette...</button> <input id="size-width" value="{{#if width}}{{width}}{{else}}64{{/if}}" autocomplete="off" />{{svg "x.svg" width="16" height="16" class="dimentions-x"}}<input id="size-height" value="{{#if height}}{{height}}{{else}}64{{/if}}" autocomplete="off" />
<div id="palette-menu" class="dropdown-menu"> <h2>Palette</h2>
<button id="no-palette-button">Empty Palette</button> <button id="palette-button" class="dropdown-button">Choose a palette...</button>
<button id="load-palette-button">Load palette...</button> <div id="palette-menu" class="dropdown-menu"><button id="no-palette-button">Empty Palette</button><button id="load-palette-button">Load palette...</button></div>
</div>
</span>
</div>
<div id="sp-quickstart"> <div id="new-pixel-warning">Creating a new pixel will discard your current one.</div>
<div class="sp-template"><p>Load</p></div> <div>
<div class="sp-template"><p><span>New</span> custom</p></div> <button id="create-button" class="default">Create</button>
<div class="sp-template" onclick="newPixel()"><p><span>New</span> Gameboy</p></div> </div>
<div class="sp-template"><p><span>New</span> C64</p></div>
<div class="sp-template"><p><span>New</span> Pico8</p></div>
<div class="sp-template"><p><span>New</span> 32x32</p></div>
<div class="sp-template"><p><span>New</span> 64x64</p></div>
<div class="sp-template"><p><span>New</span> 128x128</p></div>
<div class="sp-template"><p><span>New</span> 256x256</p></div>
<div class="sp-template"><p><span>New</span> 512x512</p></div>
</div> </div>
</div> </div>
</div> </div>