Jump to content
Latest News: (loading..)
wHiTeHaT

Admin to Bootstrap NO HTML changes

Recommended Posts

The viewport, haha correct... good find.

I explain it in the installation post.

Thanks!!!!!!!


Do you need an osCommerce website? Do you want to have an Responsive osCommerce CONTACT ME as i am for HIRE

Share this post


Link to post
Share on other sites

Code updated to V8

  • Included ScreenShot.
  • included NEW Presentation Video.
  • Optional WYSIWYG Editor.

 


Do you need an osCommerce website? Do you want to have an Responsive osCommerce CONTACT ME as i am for HIRE

Share this post


Link to post
Share on other sites

Looking good....

Very small issue best way is to explain it: Navigate from index to Customers - then Customers... So customer panel is now open at customers.php....

Then Click the OsC logo to navigate back to index.

The customer panel remains open - it should close.

 

Share this post


Link to post
Share on other sites

@greasemonkey 

look the code:

//Close panels if navigate to index


	$path = '<?php echo DIR_WS_ADMIN; ?>';
	if ( window.location.pathname == $path || window.location.pathname == $path+'index.php'){ 
		$("#contentText table table tr td").each(function() {
			$(this).replaceWith('<div class="dashBoard col-md-6 clearfix">' + $(this).html() + '</div>'); 
		});
		$('.dashBoard').prependTo('#contentText');
		$('#contentText').children('table').remove();
		
		//Close panels if navigate to index
		adminCollapseAppMenu = [];
		localStorage.setItem('adminCollapseAppMenu', JSON.stringify(adminCollapseAppMenu));
		$('.panel-collapse').removeClass('in');
		//End close panels		
	}

 


Do you need an osCommerce website? Do you want to have an Responsive osCommerce CONTACT ME as i am for HIRE

Share this post


Link to post
Share on other sites
1 hour ago, wHiTeHaT said:

@greasemonkey 

look the code:

//Close panels if navigate to index



	$path = '<?php echo DIR_WS_ADMIN; ?>';
	if ( window.location.pathname == $path || window.location.pathname == $path+'index.php'){ 
		$("#contentText table table tr td").each(function() {
			$(this).replaceWith('<div class="dashBoard col-md-6 clearfix">' + $(this).html() + '</div>'); 
		});
		$('.dashBoard').prependTo('#contentText');
		$('#contentText').children('table').remove();
		
		//Close panels if navigate to index
		adminCollapseAppMenu = [];
		localStorage.setItem('adminCollapseAppMenu', JSON.stringify(adminCollapseAppMenu));
		$('.panel-collapse').removeClass('in');
		//End close panels		
	}

 

Seems to work just fine... any particular place it should go?

I've added it just before:

	$('#adminAppMenu').on('shown.bs.collapse', '.panel-collapse', function() {

 

Share this post


Link to post
Share on other sites

no...
you only need:

		//Close panels if navigate to index
		adminCollapseAppMenu = [];
		localStorage.setItem('adminCollapseAppMenu', JSON.stringify(adminCollapseAppMenu));
		$('.panel-collapse').removeClass('in');
		//End close panels

 


Do you need an osCommerce website? Do you want to have an Responsive osCommerce CONTACT ME as i am for HIRE

Share this post


Link to post
Share on other sites

No, you must the code between the code i showed you.

This you have (around line 317):


 

    $path = '<?php echo DIR_WS_ADMIN; ?>';
    if ( window.location.pathname == $path || window.location.pathname == $path+'index.php'){ 
        $("#contentText table table tr td").each(function() {
            $(this).replaceWith('<div class="dashBoard col-md-6 clearfix">' + $(this).html() + '</div>'); 
        });
        $('.dashBoard').prependTo('#contentText');
        $('#contentText').children('table').remove();
      
    }

So it will look finaly like:

    $path = '<?php echo DIR_WS_ADMIN; ?>';
    if ( window.location.pathname == $path || window.location.pathname == $path+'index.php'){ 
        $("#contentText table table tr td").each(function() {
            $(this).replaceWith('<div class="dashBoard col-md-6 clearfix">' + $(this).html() + '</div>'); 
        });
        $('.dashBoard').prependTo('#contentText');
        $('#contentText').children('table').remove();
        
        //Close panels if navigate to index
        adminCollapseAppMenu = [];
        localStorage.setItem('adminCollapseAppMenu', JSON.stringify(adminCollapseAppMenu));
        $('.panel-collapse').removeClass('in');
        //End close panels        
    }

 


Do you need an osCommerce website? Do you want to have an Responsive osCommerce CONTACT ME as i am for HIRE

Share this post


Link to post
Share on other sites

@wHiTeHaT In case you want to add font awesome icons to buttons:

   $("a.btn span.document").addClass('fa fa-edit fa-lg').removeClass('document');
   $("a.btn span.trash").addClass('fa fa-trash').removeClass('trash');
   $("a.btn span.arrow-4").addClass('fa fa-arrows fa-lg').removeClass('arrow-4');
   $("a.btn span.copy").addClass('fa fa-clone fa-lg').removeClass('copy');
   $("a.btn span.plus").addClass('fa fa-plus fa-lg').removeClass('plus');
   $("a.btn span.close").addClass('fa fa-times fa-lg').removeClass('close');
   $("a.btn span.disk").addClass('fa fa-floppy-o fa-lg').removeClass('disk');
   $("a.btn span.key").addClass('fa fa-unlock fa-lg').removeClass('key');
   $("a.btn span.refresh").addClass('fa fa-refresh fa-lg').removeClass('refresh');
   $("a.btn span.mail-closed").addClass('fa fa-envelope fa-lg').removeClass('mail-closed');
   $("a.btn span.arrowreturnthick-1-n").addClass('fa fa-share-square-o fa-lg').removeClass('arrowreturnthick-1-n');
   $("a.btn span.triangle-1-nw").addClass('fa fa-share-square-o fa-lg').removeClass('triangle-1-nw');
   $("a.btn span.circle-triangle-n").addClass('fa fa-globe fa-lg').removeClass('circle-triangle-n');
   $("a.btn span.arrow-1-w").addClass('fa fa-caret-left fa-lg').removeClass('arrow-1-w');
   $("a.btn span.arrow-1-e").addClass('fa fa-caret-right fa-lg').removeClass('arrow-1-e');
   $("a.btn span.arrow-1-n").addClass('fa fa-caret-up fa-lg').removeClass('arrow-1-n');
   $("a.btn span.arrow-1-s").addClass('fa fa-caret-down fa-lg').removeClass('arrow-1-s');
   $("a.btn span.triangle-1-w").addClass('fa fa-caret-left fa-lg').removeClass('triangle-1-w');
   $("a.btn span.triangle-1-e").addClass('fa fa-caret-right fa-lg').removeClass('triangle-1-e');
   $("a.btn span.triangle-1-n").addClass('fa fa-caret-up fa-lg').removeClass('triangle-1-n');
   $("a.btn span.triangle-1-s").addClass('fa fa-caret-down fa-lg').removeClass('triangle-1-s');
   $("a.btn span.arrowrefresh-1-w").addClass('fa fa-refresh fa-lg').removeClass('arrowrefresh-1-w');
   $("a.btn span.arrowrefresh-1-e").addClass('fa fa-refresh fa-lg').removeClass('arrowrefresh-1-e');

 

Share this post


Link to post
Share on other sites

@piernas Is that code based on the code i made in the first post, or is that a part of something from your own work?

Edited by wHiTeHaT

Do you need an osCommerce website? Do you want to have an Responsive osCommerce CONTACT ME as i am for HIRE

Share this post


Link to post
Share on other sites

I have a bootstrap native version of the admin in progress and removed those icons so was easy to make the code with the list of changes I made. I have some other replacements of gifs untested -  will post here or send them to you if you like.

That code (and part of yours) works wonderfully on my work to give compatibility to old addons. It's about 40% done (most of the template) but still want to move the infoboxes to bootstrap modals and will take some time. I'll show it on the forum once it's more advanced in case people are interested.

Share this post


Link to post
Share on other sites

@wHiTeHaT

Hi,

I have tried your v8 scripts on a new 2.3.4 BS master but I have strange display. :unsure:
Do you have an idea of what's the matter ?!?

display_test.jpg

Edited by milerwan

Share this post


Link to post
Share on other sites

@milerwan , looks like you missed something from the stylesheet, it appears there is a margin in action from the left menu..

Did you followed correctly the instructions where to load the bootstrap CSS?

 

I also see your dashboard modules are not correctly converted.

You sure it is a fresh install?
Can you point me out the link from where you downloaded it?

Edited by wHiTeHaT

Do you need an osCommerce website? Do you want to have an Responsive osCommerce CONTACT ME as i am for HIRE

Share this post


Link to post
Share on other sites

@milerwan , your template top should look like:

<?php
/*
  $Id$

  osCommerce, Open Source E-Commerce Solutions
  http://www.oscommerce.com

  Copyright (c) 2014 osCommerce

  Released under the GNU General Public License
*/
?>
<!DOCTYPE html>
<html <?php echo HTML_PARAMS; ?>>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=<?php echo CHARSET; ?>">
	<meta name="robots" content="noindex,nofollow">
	<title><?php echo TITLE; ?></title>
	<base href="<?php echo ($request_type == 'SSL') ? HTTPS_SERVER . DIR_WS_HTTPS_ADMIN : HTTP_SERVER . DIR_WS_ADMIN; ?>" />
	<!--[if IE]><script type="text/javascript" src="<?php echo tep_catalog_href_link('ext/flot/excanvas.min.js', '', 'SSL'); ?>"></script><![endif]-->
	<link rel="stylesheet" type="text/css" href="<?php echo tep_catalog_href_link('ext/jquery/ui/redmond/jquery-ui-1.10.4.min.css', '', 'SSL'); ?>">
	<script type="text/javascript" src="<?php echo tep_catalog_href_link('ext/jquery/jquery-2.2.3.min.js', '', 'SSL'); ?>"></script>
	<script type="text/javascript" src="<?php echo tep_catalog_href_link('ext/jquery/ui/jquery-ui-1.10.4.min.js', '', 'SSL'); ?>"></script>

	<?php
	  if (tep_not_null(JQUERY_DATEPICKER_I18N_CODE)) {
	?>
		<script type="text/javascript" src="<?php echo tep_catalog_href_link('ext/jquery/ui/i18n/jquery.ui.datepicker-' . JQUERY_DATEPICKER_I18N_CODE . '.js', '', 'SSL'); ?>"></script>
		<script type="text/javascript">$.datepicker.setDefaults($.datepicker.regional['<?php echo JQUERY_DATEPICKER_I18N_CODE; ?>']);</script>
	<?php
	  }
	?>
	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

	<script type="text/javascript" src="<?php echo tep_catalog_href_link('ext/flot/jquery.flot.min.js', '', 'SSL'); ?>"></script>
	<script type="text/javascript" src="<?php echo tep_catalog_href_link('ext/flot/jquery.flot.time.min.js', '', 'SSL'); ?>"></script>
	<script type="text/javascript" src="<?php echo tep_catalog_href_link('ext/flot/jquery.flot.resize.min.js', '', 'SSL'); ?>"></script>
	<link href="../ext/bootstrap/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="includes/stylesheet.css">
	<script type="text/javascript" src="includes/general.js"></script>
	<!-- include summernote css/js-->
	<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.css" rel="stylesheet">
	<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js"></script> 
</head>
<body>

<?php require('includes/header.php'); ?>

<?php
  if (tep_session_is_registered('admin')) {
    include('includes/column_left.php');
  } else {
?>

<style>
#contentText {
  margin-left: 0;
}
</style>

<?php
  }
?>

<div id="contentText">

 


Do you need an osCommerce website? Do you want to have an Responsive osCommerce CONTACT ME as i am for HIRE

Share this post


Link to post
Share on other sites

Just to make sure i not made any mistakes.

I downloaded a fresh copy from:

https://github.com/gburton/Responsive-osCommerce

Installed it.

Before i even visited my admin.....

i changed all the files corresponding the exact instructions i gave.

i logged in to my admin....

And all works at a glance, just perfectly!!


Do you need an osCommerce website? Do you want to have an Responsive osCommerce CONTACT ME as i am for HIRE

Share this post


Link to post
Share on other sites

Code updated to V8.1

- Logo fix in the navigation bar

-Forgotten Css added to styleSheet.css so body now fade's -in smoothly and not see any jQuery-UI styles anymore before page is loaded.


Do you need an osCommerce website? Do you want to have an Responsive osCommerce CONTACT ME as i am for HIRE

Share this post


Link to post
Share on other sites

I wanted to take a look at the WYSIWYG Editor, but it wouldn't load.

I had to change the code to...

<script>
$(function(){
    //SUMMERNOTE WYSIWYG OPTIONAL:
    $('.summernote').summernote();
});
</script>

...to make it work.

Another thing: You should change the "http:" for the WYSIWYG Editor-Script and -Stylesheet to "https:", or remove the "http:"-part altogether.

AD

 

Share this post


Link to post
Share on other sites
2 hours ago, wHiTeHaT said:

Just to make sure i not made any mistakes.

I downloaded a fresh copy from:

https://github.com/gburton/Responsive-osCommerce

Installed it.

Before i even visited my admin.....

i changed all the files corresponding the exact instructions i gave.

i logged in to my admin....

And all works at a glance, just perfectly!!

Hi,

I followed your message, download new copy from your github link, updated the 3 files with your codes (copy/paste) but same result... :sad:

Edited by milerwan

Share this post


Link to post
Share on other sites

@milerwanWell, you might understand i'm surprised and would normally say "impossible".

Is there a way i can see your admin, if so, send me a private message.

What happens when hit CTRL+F5
(That is a so called hard reset for the browser cache.)

Edited by wHiTeHaT

Do you need an osCommerce website? Do you want to have an Responsive osCommerce CONTACT ME as i am for HIRE

Share this post


Link to post
Share on other sites
4 hours ago, wHiTeHaT said:

@milerwanWell, you might understand i'm surprised and would normally say "impossible".

Is there a way i can see your admin, if so, send me a private message.

What happens when hit CTRL+F5
(That is a so called hard reset for the browser cache.)

That's it !
It works now, thank you. ;)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×