tgrosinger/ohmyform
1
0
Fork 0
Code

fixed alignment bug with form fields and delete/copy buttons

Browse Source
This commit is contained in:
David Baldwynn 2017-09-20 16:06:01 -07:00
parent c0cc33e223
commit c396aa8a6d
3 changed files with 271 additions and 238 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

222
public/modules/forms/admin/css/edit-form.css
View File

@ -1,3 +1,113 @@
.pull-top {
display: inline-block;
vertical-align: top;
float: none;
}
.box {
padding: 0 5px 0 5px!important;
}
.current-fields .field-row {
padding: 5px 0;
}
.current-fields .panel {
background-color: #f1f1f1;
margin-top: 0!important;
}
.current-fields .panel:hover {
background-color: #fff;
cursor: pointer;
}
.current-fields .panel.tool-panel {
background-color: white;
}
.current-fields .panel-heading {
background-color: #f1f1f1;
position: relative;
}
.current-fields .panel-heading:hover {
background-color: #fff;
cursor: pointer;
}
.current-fields .panel-heading a:hover {
text-decoration: none;
}
.current-fields .tool-panel.panel:hover {
border-color: #9d9d9d;
background-color: #eee;
cursor: pointer;
}
.current-fields .tool-panel.panel:hover .panel-heading {
background-color: inherit;
color: #000;
cursor: pointer;
}
.current-fields .tool-panel.panel .panel-heading {
background-color: #fff;
color: #9d9d9d;
}
.current-fields .tool-panel.panel .panel-heading a {
color: inherit;
}
.current-fields .tool-panel.panel .panel-heading a:hover{
text-decoration: none;
}
/* Custom Tab CSS */
.nav.nav-pills.nav-stacked {
width: 16.66666667%;
float: left;
position: relative;
min-height: 1px;
padding-right: 15px;
}
div.tab-content {
width: 83.33333333%;
position: relative;
min-height: 1px;
float:left;
padding-top: 0!important;
}
.panel-default.startPage {
border-style: dashed;
border-color: #a9a9a9;
border-width:3px;
}
.busy-updating-wrapper {
text-align: center;
font-size: 20px;
position: fixed;
bottom: 0;
right: 55px;
z-index: 1;
}
.busy-submitting-wrapper {
position: fixed;
top: 50%;
left: 0;
right: 0;
bottom: 0;
}
.dropzone h4.panel-title {
height: 17px;
overflow: hidden;
}
.container.admin-form {
margin-top: 70px;
}
/*
** Edit Modal
*/
@ -35,3 +145,115 @@
background: #000;
background:rgba(0, 0, 0, 0.5) !important;
}
.config-form {
max-width: 100%;
}
.config-form > .row {
padding: 19px;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}
div.config-form .row.field {
padding-top:1.5em;
}
div.config-form > .row > .container:nth-of-type(odd){
border-right: 1px #ddd solid;
}
div.config-form.design > .row > .container:nth-of-type(odd){
border-right: none;
}
div.config-form .row > .field-input {
padding-left:0.1em;
}
div.config-form .row > .field-input label {
padding-left:1.3em;
display: block;
}
/* Styles for form admin view (/forms/:formID/admin) */
.admin-form > .page-header {
padding-bottom: 0;
margin-bottom: 40px;
}
.admin-form > .page-header h1 {
margin-bottom: 0;
margin-top: 0;
}
.admin-form > .page-header > .col-xs-3 {
padding-top: 1.4em;
}
.admin-form .form-controls .row {
padding: 5px;
}
.admin-form .page-header {
border: none;
margin-top: none;
margin-bottom: none;
}
/*Styles for admin view tabs */
.admin-form .tab-content {
padding-top: 3em;
}
/*Styles for submission table*/
.submissions-table .table-outer.row {
margin: 1.5em 0 2em 0!important;
}
.submissions-table .table-outer .col-xs-12 {
padding-left: 0!important;
border:1px solid #ddd;
overflow-x: scroll;
border-radius:3px;
}
.submissions-table .table > thead > tr > th {
min-width:8em;
}
.submissions-table .table > tbody > tr.selected {
background-color:#efefef;
}
/*Styles for add fields tab*/
.admin-form .add-field {
background-color: #ddd;
padding: 0 2% 0 2%;
border-radius: 3px;
}
.admin-form .add-field .col-xs-6 {
padding: 0.25em 0.4em;
}
.admin-form .add-field .col-xs-6 .panel-heading {
border-width: 1px;
border-style: solid;
border-color: #bbb;
border-radius: 4px;
}
.admin-form .oscar-field-select {
margin: 10px 0 10px;
}
.view-form-btn.span {
padding-right:0.6em;
}
.status-light.status-light-off {
color: #BE0000;
}
.status-light.status-light-on {
color: #33CC00;
}

98
public/modules/forms/admin/views/directiveViews/form/edit-form.client.view.html
View File

@ -539,62 +539,62 @@
</div>
<!-- Form Fields -->
<div class="row">
<div class="col-md-10 col-sm-10 col-xs-10 dropzoneContainer">
<div class="row dropzoneContainer">
<div class="panel-group dropzone" ui-sortable="sortableOptions" ng-model="myform.form_fields">
<div class="panel-group dropzone col-xs-12" ui-sortable="sortableOptions" ng-model="myform.form_fields">
<div class="panel panel-default" ng-repeat="field in myform.form_fields track by $index"
ng-if="!field.deletePreserved"
ng-click="openEditModal(field)">
<div class="panel-heading">
<div class="row">
<span class="col-xs-1" ng-switch="field.fieldType">
<field-icon-directive type-name="{{field.fieldType}}"></field-icon-directive>
</span>
<span class="col-xs-11">
{{field.title}}
<span ng-show="field.required">*</span>
</span>
</div>
</div>
</div>
<div class="col-xs-12 field-row" ng-repeat="field in myform.form_fields track by $index" ng-if="!field.deletePreserved">
<div class="col-xs-10">
<div class="panel panel-default" ng-click="openEditModal(field)">
<div class="panel-heading">
<div class="row">
<span class="col-xs-1" ng-switch="field.fieldType">
<field-icon-directive type-name="{{field.fieldType}}"></field-icon-directive>
</span>
<span class="col-xs-11">
{{field.title}}
<span ng-show="field.required">*</span>
</span>
</div>
</div>
</div>
</div>
<div class="col-xs-1 box">
<div class="panel tool-panel panel-default">
<div class="panel-heading" style="padding: 10px 10px;" ng-click="deleteField($index)">
<span class="text-center">
<a href="" class="fa fa-trash-o"></a>
</span>
</div>
</div>
</div>
<div class="panel panel-default" style="border-style: dashed; border-color: #a9a9a9;">
<div class="panel-heading">
<h4 class="panel-title text-center" style="color: #a9a9a9;">
{{ 'CLICK_FIELDS_FOOTER' | translate }}
</h4>
</div>
</div>
<div class="col-xs-1 box">
<div class="panel tool-panel panel-default">
<div class="panel-heading" style="padding: 10px 10px;" ng-click="duplicateField($index)">
<span class="text-center">
<a href="" class="fa fa-files-o"></a>
</span>
</div>
</div>
</div>
</div>
<hr>
<div class="col-xs-12 field-row">
<div class="col-xs-12" style="padding-right: 5px;">
<div class="panel panel-default" style="border-style: dashed; border-color: #a9a9a9;">
<div class="panel-heading">
<h4 class="panel-title text-center" style="color: #a9a9a9;">
{{ 'CLICK_FIELDS_FOOTER' | translate }}
</h4>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-1 col-sm-1 col-xs-1" style="padding:0 5px;" >
<div class="panel-group tool-panel text-center">
<div class="panel panel-default" ng-repeat="field in myform.form_fields track by field._id" ng-if="!field.deletePreserved">
<div class="panel-heading" style="padding: 10px 10px;" ng-click="deleteField($index)">
<span class="text-center">
<a href="" class="fa fa-trash-o"></a>
</span>
</div>
</div>
</div>
<hr>
</div>
<div class="col-md-1 col-sm-1 col-xs-1" style="padding:0 5px;">
<div class="panel-group tool-panel text-center">
<div class="panel panel-default" ng-repeat="field in myform.form_fields track by field._id" ng-if="!field.deletePreserved">
<div class="panel-heading" style="padding: 10px 10px;" ng-click="duplicateField($index)">
<span class="text-center">
<a href="" class="fa fa-files-o"></a>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Page -->
<div class="row" ng-if="myform.endPage.showEnd">

189
public/modules/forms/base/css/form.css
View File

@ -1,51 +1,3 @@
/* Custom Tab CSS */
.nav.nav-pills.nav-stacked {
width: 16.66666667%;
float: left;
position: relative;
min-height: 1px;
padding-right: 15px;
}
div.tab-content {
width: 83.33333333%;
position: relative;
min-height: 1px;
float:left;
padding-top: 0!important;
}
.panel-default.startPage {
border-style: dashed;
border-color: #a9a9a9;
border-width:3px;
}
.busy-updating-wrapper {
text-align: center;
font-size: 20px;
position: fixed;
bottom: 0;
right: 55px;
z-index: 1;
}
.busy-submitting-wrapper {
position: fixed;
top: 50%;
left: 0;
right: 0;
bottom: 0;
}
.dropzone h4.panel-title {
height: 17px;
overflow: hidden;
}
.container.admin-form {
margin-top: 70px;
}
.public-form.preview {
border: none;
box-shadow: 0px 0px 10px 0px grey;
@ -273,78 +225,6 @@ form .row.field {
background-color: #000000;
background-color: rgba(0,0,0,0.1);
}
.config-form {
max-width: 100%;
}
.config-form > .row {
padding: 19px;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}
div.config-form .row.field {
padding-top:1.5em;
}
div.config-form > .row > .container:nth-of-type(odd){
border-right: 1px #ddd solid;
}
div.config-form.design > .row > .container:nth-of-type(odd){
border-right: none;
}
div.config-form .row > .field-input {
padding-left:0.1em;
}
div.config-form .row > .field-input label {
padding-left:1.3em;
display: block;
}
/* Styles for form admin view (/forms/:formID/admin) */
.admin-form > .page-header {
padding-bottom: 0;
margin-bottom: 40px;
}
.admin-form > .page-header h1 {
margin-bottom: 0;
margin-top: 0;
}
.admin-form > .page-header > .col-xs-3 {
padding-top: 1.4em;
}
.admin-form .form-controls .row {
padding: 5px;
}
.admin-form .page-header {
border: none;
margin-top: none;
margin-bottom: none;
}
/*Styles for admin view tabs */
.admin-form .tab-content {
padding-top: 3em;
}
.admin-form .panel-heading {
background-color: #f1f1f1;
position: relative!important;
}
.admin-form .panel-heading:hover {
background-color: #fff;
cursor: pointer;
}
.admin-form .panel-heading a:hover {
text-decoration: none;
}
.current-fields .panel-body .row.question input[type='text'], .current-fields .panel-body .row.description textarea{
width: 100%;
@ -362,75 +242,6 @@ div.config-form .row.field {
border:none!important;
}
.current-fields .tool-panel > .panel-default:hover {
border-color: #9d9d9d;
cursor: pointer;
}
.current-fields .tool-panel > .panel-default .panel-heading {
background-color: #fff;
color: #9d9d9d!important;
}
.current-fields .tool-panel > .panel-default .panel-heading:hover {
background-color: #eee;
color: #000!important;
cursor: pointer;
}
.current-fields .tool-panel > .panel-default .panel-heading a {
color: inherit;
}
.current-fields .tool-panel > .panel-default .panel-heading a:hover{
text-decoration: none;
}
/*Styles for submission table*/
.submissions-table .table-outer.row {
margin: 1.5em 0 2em 0!important;
}
.submissions-table .table-outer .col-xs-12 {
padding-left: 0!important;
border:1px solid #ddd;
overflow-x: scroll;
border-radius:3px;
}
.submissions-table .table > thead > tr > th {
min-width:8em;
}
.submissions-table .table > tbody > tr.selected {
background-color:#efefef;
}
/*Styles for add fields tab*/
.admin-form .add-field {
background-color: #ddd;
padding: 0 2% 0 2%;
border-radius: 3px;
}
.admin-form .add-field .col-xs-6 {
padding: 0.25em 0.4em;
}
.admin-form .add-field .col-xs-6 .panel-heading {
border-width: 1px;
border-style: solid;
border-color: #bbb;
border-radius: 4px;
}
.admin-form .oscar-field-select {
margin: 10px 0 10px;
}
.view-form-btn.span {
padding-right:0.6em;
}
.status-light.status-light-off {
color: #BE0000;
}
.status-light.status-light-on {
color: #33CC00;
}
/* Styles for form list view (/forms) */
section.public-form {
padding: 0 10% 0 10%;