Commit 96d55a42 authored by Sven Franck's avatar Sven Franck

added erp5-ui draft example (should have it's own repo)

parent 0ea54899
This diff is collapsed.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<title>Nexedi ERP5 | Computers</title>
<!-- TODO: gadget mobile meta -->
<!-- TODO: schema.org? -->
<!-- TODO: all JQM widgets should have enhanced markup vs letting JQM enhance -->
<!-- normalize -->
<link rel="stylesheet" href="css/normalize.css">
<!-- JQM structure -->
<link rel="stylesheet" href="css/jquery-mobile/jquery-mobile.latest.css">
<!-- JQM extensions -->
<link rel="stylesheet" href="css/extensions.css">
<!-- fontawesome icons -->
<link rel="stylesheet" href="css/fontawesome.css">
<!-- JQM custom themes (slapos-white, slapos-black, slapos-active) -->
<link rel="stylesheet" href="css/themes.css">
<!-- generic CSS -->
<link rel="stylesheet" href="css/css.css">
</head>
<body>
<div id="computers" data-role="page" data-theme="slapos-white">
<!-- left panel -->
<div data-role="panel" id="menu_computers" data-theme="slapos-black" class="panel" data-position="left" data-display="push">
<div class="panel_element panel_element_first panel_header">
<input type="search" data-role="button" value="" placeholder="Search" class="panel_search" />
<a href="#menu" class="panel-close" data-role="button" data-iconpos="notext" data-icon="remove" data-rel="close">Close</a>
</div>
<div class="panel_element">
<!-- gadget modules -->
<ul data-role="listview" class="listview" data-theme="slapos-black">
<li data-role="list-divider">Modules</li>
<li class="listview_item listview_icon"><a href="webpages.html"><span class="ui-li-icon ui-li-icon-custom ui-icon-file-alt ui-icon">&nbsp;</span><h3>Webpages</h3><p>Generated Webpages</p></a></li>
</ul>
</div>
<div class="panel_element">
<ul data-role="listview" class="listview" data-theme="slapos-black">
<li data-role="list-divider">General</li>
<li class="listview_item listview_icon"><a href=""><span class="ui-li-icon ui-li-icon-custom ui-icon-folder-open-alt ui-icon">&nbsp;</span><h3>Software</h3></a></li>
<li class="listview_item listview_icon"><a href=""><span class="ui-li-icon ui-li-icon-custom ui-icon-book ui-icon">&nbsp;</span><h3>Documentation</h3></a></li>
<li class="listview_item listview_icon"><a href=""><span class="ui-li-icon ui-li-icon-custom ui-icon-cloud-download ui-icon">&nbsp;</span><h3>Download</h3></a></li>
<li class="listview_item listview_icon"><a href=""><span class="ui-li-icon ui-li-icon-custom ui-icon-comments ui-icon">&nbsp;</span><h3>Forum</h3></a></li>
<li class="listview_item listview_icon"><a href=""><span class="ui-li-icon ui-li-icon-custom ui-icon-microphone ui-icon">&nbsp;</span><h3>Blog</h3></a></li>
</ul>
</div>
<div class="panel_element" data-theme="slapos-black">
<ul class="list mini">
<li><a href="http://nexedi.com/">Nexedi &copy; 2013</a></li>
</ul>
</div>
</div>
<!-- gadget header -->
<div data-role="header" data-position="fixed">
<div class="wrap left">
<div data-role="controlgroup" data-type="horizontal" class="buttongroup">
<a href="#menu_computers" data-rel="panel" data-role="button" data-icon="reorder" class="responsive">Navigate</a>
</div>
</div>
<h1>Computers</h1>
<div class="wrap right">
<div data-role="controlgroup" data-type="horizontal" class="buttongroup">
<a href="#popup_computers" data-rel="popup" data-transition="pop" data-position-to="window" data-role="button" data-icon="user" class="responsive">Login</a>
<a href="#communicate_computers" data-rel="panel" data-role="button" data-icon="comments" class="responsive">Communicate</a>
</div>
</div>
</div>
<!-- popup login -->
<div data-role="popup" id="popup_computers" data-overlay-theme="slapos-black" data-tolerance="30,30,30,30" data-shadow="false" data-theme="slapos-white" class="popup login ui-content">
<div class="popup_element logo_wrap">
<img src="img/slapos.png" alt="slapos logo" />
</div>
<div class="popup_element">
<p>Sign in using</p>
<div data-role="controlgroup">
<a href="#" data-role="button" class="signin_google" data-iconpos="left" data-icon="google-plus-sign">Google</a>
<a href="#" data-role="button" class="signin_fb" data-iconpos="left" data-icon="facebook-sign">Facebook</a>
</div>
<p>Classic login</p>
<div data-role="controlgroup" data-type="horizontal" class="input_board">
<label class="ui-hidden-accessible">Login</label>
<input name="login" type="text" value="" placeholder="Login" data-icon="user" />
<label class="ui-hidden-accessible">Password</label>
<input name="password" type="password" value="" placeholder="Password" data-icon="lock" />
</div>
<span class="mini right note">
<a href="#">Forgot Password</a>
</span>
</div>
<div class="popup_element">
<p class="mini">
<span class="note">Please note:</span>
To maintain sufficient resources, a minimal fee of 1 EUR will be
charged if you use SlapOS services for <strong>more than 24
hours</strong>. By clicking on one of the signup buttons, you
agree that you are subscribing to a payable service. All services
you request will be invoiced to you at the end of the month.
</p>
<p>
To find out more, please refer to
</p>
<a href="pricing.html" data-role="button" data-iconpos="left" data-icon="euro">SlapOS Pricing</a>
</div>
</div>
<!-- content -->
<div class="ui-content">
<div class="content_element content_element_fullscreen">
<table class="erp5_table" data-type="Computer">
<!-- dynamic -->
</table>
</div>
</div>
<!-- footer -->
<div data-role="footer" data-position="fixed">
<div data-role="navbar" class="navbar">
<ul>
<li><a href="#" data-rel="popup" data-icon="compass">Browse</a></li>
<li><a class="new_item" href="computer.html?mode=add" data-rel="popup" data-icon="plus"><span class="navbar_add">Add</span>/<span class="navbar_clone">Clone</span></a></li>
<li><a class="remove_item" href="#" data-rel="popup" data-icon="minus">Remove</a></li>
<li><a href="#" data-rel="popup" data-icon="cog">Action</a></li>
<li><a href="#" data-rel="popup" data-icon="share">Import/Export</a></li>
</ul>
</div>
</div>
<!-- right panel -->
<div data-role="panel" id="communicate_computers" data-theme="slapos-black" class="panel" data-position="right" data-display="push">
</div>
</div>
<!-- Jquery, JQM, JQM extensions -->
<script src="js/libs/jquery/jquery.js"></script>
<script src="js/libs/jquery-mobile/jquery-mobile.js"></script>
<script src="js/extensions.js"></script>
<!-- JIO -->
<script src="js/libs/jio/md5.amd.js"></script>
<script src="js/libs/jio/jio.js"></script>
<script src="js/libs/jio/complex_queries.js"></script>
<script src="js/libs/jio/erp5storage.js"></script>
<!-- custom script -->
<script src="js/erp5_loader"></script>
</body>
</html>
.bold {
font-weight: bold;
}
.note {
font-weight: bold;
display: block;
}
.center {
display: block;
text-align: center;
}
.left {
display: block;
text-align: left;
}
.right {
display: block;
text-align: right;
}
.starred {
color: #0FBABD;
}
.large {
font-size: 125%;
}
.ui-popup .file {
max-width: 70%;
}
.inline {
max-width: 50%;
margin: 0 auto;
}
.inline a.ui-btn:after {
font-size: .9em;
}
@media (max-width: 40em) {
.inline {
max-width: 70%;
margin: 0 auto;
}
}
.alert {
color: red;
font-weight: bold;
}
.alert textarea {
color: red !important;
font-weight: normal;
}
.alert label {
display: block;
width: 100%;
float: none;
}
tbody .alert,
tbody .proceed,
tbody .large {
display: block;
text-align: center
}
@media (max-width: 40em) {
tbody .alert,
tbody .proceed {
font-size: 1.5em;
}
}
.proceed {
color: #0FBABD;
font-weight: bold;
}
.static {
cursor: default;
}
.input_board {
margin: 0;
}
.input_board .ui-controlgroup-controls {
width: 100%;
}
.input_board .ui-controlgroup-controls .ui-input-text input {
box-shadow: 0 0 2px #999999 inset;
-webkit-box-shadow: 0 0 2px #999999 inset;
}
.button_board {
text-align: center;
}
a.confirm, a.action {
font-weight: bold !important;
}
.profile {
display: inline-block;
border: 1px solid;
}
@media (max-width: 40em) {
.profile {
margin-top: 1em;
}
}
.profile img {
padding-right: 1em;
float: left;
vertical-align: middle;
max-width: 120px;
}
.tag {
margin: 0;
font-size: 200%;
}
/* Modified on BASE */
.mini {
font-size: 80%;
}
@media (max-width: 40em) {
.tag {
margin: 0;
font-size: 150%;
}
}
.downloads:before {
content: "·";
}
.inline-icon {
padding: 0 .5em;
}
.logo_wrap {
margin-top: 0em;
margin-bottom: 2em;
padding: 0.5em;
text-align: center;
}
.logo_wrap img {
max-height: 8em;
}
@media (max-width: 40em) {
.logo_wrap {
margin-top: 1em;
margin-bottom: 1em;
}
.logo_wrap img {
max-height: 7em;
}
}
@media (max-width: 30em) {
.logo_wrap {
margin-top: .5em;
margin-bottom: .5em;
}
}
@media (max-width: 20em) {
.logo_wrap {
margin-top: .25em;
margin-bottom: .25em;
}
}
/* custom signin buttons: thx Zocial http://zocial.smcllns.com/ */
.signin_google,
.signin_google:visited {
background: #DD4B39 !important;
color: #fff !important;
text-shadow: none !important;
cursor: pointer !important;
}
.signin_fb,
.signin_fb:visited {
background: #4863ae !important;
color: #fff !important;
text-shadow: none !important;
cursor: pointer !important;
}
.signin_fb:hover,
.signin_fb:active,
.signin_fb.ui-btn-active,
.signin_google:hover,
.signin_google:active,
.signin_google.ui-btn-active {
background-image: -webkit-gradient(linear, center bottom, center top, from(rgba(255, 255, 255, 0.1)), color-stop(0.30, rgba(255, 255, 255, 0)), to(rgba(0, 0, 0, 0.1))) !important;
background-image: -webkit-linear-gradient(center bottom , rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 30%, transparent 50%, rgba(0, 0, 0, 0.1)) !important;
background-image: -ms-linear-gradient(center bottom , rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 30%, transparent 50%, rgba(0, 0, 0, 0.1)) !important;
background-image: -moz-linear-gradient(center bottom , rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 30%, transparent 50%, rgba(0, 0, 0, 0.1)) !important;
background-image: -o-linear-gradient(center bottom , rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 30%, transparent 50%, rgba(0, 0, 0, 0.1)) !important;
background-image: linear-gradient(center bottom , rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 30%, transparent 50%, rgba(0, 0, 0, 0.1)) !important;
}
.signin_google:focus,
.signin_google.ui-focus
.signin_fb:focus,
.signin_fb.ui-focus {
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
.popup_element {
padding-top: .75em;
padding-left: .75em;
padding-right: .75em;
}
.popup_element p {
margin-bottom: 0.15em;
}
.content_element {
display: inline-block;
vertical-align: top;
width: 45%;
padding-left: 2%;
padding-right: 2%;
/* ~ 98% for 2 col layout */
padding-top: 2%;
}
.content_element_fullscreen {
width: 96% /* 2% padding-left/right */
}
/* is this padding really necessary? */
.content_element .ui-controlgroup-vertical,
.content_element .ui-controlgroup-horizontal,
.content_element form {
margin-top: 1em;
margin-bottom: 1em;
vertical-align: middle;
}
@media (max-width: 40em) {
.content_element {
width: 100%;
padding: 0;
}
}
.content_element .ui-input-search {
width: 50%;
}
@media (max-width: 45em) {
.content_element .ui-input-search {
width: 60%;
}
}
@media (max-width: 30em) {
.content_element .ui-input-search {
width: 65%;
}
}
@media (max-width: 20em) {
.content_element .ui-input-search{
width: 70%;
}
}
.panel .ui-panel-inner .panel_element {
margin-left: -1em;
margin-right: -1em;
}
.panel .ui-panel-inner .panel_element.panel_element_first {
margin-top: -1em;
}
.panel .ui-panel-inner .panel_element.panel_element_last {
margin-bottom: -1em;
}
.panel .panel_element.panel_header {
border-width: 0;
padding-top: 1px;
top: -1px;
}
/* navbar */
.navbar ul li a.ui-btn-active.clone_item span.navbar_clone {
font-weight: bold;
}
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
/* horizontal tabs */
/* margins set: -1em, tabs regular: 0, inset 1em */
.ui-collapsible-set-horizontal {
margin-left: -1em;
margin-right: -1em;
}
.ui-collapsible-set-horizontal .ui-collapsible {
margin-left: 0;
margin-right: 0;
}
/* fallback on small screens = override grid */
@media (max-width: 40em) {
.ui-collapsible-set-horizontal[class*="ui-grid-"] .ui-collapsible {
overflow: auto;
clear: none;
float: none;
width: auto;
}
.ui-collapsible-set-horizontal .ui-collapsible.ui-collapsible-inset {
margin-left: 1em;
margin-right: 1em;
}
}
@media (min-width: 40em) {
.ui-collapsible-set-horizontal .ui-collapsible-content .ui-listview {
margin-top: 0 !important;
}
.ui-collapsible-set-horizontal .ui-collapsible h3 .ui-btn {
border-bottom-width: 1px;
}
.ui-collapsible-set .ui-collapsible {
margin-top: 0;
}
.ui-collapsible-set-horizontal .ui-collapsible .ui-collapsible-heading .ui-btn {
border-left-width: 1px;
}
.ui-collapsible-set-horizontal .ui-collapsible.ui-last-child .ui-collapsible-heading .ui-btn {
border-right-width: 1px;
}
.ui-collapsible-set-horizontal .ui-collapsible-heading {
width: 100%;
margin: 0;
}
.ui-collapsible-set-horizontal .ui-collapsible-content {
margin-top: -15px;
}
.ui-collapsible-set-horizontal .ui-collapsible .ui-btn-active {
border-bottom-width: 0;
}
.ui-collapsible-set-horizontal .ui-collapsible-collapsed .ui-btn {
border-bottom-width: 1px;
}
.ui-collapsible-set-horizontal .ui-collapsible .ui-collapsible-content {
border-top-width: 0;
}
}
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
Markdown is supported
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