From 165a83e28357608b36daab0986a00ca7d9735b06 Mon Sep 17 00:00:00 2001 From: ali asaria Date: Mon, 1 Sep 2014 18:04:36 -0400 Subject: [PATCH] fix chrome bug with sticker dragging --- client/css/style.css | 120 +++++++++++------- client/images/stickers/sticker-deletestar.png | Bin 305 -> 3007 bytes views/index.jade | 15 +-- views/layout.jade | 2 +- 4 files changed, 79 insertions(+), 58 deletions(-) diff --git a/client/css/style.css b/client/css/style.css index bc4d885..b15e2f2 100644 --- a/client/css/style.css +++ b/client/css/style.css @@ -7,32 +7,32 @@ body { color: #333; background-color: #ddd; xbackground-image: -webkit-gradient(radial, 265 118, 456, 147 0, 29, from(#DDDDDD), to(#f3f3f3)); - + padding-left: 10px; - + xheight: 1400px; xwidth: 2000px; - - - + + + user-select: none; -o-user-select:none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; - + background-image: url('/css/bg/concrete_wall_2_2.png'); - + } #board { position: relative; background-color: #dcd5d1; - + height: 100%; xwidth: 980px; xborder: solid silver 8px; - + background-image: -webkit-gradient( linear, left top, @@ -40,9 +40,9 @@ body { color-stop(0.49, rgb(214,210,206)), color-stop(0.84, rgb(196,191,182)) ); - + xbackground: -moz-linear-gradient(top, rgb(214,210,206), #000); - + -webkit-box-shadow:inset 1px 1px 3px #999; -moz-box-shadow:inset 1px 1px 3px #999; box-shadow:inset 1px 1px 3px #999; @@ -53,13 +53,13 @@ body { display: block; width: 996px; height: 466px; - + xmargin-left: auto; xmargin-right: auto; - + -webkit-box-shadow: 1px 3px 2px #aaa; -moz-box-shadow: 1px 3px 2px #999; - + x-webkit-transform:rotate(0.3deg); /*"is that a little off-level? i feel like it is off-level"*/ } @@ -88,7 +88,7 @@ width: 16px; height: 16px; } .card-icon-hover { - opacity: .9; + opacity: .9; } .card-edit-form, .card-edit-form input, .card-edit-form textarea { @@ -108,7 +108,7 @@ width: 16px; height: 16px; width: 100%; color: #330066; color: #666; - + } @@ -140,7 +140,7 @@ width: 16px; height: 16px; vertical-align: top; height: 100%; background-image: none; - + } h1, h1 a { @@ -157,12 +157,12 @@ h1, h1 a { text-decoration: none; } -h2 { +h2 { font-family: 'Rock Salt', "Arial Rounded MT Bold", arial, serif; color: #5c9db4; font-size: 18px; } - + .bottom-icon { padding: 5px; opacity: .4; @@ -223,7 +223,7 @@ h2 { letter-spacing: 4px; font-family: "Helvetica Neue Light", "HelveticaNeue-Light", 'Helvetica Neue', arial, serif; font-size: 13px; - + } .names p { @@ -241,45 +241,45 @@ h2 { } .names input { - padding: 0; //2px 8px 2px 2px; + padding: 0; //2px 8px 2px 2px; border: none; - outline: 0; - width: 100px; - background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF)); + outline: 0; + width: 100px; + background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF)); background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px); - background: none; + background: none; border-radius: 10px; color: #666; text-align: right; font-family: "Helvetica Neue Light", "HelveticaNeue-Light", 'Helvetica Neue', arial, serif; - font-size: 13px; + font-size: 13px; letter-spacing: 4px; margin:0; - + position: relative; } .names input:hover { - padding: 2px 2px 2px 2px; + padding: 2px 2px 2px 2px; xborder: solid 1px #E5E5E5; - outline: 0; - width: 100px; - background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF)); + outline: 0; + width: 100px; + background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF)); background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px); -xopacity: .5; +xopacity: .5; background: none; - box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; - -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; - -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; + box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; + -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; + -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; border-radius: 10px; color: #aaa; text-align: right; font-family: "Helvetica Neue Light", "HelveticaNeue-Light", 'Helvetica Neue', arial, serif; - font-size: 13px; + font-size: 13px; letter-spacing: 4px; margin:0; - + } .names .focused { @@ -298,10 +298,13 @@ xopacity: .5; } .sticker { - padding-top: 3px; - padding-left: 2px; + xpadding-top: 3px; + xpadding-left: 2px; xz-index:10; - display: inline; + display: inline-block; + width: 11px; + height: 11px; + background-repeat: no-repeat; } .stickers { @@ -316,6 +319,34 @@ xopacity: .5; padding: 0; margin 0; } +#sticker-red { + background-image: url('/images/stickers/sticker-red.png'); +} +#sticker-blue { + background-image: url('/images/stickers/sticker-blue.png'); +} +#sticker-yellow { + background-image: url('/images/stickers/sticker-yellow.png'); +} +#sticker-green { + background-image: url('/images/stickers/sticker-green.png'); +} +#sticker-pink { + background-image: url('/images/stickers/sticker-pink.png'); +} +#sticker-lightblue { + background-image: url('/images/stickers/sticker-lightblue.png'); +} +#sticker-orange { + background-image: url('/images/stickers/sticker-orange.png'); +} +#sticker-purple { + background-image: url('/images/stickers/sticker-purple.png'); +} +#nosticker { + background-image: url('/images/stickers/sticker-deletestar.png'); +} + #sticker-nostar { position: relative; top: 3px; @@ -467,11 +498,11 @@ input:hover { font-family: 'Covered By Your Grace',"Arial Rounded MT Bold", arial, serif; color: #19ba98; color: black; - + xborder: solid 1px; - - - + + + } .notice-bar { @@ -551,4 +582,3 @@ input:hover { .ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;} .ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; } - diff --git a/client/images/stickers/sticker-deletestar.png b/client/images/stickers/sticker-deletestar.png index 1c66baa06277b911c296df92ae3eb00efe5d4742..1fa1b375ed44a540954365a7a2cccea524002ac6 100644 GIT binary patch literal 3007 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 DmDF@P diff --git a/views/index.jade b/views/index.jade index 1f95b59..cca3e77 100644 --- a/views/index.jade +++ b/views/index.jade @@ -14,8 +14,8 @@ block body div#board-doodles image#marker(src='/images/marker.png') image#eraser(src='/images/eraser.png') - - + + table#board-table.board-table tr td#icon-col(width='1%') @@ -30,25 +30,16 @@ block body div.stickers div.sticker#sticker-red - image(src="/images/stickers/sticker-red.png") div.sticker#sticker-blue - image(src="/images/stickers/sticker-blue.png") div.sticker#sticker-yellow - image(src="/images/stickers/sticker-yellow.png") div.sticker#sticker-green - image(src="/images/stickers/sticker-green.png") br div.sticker#sticker-pink - image(src="/images/stickers/sticker-pink.png") div.sticker#sticker-lightblue - image(src="/images/stickers/sticker-lightblue.png") div.sticker#sticker-orange - image(src="/images/stickers/sticker-orange.png") div.sticker#sticker-purple - image(src="/images/stickers/sticker-purple.png") br div.sticker#nosticker - image(src="/images/stickers/sticker-deletestar.png") //br //div.sticker#sticker-gold // image(src="/images/stickers/sticker-gold.png") @@ -72,4 +63,4 @@ block body //
this will be the backlog that only appears on drag or perhaps not at all
- \ No newline at end of file + diff --git a/views/layout.jade b/views/layout.jade index 9bd56ba..447e188 100644 --- a/views/layout.jade +++ b/views/layout.jade @@ -6,7 +6,7 @@ html(lang="en") - +