vmario/doodle3d-client
0
0
Fork 0
mirror of https://github.com/Doodle3D/doodle3d-client.git synced 2024-12-04 14:04:54 +01:00
Code Issues Releases Wiki Activity

vertical shapes sidebar now auto-resizes as well

Browse Source
This commit is contained in:
Adriaan Wormgoor 2013-10-12 12:13:33 +02:00
parent 613be4e619
commit 8311fdd9c1
5 changed files with 83 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
css/styles.css
View File

@ -136,34 +136,25 @@ CENTER PANEL
#verticalShapes { #verticalShapes {
position: absolute; position: absolute;
right: -56px; right: 0;
bottom: 15px; bottom: 15px;
margin-right: -8.5%;
width: 8%;
} }
#verticalShapes .verticalshape { #verticalShapes > div {
width: 50px;
height: 50px;
border: 2px solid #333; border: 2px solid #333;
border-radius: 0px 5px 5px 0px; border-radius: 0px 5px 5px 0px;
margin-top: 4px; /*background-color: #f0f; margin-top: 4px;
*/ background-color: #fff;
cursor: pointer; cursor: pointer;
} }
#verticalShapes .verticalshape.straight { #verticalShapes > div img.verticalshape {
background: url('../img/vertical_shape_icons/straight.png') no-repeat; width: 100%;
} max-width: 50px;
height: auto;
#verticalShapes .verticalshape.diverging { vertical-align: bottom;
background: url('../img/vertical_shape_icons/diverging.png') no-repeat;
}
#verticalShapes .verticalshape.converging {
background: url('../img/vertical_shape_icons/converging.png') no-repeat;
}
#verticalShapes .verticalshape.sinus {
background: url('../img/vertical_shape_icons/sinus.png') no-repeat;
} }
.drawareacontainer { .drawareacontainer {

2
css/styles.min.css vendored
View File

File diff suppressed because one or more lines are too long

8
index.html
View File

@ -75,10 +75,10 @@
</div> </div>
<canvas id="preview_tmp"></canvas> <canvas id="preview_tmp"></canvas>
<div id="verticalShapes"> <div id="verticalShapes">
<div class="verticalshape straight"> </div> <div><img class="verticalshape straight" src="img/vertical_shape_icons/straight.png" /></div>
<div class="verticalshape diverging"> </div> <div><img class="verticalshape diverging" src="img/vertical_shape_icons/diverging.png" /></div>
<div class="verticalshape converging"> </div> <div><img class="verticalshape converging" src="img/vertical_shape_icons/converging.png" /></div>
<div class="verticalshape sinus"> </div> <div><img class="verticalshape sinus" src="img/vertical_shape_icons/sinus.png" /></div>
</div> </div>
</div> </div>
<div class="bottompanel"> <div class="bottompanel">

20
less/verticalshapes.less
View File

@ -1,20 +1,22 @@
#verticalShapes { #verticalShapes {
position:absolute; position:absolute;
right: -56px; right: 0;
bottom: 15px; bottom: 15px;
margin-right: -8.5%;
width: 8%;
.verticalshape { >div {
width: 50px;
height: 50px;
border: 2px solid #333; border: 2px solid #333;
border-radius: 0px 5px 5px 0px; border-radius: 0px 5px 5px 0px;
margin-top: 4px; margin-top: 4px;
/*background-color: #f0f;*/ background-color: #fff;
cursor: pointer; cursor: pointer;
&.straight { background: url('../img/vertical_shape_icons/straight.png') no-repeat; } img.verticalshape {
&.diverging { background: url('../img/vertical_shape_icons/diverging.png') no-repeat; } width: 100%;
&.converging { background: url('../img/vertical_shape_icons/converging.png') no-repeat; } max-width: 50px;
&.sinus { background: url('../img/vertical_shape_icons/sinus.png') no-repeat; } height: auto;
vertical-align: bottom;
}
} }
} }

93
lesstocss.sh
View File

@ -1,55 +1,72 @@
#!/bin/bash #!/bin/bash
echo 'converting LESS to CSS...' choices=0
# generate CSS from LESS
lessc less/styles.less css/styles.css if [ ! -n "$1" ]; then
echo 'no arguments passed.. this will simply convert LESS to CSS.'
echo "in case you're wondering, there's arguments you can pass:"
echo ' -m / --minify = minify css'
echo ' -p / --prefix = apply browser-specific prefixes'
echo ''
fi
if [ -n "$1" ]; then
if [ $1 = '--prefix' ] || [ $1 = '-p' ]; then
# echo 'got prefix'
choices=`expr $choices + 1`
fi
if [ $1 = '--minify' ] || [ $1 = '-m' ]; then
# echo 'got minify'
choices=`expr $choices + 2`
fi
fi
if [ -n "$2" ]; then
if [ $2 = '--prefix' ] || [ $2 = '-p' ]; then
# echo 'got prefix'
choices=`expr $choices + 1`
fi
if [ $2 = '--minify' ] || [ $2 = '-m' ]; then
# echo 'got minify'
choices=`expr $choices + 2`
fi
fi
if [ -a css/styles.min.css ]; then if [ -a css/styles.min.css ]; then
rm css/styles.min.css rm css/styles.min.css
fi fi
if [ -n "$1" ]; then # generate CSS from LESS
if [ $1 = '--prefix' ] || [ $1 = '-p' ]; then echo 'converting LESS to CSS...'
echo 'applying prefixr...' lessc less/styles.less css/styles.css
case "$choices" in
"0")
echo 'just less-to-css'
;;
"1")
echo 'applying prefixr...'
# prefixed (-s overwrites existing file) # prefixed (-s overwrites existing file)
prefixr --input ./css/styles.css -s prefixr --input ./css/styles.css -s
fi ;;
if [ $1 = '--minify' ] || [ $1 = '-m' ]; then "2")
echo 'creating minified....'
if [ ! -n "$2" ]; then lessc --yui-compress less/styles.less css/styles.min.css
echo 'creating minified....' ;;
lessc --yui-compress less/styles.less css/styles.min.css "3")
else
echo 'creating minified and prefixed...'
# copy to .min.css to create a minified version as well
cp css/styles.css css/styles.min.css
# prefixed and minified (-s overwrites existing file)
prefixr --input ./css/styles.min.css -s -c
fi
fi
fi
if [ -n "$2" ]; then
if [ $2 = '--prefix' ] || [ $2 = '-p' ]; then
echo 'applying prefixr...'
# prefixed (-s overwrites existing file)
prefixr --input ./css/styles.css -s
fi
if [ $2 = '--minify' ] || [ $2 = '-m' ]; then
echo 'creating minified and prefixed...' echo 'creating minified and prefixed...'
# prefixed (-s overwrites existing file)
prefixr --input ./css/styles.css -s
# copy to .min.css to create a minified version as well # copy to .min.css to create a minified version as well
cp css/styles.css css/styles.min.css cp css/styles.css css/styles.min.css
# prefixed and minified (-s overwrites existing file) # prefixed and minified (-s overwrites existing file)
prefixr --input ./css/styles.min.css -s -c prefixr --input ./css/styles.min.css -s -c
fi ;;
fi *)
echo 'catch-all'
;;
esac