Skip to content

V
virtualX
Commit 0448d988 authored by Nameer AS's avatar Nameer AS
Browse files
Options

stacktable implementation

parent 2ab12d66
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1215 additions and 677 deletions
src/assets/fonts/bkup/icon.css 0 → 100644
View file @ 0448d988
This diff is collapsed.
src/assets/fonts/bkup/virtualx.svg 0 → 100644
View file @ 0448d988
This diff is collapsed.
src/assets/fonts/icon.css
View file @ 0448d988
This diff is collapsed.
src/assets/fonts/virtualx.svg
View file @ 0448d988
This diff is collapsed.
src/assets/js/app.js
View file @ 0448d988
......@@ -12,5 +12,6 @@ require('./jquery.counterup.js');
require('./jquery.hoverdir.js');
require('./SmoothScroll.js');
require('./owl.carousel.js');
require('@fortawesome/fontawesome')
require('@fortawesome/fontawesome');
require('./stacktable.js');
require('./main.js');
\ No newline at end of file
src/assets/js/main.js
View file @ 0448d988
$(document).ready(function() {
$(document).foundation();
var headerHeight;
$('.search span.search-top').on('click', function() {
$('.search span.search-top').on('click', function(event) {
event.stopPropagation();
$('#search-block').animate({
width: "toggle"
......@@ -22,7 +22,9 @@ $(document).ready(function() {
'height': 'calc(100% - ' + hdHeight + 'px)'
});
};
headerHeight = $('header').outerHeight();
navHeight(headerHeight);
$('body').css({
'paddingTop': headerHeight
......@@ -34,11 +36,13 @@ $(document).ready(function() {
scrollTop: $(nextDiv).offset().top - $('header').outerHeight()
}, 500)
});
setTimeout(function() {
$('.navigation ').css({
marginTop: $('header').outerHeight(),
transition: 'all 0.5s ease'
});
}, 500);
$('.navigation ').css({
marginTop: headerHeight,
transition: 'all 0.5s ease'
});
window.addEventListener("orientationchange", function(e) {
window.setTimeout(function() {
headerHeight = $('header').outerHeight();
......@@ -99,11 +103,10 @@ $(document).ready(function() {
function scrollTo() {
var child = $('.smooth-scroll');
child.on('click', function(e) {
e.preventDefault();
var secId = $(this).attr('href');
child.on('click', function() {
var secId = $(this).attr('href').split('#')[1];
$('html,body').animate({
scrollTop: $(secId).offset().top - $('header').outerHeight()
scrollTop: $('#' + secId).offset().top - $('header').outerHeight()
}, 1500);
});
};
......@@ -114,6 +117,7 @@ $(document).ready(function() {
loop: true,
margin: 60,
nav: false,
autoplay: true,
responsive: {
0: {
items: 1,
......@@ -146,7 +150,6 @@ $(document).ready(function() {
$('.select-plan ul li').click(function() {
$(this).parents('.select-plan').toggleClass('active');
var curTab = $(this).attr('data-plan');
console.log(curTab);
$(this).siblings().slideToggle();
$(this).parent().prepend(this);
$('.plan-detail').hide();
......@@ -156,5 +159,49 @@ $(document).ready(function() {
$('.hamburger-menu').on('click', function() {
$('.navigation').toggleClass('active');
});
};
$('.table-scroll .vx-table').cardtable();
$('.search-result .item-block').each(function() {
if ($(this).children().length === 0) {
$(this).remove();
}
});
$('input[type="radio"]').click(function() {
if ($(this).attr('id') == 'card-pay') {
$('.card-details').addClass('active');
} else {
$('.card-details').removeClass('active');
}
});
if ($('#card-pay').prop('checked')) {
$('.card-details').addClass('active');
}
var inputTypes = {
text: document.querySelectorAll('input[type="text"]'),
password: document.querySelectorAll('input[type="password"]'),
textarea: document.querySelectorAll('textarea')
}
$.each(inputTypes, function(key, value) {
var valueArr = $.makeArray(value);
$.each(valueArr, function(index, value) {
if ($(value).val()) {
$(this).attr('data-focus', 'true');
} else {
$(this).attr('data-focus', 'false')
}
$(value).on('change keydown paste input', function() {
if ($(this).val()) {
$(this).attr('data-focus', 'true')
} else {
$(this).attr('data-focus', 'false')
}
});
});
});
});
\ No newline at end of file
src/assets/js/stacktable.js 0 → 100644
View file @ 0448d988
/**
* stacktable.js
* Author & copyright (c) 2012: John Polacek
* CardTable by: Justin McNally (2015)
* MIT license
*
* Page: http://johnpolacek.github.com/stacktable.js
* Repo: https://github.com/johnpolacek/stacktable.js/
*
* jQuery plugin for stacking tables on small screens
* Requires jQuery version 1.7 or above
*
*/
;
(function($) {
$.fn.cardtable = function(options) {
var $tables = this,
defaults = { headIndex: 0 },
settings = $.extend({}, defaults, options),
headIndex;
// checking the "headIndex" option presence... or defaults it to 0
if (options && options.headIndex)
headIndex = options.headIndex;
else
headIndex = 0;
return $tables.each(function() {
var $table = $(this);
if ($table.hasClass('stacktable')) {
return;
}
var table_css = $(this).prop('class');
var $stacktable = $('<div></div>');
if (typeof settings.myClass !== 'undefined') $stacktable.addClass(settings.myClass);
var markup = '';
var $caption, $topRow, headMarkup, bodyMarkup, tr_class;
$table.addClass('stacktable large-only');
$caption = $table.find(">caption").clone();
$topRow = $table.find('>thead>tr,>tbody>tr,>tfoot>tr,>tr').eq(0);
// avoid duplication when paginating
$table.siblings().filter('.small-only').remove();
// using rowIndex and cellIndex in order to reduce ambiguity
$table.find('>tbody>tr').each(function() {
// declaring headMarkup and bodyMarkup, to be used for separately head and body of single records
headMarkup = '';
bodyMarkup = '';
tr_class = $(this).prop('class');
// for the first row, "headIndex" cell is the head of the table
// for the other rows, put the "headIndex" cell as the head for that row
// then iterate through the key/values
$(this).find('>td,>th').each(function(cellIndex) {
if ($(this).html() !== '') {
bodyMarkup += '<tr class="' + tr_class + '">';
if ($topRow.find('>td,>th').eq(cellIndex).html()) {
bodyMarkup += '<td class="st-key">' + $topRow.find('>td,>th').eq(cellIndex).html() + '</td>';
} else {
bodyMarkup += '<td class="st-key"></td>';
}
bodyMarkup += '<td class="st-val ' + $(this).prop('class') + '">' + $(this).html() + '</td>';
bodyMarkup += '</tr>';
}
});
markup += '<table class=" ' + table_css + ' stacktable small-only"><tbody>' + headMarkup + bodyMarkup + '</tbody></table>';
});
$table.find('>tfoot>tr>td').each(function(rowIndex, value) {
if ($.trim($(value).text()) !== '') {
markup += '<table class="' + table_css + ' stacktable small-only"><tbody><tr><td>' + $(value).html() + '</td></tr></tbody></table>';
}
});
$stacktable.prepend($caption);
$stacktable.append($(markup));
$table.before($stacktable);
});
};
$.fn.stacktable = function(options) {
var $tables = this,
defaults = { headIndex: 0, displayHeader: true },
settings = $.extend({}, defaults, options),
headIndex;
// checking the "headIndex" option presence... or defaults it to 0
if (options && options.headIndex)
headIndex = options.headIndex;
else
headIndex = 0;
return $tables.each(function() {
var table_css = $(this).prop('class');
var $stacktable = $('<table class="' + table_css + ' stacktable small-only"><tbody></tbody></table>');
if (typeof settings.myClass !== 'undefined') $stacktable.addClass(settings.myClass);
var markup = '';
var $table, $caption, $topRow, headMarkup, bodyMarkup, tr_class, displayHeader;
$table = $(this);
$table.addClass('stacktable large-only');
$caption = $table.find(">caption").clone();
$topRow = $table.find('>thead>tr,>tbody>tr,>tfoot>tr').eq(0);
displayHeader = $table.data('display-header') === undefined ? settings.displayHeader : $table.data('display-header');
// using rowIndex and cellIndex in order to reduce ambiguity
$table.find('>tbody>tr, >thead>tr').each(function(rowIndex) {
// declaring headMarkup and bodyMarkup, to be used for separately head and body of single records
headMarkup = '';
bodyMarkup = '';
tr_class = $(this).prop('class');
// for the first row, "headIndex" cell is the head of the table
if (rowIndex === 0) {
// the main heading goes into the markup variable
if (displayHeader) {
markup += '<tr class=" ' + tr_class + ' "><th class="st-head-row st-head-row-main" colspan="2">' + $(this).find('>th,>td').eq(headIndex).html() + '</th></tr>';
}
} else {
// for the other rows, put the "headIndex" cell as the head for that row
// then iterate through the key/values
$(this).find('>td,>th').each(function(cellIndex) {
if (cellIndex === headIndex) {
headMarkup = '<tr class="' + tr_class + '"><th class="st-head-row" colspan="2">' + $(this).html() + '</th></tr>';
} else {
if ($(this).html() !== '') {
bodyMarkup += '<tr class="' + tr_class + '">';
if ($topRow.find('>td,>th').eq(cellIndex).html()) {
bodyMarkup += '<td class="st-key">' + $topRow.find('>td,>th').eq(cellIndex).html() + '</td>';
} else {
bodyMarkup += '<td class="st-key"></td>';
}
bodyMarkup += '<td class="st-val ' + $(this).prop('class') + '">' + $(this).html() + '</td>';
bodyMarkup += '</tr>';
}
}
});
markup += headMarkup + bodyMarkup;
}
});
$stacktable.prepend($caption);
$stacktable.append($(markup));
$table.before($stacktable);
});
};
$.fn.stackcolumns = function(options) {
var $tables = this,
defaults = {},
settings = $.extend({}, defaults, options);
return $tables.each(function() {
var $table = $(this);
var $caption = $table.find(">caption").clone();
var num_cols = $table.find('>thead>tr,>tbody>tr,>tfoot>tr').eq(0).find('>td,>th').length; //first table <tr> must not contain colspans, or add sum(colspan-1) here.
if (num_cols < 3) //stackcolumns has no effect on tables with less than 3 columns
return;
var $stackcolumns = $('<table class="stacktable small-only"></table>');
if (typeof settings.myClass !== 'undefined') $stackcolumns.addClass(settings.myClass);
$table.addClass('stacktable large-only');
var tb = $('<tbody></tbody>');
var col_i = 1; //col index starts at 0 -> start copy at second column.
while (col_i < num_cols) {
$table.find('>thead>tr,>tbody>tr,>tfoot>tr').each(function(index) {
var tem = $('<tr></tr>'); // todo opt. copy styles of $this; todo check if parent is thead or tfoot to handle accordingly
if (index === 0) tem.addClass("st-head-row st-head-row-main");
var first = $(this).find('>td,>th').eq(0).clone().addClass("st-key");
var target = col_i;
// if colspan apply, recompute target for second cell.
if ($(this).find("*[colspan]").length) {
var i = 0;
$(this).find('>td,>th').each(function() {
var cs = $(this).attr("colspan");
if (cs) {
cs = parseInt(cs, 10);
target -= cs - 1;
if ((i + cs) > (col_i)) //out of current bounds
target += i + cs - col_i - 1;
i += cs;
} else {
i++;
}
if (i > col_i)
return false; //target is set; break.
});
}
var second = $(this).find('>td,>th').eq(target).clone().addClass("st-val").removeAttr("colspan");
tem.append(first, second);
tb.append(tem);
});
++col_i;
}
$stackcolumns.append($(tb));
$stackcolumns.prepend($caption);
$table.before($stackcolumns);
});
};
}(jQuery));
\ No newline at end of file
src/assets/scss/_main.scss
View file @ 0448d988
......@@ -400,21 +400,58 @@ header {
}
}
input[readonly]~label {
font-size: 12px;
-webkit-transform: translate3d(0, -12px, 0);
transform: translate3d(0, -12px, 0);
}
.account-setting {
.large-9.medium-8.cell {
width: 100%;
}
}
input,
textarea {
&:valid {
~label {
font-size: 12px;
transform: translate3d(0, -12px, 0);
&.checkmark {
transform: inherit;
opacity: 1;
}
}
}
}
.form-wrap {
*[data-focus="false"] {
&~label {
transform: translate3d(0, 5px, 0);
}
}
*[data-focus="true"],
*[data-focus="false"]:focus {
&~label {
opacity: 0.3;
font-size: 12px;
-webkit-transform: translate3d(0, -12px, 0);
transform: translate3d(0, -12px, 0);
}
}
&.form-adj {
input {
margin: 0 0 64px;
margin: 0 0 79px;
&:focus {
margin: 0 0 64px;
margin: 0 0 79px;
}
}
select,
select:focus {
margin-bottom: 0 !important;
}
label {
transform: translate3d(0, 0, 0);
}
.checkbox {
margin: 0 0 30px;
}
......@@ -435,7 +472,7 @@ header {
textarea,
select {
font-family: "Roboto", sans-serif;
background: transparent;
background-color: transparent;
color: #fff;
border: none;
border-bottom: solid 1px #514949;
......@@ -507,7 +544,7 @@ header {
}
}
label {
transform: translate3d(0, 5px, 0);
// transform: translate3d(0, 5px, 0);
position: absolute;
color: #fff;
opacity: 0.3;
......@@ -515,6 +552,10 @@ header {
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
z-index: -4;
left: 15px;
right: 15px;
pointer-events: none;
&.checkmark {
transform: inherit;
}
......@@ -527,18 +568,6 @@ header {
padding-bottom: 0;
position: relative;
z-index: 9;
&:focus,
&:valid {
~label {
opacity: 0.3;
font-size: 12px;
transform: translate3d(0, -12px, 0);
&.checkmark {
transform: inherit;
opacity: 1;
}
}
}
}
&.red {
background: $highlight-color;
......@@ -582,6 +611,12 @@ header {
width: 100%;
margin: 0 0 25px;
border: solid 1px #d7d7d7;
&.card-details {
display: none;
&.active {
display: inline-block;
}
}
&.marg-adj {
input {
margin: 0 0 20px;
......@@ -826,7 +861,7 @@ nav {
&+li {
&:before {
font-family: 'virtualx';
content: "\e903";
content: "\e904";
position: absolute;
width: 15px;
height: 15px;
......@@ -1544,9 +1579,9 @@ nav {
img {
max-width: 150px;
margin: 0 auto;
filter: grayscale(1);
filter: grayscale(0);
&:hover {
filter: grayscale(0);
filter: grayscale(1);
}
}
}
......@@ -1732,20 +1767,25 @@ footer {
display: flex;
flex-wrap: wrap;
.item-block {
flex: 1 1 50%;
flex: 0 1 50%;
}
}
h5 {
color: #cb022c;
font-size: 20px;
font-weight: normal;
margin: 0 0 20px;
a {
color: #cb022c;
font-size: 20px;
font-weight: normal;
}
}
p {
line-height: 25px;
font-size: 18px;
color: rgba(255, 255, 255, 0.3);
}
mark {
background-color: #9a9a9a;
}
.item-block {
padding-bottom: 65px;
&:nth-child(2n+1) {
......@@ -1762,6 +1802,10 @@ footer {
}
}
#error_explanation .panel {
border: none;
}
.vx-table {
border-bottom: none;
border-color: transparent;
......@@ -1796,6 +1840,11 @@ footer {
select {
border-bottom: solid 1px #d7d7d7;
}
*[data-focus="false"]:valid~label {
font-size: 12px;
-webkit-transform: translate3d(0, -12px, 0);
transform: translate3d(0, -12px, 0);
}
}
}
......@@ -1818,4 +1867,60 @@ footer {
100% {
transform: rotate(360deg);
}
}
// table responsive
.stacktable {
width: 100%;
}
.st-head-row {
padding-top: 1em;
}
.st-head-row.st-head-row-main {
font-size: 1.5em;
padding-top: 0;
}
.st-key {
width: 49%;
text-align: right;
padding-right: 1%;
}
.st-val {
width: 49%;
padding-left: 1%;
}
/* RESPONSIVE EXAMPLE */
.stacktable.large-only {
display: table;
}
.stacktable.small-only {
display: none;
}
.grid-cont .medium-4.cell {
display: flex;
flex-wrap: wrap;
.plan-type {
border: none;
a.button {
margin: 0 0 10px;
}
}
}
@media (max-width: 800px) {
.stacktable.large-only {
display: none;
}
.stacktable.small-only {
display: table;
}
}
\ No newline at end of file
src/assets/scss/_responsive.scss
View file @ 0448d988
......@@ -19,6 +19,14 @@
}
}
@media (min-width: 768px) {
.vx-table tr,
.vx-table th,
.vx-table td {
white-space: nowrap;
}
}
@media(min-width: 768px) and(max-width: 1200px) {
h1 {
font-size: 32px;
......@@ -195,6 +203,9 @@
}
@media (max-width: 767px) {
.table-scroll table {
width: 100%;
}
nav.off-canvas.is-open {
transform: translate(0, 0)
}
......
src/pages/make-payment.html
View file @ 0448d988
......@@ -25,9 +25,9 @@
<div class="panel-body">
<div class="payment-type">
<div class="radio-wrap">
<input class="margin-0" type="radio" name="payment_method" checked>
<input id="card-pay" class="margin-0" type="radio" name="payment_method" checked>
<label for="" class="checkmark">
<img src="assets/img/card-pay.png" alt="">
<img src="assets/img/card-pay.png" alt="" >
</label>
</div>
<div class="radio-wrap">
......@@ -43,7 +43,7 @@
</div>
</div>
<div class="large-7 medium-12 cell">
<div class="panel">
<div class="panel card-details">
<div class="panel-head">Card Details</div>
<div class="panel-body padding">
<div class="grid-x grid-padding-x">
......
src/partials/header.html
View file @ 0448d988
......@@ -84,35 +84,36 @@
</div>
<ul class="vertical menu">
<li>
<a href="#home" class='smooth-scroll'>
<a href="index.html#home" class='smooth-scroll'>
<i class="icon-home-menu"></i> Home
</a>
</li>
<li>
<a href="#features" class='smooth-scroll'>
<a href="index.html#features" class='smooth-scroll'>
<i class="icon-features-menu"></i> Features
</a>
</li>
<li>
<a href="#services" class='smooth-scroll'>
<a href="index.html#services" class='smooth-scroll'>
<i class="icon-services-menu"></i> Services
</a>
</li>
<li>
<a href="#pricing" class='smooth-scroll'>
<a href="index.html#pricing" class='smooth-scroll'>
<i class="icon-pricetag-menu"></i> Pricing
</a>
</li>
<li>
<a href="#demo" class='smooth-scroll'>
<a href="index.html#demo" class='smooth-scroll'>
<i class="icon-demo"></i> Demo
</a>
</li>
<li>
<a href="#contact" class='smooth-scroll'>
<a href="index.html#contact" class='smooth-scroll'>
<i class="icon-contacts-menu"></i> Contact Us
</a>
</li>
<li><a href="/en/admin/dashboard"><i class="icon-vir-dashboard"></i>Dashboard</a></li>
</ul>
</nav>
</div>
......
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