Business Catalyst Responsive Catalog Tables - css

So the unfortunate thing about BC is that it uses tables to contain it's product/catalog grids.
I have my catalog page set to display 4 columns of items. The problem with this is it remains 4 on a mobile device. I tried to add a clear to the catalogueItem and it's having none of it.
Does anyone know how I can make it only display 1 column when using a mobile device?
The page in question is here.

You can turn off tables for your products/catalog grids.
This is the code that is found in the Layouts > OnlineShop > page_contact.html
This is an example:
{tag_productlist, perRow, target, perPage, sort, hideEmptyMessage, listType}
set the last option, listType, to true and it renders as an unordered list, then it is simple to do with whatever grid system you are using.
Example: {tag_productlist,3,,50,,true,true}

Related

Gravity Forms - Organizing a conditional logic, two column layout with section breaks

I'm creating an online ordering system using Gravity Forms for a restaurant. Most of the menu choices on the menu give the ability to select different add-ons or options.
I have configured the menu items as radio buttons, so once they are clicked they open a section where you can select the options you want. I have a couple rows of menu items that are two by two, and another couple that are three by three.
The issue I am running into is that when the options sections are opened up, they open on top of eachother. I would like them to stay in their columns underneath the menu items that they are linked with.
Is this possible using standard gravity forms or do I need to make some CSS modifications? If so, how to do?
You'll need to make some CSS modifications. What I do is remove all default gravity forms styling and change the elements to HTML5. This is all in the settings and then you can recreate the form styling.
This github is a really great resource and has everything you will need to help you with the styling.
https://github.com/thatryan/gravity-forms-sass

How to create a View with multiple displays with different formats (e.g. HTML List, Draggable Table) in Drupal 7

I am trying to create a View with two page displays, one that uses HTML List and another that uses Draggable Table, per the instructions for using the DraggableViews module (http://drupal.org/node/283498). However, whenever I change the format for one of the displays, it also changes for the other. Is it possible? The DraggableViews documentation (and Issues for DraggableViews) imply that it is.
Also, I know that an almost identical question was asked last year for Drupal 6 Drupal: Views, can the displays have different styles for the view? , but no satisfactory answer was given.
So, you have 2 displays. Do this:
1. For the first Display, click on Format.
2. In the Top : 'For' -> choose 'This page' ('This x' where x is what you display)
3. For the second Display do the same.
Basically, for all items in a view, you can choose if it applies for all display or for the current one.
Hope it is clear

QT4, paginated showing elements

I am going to write an application that uses QT4 (with C++ or python it isnt important in that moment).
One of functionality is "Showing all items in database".
One item has a Title, author, description and photo (constant size)
And there could be very many items. Let's say 400. There won't be enough space to show'em all at once time.
One row will have 200px, so i need at most 4 for once time.
How to paginate them? I have no idea.
I can use limit and offset in SQL queries, but how to tell window: "that's 5th page"?
Any solutions?
First off, you normally do not want to use any manually set pixel widths in any GUI application, if you do, your toolkit sucks (or you must work in game development).
Second off: be more specific.
You'll need to define "page" for your application, namely what a page should be in its context. I assume it is breaking a list of items into separate pages. Normally this is done by using one of the view classes (e.g. QListView or QTableView) to take care of much of the legwork: it's called a scrollbar (not to mention the collapsing folders concept from file managers). Another method is splitting the information across several tab pages (QTabWidget), where each page displays a view of some sort (Perhaps QTextView or one of the M/V or Item view classes).
Same thing can also be done using your own widget stack and some other widget to manipulate the currently displayed page. This is basically how the option dialogs in the TeamSpeak 3 client and most KDE apps work; it's also how wizards with back/next buttons work in concept. I suggest you take a look at this config dialog example
Normally what you want is a view with a scrollbar and or some form of collapsing related entries into categorised information. If you just want to display a list of pages where each page is X entries: use a tab widget or stacked widget.

Qt switching between views

How do I switch between the two screens on the Qt?
For example, I have a button - static text plus a toolbar. Now I will add it to a frame and set it as a central widget. It works well for one window. What if I move it to the next window? Then I need to show some other stuff like another button, some images etc... and what if I come back to the first view again?
How do I show my old widgets back?
I'm not sure I got your problem right but, you could have different scenarios :
You could simply use groupboxes... Some widgets in groupbox1, otherWidget in groupbox2, and you display the groupbox you want to use, hiding the others...
You could use stackedWidget, which simulates "pages" of widgets stacked on top of eachothers... more informations here : http://qt.nokia.com/doc/4.6/qstackedwidget.html.
You could use other way like using tabs : http://doc.trolltech.com/4.6/qtabwidget.html
Maybe this example would be useful to you : http://qt.nokia.com/doc/4.6/dialogs-configdialog.html
Hope it helps a bit !
I'd recommend checking out Animation/States example (should be in /qt/examples/animation/states/ subdirectory of your Qt installation). It shows how to combine state machine representing application logic with presentation layer and get cool animation effects for free (of course if you don't need eye candy, you can set widgets properties without any animation).

Accessible navigation of large information trees

I am developing a public website which is the front end to information about medical conditions.
After the user does a search (questionnaire based) they are presented with the results which are categorised in to sections and sub-sections.
Information items can be assigned to both sections and sub-sections.
At the moment sections are represented by tabs across the top and the screen and sub-sections by links in a sidebar. The links in the sidebar change depending on which section is selected.
The problem is the section names are quite long (several words) and as a result the combined length of the tabs is too wide for a standard screen resolution (1024 x 768). Therefore they wrap and break the page layout. We will also have to add additional tabs in the future.
With this problem in mind and the fact our target audience is quite wide, this is a public medical website, what options are there for presenting this kind of information in a way which is accessible and easy to navigate for an average user.
How long are the subsection names? Will they fit in the space for tabs? You’re likely to get better user performance if you put the section links on the side bar menu and the subsection links in the tabs, rather than the other way around. See http://www.usability.gov/pubs/040106news.html.
The other alternative is to put everything on the side bar menu. Subsection links can appear indented under their section links. You can also consider putting the subsection links in a column of their own to the right of the section column. This makes the section menu stable, but takes a lot of horizontal space that’s perhaps better used for content. In either case, proper attention to visual design will show the current section, subsection, and the link between them.
There shouldn’t be a problem with accessibility as long as you’re using links to navigate to each section/subsection (perhaps generated programmatically for each page based on a database relating links to pages).
Just brainstorming some ideas:
Use combo boxes to allow the user to select the (sub)sections, then display the appropriate information items.
Create separate pages for each section-level and provide a bread-crumb control to show the user where he / she is in the page hierarchy.
Create some sort of fold-out menus that automatically hide when the user reads an information item.
In another question on SO, I came across a link to Quince, perhaps you can find some inspiration there as well.
You could try:
An iPod-style menu (in which subsections are hidden pages that fly in from the right): http://www.filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/
Or as Daan has said:
Cascading drop-down boxes: http://www.asp.net/AJAX/AjaxControlToolkit/Samples/CascadingDropDown/CascadingDropDown.aspx
The downside with both of these (over a traditional tree view) is that the subsections aren't visible until you choose a section. If your users don't know the name of the subsection they're after, then either of these will be a good fit.
If, on the other hand, they do know the name of the subsection they're after, it's probably better to give them an auto-complete textbox so they can type a few characters and go directly to it.

Resources