Skip to content

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

stacktable implementation

parent 2ab12d66
Expand all Show 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'); ...@@ -12,5 +12,6 @@ require('./jquery.counterup.js');
require('./jquery.hoverdir.js'); require('./jquery.hoverdir.js');
require('./SmoothScroll.js'); require('./SmoothScroll.js');
require('./owl.carousel.js'); require('./owl.carousel.js');
require('@fortawesome/fontawesome') require('@fortawesome/fontawesome');
require('./stacktable.js');
require('./main.js'); require('./main.js');
\ No newline at end of file
src/assets/js/main.js
View file @ 0448d988
$(document).ready(function() { $(document).ready(function() {
$(document).foundation(); $(document).foundation();
var headerHeight; var headerHeight;
$('.search span.search-top').on('click', function() { $('.search span.search-top').on('click', function(event) {
event.stopPropagation(); event.stopPropagation();
$('#search-block').animate({ $('#search-block').animate({
width: "toggle" width: "toggle"
...@@ -22,7 +22,9 @@ $(document).ready(function() { ...@@ -22,7 +22,9 @@ $(document).ready(function() {
'height': 'calc(100% - ' + hdHeight + 'px)' 'height': 'calc(100% - ' + hdHeight + 'px)'
}); });
}; };
headerHeight = $('header').outerHeight(); headerHeight = $('header').outerHeight();
navHeight(headerHeight); navHeight(headerHeight);
$('body').css({ $('body').css({
'paddingTop': headerHeight 'paddingTop': headerHeight
...@@ -34,11 +36,13 @@ $(document).ready(function() { ...@@ -34,11 +36,13 @@ $(document).ready(function() {
scrollTop: $(nextDiv).offset().top - $('header').outerHeight() scrollTop: $(nextDiv).offset().top - $('header').outerHeight()
}, 500) }, 500)
}); });
setTimeout(function() {
$('.navigation ').css({ $('.navigation ').css({
marginTop: headerHeight, marginTop: $('header').outerHeight(),
transition: 'all 0.5s ease' transition: 'all 0.5s ease'
}); });
}, 500);
window.addEventListener("orientationchange", function(e) { window.addEventListener("orientationchange", function(e) {
window.setTimeout(function() { window.setTimeout(function() {
headerHeight = $('header').outerHeight(); headerHeight = $('header').outerHeight();
...@@ -99,11 +103,10 @@ $(document).ready(function() { ...@@ -99,11 +103,10 @@ $(document).ready(function() {
function scrollTo() { function scrollTo() {
var child = $('.smooth-scroll'); var child = $('.smooth-scroll');
child.on('click', function(e) { child.on('click', function() {
e.preventDefault(); var secId = $(this).attr('href').split('#')[1];
var secId = $(this).attr('href');
$('html,body').animate({ $('html,body').animate({
scrollTop: $(secId).offset().top - $('header').outerHeight() scrollTop: $('#' + secId).offset().top - $('header').outerHeight()
}, 1500); }, 1500);
}); });
}; };
...@@ -114,6 +117,7 @@ $(document).ready(function() { ...@@ -114,6 +117,7 @@ $(document).ready(function() {
loop: true, loop: true,
margin: 60, margin: 60,
nav: false, nav: false,
autoplay: true,
responsive: { responsive: {
0: { 0: {
items: 1, items: 1,
...@@ -146,7 +150,6 @@ $(document).ready(function() { ...@@ -146,7 +150,6 @@ $(document).ready(function() {
$('.select-plan ul li').click(function() { $('.select-plan ul li').click(function() {
$(this).parents('.select-plan').toggleClass('active'); $(this).parents('.select-plan').toggleClass('active');
var curTab = $(this).attr('data-plan'); var curTab = $(this).attr('data-plan');
console.log(curTab);
$(this).siblings().slideToggle(); $(this).siblings().slideToggle();
$(this).parent().prepend(this); $(this).parent().prepend(this);
$('.plan-detail').hide(); $('.plan-detail').hide();
...@@ -156,5 +159,49 @@ $(document).ready(function() { ...@@ -156,5 +159,49 @@ $(document).ready(function() {
$('.hamburger-menu').on('click', function() { $('.hamburger-menu').on('click', function() {
$('.navigation').toggleClass('active'); $('.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 { ...@@ -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 { .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 { &.form-adj {
input { input {
margin: 0 0 64px; margin: 0 0 79px;
&:focus { &:focus {
margin: 0 0 64px; margin: 0 0 79px;
} }
} }
select, select,
select:focus { select:focus {
margin-bottom: 0 !important; margin-bottom: 0 !important;
} }
label {
transform: translate3d(0, 0, 0);
}
.checkbox { .checkbox {
margin: 0 0 30px; margin: 0 0 30px;
} }
...@@ -435,7 +472,7 @@ header { ...@@ -435,7 +472,7 @@ header {
textarea, textarea,
select { select {
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
background: transparent; background-color: transparent;
color: #fff; color: #fff;
border: none; border: none;
border-bottom: solid 1px #514949; border-bottom: solid 1px #514949;
...@@ -507,7 +544,7 @@ header { ...@@ -507,7 +544,7 @@ header {
} }
} }
label { label {
transform: translate3d(0, 5px, 0); // transform: translate3d(0, 5px, 0);
position: absolute; position: absolute;
color: #fff; color: #fff;
opacity: 0.3; opacity: 0.3;
...@@ -515,6 +552,10 @@ header { ...@@ -515,6 +552,10 @@ header {
transition: 0.2s ease all; transition: 0.2s ease all;
-moz-transition: 0.2s ease all; -moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all; -webkit-transition: 0.2s ease all;
z-index: -4;
left: 15px;
right: 15px;
pointer-events: none;
&.checkmark { &.checkmark {
transform: inherit; transform: inherit;
} }
...@@ -527,18 +568,6 @@ header { ...@@ -527,18 +568,6 @@ header {
padding-bottom: 0; padding-bottom: 0;
position: relative; position: relative;
z-index: 9; z-index: 9;
&:focus,
&:valid {
~label {
opacity: 0.3;
font-size: 12px;
transform: translate3d(0, -12px, 0);
&.checkmark {
transform: inherit;
opacity: 1;
}
}
}
} }
&.red { &.red {
background: $highlight-color; background: $highlight-color;
...@@ -582,6 +611,12 @@ header { ...@@ -582,6 +611,12 @@ header {
width: 100%; width: 100%;
margin: 0 0 25px; margin: 0 0 25px;
border: solid 1px #d7d7d7; border: solid 1px #d7d7d7;
&.card-details {
display: none;
&.active {
display: inline-block;
}
}
&.marg-adj { &.marg-adj {
input { input {
margin: 0 0 20px; margin: 0 0 20px;
...@@ -826,7 +861,7 @@ nav { ...@@ -826,7 +861,7 @@ nav {
&+li { &+li {
&:before { &:before {
font-family: 'virtualx'; font-family: 'virtualx';
content: "\e903"; content: "\e904";
position: absolute; position: absolute;
width: 15px; width: 15px;
height: 15px; height: 15px;
...@@ -1544,9 +1579,9 @@ nav { ...@@ -1544,9 +1579,9 @@ nav {
img { img {
max-width: 150px; max-width: 150px;
margin: 0 auto; margin: 0 auto;
filter: grayscale(1);
&:hover {
filter: grayscale(0); filter: grayscale(0);
&:hover {
filter: grayscale(1);
} }
} }
} }
...@@ -1732,20 +1767,25 @@ footer { ...@@ -1732,20 +1767,25 @@ footer {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
.item-block { .item-block {
flex: 1 1 50%; flex: 0 1 50%;
} }
} }
h5 { h5 {
margin: 0 0 20px;
a {
color: #cb022c; color: #cb022c;
font-size: 20px; font-size: 20px;
font-weight: normal; font-weight: normal;
margin: 0 0 20px; }
} }
p { p {
line-height: 25px; line-height: 25px;
font-size: 18px; font-size: 18px;
color: rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.3);
} }
mark {
background-color: #9a9a9a;
}
.item-block { .item-block {
padding-bottom: 65px; padding-bottom: 65px;
&:nth-child(2n+1) { &:nth-child(2n+1) {
...@@ -1762,6 +1802,10 @@ footer { ...@@ -1762,6 +1802,10 @@ footer {
} }
} }
#error_explanation .panel {
border: none;
}
.vx-table { .vx-table {
border-bottom: none; border-bottom: none;
border-color: transparent; border-color: transparent;
...@@ -1796,6 +1840,11 @@ footer { ...@@ -1796,6 +1840,11 @@ footer {
select { select {
border-bottom: solid 1px #d7d7d7; border-bottom: solid 1px #d7d7d7;
} }
*[data-focus="false"]:valid~label {
font-size: 12px;
-webkit-transform: translate3d(0, -12px, 0);
transform: translate3d(0, -12px, 0);
}
} }
} }
...@@ -1819,3 +1868,59 @@ footer { ...@@ -1819,3 +1868,59 @@ footer {
transform: rotate(360deg); 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 @@ ...@@ -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) { @media(min-width: 768px) and(max-width: 1200px) {
h1 { h1 {
font-size: 32px; font-size: 32px;
...@@ -195,6 +203,9 @@ ...@@ -195,6 +203,9 @@
} }
@media (max-width: 767px) { @media (max-width: 767px) {
.table-scroll table {
width: 100%;
}
nav.off-canvas.is-open { nav.off-canvas.is-open {
transform: translate(0, 0) transform: translate(0, 0)
} }
......
src/pages/make-payment.html
View file @ 0448d988
...@@ -25,9 +25,9 @@ ...@@ -25,9 +25,9 @@
<div class="panel-body"> <div class="panel-body">
<div class="payment-type"> <div class="payment-type">
<div class="radio-wrap"> <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"> <label for="" class="checkmark">
<img src="assets/img/card-pay.png" alt=""> <img src="assets/img/card-pay.png" alt="" >
</label> </label>
</div> </div>
<div class="radio-wrap"> <div class="radio-wrap">
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,7 @@
</div> </div>
</div> </div>
<div class="large-7 medium-12 cell"> <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-head">Card Details</div>
<div class="panel-body padding"> <div class="panel-body padding">
<div class="grid-x grid-padding-x"> <div class="grid-x grid-padding-x">
......
src/partials/header.html
View file @ 0448d988
...@@ -84,35 +84,36 @@ ...@@ -84,35 +84,36 @@
</div> </div>
<ul class="vertical menu"> <ul class="vertical menu">
<li> <li>
<a href="#home" class='smooth-scroll'> <a href="index.html#home" class='smooth-scroll'>
<i class="icon-home-menu"></i> Home <i class="icon-home-menu"></i> Home
</a> </a>
</li> </li>
<li> <li>
<a href="#features" class='smooth-scroll'> <a href="index.html#features" class='smooth-scroll'>
<i class="icon-features-menu"></i> Features <i class="icon-features-menu"></i> Features
</a> </a>
</li> </li>
<li> <li>
<a href="#services" class='smooth-scroll'> <a href="index.html#services" class='smooth-scroll'>
<i class="icon-services-menu"></i> Services <i class="icon-services-menu"></i> Services
</a> </a>
</li> </li>
<li> <li>
<a href="#pricing" class='smooth-scroll'> <a href="index.html#pricing" class='smooth-scroll'>
<i class="icon-pricetag-menu"></i> Pricing <i class="icon-pricetag-menu"></i> Pricing
</a> </a>
</li> </li>
<li> <li>
<a href="#demo" class='smooth-scroll'> <a href="index.html#demo" class='smooth-scroll'>
<i class="icon-demo"></i> Demo <i class="icon-demo"></i> Demo
</a> </a>
</li> </li>
<li> <li>
<a href="#contact" class='smooth-scroll'> <a href="index.html#contact" class='smooth-scroll'>
<i class="icon-contacts-menu"></i> Contact Us <i class="icon-contacts-menu"></i> Contact Us
</a> </a>
</li> </li>
<li><a href="/en/admin/dashboard"><i class="icon-vir-dashboard"></i>Dashboard</a></li>
</ul> </ul>
</nav> </nav>
</div> </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