Skip to content
Permalink
Browse files

* starting refactoring of bit scss towards BEM format

* bit:hover- experimenting with more minimal hover state to fit design, with diff color gradients for bit types
* bit:hover:text- only show resize during hover
  • Loading branch information...
Steven Dale
Steven Dale committed Aug 10, 2015
1 parent 08acf0e commit 280870750b0a7af7ef7c78f2418fde3081f5a462
@@ -63,7 +63,7 @@


<!--
<p class="ui-widget-header"></p>-->
<p class="bit__drag-handle"></p>-->

</div>

@@ -10,6 +10,10 @@ makeBitDraggable = function makeBitDraggable($bitElement, $uiWidgetHeader){
throwProps:false,
zIndexBoost:false,

onPress: function(event){
timeline.to($bitElement.find('.bit__drag-handle'), 0.1, { scale: 1.5, opacity: "0.1", ease: Expo.easeOut });
},

onDragStart:function(event){

// var x = this.endX;
@@ -23,11 +27,14 @@ makeBitDraggable = function makeBitDraggable($bitElement, $uiWidgetHeader){

// TODO: ensure this happens only when in Draggable and mouse is held down
// and not on regular taps/clicks of bit
timeline.to($bitElement, 0.20, {
scale: 1.05,
boxShadow: "rgba(0, 0, 0, 0.2) 0 16px 32px 0",
ease: Expo.easeOut
});
timeline
.to($bitElement, 0.20, {
scale: 1.05,
boxShadow: "rgba(0, 0, 0, 0.2) 0 16px 32px 0",
ease: Expo.easeOut
});
// .to($bitElement.find('.bit__drag-handle'), 0.1, { scale: 1.5, opacity: "0.1", ease: Expo.easeOut })

},

onDragEnd:function( event ) {
@@ -57,7 +64,9 @@ makeBitDraggable = function makeBitDraggable($bitElement, $uiWidgetHeader){
// a random tone, in the mid-range of the scale
Parallels.Audio.player.play('tone--aalto-dubtechno-mod-' + _.random(4, 8));

timeline.to($bitElement, 0.1, { scale: 1, boxShadow: "0", ease: Expo.easeOut });
timeline
.to($bitElement, 0.1, { scale: 1, boxShadow: "0", ease: Expo.easeOut })
.to($bitElement.find('.bit__drag-handle'), 0.1, { scale: 1, opacity: "1", ease: Expo.easeOut })
}
});

@@ -11,8 +11,9 @@ BitEvents = {

// SD: OQ/TODO: this fails on bit:delete, how can we reuse this function?
var $bit = $(template.firstNode);
$bit.find('.editbit').focus();
$bit.find('.bit__editing').focus();
$bit.addClass('hovering');
$bit.find('.bit__resize-triangle').show();
}
},

@@ -21,8 +22,9 @@ BitEvents = {
Session.set('bitHoveringId', null);
var $bit = $(template.firstNode);
$bit.removeClass('hovering');
$bit.find('.bit__resize-triangle').hide();

var $editbitElement = $(template.find('.editbit'));
var $editbitElement = $(template.find('.bit__editing'));
if (this.content != $editbitElement.html()) {
Meteor.call('changeState', {
command: 'updateBitContent',
@@ -28,6 +28,6 @@ Template.bit.helpers({
// https://github.com/meteor/meteor/issues/3635
// possible alternative workaround: https://github.com/eluck/contenteditable/commit/b406d83863341c376f21f7de5056fdc8d4100877
editor: function () {
return '<div class="editbit" contenteditable="true">' + this.content + '</div>';
return '<div class="bit__editing" contenteditable="true">' + this.content + '</div>';
}
});
@@ -4,19 +4,17 @@ Template.bit.onRendered(function (){
var bit = template.data;
var bitDatabaseId = bit._id;
var $bitElement = $(template.firstNode);
var $content = $bitElement.find('.content');
var $uiWidgetHeader = $(template.find('.ui-widget-header'));
var $content = $bitElement.find('.bit__content');
var $dragHandle = $(template.find('.bit__drag-handle'));

$content.css("height", bit.height);
$content.css("width", bit.width);

$content.resizable({
handles: {
se: '.ui-resizable-se',
e: '.ui-resizable-e',
s: '.ui-resizable-s'
},
handles: { se: '.ui-resizable-se' },

stop: function (event, $resizable) {
var $editbitElement = $(template.find('.editbit'));
var $editbitElement = $(template.find('.bit__editing'));
Meteor.call('changeState', {
command: 'updateBitContent',
data: {
@@ -30,7 +28,7 @@ Template.bit.onRendered(function (){
}
});

makeBitDraggable($bitElement, $uiWidgetHeader);
makeBitDraggable($bitElement, $dragHandle);


// When a Bit position is updated during a concurrent session (by someone else)
@@ -55,7 +53,7 @@ Template.bit.onRendered(function (){
/*
AB: OQ: would show a friendly error message but the next line we remove the bit
so it isn't worth it. Should we figure out how to keep the Bit even if upload fails?
$bitElement.find('.content')[0].classList.add('complete', 'error');
$bitElement.find('.bit__content')[0].classList.add('complete', 'error');
*/
computation.stop();
Meteor.call('changeState', {
@@ -1,66 +1,134 @@
// ******************** ALL BITS *************

.bit {
display: none; // hide bits by default when map loads: animation functions display them
position: absolute;
-webkit-font-smoothing: antialiased;
outline: none;
}

// ************** base ************
.ui-widget-header {
display: none;
position: absolute;
}
.bit__content{
position: relative;
z-index: 2; // should be above the hovered .bit__drag-handle
}

.editbit {
outline: none;
border: 0;
width: 100%;
height: 100%;
padding: 1em;
}

// ******** subclasses (type image, text) ************

.ui-resizable-se {
bottom: 5px;
right: 2px;
font-size: inherit;
}

.content, {
position: relative;
z-index: 10;
background-color: white;
}
// ******************** TEXT BITS *************
.bit.text .bit__content {
background: white;
padding: 1.25em;
// z-index: 10;
}

&.image img {
width: 200px;
}
.bit__drag-handle {
display: none;
position: absolute;
margin: 1.25em -1.25em;
z-index: 1;
}

.bit.image.hovering .bit__drag-handle {
height: 70vh;
top: -20vh;

// adapted from uigradients.com/Influenza
background: -webkit-linear-gradient(0deg, #DE6262 10%, #FFB88C 90%); /* Chrome 10+, Saf5.1+ */
background: -moz-linear-gradient(0deg, #DE6262 10%, #FFB88C 90%); /* FF3.6+ */
background: -ms-linear-gradient(0deg, #DE6262 10%, #FFB88C 90%); /* IE10 */
background: -o-linear-gradient(0deg, #DE6262 10%, #FFB88C 90%); /* Opera 11.10+ */
background: linear-gradient(0deg, #DE6262 10%, #FFB88C 90%); /* W3C */
}

.bit.text.hovering .bit__drag-handle{

height: 90vh;
top: -25vh;


// http://uigradients.com/#Earthly
background: -webkit-linear-gradient(180deg, #85D2B5 10%, #DBD5A4 90%); /* Chrome 10+, Saf5.1+ */
background: -moz-linear-gradient(180deg, #85D2B5 10%, #DBD5A4 90%); /* FF3.6+ */
background: -ms-linear-gradient(180deg, #85D2B5 10%, #DBD5A4 90%); /* IE10 */
background: -o-linear-gradient(180deg, #85D2B5 10%, #DBD5A4 90%); /* Opera 11.10+ */
background: linear-gradient(180deg, #85D2B5 10%, #DBD5A4 90%); /* W3C */

}



.bit.sketch.hovering .bit__drag-handle{
height: 100vh;
top: -25vh;

left: 80px;

// adapted from uigradients.com/Reef
background: -webkit-linear-gradient(180deg, #00D2FF 10%, #5D90E8 90%);
background: -moz-linear-gradient(180deg, #00D2FF 10%, #5D90E8 90%);
background: -ms-linear-gradient(180deg, #00D2FF 10%, #5D90E8 90%);
background: -o-linear-gradient(180deg, #00D2FF 10%, #5D90E8 90%);
background: linear-gradient(180deg, #00D2FF 10%, #5D90E8 90%);

// adapted from uigradients.com/Reef
// background: -webkit-linear-gradient(0deg, #00D2FF 10%, #6C71F3 90%); /* Chrome 10+, Saf5.1+ */
// background: -moz-linear-gradient(0deg, #00D2FF 10%, #6C71F3 90%); /* FF3.6+ */
// background: -ms-linear-gradient(0deg, #00D2FF 10%, #6C71F3 90%); /* IE10 */
// background: -o-linear-gradient(0deg, #00D2FF 10%, #6C71F3 90%); /* Opera 11.10+ */
// background: linear-gradient(0deg, #00D2FF 10%, #6C71F3 90%); /* W3C */

// ************ states ***********
&.hovering .ui-widget-header {
// adapted from uigradients.com/Influenza
// background: -webkit-linear-gradient(0deg, #C04848 10%, #480048 90%); /* Chrome 10+, Saf5.1+ */
// background: -moz-linear-gradient(0deg, #C04848 10%, #480048 90%); /* FF3.6+ */
// background: -ms-linear-gradient(0deg, #C04848 10%, #480048 90%); /* IE10 */
// background: -o-linear-gradient(0deg, #C04848 10%, #480048 90%); /* Opera 11.10+ */
// background: linear-gradient(0deg, #C04848 10%, #480048 90%); /* W3C */
}


.hovering .bit__drag-handle {
display: block;
top: -10px;
height: -moz-calc(100% + 60px);
height: -webkit-calc(100% + 60px);
height: calc(100% + 60px);
width: -moz-calc(100% + 20px);
width: -webkit-calc(100% + 20px);
width: calc(100% + 20px);
width: 100%;
background-color: #C6CED8;
left: -10px;
backface-visibility: hidden;
cursor: move;
box-shadow: 0 0 5px #535F6F;
-moz-box-shadow: 0 0 5px #535F6F;
-webkit-box-shadow: 0 0 5px #535F6F;
}

&.create-parallel--origin { border: 0.4em solid yellow; }


// ************** text bits

.bit__resize-triangle{
position: absolute;

bottom: 0;
right: 0;
height: 0;
width: 0;

margin: -15px;
border-top: 20px solid transparent;
border-right:20px solid #3C9FFF;
}


.bit__editing {
outline: none;
border: 0;
width: 100%;
height: 100%;
}



// ******************** IMAGE BITS *************

.bit.image img {
width: 200px;
}


// file upload animation
@mixin keyframes($name) {
@-webkit-keyframes #{$name} {
@@ -166,6 +234,7 @@
:not(.processing) .progress {
@include prefix((animation: pulse 6s ease infinite));
}

.progress {
position: absolute;
overflow: hidden;
@@ -235,6 +304,13 @@
}
}




// ******************** SKETCH BITS *************



/*
Binds the HTML Dom element to the JS drawing engine via ploma.js.
Doesn't need to be seen by person,
@@ -248,21 +324,3 @@
height:0;
}

// via https://sunpig.com/martin/2010/02/10/marching-ants-in-css/
// https://sunpig.com/martin/code/2010/marchingants/marchingants.html
// .marching-ants-border {
// -webkit-animation-name: march-up;
// -webkit-animation-duration: 0.3s;
// -webkit-animation-iteration-count: infinite;
// -webkit-animation-timing-function: linear;
// }

// @-webkit-keyframes march-up {
// from {
// background-position-y: 0.6em;
// }
// to {
// background-position-y: 0;
// }
// }

@@ -1,21 +1,23 @@
<template name="bit">

<div
class="bit {{ type }}"
data-id="{{ _id }}"
data-title="{{ title }}"
data-filename="{{ filename }}"
data-upload-key="{{ uploadKey }}">

<div class="content {{ color }}">
<div class="bit__content {{ color }}">

{{#if imageSrc }}
<img class="bit-image" src="{{ imageSrc }}" alt="{{ filename }}">
{{/if}}

{{#if isTextBit }}
{{{editor}}}
<div class="ui-resizable-handle ui-resizable-se"><i class="fa fa-expand fa-flip-horizontal"></i></div>
<div class="ui-resizable-handle ui-resizable-s"></div>
<div class="ui-resizable-handle ui-resizable-e"></div>

<div class="bit__resize-triangle ui-resizable-handle ui-resizable-se"></div>

{{/if}}

</div>
@@ -62,7 +64,7 @@
</div>
</div>

<p class="ui-widget-header"></p>
<p class="bit__drag-handle"></p>

</div>
</template>
@@ -1,6 +1,6 @@
<template name="sketchBit">
<div tabindex="0" class="bit sketch noselect" data-id="{{ _id }}">
<div class="content {{ color }}">
<div class="bit__content {{ color }}">

<!--
Enable in Chrome via: chrome://flags/#enable-npapi
@@ -18,6 +18,6 @@
<canvas height="500" width="500"></canvas>

</div>
<p class="ui-widget-header"></p>
<p class="bit__drag-handle"></p>
</div>
</template>
Oops, something went wrong.

0 comments on commit 2808707

Please sign in to comment.
You can’t perform that action at this time.