reorganized css for admin-form
This commit is contained in:
David Baldwynn
parent
ab830fdc9e
commit
69f1f42816
@ -1,74 +1,75 @@
|
||||
.pull-top {
|
||||
.admin-form .pull-top {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
float: none;
|
||||
}
|
||||
|
||||
.box {
|
||||
.admin-form .box {
|
||||
padding: 0 5px 0 5px!important;
|
||||
}
|
||||
|
||||
.current-fields .field-row {
|
||||
.admin-form .current-fields .field-row {
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.current-fields .panel {
|
||||
.admin-form .current-fields .panel {
|
||||
background-color: #f1f1f1;
|
||||
margin-top: 0!important;
|
||||
}
|
||||
.current-fields .panel:hover {
|
||||
.admin-form .current-fields .panel:hover {
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.current-fields .panel.tool-panel {
|
||||
.admin-form .current-fields .panel.tool-panel {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.current-fields .panel-heading {
|
||||
.admin-form .current-fields .panel-heading {
|
||||
background-color: #f1f1f1;
|
||||
position: relative;
|
||||
}
|
||||
.current-fields .panel-heading:hover {
|
||||
.admin-form .current-fields .panel-heading:hover {
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
.current-fields .panel-heading a:hover {
|
||||
.admin-form .current-fields .panel-heading a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
.current-fields .tool-panel.panel:hover {
|
||||
.admin-form .current-fields .tool-panel.panel:hover {
|
||||
border-color: #9d9d9d;
|
||||
background-color: #eee;
|
||||
cursor: pointer;
|
||||
}
|
||||
.current-fields .tool-panel.panel:hover .panel-heading {
|
||||
.admin-form .current-fields .tool-panel.panel:hover .panel-heading {
|
||||
background-color: inherit;
|
||||
color: #000;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.current-fields .tool-panel.panel .panel-heading {
|
||||
.admin-form .current-fields .tool-panel.panel .panel-heading {
|
||||
background-color: #fff;
|
||||
color: #9d9d9d;
|
||||
}
|
||||
.current-fields .tool-panel.panel .panel-heading a {
|
||||
.admin-form .current-fields .tool-panel.panel .panel-heading a {
|
||||
color: inherit;
|
||||
}
|
||||
.current-fields .tool-panel.panel .panel-heading a:hover{
|
||||
.admin-form .current-fields .tool-panel.panel .panel-heading a:hover{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Custom Tab CSS */
|
||||
.nav.nav-pills.nav-stacked {
|
||||
.admin-form .nav.nav-pills.nav-stacked {
|
||||
width: 16.66666667%;
|
||||
float: left;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
div.tab-content {
|
||||
|
||||
.admin-form .tab-content {
|
||||
width: 83.33333333%;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
@ -76,13 +77,13 @@ div.tab-content {
|
||||
padding-top: 0!important;
|
||||
}
|
||||
|
||||
.panel-default.startPage {
|
||||
.admin-form .panel-default.startPage {
|
||||
border-style: dashed;
|
||||
border-color: #a9a9a9;
|
||||
border-width:3px;
|
||||
}
|
||||
|
||||
.busy-updating-wrapper {
|
||||
.admin-form .busy-updating-wrapper {
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
position: fixed;
|
||||
@ -91,7 +92,7 @@ div.tab-content {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.busy-submitting-wrapper {
|
||||
.admin-form .busy-submitting-wrapper {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
@ -99,7 +100,7 @@ div.tab-content {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.dropzone h4.panel-title {
|
||||
.admin-form .dropzone h4.panel-title {
|
||||
height: 17px;
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -111,30 +112,30 @@ div.tab-content {
|
||||
/*
|
||||
** Edit Modal
|
||||
*/
|
||||
.edit-modal-window .modal-dialog {
|
||||
.admin-form .edit-modal-window .modal-dialog {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.edit-modal-window .modal-body {
|
||||
.admin-form .edit-modal-window .modal-body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.edit-modal-window .edit-panel {
|
||||
.admin-form .edit-modal-window .edit-panel {
|
||||
background-color: #F1F1F1;
|
||||
padding: 0 35px 0 35px;
|
||||
}
|
||||
|
||||
.edit-modal-window .preview-field-panel {
|
||||
.admin-form .edit-modal-window .preview-field-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.edit-modal-window .preview-field-panel form {
|
||||
.admin-form .edit-modal-window .preview-field-panel form {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.edit-modal-window .preview-field {
|
||||
.admin-form .edit-modal-window .preview-field {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
@ -146,42 +147,6 @@ div.tab-content {
|
||||
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;
|
||||
@ -208,25 +173,6 @@ div.config-form .row.field {
|
||||
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;
|
||||
80
public/modules/forms/admin/css/configure-form.css
Normal file
80
public/modules/forms/admin/css/configure-form.css
Normal file
@ -0,0 +1,80 @@
|
||||
configure-form-directive .placeholder-tag {
|
||||
background-color: #999;
|
||||
border-radius: 3px 3px 3px 3px;
|
||||
border: 0;
|
||||
color: #FFFFFF;
|
||||
font-style: inherit;
|
||||
font-size: 11px;
|
||||
padding: 4px 5px;
|
||||
margin: 0 2px 2px 2px;
|
||||
font-family: inherit;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
cursor: pointer !important;
|
||||
display: inline!important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
configure-form-directive .tab-content {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
configure-form-directive .ui-select input.form-control {
|
||||
height: 34px;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
configure-form-directive .config-form .btn-secondary {
|
||||
border-color: #DDDDDD;
|
||||
}
|
||||
|
||||
configure-form-directive .notification-toggle.toggle-switch {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
configure-form-directive .ql-picker.ql-placeholder {
|
||||
width: 118px;
|
||||
}
|
||||
|
||||
configure-form-directive .ql-picker.ql-placeholder > span.ql-picker-label:before {
|
||||
content: attr(data-before);
|
||||
}
|
||||
|
||||
configure-form-directive .ql-picker.ql-placeholder > span.ql-picker-options > span.ql-picker-item::before {
|
||||
content: attr(data-label);
|
||||
}
|
||||
|
||||
configure-form-directive .config-form .row.field {
|
||||
padding-top:1.5em;
|
||||
}
|
||||
|
||||
configure-form-directive .config-form > .row > .container:nth-of-type(odd){
|
||||
border-right: 1px #ddd solid;
|
||||
}
|
||||
configure-form-directive .config-form.design > .row > .container:nth-of-type(odd){
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
configure-form-directive .config-form .row > .field-input {
|
||||
padding-left:0.1em;
|
||||
}
|
||||
configure-form-directive .config-form .row > .field-input label {
|
||||
padding-left:1.3em;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
configure-form-directive .config-form {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
configure-form-directive .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);
|
||||
}
|
||||
@ -1,24 +0,0 @@
|
||||
.ui-select input.form-control {
|
||||
height: 34px;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.config-form .btn-secondary {
|
||||
border-color: #DDDDDD;
|
||||
}
|
||||
|
||||
.notification-toggle.toggle-switch {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.ql-picker.ql-placeholder {
|
||||
width: 118px;
|
||||
}
|
||||
|
||||
.ql-picker.ql-placeholder > span.ql-picker-label:before {
|
||||
content: attr(data-before);
|
||||
}
|
||||
|
||||
.ql-picker.ql-placeholder > span.ql-picker-options > span.ql-picker-item::before {
|
||||
content: attr(data-label);
|
||||
}
|
||||
@ -1,4 +1,19 @@
|
||||
|
||||
/*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;
|
||||
}
|
||||
|
||||
.analytics .header-title {
|
||||
font-size: 1em;
|
||||
|
||||
11
public/modules/forms/admin/css/share-form.css
Normal file
11
public/modules/forms/admin/css/share-form.css
Normal file
@ -0,0 +1,11 @@
|
||||
share-form-directive #copyEmbedded {
|
||||
min-height: fit-content;
|
||||
width: 100%;
|
||||
background-color: #36404B;
|
||||
color: white;
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
share-form-directive .tab-content {
|
||||
padding-top: 50px;
|
||||
}
|
||||
@ -1,7 +1,7 @@
|
||||
'use strict';
|
||||
|
||||
angular.module('forms').directive('shareFormDirective', ['$rootScope',
|
||||
function ($rootScope) {
|
||||
angular.module('forms').directive('shareFormDirective', ['$rootScope', '$translate',
|
||||
function ($rootScope, $translate) {
|
||||
return {
|
||||
templateUrl: 'modules/forms/admin/views/directiveViews/form/share-form.client.view.html',
|
||||
restrict: 'E',
|
||||
@ -10,6 +10,13 @@ angular.module('forms').directive('shareFormDirective', ['$rootScope',
|
||||
},
|
||||
controller: function($scope){
|
||||
$scope.actualFormURL = $scope.actualformurl;
|
||||
|
||||
|
||||
$scope.fullScreen = "<iframe id='iframe' src='{{actualFormURL}}' style='width:100%;height:500px;'></iframe>"+
|
||||
"<div style='font-family: Sans-Serif;font-size: 12px;color: #999;opacity: 0.5; padding-top: 5px;'>"+
|
||||
$translate.instant('POWERED_BY')+
|
||||
"<a href='https://www.tellform.com' style='color: #999' target='_blank'>TellForm</a>"+
|
||||
"</div>";
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
@ -1,44 +1,40 @@
|
||||
<div class="config-form row">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<uib-tabset active="activePill" vertical="true" type="pills">
|
||||
<uib-tab index="0" heading="{{ 'SHARE_YOUR_FORM' | translate }}">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
{{ 'TELLFORM_URL' | translate }}
|
||||
</div>
|
||||
<div class="col-sm-8 form-input">
|
||||
<span ngclipboard data-clipboard-target="#copyURL"> <input id="copyURL" ng-value="actualFormURL" class="form-control ng-pristine ng-untouched ng-valid"> </span>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<button class="btn btn btn-secondary view-form-btn" ngclipboard data-clipboard-target="#copyURL">
|
||||
{{ 'COPY' | translate }} <i class="fa fa-clipboard" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
<uib-tabset active="activePill" type="pills">
|
||||
<uib-tab index="0" heading="{{ 'SHARE_YOUR_FORM' | translate }}">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
{{ 'TELLFORM_URL' | translate }}
|
||||
</div>
|
||||
</uib-tab>
|
||||
<uib-tab index="1" heading="{{ 'EMBED_YOUR_FORM' | translate }}">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
{{ 'COPY_AND_PASTE' | translate }}
|
||||
</div>
|
||||
<div class="col-sm-8 form-input">
|
||||
<span ngclipboard data-clipboard-target="#copyEmbedded">
|
||||
<textarea id="copyEmbedded" class="form-control ng-pristine ng-untouched ng-valid" style="min-height:200px; width:100%; background-color: #FFFFCC; color: #30313F;">
|
||||
<!-- {{ 'CHANGE_WIDTH_AND_HEIGHT' | translate }} -->
|
||||
<iframe id="iframe" src="{{actualFormURL}}" style="width:100%;height:500px;"></iframe>
|
||||
<div style="font-family: Sans-Serif;font-size: 12px;color: #999;opacity: 0.5; padding-top: 5px;">{{ 'POWERED_BY' | translate }} <a href="https://www.tellform.com" style="color: #999" target="_blank">TellForm</a></div>
|
||||
</textarea>
|
||||
</span>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<button class="btn btn btn-secondary view-form-btn" ngclipboard data-clipboard-target="#copyEmbedded">
|
||||
{{ 'COPY' | translate }} <i class="fa fa-clipboard" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-sm-8 form-input">
|
||||
<span ngclipboard data-clipboard-target="#copyURL"> <input id="copyURL" ng-value="actualFormURL" class="form-control ng-pristine ng-untouched ng-valid"> </span>
|
||||
</div>
|
||||
</uib-tab>
|
||||
</uib-tabset>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<button class="btn btn btn-secondary view-form-btn" ngclipboard data-clipboard-target="#copyURL">
|
||||
{{ 'COPY' | translate }} <i class="fa fa-clipboard" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</uib-tab>
|
||||
<uib-tab index="1" heading="{{ 'EMBED_YOUR_FORM' | translate }}">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
{{ 'COPY_AND_PASTE' | translate }}
|
||||
</div>
|
||||
<div class="col-sm-8 form-input">
|
||||
<span ngclipboard data-clipboard-target="#copyEmbedded">
|
||||
<div id="copyEmbedded" class="form-control">
|
||||
{{ fullScreen }}
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<button class="btn btn btn-secondary view-form-btn" ngclipboard data-clipboard-target="#copyEmbedded">
|
||||
{{ 'COPY' | translate }} <i class="fa fa-clipboard" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</uib-tab>
|
||||
</uib-tabset>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
x
Reference in New Issue
Block a user