From 93abf1cfcc8e752bcf9b7e9926d1455113fcb501 Mon Sep 17 00:00:00 2001 From: synth-ruiner Date: Sat, 3 Mar 2018 11:55:42 +0000 Subject: [PATCH] more responsive styling --- includes/style.css | 20 +++++-- includes/style.less | 30 ++++++++--- index.html | 9 +++- index.pug | 127 ++++++++++++++++++++++---------------------- readme.md | 2 - 5 files changed, 110 insertions(+), 78 deletions(-) diff --git a/includes/style.css b/includes/style.css index 47141f6..ada7461 100644 --- a/includes/style.css +++ b/includes/style.css @@ -58,25 +58,32 @@ table th { textarea { height: 256px; width: 256px; - margin: 0 1em; font-family: monospace; } textarea, input { text-align: left; } +.box256 { + height: 256px; + width: 256px; +} .centre { margin: 0 auto; } .croppie-container { height: auto; } +.flex-container { + background-color: #d3cbd0; + display: flex; + flex-flow: row wrap; +} .section { - width: 20vw; - height: 20vw; - display: table-cell; + margin: 0 auto; background-color: #d3cbd0; color: #594a54; + width: 256px; } #brightness { width: 256px; @@ -88,6 +95,11 @@ input { #threshold + label { margin: 0 auto; } +#palettes { + height: 256px; + width: 256px; + overflow-y: scroll; +} #preview, #room-output { margin: 0 auto; diff --git a/includes/style.less b/includes/style.less index a21e830..568874e 100644 --- a/includes/style.less +++ b/includes/style.less @@ -71,9 +71,7 @@ table { } textarea { - height: 256px; - width: 256px; - margin: 0 1em; + .box256; font-family: monospace; } @@ -82,6 +80,11 @@ textarea, input { text-align: left; } +.box256 { + height: 256px; + width: 256px; +} + .centre { margin: 0 auto; } @@ -90,14 +93,21 @@ textarea, input { height: auto; } +.flex-container { + background-color: @light; + display: flex; + flex-flow: row wrap; +} + // make this just for desktop view? // put sections in a single column on mobile/etc? .section { - width: 20vw; - height: 20vw; - display: table-cell; + .centre; + background-color: @light; color: @dark; + width: 256px; + //height: 512px; } #brightness { @@ -116,6 +126,12 @@ textarea, input { // todo make this match the croppie slider or vice versa } +#palettes { + .box256; + + overflow-y: scroll; +} + #preview, #room-output { .centre; @@ -124,4 +140,4 @@ textarea, input { #save { margin-top: 0; -} \ No newline at end of file +} diff --git a/index.html b/index.html index 6515a4f..cc11a0b 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,9 @@ -

image-to-bitsy

convert any image to a bitsy room

about | please contact me if you have any issues: twitter, email

game data

paste your game data here

(maybe make a backup first)

image

palette

preview





output

\ No newline at end of file +42

paste or upload your game data (or html) here

(maybe make a backup first)

image

palette

preview





output

\ No newline at end of file diff --git a/index.pug b/index.pug index 34b2cdf..c2b3e24 100644 --- a/index.pug +++ b/index.pug @@ -15,81 +15,82 @@ html link(rel="stylesheet" type="text/css" href="includes/style.css") script(src="includes/script.js") body - h1 image-to-bitsy - p - | convert any image to a - a(href="https://ledoux.itch.io/bitsy") bitsy - | room - p - a(href="https://github.com/synth-ruiner/bitsy-image-to-room") about - | | please contact me if you have any issues: - a(href="https://twitter.com/synth_ruiner") twitter - | , - a(href="mailto:max@tinybird.info") email + header + h1 image-to-bitsy + p convert any image to a #[a(href="https://ledoux.itch.io/bitsy") bitsy] room + p. + #[a(href="https://github.com/synth-ruiner/bitsy-image-to-room") about] + | + please contact me if you have any issues: + #[a(href="https://twitter.com/synth_ruiner") twitter], + #[a(href="mailto:max@tinybird.info") email] - #game-data.section - h2 game data + .flex-container + #game-data.section + h2 game data - textarea#bitsy-data(placeholder="Bitsy data or html") - include includes/default.bitsy + textarea#bitsy-data(placeholder="Bitsy data or html") + include includes/default.bitsy - p paste your game data here - p (maybe make a backup first) + p + input.game-data(type="file") + p paste or upload your game data (or html) here + p (maybe make a backup first) - #image.section - h2 image + #image.section + h2 image - #croppie + #croppie - input#imageUpload(type="file" accepts="image/*") + input#imageUpload(type="file" accepts="image/*") - #palette.section - h2 palette + #palette.section + h2 palette - form#palettes - table - tbody + form#palettes + table + tbody - #crop.section - h2 preview + #crop.section + h2 preview - canvas#preview(width=128, height=128) + canvas#preview(width=128, height=128) - input#brightness(type="range" min=-255 max=255 value=0) + input#brightness(type="range" min=-255 max=255 value=0) - label(for="brightness") brightness - - br - br - - label#never never - input#threshold(type="range" min=0 max=64 value=64) - label#always always - br - label(for="threshold") create new tiles - br - - //- to do - input#dithering(type="checkbox") - label(for="dithering") dithering - - //- to do - input#smoothing(type="checkbox") - label(for="smoothing") smoothing - - #output.section - h2 output - - canvas#room-output(width=128, height=128) - - input#roomName(type="text", placeholder="room name") - - button#save write to game data - - //- to do - - //-label favour broad strokes | favour details + label(for="brightness") brightness + br br - //-button Download \ No newline at end of file + label#never never + input#threshold(type="range" min=0 max=64 value=64) + label#always always + br + label(for="threshold") create new tiles + br + + //- to do + input#dithering(type="checkbox") + label(for="dithering") dithering + + //- to do + input#smoothing(type="checkbox") + label(for="smoothing") smoothing + + #output.section + h2 output + + canvas#room-output(width=128, height=128) + + input#roomName(type="text", placeholder="room name") + + button#save write to game data + + //- to do + + //-label favour broad strokes | favour details + + br + + //-button Download \ No newline at end of file diff --git a/readme.md b/readme.md index 9233d91..fd128f6 100644 --- a/readme.md +++ b/readme.md @@ -50,8 +50,6 @@ if (src.match(/^(file|https)?:\/\/|^\/\//)) { * select all on clicking game data entry field * allow user to save output as image, or tweet it :) * *user can currently right-click -> Save As but the 128x128 size is not great* -* re-style the damn thing - * inc. mobile styles * animate animated tiles * profile script performance and optimise where most needed * make brightness slider trigger redraw every so often while being dragged, instead of waiting until drag stop