Skip to content

Commit

Permalink
Move application logic to separate file, and add "refresh"-button in …
Browse files Browse the repository at this point in the history
…the menu.

- Moved all logic to "mtphp.php" (away from index.php)
- Added a button in the top right to refresh (only) the app you're
currently using.
- Fixed overflow issue on Internet Explorer (scrollbars would appear in
the top menu).
  • Loading branch information
mescon committed Jan 14, 2016
1 parent 1fc5f3e commit 09a1e33
Show file tree
Hide file tree
Showing 4 changed files with 111 additions and 74 deletions.
40 changes: 31 additions & 9 deletions css/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -39,33 +39,43 @@ Main components
-------------------------------- */

.cd-tabs nav {
overflow: auto;
overflow: hidden;
-webkit-overflow-scrolling: touch;
box-shadow: inset 0 -2px 3px rgba(203, 196, 130, 0.06);
}
}

@media only screen and (min-width: 0px) {
.cd-tabs nav {
overflow: auto;
margin: 0;
position: relative;
float: none;
background: transparent;
box-shadow: none;
}
}


.cd-tabs-navigation {
width: 360px;
}

.cd-tabs-navigation:after {
content: "";
display: table;
clear: both;
}

.cd-tabs-navigation li {
float: left;
}
.cd-tabs-navigation a {

.cd-tabs-navigation li:last-child {
float: right;
right: 0px;
}

.cd-tabs-navigation a, #reload {
position: relative;
display: block;
height: 160px;
Expand All @@ -79,22 +89,29 @@ Main components
color: #747b8b;
padding-top: 32px;
}
.no-touch .cd-tabs-navigation a:hover {

#reload, .cd-tabs-navigation li {
cursor: pointer;
}

.no-touch .cd-tabs-navigation a:hover, #reload:hover {
color: #f1f3f2; /* Hover text colour */
background-color: rgba(233, 230, 202, 0.3);
}
.cd-tabs-navigation a.selected {

.cd-tabs-navigation a.selected:not(#reload) {
background-color: #41434f !important; /* Selected tab colour */
color: #f1f3f2; /* Selected text colour */
}

@media only screen and (min-width: 0px) {
.cd-tabs-navigation {
/* tabbed on top of devices */
width: 100%;
background-color: #343843; /* Main nav colour */
box-shadow: inset 0 -2px 3px rgba(203, 196, 130, 0.06);
}
.cd-tabs-navigation a {
.cd-tabs-navigation a, #reload {
height: 40px;
line-height: 45px;
width: 100%;
Expand All @@ -103,7 +120,7 @@ Main components
font-size: 0.875rem;
padding: 0 2em 0 2em;
}
.cd-tabs-navigation a.selected {
.cd-tabs-navigation a.selected:not(#reload) {
box-shadow: inset 0 5px 0 #31ac63; /* Selected tab marker colour */
}
.cd-tabs-navigation a::before {
Expand All @@ -117,23 +134,27 @@ Main components
.cd-tabs-content {
background: #36363b; /* Content background colour */
}

.cd-tabs-content li {
display: none;
padding: 0;
}

.cd-tabs-content li.selected {
display: block;
-webkit-animation: cd-fade-in 0.5s;
-moz-animation: cd-fade-in 0.5s;
animation: cd-fade-in 0.5s;
}

.cd-tabs-content li p {
font-size: 14px;
font-size: 0.875rem;
line-height: 1.6;
color: #8493bf;
margin-bottom: 2em;
}

@media only screen and (min-width: 0px) {
.cd-tabs-content {
min-height: 0;
Expand All @@ -155,6 +176,7 @@ Main components
opacity: 1;
}
}

@-moz-keyframes cd-fade-in {
0% {
opacity: 0;
Expand All @@ -163,6 +185,7 @@ Main components
opacity: 1;
}
}

@keyframes cd-fade-in {
0% {
opacity: 0;
Expand All @@ -173,5 +196,4 @@ Main components
body {
margin: 0px;
padding: 0px;
}

}
67 changes: 2 additions & 65 deletions index.php
Original file line number Diff line number Diff line change
@@ -1,69 +1,5 @@
<!doctype html>
<?php
$config = parse_ini_file('config.ini.php', true);

function menuItems($config) {
if (empty($item)) $item = '';
foreach ($config as $keyname => $section) {
if(!empty($section["enabled"]) && !($section["enabled"]=="false") && ($section["enabled"]=="true")) {
if(!empty($section["default"]) && !($section["default"]=="false") && ($section["default"]=="true")) {
$item .= "<li><a data-content=\"" . $keyname . "\" href=\"#0\" class=\"selected\"><span class=\"". $section["icon"] ." fa-lg\"></span> ". $section["name"] ."</a></li>\n";
} else {
$item .= "<li><a data-content=\"" . $keyname . "\" href=\"#0\"><span class=\"". $section["icon"] ." fa-lg\"></span> ". $section["name"] ."</a></li>\n";
}
}
}
if (empty($item)) $item = '';
return $item;
}


function frameContent($config) {
if (empty($item)) $item = '';
foreach ($config as $keyname => $section) {
if(!empty($section["landingpage"]) && !($section["landingpage"]=="false") && ($section["landingpage"]=="true")) {
$section["url"] = "?landing=" . $keyname;
}

if(!empty($section["enabled"]) && !($section["enabled"]=="false") && ($section["enabled"]=="true")) {
if(!empty($section["default"]) && !($section["default"]=="false") && ($section["default"]=="true")) {
$item .= "<li data-content=\"". $keyname . "\" class=\"selected\"><iframe scrolling=\"auto\" src=\"". $section["url"] . "\"></iframe></li>\n";
} else {
$item .= "<li data-content=\"". $keyname . "\"><iframe scrolling=\"auto\" src=\"". $section["url"] . "\"></iframe></li>\n";
}
}
}
return $item;
}


function landingPage($config, $keyname) {
$item = "
<html lang=\"en\">
<head>
<title>". $config[$keyname]["name"] ."</title>
<link rel=\"stylesheet\" href=\"css/landing.css\">
</head>
<body>
<div class=\"login\">
<div class=\"heading\">
<h2><span class=\"". $config[$keyname]["icon"] ." fa-3x\"></span></h2>
<section>
<a href=\"". $config[$keyname]["url"] ."\" target=\"_self\" title=\"Launch ". $config[$keyname]["name"] ."!\"><button class=\"float\">Launch ". $config[$keyname]["name"] ."</button></a>
</section>
</div>
</div>
</body></html>";
if (empty($item)) $item = '';
return $item;
}

if(isset($_GET['landing'])) {
$keyname = $_GET['landing'];
echo landingPage($config, $keyname);
die();
}
?>
<?php require_once("mtphp.php"); ?>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
Expand Down Expand Up @@ -93,6 +29,7 @@ function landingPage($config, $keyname) {
<nav>
<ul class="cd-tabs-navigation">
<?php echo menuItems($config); ?>
<li><a id="reload" title="Double click your app in the menu, or press this button to refresh the current app."><span class="fa fa-refresh fa-lg"></span></a></li>
</ul>
</nav>

Expand Down
9 changes: 9 additions & 0 deletions js/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,13 @@ jQuery(document).ready(function($){
});
});


$('#reload').on('click', function(){
var selectedFrame = $('.cd-tabs-content').find('.selected').children('iframe');
selectedFrame.attr('src', selectedFrame.attr('src'));
})


$(window).on('resize', function(){
tabs.each(function(){
var tab = $(this);
Expand All @@ -45,6 +52,7 @@ jQuery(document).ready(function($){
resizeIframe(); // Resize iframes when window is resized.
});


function checkScrolling(tabs){
var totalTabWidth = parseInt(tabs.children('.cd-tabs-navigation').width()),
tabsViewport = parseInt(tabs.width());
Expand All @@ -61,6 +69,7 @@ jQuery(document).ready(function($){
$('iframe').css({ 'height': newSize + 'px' });
}


// Call resizeIframe when document is ready
resizeIframe();
});
69 changes: 69 additions & 0 deletions mtphp.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
<?php
/*
* DO NOT CHANGE THIS FILE!
* The settings are all in config.ini.php
*/

$config = parse_ini_file('config.ini.php', true);

function menuItems($config) {
if (empty($item)) $item = '';
foreach ($config as $keyname => $section) {
if(!empty($section["enabled"]) && !($section["enabled"]=="false") && ($section["enabled"]=="true")) {
if(!empty($section["default"]) && !($section["default"]=="false") && ($section["default"]=="true")) {
$item .= "<li><a data-content=\"" . $keyname . "\" class=\"selected\"><span class=\"". $section["icon"] ." fa-lg\"></span> ". $section["name"] ."</a></li>\n";
} else {
$item .= "<li><a data-content=\"" . $keyname . "\"><span class=\"". $section["icon"] ." fa-lg\"></span> ". $section["name"] ."</a></li>\n";
}
}
}
return $item;
}


function frameContent($config) {
if (empty($item)) $item = '';
foreach ($config as $keyname => $section) {
if(!empty($section["landingpage"]) && !($section["landingpage"]=="false") && ($section["landingpage"]=="true")) {
$section["url"] = "?landing=" . $keyname;
}

if(!empty($section["enabled"]) && !($section["enabled"]=="false") && ($section["enabled"]=="true")) {
if(!empty($section["default"]) && !($section["default"]=="false") && ($section["default"]=="true")) {
$item .= "<li data-content=\"". $keyname . "\" class=\"selected\"><iframe scrolling=\"auto\" src=\"". $section["url"] . "\"></iframe></li>\n";
} else {
$item .= "<li data-content=\"". $keyname . "\"><iframe scrolling=\"auto\" src=\"". $section["url"] . "\"></iframe></li>\n";
}
}
}
return $item;
}


function landingPage($config, $keyname) {
$item = "
<html lang=\"en\">
<head>
<title>". $config[$keyname]["name"] ."</title>
<link rel=\"stylesheet\" href=\"css/landing.css\">
</head>
<body>
<div class=\"login\">
<div class=\"heading\">
<h2><span class=\"". $config[$keyname]["icon"] ." fa-3x\"></span></h2>
<section>
<a href=\"". $config[$keyname]["url"] ."\" target=\"_self\" title=\"Launch ". $config[$keyname]["name"] ."!\"><button class=\"float\">Launch ". $config[$keyname]["name"] ."</button></a>
</section>
</div>
</div>
</body></html>";
if (empty($item)) $item = '';
return $item;
}

if(isset($_GET['landing'])) {
$keyname = $_GET['landing'];
echo landingPage($config, $keyname);
die();
}
?>

0 comments on commit 09a1e33

Please sign in to comment.