vmario/doodle3d-client
0
0
Fork 0
mirror of https://github.com/Doodle3D/doodle3d-client.git synced 2024-12-03 13:34:56 +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 {
position: absolute;
right: -56px;
right: 0;
bottom: 15px;
margin-right: -8.5%;
width: 8%;
}
#verticalShapes .verticalshape {
width: 50px;
height: 50px;
#verticalShapes > div {
border: 2px solid #333;
border-radius: 0px 5px 5px 0px;
margin-top: 4px; /*background-color: #f0f;
*/
cursor: pointer;
margin-top: 4px;
background-color: #fff;
cursor: pointer;
}
#verticalShapes .verticalshape.straight {
background: url('../img/vertical_shape_icons/straight.png') no-repeat;
}
#verticalShapes .verticalshape.diverging {
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;
#verticalShapes > div img.verticalshape {
width: 100%;
max-width: 50px;
height: auto;
vertical-align: bottom;
}
.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>
<canvas id="preview_tmp"></canvas>
<div id="verticalShapes">
<div class="verticalshape straight"> </div>
<div class="verticalshape diverging"> </div>
<div class="verticalshape converging"> </div>
<div class="verticalshape sinus"> </div>
<div><img class="verticalshape straight" src="img/vertical_shape_icons/straight.png" /></div>
<div><img class="verticalshape diverging" src="img/vertical_shape_icons/diverging.png" /></div>
<div><img class="verticalshape converging" src="img/vertical_shape_icons/converging.png" /></div>
<div><img class="verticalshape sinus" src="img/vertical_shape_icons/sinus.png" /></div>
</div>
</div>
<div class="bottompanel">

20
less/verticalshapes.less
View File

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

93
lesstocss.sh
View File

@ -1,55 +1,72 @@
#!/bin/bash
echo 'converting LESS to CSS...'
# generate CSS from LESS
lessc less/styles.less css/styles.css
choices=0
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
rm css/styles.min.css
fi
if [ -n "$1" ]; then
if [ $1 = '--prefix' ] || [ $1 = '-p' ]; then
echo 'applying prefixr...'
# generate CSS from LESS
echo 'converting LESS to CSS...'
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)
prefixr --input ./css/styles.css -s
fi
if [ $1 = '--minify' ] || [ $1 = '-m' ]; then
if [ ! -n "$2" ]; then
echo 'creating minified....'
lessc --yui-compress less/styles.less css/styles.min.css
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
;;
"2")
echo 'creating minified....'
lessc --yui-compress less/styles.less css/styles.min.css
;;
"3")
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
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
;;
*)
echo 'catch-all'
;;
esac