cloud
/
store
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

bug fix with layout

Browse Source
legacy
Steve L. Nyemba 4 years ago
parent aaef7e748b
commit 9cd1b9dcb1
4 changed files with 123 additions and 218 deletions
Show Stats Download Patch File Download Diff File

36
src/api/static/css/borders.css
Unescape View File

@ -0,0 +1,36 @@
.border {
border:1px solid #CAD5E0 ;
}
.border-round {
padding:6px;
border-radius:8px;
}
.border-round-top-left{
border-top-left-radius: 8px;
padding:6px;
}
.border-round-top-right{
border-top-right-radius: 8px;
padding:6px;
}
.border-round-bottom-right{
border-bottom-right-radius: 8px;
padding:6px;
}
.border-round-bottom-left{
border-bottom-left-radius: 8px;
padding:6px;
}
.border-right{
border-right:1px solid #CAD5E0;
}
.border-left{
border-left:1px solid #CAD5E0;
}
.border-bottom { border-bottom:1px solid #CAD5E0}
.border-top { border-top:1px solid #CAD5E0}

264
src/api/static/css/default.css
Unescape View File

@ -1,227 +1,95 @@
.theme-raspberry{ body {
background: #00B4DB; /* fallback for old browsers */ font-family:sans-serif;
background: -webkit-linear-gradient(to bottom, #0083B0, #00B4DB); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #0083B0, #00B4DB); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
color:#ffffff;
font-family:verdana;
font-weight:lighter; font-weight:lighter;
text-transform:capitalize; font-size:16px;
} }
.theme-dark-ocean {
background: #373B44; /* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #4682B4, #d3d3d3); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #4682B4, #d3d3d3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
color:#f3f3f3;
}
.theme-gray {
background: #bdc3c7; /* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #2c3e50, #bdc3c7); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #2c3e50, #bdc3c7); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
color:#f3f3f3f3;
}
.theme-clouds {
background: #ECE9E6; /* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #FFFFFF, #D3D3D3); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #FFFFFF, #D3D3D3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
img {width:48px} .small {font-size:12px; color:gray; font-weight:lighter}
body{ .bold {font-weight:bold}
font-family:sans-serif; .black {color:#000000}
font-size:14px; .fa-times {color:maroon}
.fa-check {color:#20b2aa}
.fa-chart-pie{color:#ff6500}
margin-left:10%; .fa-link {color:#1e90ff}
margin-right:10%; /* .fa-user-tie{color:#1e90ff} */
} .fa-users {color:#B9340D}
.default {font-size:16px; .caption {font-size:22px;}
font-family: sans-serif;
}
.button {
width:auto;
padding:6px;
font-weight:bold;
border-radius:8px;
border:2px solid #4682b4;
background-color:#4682b4;
color:white;
cursor:pointer;
text-align:center;
.title {
padding:4px;
align-items: center;
display:grid;
grid-template-columns: 80px auto;
gap:2px;
height:48px;
} }
.button .text {color:#ffffff}
.button:hover {
background-color:#ffffff;
color:#4682b4;
.active-button {
cursor:pointer;
align-items: center;
display:grid;
grid-template-columns: 48px auto;
gap:1px;
border-bottom:2px solid transparent;
background-color:#f3f3f3;
text-align: center;
padding:4px;
} }
.button:hover .text { color :#4682B4;}
.active { .active {
font-weight:bold;
/* font-family:verdana; */
cursor:pointer ;
border:2px solid transparent;
padding:4px; padding:4px;
cursor:pointer;
border-bottom:2px solid transparent ;
} }
.active:hover { border-bottom:2px solid #4682B4} .active:hover{
.current-plan { border-bottom:2px solid #ff6500;
border-color: #20B2AA #20B2AA transparent transparent;
border-style: solid;
border-width: 15px 15px 15px 15px;
height: 0px;
width: 0px;
} }
.bold { font-weight:bold; } .active-button:hover {
.caption { border-bottom:2px solid #ff6500;
font-size:28px; font-weight:bold ;
font-family:sans-serif;
text-transform:capitalize;
}
.medium-caption {
font-size:18px;
font-weight:lighter;
font-family:sans-serif ;
text-transform:capitalize;
} }
.plan { .active-button .icon {
padding:4px; padding:4px;
margin:4px; margin:4px;
border-radius: 4px;
border:1px solid #CAD5E0
}
.pricing {
display:grid;
grid-template-columns: repeat(auto-fit,minmax(250px, 1fr) );
/* align-content:center; */
} }
.pricing-frame {
display:grid;
height:70%; .ofooter {
align-content:center;
}
.footer {
bottom:10px;
position:fixed;
width: 80%;
padding:8spx;
text-align:center;
display:grid; display:grid;
grid-template-columns: 10% auto 10%; grid-template-columns: 115px auto 115px;
grid-gap: 2px; gap:2px;
align-items:center;
} }
.plan .title {
display:grid; .code {
grid-template-columns: auto 32px; background-color:#000000;
grid-gap:2px; color:#f3f3f3;
font-size:24px; font-family:verdana; text-transform: capitalize; border-bottom:1px solid #CAD5E0; }
.plan .feature {display:grid; grid-template-columns: 60% 40%; grid-gap:2px; margin:2px;}
.plan .feature .label {text-transform: uppercase; grid-column:1; font-size:14px;}
.plan .feature .status {font-size:20px; text-align: right; font-size:14px;}
.border{border:1px solid #CAD5E0;}
.border-round {
border-radius:8px;
-webkit-border-radius:8px;
-moz-border-radius:8px;
padding:8px; padding:8px;
font-family:courier;
font-size:14px;
} }
.border-bottom{ border-bottom:1px solid #CAD5E0}
.border-right{ border-right:1px solid #CAD5E0}
.border-left{ border-left:1px solid #CAD5E0}
.border-top{ border-top:1px solid #CAD5E0}
.left { float:left}
.small { font-family:sans-serif; font-size:11px; font-weight:lighter; color:#000000;}
.hidden {display:none}
.width-50{width:50%; padding:4px;}
.width-25{width:25%; padding:4px}
.height-48{height:48px;}
.fa-times {color:maroon; font-size:18px;}
.theme-dark-ocean .fa-check {color:green; font-size:18px}
.fa-check {color:#20B2AA; font-size:18px;} .menu .menu-item {
table { border:1px solid #CAD5E0; display:none;
border-radius:8px; position:absolute;
-webkit-border-radius:8px; z-index:9;
padding:4px; background-color:rgba(255,255,255,0.7);
font-weight:lighter;
font-family:sans-serif;
margin:4px;
} }
.action { .menu .menu-item div,li {font-weight:lighter}
cursor:pointer; .menu .menu-item li {margin:4px;}
padding:4px; .menu:hover .menu-item{
padding-left:10px; display:block;
padding-right:10px; height:auto;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
font-weight:bold;
color:#4682b4;
} }
.action:hover { background-color:#4682b4; color:white} .menu-item .active-button {
tr {font-family:sans-serif; font-size:14px;} margin-top:2px;
td {padding:4px; font-weight:lighter; padding:4px;} background:none
.gradient{
background-image: -ms-linear-gradient(top, #008080 -120%, #FFFFFF 50%, #005757 120%);
background-image: -moz-linear-gradient(top, #008080 -120%, #FFFFFF 50%, #005757 120%);
background-image: -o-linear-gradient(top, #008080 -120%, #FFFFFF 50%, #005757 120%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(-120, #008080), color-stop(50, #FFFFFF), color-stop(120, #005757));
background-image: -webkit-linear-gradient(top, #008080 -120%, #FFFFFF 50%, #005757 120%);
background-image: linear-gradient(to bottom, #008080 -120%, #FFFFFF 50%, #005757 120%);
} }
@media only screen and (min-device-width: 320px){ .signup {
table {width:99%} display:none;
img {width:28px}
.medium-caption {font-size:14px}
body {font-size:12px;}
.default {font-size:12px}
.height-48{height:40px}
.width-50{width:47%; padding:4px;}
.width-25{width:24%; padding:4px}
.pricing {display:block;}
.plan .title { font-size:18px; font-family:verdana; text-transform: capitalize; border-bottom:1px solid #CAD5E0; }
.plan .feature {display:grid; grid-template-columns: 60% 40%; grid-gap:4px; margin:4px}
.plan .feature .label {font-size:12px; text-transform: uppercase; grid-column:1}
.plan .feature .status {font-size:16px; text-align: right; font-size:14px;}
.header{display:none}
.caption {font-size:20px}
} }
@media only screen and (min-device-width: 768px){ iframe {width:100%; height:90%; border:1px solid transparent;}
body {font-size:12px}
.default {font-size:12px}
.header .logo{
display:grid;
margin:4px;
grid-template-columns: 48px auto ;
grid-gap:2px;
align-items: center;
}
.header .logo img {width:32px}
.header {display:block;}
table {width:70%; margin-left:20%}
.medium-caption {font-size:18px}
.width-50{width:50%; padding:4px;}
.width-25{width:25%; padding:4px}
.height-48{height:48px;}
.pricing {
display:grid;
grid-template-columns: repeat(auto-fit,minmax(250px, 1fr) )
}
.plan .title { padding:4px; font-size:22px; font-family:verdana; text-transform: capitalize; border-bottom:1px solid #CAD5E0; }
.plan .feature {display:grid; grid-template-columns: 60% 40%; grid-gap:4px; margin:4px; padding:4px;}
.plan .feature .label {text-transform: uppercase; grid-column:1}
.plan .feature .status {font-size:20px; text-align: right; font-size:14px;}
}

5
src/api/static/js/payment.js
Unescape View File

@ -9,10 +9,10 @@ payment.setup = function(context,pricing){
sessionStorage.customer = JSON.stringify({info:{}}) sessionStorage.customer = JSON.stringify({info:{}})
$('.payment-amount > input').on('focusin',function(){ $('.payment-amount > input').on('focusin',function(){
$('.payment-amount > .menu').slideDown('fast') $('.payment-amount > .payment-list').slideDown('fast')
}) })
$('.payment-amount > input').on('focusout',function(){ $('.payment-amount > input').on('focusout',function(){
$('.payment-amount > .menu').slideUp('slow') $('.payment-amount > .payment-list').slideUp('slow')
}) })
payment.init(0) payment.init(0)
@ -21,6 +21,7 @@ payment.setup = function(context,pricing){
$('.copyright').text(d.getFullYear()) $('.copyright').text(d.getFullYear())
if( $('.jxmodal').length == 0){ if( $('.jxmodal').length == 0){
$('.close-dialog').hide() $('.close-dialog').hide()
} }
} }

28
src/api/templates/card.html
Unescape View File

@ -2,7 +2,9 @@
<meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
<link rel="shortcut icon" href="{{product.images[0]}}"> <link rel="shortcut icon" href="{{product.images[0]}}">
<link rel="stylesheet" href="{{context}}/static/css/default.css" type="text/css">
<link rel="stylesheet" href="{{context}}/static/css/borders.css" type="text/css">
<link rel="stylesheet" href="{{context}}/static/css/fa/css/all.css" type="text/css"> <link rel="stylesheet" href="{{context}}/static/css/fa/css/all.css" type="text/css">
<script type="text/javascript" src="{{ context }}/static/css/fa/js/all.js"></script> <script type="text/javascript" src="{{ context }}/static/css/fa/js/all.js"></script>
<script type="text/javascript" src="{{ context }}/static/js/jquery/jquery.min.js"></script> <script type="text/javascript" src="{{ context }}/static/js/jquery/jquery.min.js"></script>
@ -12,11 +14,8 @@
<script src="{{context}}/static/js/jx/ext/modal.js"></script> <script src="{{context}}/static/js/jx/ext/modal.js"></script>
<script src="{{context}}/static/js/payment.js"></script> <script src="{{context}}/static/js/payment.js"></script>
<style> <style>
body {
font-family:sans-serif;
margin:0px;
}
/*.frame { /*.frame {
font-size:16px; font-size:16px;
@ -71,7 +70,7 @@
.lname {width:100%} .lname {width:100%}
*/ */
.card-info .amount {text-align:right;} .card-info .amount {text-align:right;}
.payment-amount .menu {display:none; position:absolute; z-index:9; background-color:#ffffff; padding:4px;} .payment-amount .payment-list {display:none; position:absolute; z-index:9; background-color:#ffffff; padding:4px;}
input { input {
height:48px; height:48px;
border:2px solid transparent; border:2px solid transparent;
@ -119,9 +118,9 @@
font-weight:bold ; font-weight:bold ;
color:#4682B4 ; color:#4682B4 ;
} */ } */
@media only screen and (max-device-width: 960px){ @media only screen and (max-width: 960px){
body {font-size:14px; font-family:sans-serif; font-weight:lighter; line-height: 20px;} /*body {font-size:14px; font-family:sans-serif; font-weight:lighter; line-height: 20px;}*/
.payment-pane {display:grid; justify-items:center; align-items:center; height:auto;} .payment-pane {display:grid; justify-items:center; align-items:center; height:auto; min-width:350px; max-width:450px}
.frame { .frame {
@ -158,8 +157,8 @@
} }
@media only screen and (min-device-width: 1024px){ @media only screen and (min-width: 1024px){
body {font-size:14px; font-family:sans-serif; font-weight:lighter; line-height: 28px;} /*body {font-size:14px; font-family:sans-serif; font-weight:lighter; line-height: 28px;}*/
.payment-pane {display:grid; justify-items:center; align-items:center; height:96%;} .payment-pane {display:grid; justify-items:center; align-items:center; height:96%;}
.frame { .frame {
width:800px; width:800px;
@ -187,7 +186,7 @@
.card input {width:100%; } .card input {width:100%; }
.pay-frame {margin-top:30px;} .pay-frame {margin-top:30px;}
} }
@media only screen and (min-device-width: 1080px){ @media only screen and (min-width: 1080px){
.-frame {width:800px} .-frame {width:800px}
} }
@media only screen and (min-device-width: 1920px){ @media only screen and (min-device-width: 1920px){
@ -196,6 +195,7 @@
</style> </style>
<script > <script >
$(document).ready(function(){ $(document).ready(function(){
$('head').append('<link rel="stylesheet" href="{{context}}/static/css/default.css" type="text/css">')
payment.dialog('','Loading ...','PROGRESS') payment.dialog('','Loading ...','PROGRESS')
payment.setup("{{context|safe}}",{{pricing|tojson}}) payment.setup("{{context|safe}}",{{pricing|tojson}})
@ -231,7 +231,7 @@
<div class="frame"> <div class="frame">
<div class="caption title" align="center" style="display:grid; gap:2px; grid-template-columns: auto 32px; align-items:center; justify-items:center"> <div class="caption title" align="center" style="display:grid; gap:2px; grid-template-columns: auto 32px; align-items:center; justify-items:center">
<div>{{product.name}}</div> <div class="bold">{{product.name}}</div>
<div class="active close-dialog" onclick="jx.modal.close()"><i class="fa fa-times"></i></div> <div class="active close-dialog" onclick="jx.modal.close()"><i class="fa fa-times"></i></div>
</div> </div>
@ -267,7 +267,7 @@
<div class="" style="display:grid; grid-template-columns:50% auto; gap:2px"> <div class="" style="display:grid; grid-template-columns:50% auto; gap:2px">
<div class="payment-amount"> <div class="payment-amount">
<input type="text" id="amount" class="amount" readonly="true" title="Amount" placeholder="00.00" onchange="payment.validate(event)" style="text-align:right"/> <input type="text" id="amount" class="amount" readonly="true" title="Amount" placeholder="00.00" onchange="payment.validate(event)" style="text-align:right"/>
<div class="border menu" style="margin:4px"> <div class="border payment-list" style="margin:4px">
<div style="margin:4px;">Choose an amount</div> <div style="margin:4px;">Choose an amount</div>
{%for item in pricing %} {%for item in pricing %}
<div class="item active" style="font-weight:lighter" onclick="payment.init({{loop.index -1 }})"> <div class="item active" style="font-weight:lighter" onclick="payment.init({{loop.index -1 }})">

Write Preview
Loading…
Cancel
Save