BETA feedback for Responsive-Classic in v155-beta

Hi
Why not add scss instead of css ?

I don't see any benefit to scss as far as the responsive code itself goes, Anne may choose to answer as far as the template styling, I really think her answer is going to fall somewhere in the lines of "design restrictions" and "template override minimums" to keep this as close to the "stock" classic template as possible.

mesnitu:

Hi
Why not add scss instead of css ?

hi
I haven't seen the template, nor tested 1.55. So it's not criticism, more of a suggestion, because I honestly dont' see myself writing pure css anymore, or making a site without a grid system(susy, singulaitygs or whatever) and media query's.
I've made for myself, didn't shared because it's not finish, and I made some changes to use semantics, that later i realize that there's was a module that did that.
The template based on the classic (not the default).
And basically it's "inspired" on some drupal subthemes and drush, in a very ingenious way.
But basically I made a bash script, where I named the new template and type some other info to the template info. Then he copies, creates all the basic and needed stuff from classic to a new template.
In the process, I actually overrided (or renamed the breadcrumd class), because I wanted to have semantics on it. That's the only core file, that actually changed, but the original it's there
The bash script creates the node_modules folder and bower, and sass folder and sub-folders, plus a gulp, json, but it only install the npm modules, if I type install at the end of the bash script.

In the admin, yes, there's a template config fields in the configuration section, where I can paste what script files I want to send to the footer.

And some options, like if I want to use the main table, or just use div ( I just use divs) , a option to disable Column / Boxes width ( I want to contrel them with media querys), and a option to add to <body> all the category classes , products, and manufactures ( as I recall ) , so I can work with classes and not new css files with that name. Example:

<body id="productbookxinfoBody" class="pID-1 p-product_bookx_info l-pt l-pt-product_bookx_info c_1 l-pt_c_1 l-pt_pID_1">

The only thing left , was to change all css colors to a sass way, using variables, etc... that I actually didn't fininsh.

This works for me, possibly not fo others.
The responsive way. Well, i actually use the media querys and grid layouts when I need them, not so much different responsive style files, but I think there's also a npm module that aggregates media querys to different files. Not to mention the use of gulp tasks or grunt, in images, sprites...etc.

But again, this are just ideas, not critics. I know all that work that's involved and for free, and I very much appreciated the spirit.

Best regards

mesnitu:

Hi
Why not add scss instead of css ?
Although you and I may be familiar with scss and how to compile it to CSS. For the big majority of users it would over complicate things.
When I use scss I tend to leave the on the dev site, and only copy the CSS files to the live environment.

Design75:

Although you and I may be familiar with scss and how to compile it to CSS. For the big majority of users it would over complicate things.
When I use scss I tend to leave the on the dev site, and only copy the CSS files to the live environment.

I can see that, but let's be honest, in a zencart plataform and others, two things can happen: you hired someone and buy a template, or in a week you'll have a crash course in php and css, and if you fail, you'll hired someone and buy a template.
And, despite the sass structure is present, a user doesn't have to use it. That happen to me the first time I saw sass in a template. Didn't had time to learn all that, so I just work with css.
Anyway, it's fine for me.

Best Regards

dbltoe:

Ran into a problem with additional images being larger than the productMainImage when viewed on an iPhone6 in portrait. I noticed that the portrait portion of the responsive_mobile.css has```php
.additionalImages img{width:90%;margin:0 auto;}
.additionalImages{float:left !important;}

> Commenting out those two lines fixed the problem.
> It would be nice to have them side by side but, that's a horse of a different waterhole.:P

Do you have a link to a page with this?  With the demo products this code is working for portrait phones with the additional images the correct size and floating left in a row.  Can you also let me know your image size settings and how many additional images you have set per row?

Thanks,

Anne

As I'm building a new site, I've decided to use the Responsive Classic Template.

My store has a lot of categories that appear in the left sidebar. Currently they also appear just below the header in the blue navigation area (in the navCatTabs section perhaps?). As there are about 30 categories it takes up too much space so I want to turn it off.

What do I need to do?

I want to do further customizing and wonder if there are any tutorials or general guidelines available.

Thanks in advance...

Peace Freak:

As I'm building a new site, I've decided to use the Responsive Classic Template.

My store has a lot of categories that appear in the left sidebar. Currently they also appear just below the header in the blue navigation area (in the navCatTabs section perhaps?). As there are about 30 categories it takes up too much space so I want to turn it off.

What do I need to do?

I want to do further customizing and wonder if there are any tutorials or general guidelines available.

Thanks in advance...

This top categories navigation is a native zen cart function and can be easily turned off in admin--configuration--layout settings

Thanks,

Anne

Peace Freak:

As I'm building a new site, I've decided to use the Responsive Classic Template.NOTE: Since you've downloaded a BETA copy of v155, MAKE SURE that you replace all the files on your site after the official v155 code is released, else you could be missing some important bugfixes that resolve problems that are/were in the beta you downloaded.

When trying to create a new customer, I've found a bit of a visual ambiguity for the required field indicator on iPhone screens.
The first picture is of the New Customer section of the Login screen, showing the *s for required fields at the end of the fields, which is clear enough.

The second picture shows the same screen on an iPhone 5.

Unfortunately the *s end up on a line by themselves and it's not totally clear which field they apply to. Would it be clearer (and possible) to put them after the text label?
i.e.
First Name: *
[ Text Field ]
Last Name: *
[Text Field ]
etc.

Andy

amayze:

When trying to create a new customer, I've found a bit of a visual ambiguity for the required field indicator on iPhone screens.
The first picture is of the New Customer section of the Login screen, showing the *s for required fields at the end of the fields, which is clear enough.

The second picture shows the same screen on an iPhone 5.

Unfortunately the *s end up on a line by themselves and it's not totally clear which field they apply to. Would it be clearer (and possible) to put them after the text label?
i.e.
First Name: *
[ Text Field ]
Last Name: *
[Text Field ]
etc.

Andy

This can be done by editing the php file to move the code for the required field. You can do a developers toolkit search to find the correct file.

Thanks,

Anne

I've been doing some research and adding the "required" indicator to the inputs placeholder is becoming increasingly popular and it is cross browser supported. This of course excludes selects, radio and check-boxes.

Surprisingly IMO, it actually looks really nice and eliminates the line breaks on smaller devices.

amayze:

When trying to create a new customer, I've found a bit of a visual ambiguity for the required field indicator on iPhone screens.
The first picture is of the New Customer section of the Login screen, showing the *s for required fields at the end of the fields, which is clear enough.

The second picture shows the same screen on an iPhone 5.

Unfortunately the *s end up on a line by themselves and it's not totally clear which field they apply to. Would it be clearer (and possible) to put them after the text label?
i.e.
First Name: *
[ Text Field ]
Last Name: *
[Text Field ]
etc.

Andy

Maybe Chris (DrByte) can weigh in as if there is future plans for the "placeholder attribute" or if at some point it will get added to the functions parameters.

Thank you! I'm glad it could be done so easily!

picaflor-azul:

This top categories navigation is a native zen cart function and can be easily turned off in admin--configuration--layout settings

Thanks,

Anne

rbarbour:

Maybe Chris (DrByte) can weigh in as if there is future plans for the "placeholder attribute" or if at some point it will get added to the functions parameters.
Our work in v160 embraces the placeholder attribute. I guess that didn't get ported back to v155.

rbarbour:

I've been doing some research and adding the "required" indicator to the inputs placeholder is becoming increasingly popular and it is cross browser supported. This of course excludes selects, radio and check-boxes.

Surprisingly IMO, it actually looks really nice and eliminates the line breaks on smaller devices.

So I've worked out how to do this in tel_contact_us_default.php:

<label class="inputLabel" for="contactname"><?php echo ENTRY_NAME . '<span class="alert">' . ENTRY_REQUIRED_SYMBOL . '</span>'; ?></label>
<?php echo zen_draw_input_field('contactname', $name, ' size="40" id="contactname"'); ?>
<br class="clearBoth" />

But for the other files that have required fields I'm stuck. e.g. in tpl_modules_create_account.php:

<label class="inputLabel" for="firstname"><?php echo ENTRY_FIRST_NAME; ?></label>
<?php echo zen_draw_input_field('firstname', '', zen_set_field_length(TABLE_CUSTOMERS, 'customers_firstname', '40') . ' id="firstname"') . (zen_not_null(ENTRY_FIRST_NAME_TEXT) ? '<span class="alert">' . ENTRY_FIRST_NAME_TEXT . '</span>': ''); ?>
<br class="clearBoth" />

If I do the following:

<label class="inputLabel" for="firstname"><?php echo ENTRY_FIRST_NAME . (zen_not_null(ENTRY_FIRST_NAME_TEXT) ? '<span class="alert">' . ENTRY_FIRST_NAME_TEXT . '</span>'; ?></label>
<?php echo zen_draw_input_field('firstname', '', zen_set_field_length(TABLE_CUSTOMERS, 'customers_firstname', '40') . ' id="firstname"') : ''); ?>
<br class="clearBoth" />

it breaks the form and nothing is displayed.
My PHP and HTML knowledge was good enough to make my own template for use in 1.3.x and up, but I'm stuck now!
Andy

My suggestion was to add the "required" indicator to the inputs placeholder.

A demo of what I mean can be seen here and the files can be downloaded via git

If your looking to move the "required" indicator to the right side of the label then copy what was done on the text area field on the contact us page. It's just an indicator and has no affect over validation nor do the constants need the "null" statement.

<label for="enquiry"><?php echo ENTRY_ENQUIRY . '<span class="alert">' . ENTRY_REQUIRED_SYMBOL . '</span>'; ?></label>

amayze:

So I've worked out how to do this in tel_contact_us_default.php:

<label class="inputLabel" for="contactname"><?php echo ENTRY_NAME . '<span class="alert">' . ENTRY_REQUIRED_SYMBOL . '</span>'; ?></label>

<?php echo zen_draw_input_field('contactname', $name, ' size="40" id="contactname"'); ?> <br class="clearBoth" /> ``` > > But for the other files that have required fields I'm stuck. e.g. in tpl_modules_create_account.php: > ``` <label class="inputLabel" for="firstname"><?php echo ENTRY_FIRST_NAME; ?></label> <?php echo zen_draw_input_field('firstname', '', zen_set_field_length(TABLE_CUSTOMERS, 'customers_firstname', '40') . ' id="firstname"') . (zen_not_null(ENTRY_FIRST_NAME_TEXT) ? '<span class="alert">' . ENTRY_FIRST_NAME_TEXT . '</span>': ''); ?> <br class="clearBoth" /> ``` > If I do the following: > ``` <label class="inputLabel" for="firstname"><?php echo ENTRY_FIRST_NAME . (zen_not_null(ENTRY_FIRST_NAME_TEXT) ? '<span class="alert">' . ENTRY_FIRST_NAME_TEXT . '</span>'; ?></label> <?php echo zen_draw_input_field('firstname', '', zen_set_field_length(TABLE_CUSTOMERS, 'customers_firstname', '40') . ' id="firstname"') : ''); ?> <br class="clearBoth" /> ``` > it breaks the form and nothing is displayed. > My PHP and HTML knowledge was good enough to make my own template for use in 1.3.x and up, but I'm stuck now! > Andy

See also this thread

https://www.zen-cart.com/showthread.php?210514-Towards-Fluid-Forms

Great work guys!!

Just for general information if someone is looking through the plugins for this template: There is a template by the same name "Responsive Classic" (see https://www.zen-cart.com/downloads.php?do=file&id=1816 ) which is NOT related to this template. So if anyone downloads that older plugin, it is NOT the same as the template discussed in this thread.

frank18:

Great work guys!!

Just for general information if someone is looking through the plugins for this template: There is a template by the same name "Responsive Classic" (see https://www.zen-cart.com/downloads.php?do=file&id=1816 ) which is NOT related to this template. So if anyone downloads that older plugin, it is NOT the same as the template discussed in this thread.

That is true! Thank you for posting this, Frank ;)

Thanks,

Anne