♥bruyndoncx Posted February 23, 2014 Share Posted February 23, 2014 Considering doing something like this: <tr> <td class="fieldKey"><?php echo ENTRY_LAST_NAME; ?></td> <td class="fieldValue"><?php echo tep_draw_input_field('lastname', $account['customers_lastname']) . ' ' . (tep_not_null(ENTRY_LAST_NAME_TEXT) ? '<span class="inputRequirement">' . ENTRY_LAST_NAME_TEXT . '</span>': ''); ?></td> </tr> to <div class="form-group has-feedback"> <label for="inputName" class="control-label col-xs-2"><?php echo ENTRY_LAST_NAME; ?></label> <div class="col-xs-10"> <?php echo tep_draw_input_field('lastname', $account['customers_lastname'], 'required id="inputName" placeholder="' . ENTRY_LAST_NAME . '"'); ?> <span class="glyphicon glyphicon-asterisk form-control-feedback required"></span> </div> </div> Thoughts ? This changes the look as shown in the attached images. This looks consistent with the other changes made, I personally was thinking it would be better if you would have one function that returns this complete html block, a bit like it is done in this wordpress shortcodes implementation. https://github.com/filipstefansson/bootstrap-3-shortcodes/blob/master/bootstrap-shortcodes.php Note, i'm not advocating wp shortcodes, but just the way you have different functions that generate more of the surrounding html so you don't have to change as many files if you were for instance to decide you don't like the required glyphon. KEEP CALM AND CARRY ON I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support). So if you are still here ? What are you waiting for ?! Find the most frequent unique errors to fix: grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt Link to comment Share on other sites More sharing options...
♥bruyndoncx Posted February 23, 2014 Share Posted February 23, 2014 BTW, I might be talking complete non-sense here, I'm a bootstrap newbee , reading up on BS3 right now ... KEEP CALM AND CARRY ON I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support). So if you are still here ? What are you waiting for ?! Find the most frequent unique errors to fix: grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt Link to comment Share on other sites More sharing options...
burt Posted February 23, 2014 Author Share Posted February 23, 2014 I see what you mean, but we don't already have that type of architecture in the 2.3 series...so it would mean many more changes (both changes in the pages and changes in the functions/classes)... Link to comment Share on other sites More sharing options...
♥bruyndoncx Posted February 23, 2014 Share Posted February 23, 2014 I think the bootstrap 3 mobile first approach for responsiveness is really good, but i wasn't expecting these kind of trivial changes in for instance shipping.php If these icons where defined as constants, it would be easier to keep on using jquery ui buttons in a BS3 responsive framework. the only change in this section was from the jquery ui icon triangle-1-e to the BS glyphicon <div class="buttonSet"> <span class="buttonAction"><?php echo tep_draw_button(IMAGE_BUTTON_CONTINUE, 'glyphicon-chevron-right', tep_href_link(FILENAME_DEFAULT)); ?></span> </div> KEEP CALM AND CARRY ON I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support). So if you are still here ? What are you waiting for ?! Find the most frequent unique errors to fix: grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt Link to comment Share on other sites More sharing options...
burt Posted February 23, 2014 Author Share Posted February 23, 2014 Take a look at the tep_draw_button function, this is also changed. jqueryui is completely removed, shopwide 100%. Link to comment Share on other sites More sharing options...
burt Posted February 23, 2014 Author Share Posted February 23, 2014 Here's the rework of the account_edit.php page, not committed. Up it to your bootstrap test site to see how it looks... Also a couple of text changes (english.php, also remove the FORM_REQUIRED_INFORMATION from the middle of the file, and change as below): // message for required inputs define('FORM_REQUIRED_INFORMATION', '<span class="glyphicon glyphicon-asterisk form-control-feedback required"></span> Required information'); define('FORM_REQUIRED_INPUT', '<span class="glyphicon glyphicon-asterisk form-control-feedback required"></span>'); And in custom.css .required { color: #B33A3A; } Link to comment Share on other sites More sharing options...
burt Posted February 23, 2014 Author Share Posted February 23, 2014 @@bruyndoncx - cast your mind back to when you made your own site responsive - how much effort did it take - I think a lot of time and sweat. This project is no different.. I could just have implement Bootstrap and say "that's it", but I also want to clean up some of the legacy code in the 2.3 series...some code that goes all the way back to 2000 !!, and I also want to introduce some HTML5 ready elements of code (such as the required form inputs in the example account_edit page and so on. Link to comment Share on other sites More sharing options...
♥bruyndoncx Posted February 23, 2014 Share Posted February 23, 2014 @@bruyndoncx - cast your mind back to when you made your own site responsive - how much effort did it take - I think a lot of time and sweat. This project is no different.. I could just have implement Bootstrap and say "that's it", but I also want to clean up some of the legacy code in the 2.3 series...some code that goes all the way back to 2000 !!, and I also want to introduce some HTML5 ready elements of code (such as the required form inputs in the example account_edit page and so on. I applaude your effort, I know it takes a lot of time adding and removing classes, restructuring divs, page header and stuff. Sadly enough most of my big rewrites have been kicked off while recovering in the hospital. I have been lucky this past year, haven't had much time for major code changes :D I noticed activeebiz has an oscommerce 2334 bootstrap version online with the categories implemented as a bootstrap menu. I'm not sure if this code has been shared or not. Would be silly having to re-invent the weel ... Pondering if I were to move towards the BS standard, I would need a megamenu and I found this one online http://geedmo.github.io/yamm3/ KEEP CALM AND CARRY ON I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support). So if you are still here ? What are you waiting for ?! Find the most frequent unique errors to fix: grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt Link to comment Share on other sites More sharing options...
♥mattjt83 Posted February 23, 2014 Share Posted February 23, 2014 @@burt Noticed a couple quick things this morning. shopping_cart.php: The buttons seem to have a duplicate .btn class so they are class="btn btn btn-info" Also, I would recommend wrapping the tables in a <div class="table-responsive"></div> container to handle overflow issues on smaller devices. Matt Link to comment Share on other sites More sharing options...
burt Posted February 23, 2014 Author Share Posted February 23, 2014 @@mattjt83 - thanks for the heads up on the buttons. Fixed those. Adding that responsive class brings in problems in the table in the shopping cart - I'm going to leave it off for the time being until I can get to the bottom of it. Could you install on localhost and add the code, and you'll see what I mean on a small viewport. Link to comment Share on other sites More sharing options...
♥mattjt83 Posted February 23, 2014 Share Posted February 23, 2014 @@burt Do you mean the horizontal scrolling on small screen sizes? That is what it is supposed to do as far as I know. I think I prefer just the table scrolling rather than the whole page being too wide. You could hide the image in these circumstances or maybe stack it? Matt Link to comment Share on other sites More sharing options...
burt Posted February 23, 2014 Author Share Posted February 23, 2014 Hiding it on small viewports could be the way to go. I'll think on it. http://www.template.me.uk/2334bs3/shopping_cart.php add something to cart and reduce the viewport. Link to comment Share on other sites More sharing options...
burt Posted February 23, 2014 Author Share Posted February 23, 2014 Here's my dev copy of create_account; http://www.template.me.uk/2334bs3/create_account.php Thoughts ? Link to comment Share on other sites More sharing options...
♥mattjt83 Posted February 23, 2014 Share Posted February 23, 2014 @@burt There is still a lot of overflow even with the image gone. I'll mess with it a bit and see what I come up with. Look at how I did it on the cart of my personal site if you'd like. I like that create account page. Looks nice. Did you not use the bs checkbox markup intentionally for style reasons or? Matt Link to comment Share on other sites More sharing options...
♥mattjt83 Posted February 23, 2014 Share Posted February 23, 2014 @@burt in shopping_cart.php with your hidden image in place... find: echo ' <td valign="top">' . tep_draw_input_field('cart_quantity[]', $products[$i]['quantity'], 'style="width: 50px;"') . tep_draw_hidden_field('products_id[]', $products[$i]['id']) . ' ' . tep_draw_button(NULL, 'glyphicon-refresh', NULL, NULL, NULL, 'btn-info') . ' ' . tep_draw_button(NULL, 'glyphicon glyphicon-remove', tep_href_link(FILENAME_SHOPPING_CART, 'products_id=' . $products[$i]['id'] . '&action=remove_product'), NULL, NULL, 'btn-danger') . '</td>'; replace with: echo ' <td valign="top">' . tep_draw_input_field('cart_quantity[]', $products[$i]['quantity'], 'style="width: 50px;"') . tep_draw_hidden_field('products_id[]', $products[$i]['id']) . '<br class="visible-xs" /> ' . tep_draw_button(NULL, 'glyphicon-refresh', NULL, NULL, NULL, 'btn-info') . ' ' . tep_draw_button(NULL, 'glyphicon glyphicon-remove', tep_href_link(FILENAME_SHOPPING_CART, 'products_id=' . $products[$i]['id'] . '&action=remove_product'), NULL, NULL, 'btn-danger') . '</td>'; Matt Link to comment Share on other sites More sharing options...
♥toyicebear Posted February 23, 2014 Share Posted February 23, 2014 Hiding it on small viewports could be the way to go. I'll think on it. http://www.template.me.uk/2334bs3/shopping_cart.php add something to cart and reduce the viewport. When reducing window size the "checkout" button disappears on the shopping cart page. The same happens to the "continue" button on the create account page. Basics for osC 2.2 Design - Basics for Design V2.3+ - Seo & Sef Url's - Meta Tags for Your osC Shop - Steps to prevent Fraud... - MS3 and Team News... - SEO, Meta Tags, SEF Urls and osCommerce - Commercial Support Inquiries - OSC 2.3+ How To To see what more i can do for you check out my profile [click here] Link to comment Share on other sites More sharing options...
♥mattjt83 Posted February 23, 2014 Share Posted February 23, 2014 @@toyicebear I can't seem to replicate that issue with the buttons disappearing. What browser are you using? ...nevermind. It happens on the dev site but on my local copy it's not doing that. Maybe Gary is busy? Matt Link to comment Share on other sites More sharing options...
♥toyicebear Posted February 23, 2014 Share Posted February 23, 2014 @@toyicebear I can't seem to replicate that issue with the buttons disappearing. What browser are you using? ...nevermind. It happens on the dev site but on my local copy it's not doing that. Maybe Gary is busy? it was on the dev. site.. IE and Firefox Basics for osC 2.2 Design - Basics for Design V2.3+ - Seo & Sef Url's - Meta Tags for Your osC Shop - Steps to prevent Fraud... - MS3 and Team News... - SEO, Meta Tags, SEF Urls and osCommerce - Commercial Support Inquiries - OSC 2.3+ How To To see what more i can do for you check out my profile [click here] Link to comment Share on other sites More sharing options...
burt Posted February 23, 2014 Author Share Posted February 23, 2014 Just looked at yours - putting the remove button underneath does help a bit. I feel that particular table is better without the class=responsive div... Link to comment Share on other sites More sharing options...
♥Tsimi Posted February 24, 2014 Share Posted February 24, 2014 mobile phone (vertical view) ======================== - login page is blank (shows up at over 890px width and over) - at the create account page, no confirm/proceed/continue button (button shows up at over 890px width and over) - at the checkout shipping page no continue or back button showing, can't proceed with the checkout. (button shows up at 890px width and over) as you said before you want to concentrate on the "normal page size" first and then the mobile size right? the input fields look very good, love the asterix (*) inside the input field! IMO input fields should always have rounded corners and be flat not inset. the old square design reminds me of windows 98. Link to comment Share on other sites More sharing options...
burt Posted February 24, 2014 Author Share Posted February 24, 2014 @@Tsimi - many thanks :) Button disappearing: https://github.com/gburton/osCommerce-2334-bootstrap/commit/5fa3731b803f2aac7324c8efe289b6557821a764 Login Page: https://github.com/gburton/osCommerce-2334-bootstrap/commit/abdd9419e85542ed452fa6fed08cbf3f97b9d74b Link to comment Share on other sites More sharing options...
Ken44 Posted February 24, 2014 Share Posted February 24, 2014 Hi Burt Please can you update the example site at template.me. it is the only way I can test with my Iphone. But I still can’t login. There appears to be a few more duplicate .btn class \includes\modules\new_products.php lines 33 and 34 \includes\modules\product_listing.php line 38 (x2) \advanced_search.php line 129 \includes\modules\boxes\bm_search.php line 42 Regards Ken Link to comment Share on other sites More sharing options...
burt Posted February 24, 2014 Author Share Posted February 24, 2014 Hi Ken Will update the test site when I get time ;) Those duplicate btn classes are correct - they aren't dupes (all those are "buttons" that look like buttons but are not passed throught the tep_draw_button function. Only time the dupes are a problem is if the button is made using tep_draw_button and has a parameter that includes just "btn" (if it has eg btn-primary, that's OK). These "fake" buttons are subject to change prior to "gold" release. But thank you very much for testing and posting. Please do continue to do so.. Link to comment Share on other sites More sharing options...
burt Posted February 25, 2014 Author Share Posted February 25, 2014 Test site is now updated; http://www.template.me.uk/2334bs3/ Link to comment Share on other sites More sharing options...
♥bruyndoncx Posted February 25, 2014 Share Posted February 25, 2014 @@burt I'm still in learning mode, so please forgive my ignorance ... nav-list vs list-group I saw nav-list being used on categories and manufacturers boxes. I wonder if for categories with counts the list-group with the badge wouldn't be more appropriate Nav sounds more semantically correct to me, but the list-group badge implementation looks really neat. What is the pro-con for one vs the other ? KEEP CALM AND CARRY ON I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support). So if you are still here ? What are you waiting for ?! Find the most frequent unique errors to fix: grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.