1
I am currently doing the Prototype of an Interface where it will have the page divided into 3 sections:
1) A lateral column on the left side with width:25%; where the user form will be.
2) A column in the centre with width:50% where there will be an interactive matrix.
3) A lateral column on the right side with width:25%where will be a list of questions also interactive.
Integrated Example
I created three ids each other by dividing into <div id="left-column">, <div id="center-column"> and <div id="right-column"> where respectively each <div>is subject to different styles.
HTML
<div id="left-column">
<h1>Receive Your Answer</h1>
<div class="contact">
<form method="post" enctype="multipart/form-data" action="#" id="image-form">
<div class="three_col">
<select>
<option value="title">Title</option>
<option value="mr">MR</option>
<option value="mrs">MRS</option>
<option value="ms">MS</option>
<option value="dr">DR</option>
</select>
<input type="text" name="fname" placeholder="First Name" class="default" msg="Error for First name">
<span class="error"></span>
<input type="text" name="lname" placeholder="Last Name" class="default" msg="Error for Last name">
<span class="error"></span>
</div>
<div class="one_col email">
<input type="text" name="email" placeholder="Email Address" class="default" msg="Please enter a valid email">
<span class="error"></span>
</div>
<div class="one_col">
<input id="submit" type="submit" value="Submit" />
</div>
<span class="clear"></span>
</form>
</div>
</div>
<div id="center-column">
<div class="q-sort">
<button ng-click="dbteste.SaveAnswer()">Teste</button>
<div id = "teste3" ng-controller="teste3 as app"> <!--FIXME finish this -->
<ul>
<li ng-repeat="answers in app.answers">
{{ answers.ans }}
</li>
</ul>
<button ng-click="app.SaveAnswer()">Teste</button>
</div>
</div>
</div>
<div id="right-column">
<div id="page">
<div id="workarea">
<h1>Quetions List</h1>
<div id="completed-questions">
<h3>
<em class="icon-ok icon-large"></em>Completed
</h3>
</div><!-- #completed-questions -->
<div id="questions" class="question-panels">
<div id="question-1" class="question-panel">
<h4 class="question-name">Questions</h4>
<div class="toolbar">
<a href="#" class="add-task icon icon-plus"></a>
</div>
<div class="text-list">
<div id="text-1" class="text">
<p>Pergunta 1</p>
<div class="actions">
<a href="#" class="icon-caret-right"></a>
<a href="#" class="icon-ok"></a>
<a href="#" class="icon-pencil"></a>
<a href="#" class="icon-trash"></a>
</div>
</div>
<div id="text-2" class="text">
<p>Pergunta 2</p>
<div class="actions">
<a href="#" class="icon-caret-right"></a>
<a href="#" class="icon-ok"></a>
<a href="#" class="icon-pencil"></a>
<a href="#" class="icon-trash"></a>
</div>
</div>
<div id="text-3" class="text">
<p>Pergunta 3</p>
<div class="actions">
<a href="#" class="icon-caret-right"></a>
<a href="#" class="icon-ok"></a>
<a href="#" class="icon-pencil"></a>
<a href="#" class="icon-trash"></a>
</div>
</div>
<div id="text-4" class="text">
<p>Pergunta 4</p>
<div class="actions">
<a href="#" class="icon-caret-right"></a>
<a href="#" class="icon-ok"></a>
<a href="#" class="icon-pencil"></a>
<a href="#" class="icon-trash"></a>
</div>
</div>
<div id="text-5" class="text">
<p>Pergunta 5</p>
<div class="actions">
<a href="#" class="icon-caret-right"></a>
<a href="#" class="icon-ok"></a>
<a href="#" class="icon-pencil"></a>
<a href="#" class="icon-trash"></a>
</div>
</div>
<div id="text-6" class="text">
<p>Pergunta 6</p>
<div class="actions">
<a href="#" class="icon-caret-right"></a>
<a href="#" class="icon-ok"></a>
<a href="#" class="icon-pencil"></a>
<a href="#" class="icon-trash"></a>
</div>
</div>
<div id="text-7" class="text">
<p>Pergunta 7</p>
<div class="actions">
<a href="#" class="icon-caret-right"></a>
<a href="#" class="icon-ok"></a>
<a href="#" class="icon-pencil"></a>
<a href="#" class="icon-trash"></a>
</div>
</div>
<div id="text-8" class="text">
<p>Pergunta 8</p>
<div class="actions">
<a href="#" class="icon-caret-right"></a>
<a href="#" class="icon-ok"></a>
<a href="#" class="icon-pencil"></a>
<a href="#" class="icon-trash"></a>
</div>
</div>
</div>
</div><!-- #questions -->
</div><!-- #workarea -->
</div><!-- #page -->
</div>
CSS
@import url(http://fonts.googleapis.com/css?family=Lato);
@baseBlue: #353538;
@baseDarkRed: #00aeed;
@baseLightRed: #00aeed;
::selection
{
color:inherit;
}
::-moz-selection
{
color:inherit;
}
body {
background-color: #353538;
color: #333;
font-family: Lato;
-webkit-font-smoothing: antialiased;
}
[contenteditable="true"]:focus {
outline: 1px solid black;
}
h1{
margin: 20px;
text-align: left;
color: @baseDarkRed;
}
h2{
text-align: right;
line-height: 1;
margin: 0 0 10px 0;
padding: 0;
}
h3{
line-height: 1.5;
margin: auto;
padding: 0;
color: @baseLightRed;
}
h4 {
line-height: 1;
margin: 0;
padding: 0;
text-align: left;
color: @baseLightRed;
}
a {
color: darken(@baseLightRed, 10%);
transition: all 0.3s ease-in-out;
}
a:hover {
color: darken(@baseLightRed, 20%);
text-shadow: 0px 0px 12px @baseLightRed;
}
#left-column {
width:25%;
float:left;
display:inline-block;
}
#center-column {
width:50%;
float:center;
display:inline-block;
}
#right-column {
width:25%;
float:right;
display:inline-block;
}
/* ========================= */
/*
* FORM
*/
.left-column *{
color:#333;
padding:0px;
margin:0px;
border:0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.contact{
position:relative;
width:60%;
max-width:700px;
margin:0 auto 0%;
padding:10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
background:rgba(51,51,51,0.05);
}
.three_col , .one_col{
float:left;
width:100%;
position:relative;
}
.three_col input, .one_col input, .three_col select, .one_col textarea, .one_col #file {
position:relative;
padding:5px 5px;
margin:1% 2%;
float:left;
z-index:10;
border:1px solid #ccc;
background:url(http://www.olliehusbanddesign.co.uk/form/images/tick.jpg) 120% 0 no-repeat #fff;
}
.three_col span.error, .one_col span.error{
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);
border-radius: 5px 5px 5px 5px;
color: #FFFFFF;
display: block;
font-size: 10px;
height: 35px;
left: 0;
padding: 10px 15px;
position: absolute;
top: -33px;
left:25%;
width: auto;
z-index:999999999;
display:none;
}
.three_col span.error:nth-child(5){
left:65%;
}
.three_col span.error:after, .one_col span.error:after{
background: url("http://www.olliehusbanddesign.co.uk/form/images/popup_arrow.png") repeat scroll 0 0 transparent;
bottom: -7px;
content: "";
height: 7px;
left: 47%;
position: absolute;
width: 17px;
}
.three_col select{
width:16%;
background:#fff;
padding:4px;
}
.three_col input{
width:36%;
}
.one_col input, .one_col textarea, .one_col #file {
width:96%;
}
.one_col #file {
background: url("http://www.olliehusbanddesign.co.uk/form/images/Camera_icon.png") no-repeat scroll center 35px transparent;
border: 1px dotted #CCCCCC;
cursor: pointer;
display: none;
float: right;
position: relative;
text-align: center;
width: 96%;
}
.one_col #file p{
padding: 95px 0 0;
line-height: 40px;
}
.one_col #image-list li{
list-style:none;
border:1px solid #ccc;
margin: 2%;
background:#fff;
}
.one_col #image-list li img{
width:98%;
height:98%;
margin: 1% !important;
}
.one_col #submit{
border-top-color: #4d4d4d;
background: #eaeaea;
color: lighten(#333, 30%);
cursor:pointer;
}
.one_col #submit:hover{
background: #808080;
color: #d6d6d6;
}
.clear{
clear:both;
content:"";
line-height:0px;
display: block;
}
/* old browser fixed */
.no-rgba .contact, .no-rgba .three_col span.error, .no-rgba .one_col span.error{
background:url(http://www.olliehusbanddesign.co.uk/form/images/norgba_bg.png) !important;
}
.no-canvas .one_col, .no-canvas .three_col, .no-canvas .one_col input, .no-canvas .three_col input{
float:right !important;
margin-right:0;
margin-bottom:0;
}
.no-canvas .three_col input{
width:34% !important;
margin-right:0;
margin-bottom:0;
float:right;
}
.no-canvas .file-upload div{
display:block !important;
height:auto !important;
width: 45% !important;
float:right;
}
.no-canvas .one_col #file{
display:none !important;
}
/* animations */
@-moz-keyframes default-to-error {
0%{
background-position:120% -28px;
}
50%{
background-position:right -28px;
}
}
@-moz-keyframes default-to-success {
0%{
background-position:120% 0px;
}
50%{
background-position:right 0px;
}
}
@-moz-keyframes error-to-success {
0%{
background-position:right -28px;
}
50%{
background-position:120% -28px;
}
60%{
background-position:120% 0px;
}
100%{
background-position:right 0px;
}
}
@-moz-keyframes success-to-error {
0%{
background-position:right 0px;
}
50%{
background-position:120% 0px;
}
60%{
background-position:120% -28px;
}
100%{
background-position:right -28px;
}
}
@-webkit-keyframes default-to-error {
0%{
background-position:120% -28px;
}
50%{
background-position:right -28px;
}
}
@-webkit-keyframes default-to-success {
0%{
background-position:120% 0px;
}
50%{
background-position:right 0px;
}
}
@-webkit-keyframes error-to-success {
0%{
background-position:right -28px;
}
50%{
background-position:120% -28px;
}
60%{
background-position:120% 0px;
}
100%{
background-position:right 0px;
}
}
@-webkit-keyframes success-to-error {
0%{
background-position:right 0px;
}
50%{
background-position:120% 0px;
}
60%{
background-position:120% -28px;
}
100%{
background-position:right -28px;
}
}
input.default-to-error{
-webkit-animation: default-to-error 0.5s;
-moz-animation: default-to-error 0.5s;
-animation: default-to-error 0.5s;
background-position:right -28px;
-webkit-box-shadow:0 0 7px rgba(243,38,36, 0.6);
-moz-box-shadow: 0 0 7px rgba(243,38,36, 0.6);
box-shadow:0 0 7px rgba(243,38,36, 0.6);
}
input.default-to-success{
-webkit-animation: default-to-success 0.5s;
-moz-animation: default-to-success 0.5s;
-animation: default-to-success 0.5s;
background-position:right 0px;
-webkit-box-shadow:0 0 7px rgba(161,199,54, 0.6);
-moz-box-shadow: 0 0 7px rgba(161,199,54, 0.6);
box-shadow:0 0 7px rgba(161,199,54, 0.6);
}
@media handheld, only screen and (max-width: 580px) {
.contact{
width:90%;
}
.one_col #file{
width:96%;
}
.three_col input, .one_col input, .three_col select, .one_col textarea{
width:96%;
margin:2% 2%;
}
.three_col input, .one_col input{
padding-right: 21px;
}
.three_col span.error, .one_col span.error{
display:none !Important;
}
}
/*
* END FORM
*/
/* ========================= */
/*
* Q-SORT
*/
/*
* END Q-SORT
*/
/* ========================= */
/*
* DG-QUESTIONS
*/
#page {
width: 500px;
margin: 0px auto;
}
#questions{
float: left;
margin: 0 0 0 20px;
}
#questions h3 {
text-align: right;
}
#completed-questions{
float: left;
width: auto;
padding: 0px;
overflow-x: hidden;
white-space: nowrap;
}
#completed-questions.open {
width: auto;
}
#completed-questions .actions{
display: none;
}
#completed-questions .text{
border-width: 0px 0px 1px 0px;
}
#completed-questions .text p{
text-decoration: line-through;
}
.question-panel {
display: inline-block;
padding: 8px;
width: 250px;
vertical-align: top;
background-color: #fff;
border-radius: 3px;
}
.question-name.over ~ .text-list {
border: 3px dashed #dadada;
}
.toolbar {
text-align: right;
line-height: 30px;
padding: 0px 6px;
display: none;
}
.toolbar a {
}
.text-list {
position: relative;
margin: 4px 0px 0px 0px;
}
.text{
position: relative;
background-color: #eaeaea;
text-align: left;
padding: 0px 0px 0px 4px;
margin: 0px 0px 1px 0px;
border: 1px solid #dadada;
border-width: 1px 1px 0px 1px;
}
.text:first-child{
}
.text:last-child{
border-width: 1px;
}
.text > p {
color: lighten(#333, 30%);
margin: 0;
padding: 0;
line-height: 30px;
display: inline-block;
width: 90%;
vertical-align: top;
}
.actions {
position: absolute;
display: inline-block;
padding: 0px;
margin: 0px -200px 0 0;
width: 19px;
height: 22px;
z-index: 10;
overflow: hidden;
background-color: #fff;
opacity: 0.5;
transition: all 0.75s ease-in-out;
}
.actions:hover{
width: 150px;
opacity: 1;
}
.actions a {
padding: 0px 10px;
}
.actions a.icon-caret-right {
}
.text.over {
border-top: 3px dashed #dadada;
}
/*
* END DG-QUESTIONS
*/
Javascript
;(function ( $, window, undefined ) {
var pluginName = 'dragDrop',
document = window.document,
defaults = {
draggableSelector: ".draggable",
droppableSelector: ".droppable",
appendToSelector: false
};
function Plugin( element, options ) {
this.element = element;
this.options = $.extend( {}, defaults, options) ;
this._defaults = defaults;
this._name = pluginName;
this.init();
}
Plugin.prototype.init = function () {
var droppables = $(this.element).find(this.options.droppableSelector);
var draggables = $(this.element).find(this.options.draggableSelector).attr("draggable", "true");
if(this.options.appendToSelector){
var appendables = $(this.options.appendToSelector);
appendables.on({
'dragenter': function(ev){
ev.preventDefault();
return true;
},
'drop': function(ev){
var data = ev.originalEvent.dataTransfer.getData("Text");
var draggedEl = document.getElementById(data);
var destinationEl = $(ev.target);
destinationEl = destinationEl.closest(appendables.selector).siblings(droppables.selector).append(draggedEl);
$('.active').removeClass('active');
$('.over').removeClass('over');
ev.stopPropagation();
return false;
},
'dragover': function(ev){
ev.preventDefault();
$(ev.target).closest(appendables.selector).addClass('over');
return true;
},
'dragleave': function(ev){
ev.preventDefault();
$(ev.target).closest(appendables.selector).removeClass('over');
return true;
}
});
}
droppables.on({
'mouseup': function(ev){
$('.active').removeClass('active');
return true;
},
'dragenter': function(ev){
ev.preventDefault();
return true;
},
'drop': function(ev){
var data = ev.originalEvent.dataTransfer.getData("Text");
var draggedEl = document.getElementById(data);
var destinationEl = $(ev.target);
destinationEl.closest(draggables.selector).before(draggedEl);
$('.active').removeClass('active');
$('.over').removeClass('over');
ev.stopPropagation();
return false;
},
'dragover': function(ev){
ev.preventDefault();
$(ev.target).closest(draggables.selector).addClass('over');
return true;
},
'dragleave': function(ev){
ev.preventDefault();
$(ev.target).closest(draggables.selector).removeClass('over');
return true;
}
});
draggables.on({
'mousedown': function(ev){
$(ev.target).closest(draggables.selector).addClass('active');
return true;
},
'mouseup': function(ev){
$('.active').removeClass('active');
return true;
},
'dragstart': function(ev){
ev.originalEvent.dataTransfer.effectAllowed='move';
ev.originalEvent.dataTransfer.setData("Text", ev.target.getAttribute('id'));
ev.originalEvent.dataTransfer.setDragImage(ev.target,100,20);
return true;
},
'dragend': function(ev){
return true;
}
});
};
// A really lightweight plugin wrapper around the constructor,
// preventing against multiple instantiations
$.fn[pluginName] = function ( options ) {
return this.each(function () {
if (!$.data(this, 'plugin_' + pluginName)) {
$.data(this, 'plugin_' + pluginName, new Plugin( this, options ));
}
});
}
}(jQuery, window));
$(document).ready(function(){
$("#questions").dragDrop({
draggableSelector: ".text",
droppableSelector: ".text-list",
appendToSelector: ".question-name"
});
$("a.icon-trash").on("click", function(){
$(this).closest(".text").remove();
});
$("a.icon-ok").on("click", function(){
$(this).closest(".text").appendTo("#completed-questions");
$("#completed-questions").addClass('open');
});
$("a.icon-pencil").on("click", function(){
var text = $(this).closest(".text");
text.attr("draggable", "false");
text.find("p").attr("contenteditable", "true").on({
"keypress": function(ev){
if(ev.keyCode == 13)
{
ev.preventDefault();
$(this).attr("contenteditable", "false");
text.attr("draggable", "true");
}
},
"focusout": function(ev){
$(this).attr("contenteditable", "false");
text.attr("draggable", "true");
}
}).focus();
});
});
In the Integrated Example are integrated both the example User Sending Form, a second that is not complete and the example Drag and Drop Questions List, but it turns out that the first one is not aligned as such as can be seen in the Partial Example, where it is well aligned.
Partial Example
In the Partial Example, as you can see, the table behaves in an aligned manner, however once I integrate it in the Integrated Example this becomes misaligned.
This is because, in this case, I’m using a different style hierarchy because I’m defining:
*{
color:#333;
padding:0px;
margin:0px;
border:0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box; box-sizing: border-box;
}
What I can’t do equally in the Integrated Example because it would define all styles (aka *) and it’s something I don’t want.
My point is:
How can I solve this problem?
I mean, I want the style:
*{
color:#333;
padding:0px;
margin:0px;
border:0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box; box-sizing: border-box;
}
But only for mine <div id="left-column"> with all tables aligned.