Skip to content
Snippets Groups Projects
Commit 9af6db63 authored by bbaer's avatar bbaer
Browse files

better title mockup - form.html

parent 83508aa3
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
less/qfq-bs.css.less
+ 22
− 1
View file @ 9af6db63
......@@ -110,16 +110,22 @@ i.@{spinner_class} {
width: auto;
}
.qfq-form-pill {
/*
border-top-right-radius: 4px;
border-top-left-radius: 4px;
border-top-left-radius: 4px; */
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
.qfq-form-body {
padding-top: 5px;
padding-bottom: 5px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
border: 1px solid #ccc;
}
/* adjust BS padding of input elements: center */
......@@ -134,6 +140,21 @@ i.@{spinner_class} {
padding-top: 4px;
}
.qfq-form-title {
border: 1px solid #ccc;
border-radius: 10px 10px 0 0;
background-image: linear-gradient(to bottom, #fff 0, #e0e0e0 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
height: 45px;
font-size: 1.2em;
padding: 10px 15px;
font-weight: bold;
}
.nav-pills>li>a {
border-radius: 0;
}
.qfq-color-white {
background-color: #ffffff;
}
......
mockup/form.html
+ 119
− 42
View file @ 9af6db63
......@@ -2,59 +2,136 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/bootstrap-theme.min.css">
<link rel="stylesheet" href="../css/jqx.base.css">
<link rel="stylesheet" href="../css/jqx.bootstrap.css">
<link rel="stylesheet" href="../extension/Resources/Public/Css/qfq-bs.css">
<title>Input Mode Switcher</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<div class="btn-toolbar pull-right" role="toolbar">
<div class="btn-group" role="group">
<button id="save-button" type="button" class="btn btn-default navbar-btn"><span
class="glyphicon glyphicon-ok"></span></button>
<button id="close-button" type="button" class="btn btn-default navbar-btn"><span
class="glyphicon glyphicon-remove"></span></button>
</div>
<div class="btn-group" role="group">
<button id="delete-button" type="button" class="btn btn-default navbar-btn"><span
class="glyphicon glyphicon-trash"></span></button>
</div>
<div class="btn-group" role="group">
<a id="form-new-button" href="personmock.html?s=badcaffe1" class="btn btn-default navbar-btn"><span
class="glyphicon glyphicon-plus"></span></a>
</div>
</div>
</div>
</div>
<!-- remove this
<img src="mockData/Scan2a.jpeg" class="qfq-fabric-image" id="qfq-fabric-image-1"> </img>
-->
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="qfq-form-title">
This is a title
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<ul id="qfqTabs" class="nav nav-pills qfq-form-pill qfq-color-grey-1" role="tablist">
<li role="presentation" class="active">
<a href="#">Active</a>
</li>
<li role="presentation">
<a href="#">Inactive</a>
</li>
</ul>
</div>
</div>
<form class="form-horizontal">
<div class="col-md-12 qfq-form-body qfq-color-grey-2">
<div class="form-group clearfix">
<div class="col-md-3 qfq-label">
<label class="control-label required-field">
Name
</label>
</div>
<div class="col-md-6"><input class="form-control" type="text"></div>
<div class="col-md-3"></div>
</div>
<div class="form-group clearfix">
<div class="col-md-3 qfq-label">
<label class="control-label required-field">
Name
</label>
</div>
<div class="col-md-6"><input class="form-control" type="text"></div>
<div class="col-md-3"></div>
</div>
<div class="form-group clearfix">
<div class="col-md-3 qfq-label">
<label class="control-label required-field">
Name
</label>
</div>
<div class="col-md-6"><input class="form-control" type="text"></div>
<div class="col-md-3"></div>
</div>
<div class="form-group clearfix">
<div class="col-md-3 qfq-label">
<label class="control-label required-field">
Name
</label>
</div>
<div class="col-md-6"><input class="form-control" type="text"></div>
<div class="col-md-3"></div>
</div>
</div>
</form>
<form id="theform">
<label>
Text input
<input type="text" name="textinput">
</label>
<label>
Select list
<select name="selectlist">
<option>1</option>
<option>2</option>
</select>
</label>
<label>
Radio
<input type="radio" name="radioinput" value="1">
</label>
<label>
Other radio
<input type="radio" name="radioinput" value="2">
</label>
<label>
Checkbox
<input type="checkbox" name="checkboxinput" value="3">
</label>
<fieldset name="userinfo">
<legend>User information</legend>
<label for="name">Name</label>
<input type="text" name="name" id="name" size="40">
<label for="address">Address</label>
<input type="text" name="address" id="address" size="40">
<label for="phone">Phone</label>
<input type="text" name="phone" id="phone" size="40">
</fieldset>
</form>
</div>
</div>
</div>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/fabric.min.js"></script>
<script src="../js/validator.min.js"></script>
<script src="../js/jqx-all.js"></script>
<script src="../js/EventEmitter.min.js"></script>
<script src="../js/qfq.debug.js"></script>
<script src="../javascript/src/Plugins/qfq.fabric.js"></script>
<script>
<script type="text/javascript">
$(function () {
var form = new QfqNS.Form("theform");
form.addChangeHandler(function (form) {
console.log("form changed");
var qfqPage = new QfqNS.QfqPage({
tabsId: 'myTabs',
formId: 'myForm',
submitTo: 'api/' + $("#submitTo").val(),
deleteUrl: 'api/' + $("#deleteUrl").val(),
fileUploadTo: 'api/' + $("#uploadTo").val(),
fileDeleteUrl: 'api/' + $("#fileDeleteUrl").val()
});
QfqNS.Log.level = 0;
// Just for mockup, init() function called from new QfqNS.Plugin class maybe.
});
</script>
</body>
</html>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment