mirror/pixel-editor
1
0
Fork 0
mirror of https://github.com/lospec/pixel-editor.git synced 2023-08-10 21:12:51 +03:00
Code Issues Projects Releases Wiki Activity

Finally placed the window

Browse Source 
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

20
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,11 +1653,19 @@ div#pb-options {
} }
} }
#sp-newpixel {
display: inline-block;
width:35%;
height:64vh;
padding:20px;
position:relative;
background-color:$basecolor;
top:-47px;
#sp-mode-palette { #sp-mode-palette {
text-align: center; text-align: center;
position: absolute; position: relative;
width:70%; float:bottom;
bottom:40px;
font-size:18px; font-size:18px;
font-weight: bold; font-weight: bold;
@ -1698,6 +1705,7 @@ div#pb-options {
} }
} }
} }
}
#splash-news { #splash-news {
position:relative; position:relative;

46
views/pixel-editor.hbs
View File

@ -331,38 +331,44 @@
</div> </div>
</div> </div>
<div id = "sp-quickstart-container">
<div id="sp-quickstart-title"> <div id="sp-quickstart-title">
Quickstart Quickstart
</div> </div>
<div id="sp-mode-palette">
<span>Interface mode:
<div class="button-menu">
<div class="bm-left"><p>Basic</p></div>
<div class="sp-interface-selected bm-right"><p>Advanced</p></div>
</div>
</span>
<span>Palette:
<button id="palette-button" class="dropdown-button">Choose a 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>
</span>
</div>
<div id="sp-quickstart"> <div id="sp-quickstart">
<div class="sp-template"><p>Load</p></div> <div class="sp-template"><p>Load</p></div>
<div class="sp-template"><p><span>New</span> custom</p></div> <div class="sp-template"><p><span>New</span> Gameboy</p></div>
<div class="sp-template" onclick="newPixel()"><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> C64</p></div>
<div class="sp-template"><p><span>New</span> Pico8</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> 32x32</p></div>
<div class="sp-template"><p><span>New</span> 64x64</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> 128x128</p></div>
<div class="sp-template"><p><span>New</span> 256x256</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 id="sp-newpixel">
<h1>New Custom Pixel</h1>
<!-- Editor mode-->
<h2>Editor mode</h2>
<div id="sp-mode-palette">
<div class="button-menu">
<div class="bm-left"><p>Basic</p></div>
<div class="sp-interface-selected bm-right"><p>Advanced</p></div>
</div>
</div>
<h2>Size</h2>
<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" />
<h2>Palette</h2>
<button id="palette-button" class="dropdown-button">Choose a 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 id="new-pixel-warning">Creating a new pixel will discard your current one.</div>
<div>
<button id="create-button" class="default">Create</button>
</div>
</div> </div>
</div> </div>
</div> </div>