Ralf Herrmann Posted August 6, 2015 Posted August 6, 2015 I know the saying - "when its ready" - anyway - could you give a closer estimate on the timeframe for the documentation? This month?As in the past, individual articles will be published when they are ready. There won’t be a single day when we release a complete documentation which covers everything at once.
Misi Posted August 6, 2015 Posted August 6, 2015 I know the saying - "when its ready" - anyway - could you give a closer estimate on the timeframe for the documentation? This month? IPB4 is changing constantly, hard to make documentation for a not fully ready product.When it will be ready then they can work on the documentation.
Tibory Posted August 6, 2015 Posted August 6, 2015 Just an question -I am still getting a red </section> at the bottom with this code<section class='ipsType_normal ipsSpacer_both'> {{if count($articles)}} <div class='ipsGrid ipsGrid_collapsePhone'> {{foreach $articles as $id => $record}} {{if ($id == 0)}} <div class='ipsGrid_span12'> {{else}}<div class='ipsGrid_span6'> {{endif}} {template="entry" app="cms" location="database" group="article_grid" params="$record, $database"} </div> {{endforeach}} </div> {{endif}} </section>Any idea why?
Ralf Herrmann Posted August 6, 2015 Posted August 6, 2015 Just an question -I am still getting a red </section> at the bottom with this code<section class='ipsType_normal ipsSpacer_both'> {{if count($articles)}} <div class='ipsGrid ipsGrid_collapsePhone'> {{foreach $articles as $id => $record}} {{if ($id == 0)}} <div class='ipsGrid_span12'> {{else}}<div class='ipsGrid_span6'> {{endif}} {template="entry" app="cms" location="database" group="article_grid" params="$record, $database"} </div> {{endforeach}} </div> {{endif}} </section>Any idea why?The code is technically correct, but the system probably doesn’t understand that there are two DIVs in the IF/ELSE clause, which will only output one.It could be optimized by using just one DIV there and the IF/ELSE clause only for the class.
Tibory Posted August 6, 2015 Posted August 6, 2015 The code is technically correct, but the system probably doesn’t understand that there are two DIVs in the IF/ELSE clause, which will only output one.It could be optimized by using just one DIV there and the IF/ELSE clause only for the class. So how would you suggest I change it?alsohttp://i.imgur.com/99fv72E.png?1 on the picture - the bottom left box is indented for no reason.
Loren Posted August 6, 2015 Posted August 6, 2015 So how would you suggest I change it?alsohttp://i.imgur.com/99fv72E.png?1 on the picture - the bottom left box is indented for no reason.You have 3 div opens and only 2 closes. You need another </div>.
Tibory Posted August 6, 2015 Posted August 6, 2015 You have 3 div opens and only 2 closes. You need another </div>.Any particular place?
Loren Posted August 6, 2015 Posted August 6, 2015 Any particular place?Probably before the last endif,
GrooveOnBeat Posted August 6, 2015 Posted August 6, 2015 (edited) Find: {{if ($id == 0)}} <div class='ipsGrid_span12'> {{else}}<div class='ipsGrid_span6'> {{endif}} Replace with: <div class='{{if ($id == 0)}}ipsGrid_span12{{else}}ipsGrid_span6{{endif}}'> Edited August 6, 2015 by GrooveOnBeat tzrtim and Ralf Herrmann 2
craigf136 Posted August 7, 2015 Posted August 7, 2015 How easy is it to change the grid layout to 3 x 3?i currently have it in grid view for database but it's 2x2
Ralf Herrmann Posted August 7, 2015 Posted August 7, 2015 How easy is it to change the grid layout to 3 x 3?You mean with the code discussed here in the last posts? Very easy. The grid system is based on 12 units, therefore the “ipsGrid_span12” for a full-width entry. For the 2x2 the example uses two times half that value: 6. If you want 3 entries per line, you just use 12 divided by 3, which is 4. So replace the ipsGrid_span6 with ipsGrid_span4 and you got 3 entries per line.
craigf136 Posted August 7, 2015 Posted August 7, 2015 You mean with the code discussed here in the last posts? Very easy. The grid system is based on 12 units, therefore the “ipsGrid_span12” for a full-width entry. For the 2x2 the example uses two times half that value: 6. If you want 3 entries per line, you just use 12 divided by 3, which is 4. So replace the ipsGrid_span6 with ipsGrid_span4 and you got 3 entries per line. Champion, thanks Ralph.
Tibory Posted August 8, 2015 Posted August 8, 2015 (edited) For some reason, after the main article that appears at the top I seem to get an indent on the others...any idea why? @Ralf Herrmann - Have you got any idea on this? Edited August 8, 2015 by Tibory xert77 and craigf136 2
xert77 Posted August 8, 2015 Author Posted August 8, 2015 For some reason, after the main article that appears at the top I seem to get an indent on the others...any idea why? @Ralf Herrmann - Have you got any idea on this? Nice work, this is already looking amazing! Hope you get the indent sorted, I think someone above had a similar issue (might be wrong though)
craigf136 Posted August 9, 2015 Posted August 9, 2015 (edited) I have a bit of an issue with the above information for grid view. Essentially all I have done is remove/paste what is above and change the ipsGrid_span6 to ipsGrid_span4. It works but I have layout issues. Firstly I need to truncate the title, how do we do this? I know it's related to here, but unsure how to? <h1 class='ipsType_pageTitle'>{$database->_title}</h1> {{if $database->_description}} <div class='ipsPageHeader_info ipsType_light'> {$database->_description} </div> {{endif}} Secondly the grid is all over the shop (was OK at 6 videos) then added a couple more and the last video added has caused issues due to title size I believe."Show All Categories" when selected show's a white page, however, click on the category with the video and the list appears.https://i.gyazo.com/2bab51b0ab52dd78ee6150e582f61a96.pngCopy of my template index.<div class='ipsPageHeader ipsClearfix ipsSpacer_bottom'> {{if $database->use_categories}} <div class='ipsPos_right ipsResponsive_noFloat'> <a href="{$url->setQueryString('show', 'categories')}" class="ipsButton ipsButton_medium ipsButton_fullWidth ipsButton_link"><i class="fa fa-folder-open"></i> {lang="cms_show_categories"}</a> </div> {{endif}} <h1 class='ipsType_pageTitle'>{$database->_title}</h1> {{if $database->_description}} <div class='ipsPageHeader_info ipsType_light'> {$database->_description} </div> {{endif}} </div> {{if $database->can('add') or \IPS\Member::loggedIn()->member_id}} <ul class="ipsToolList ipsToolList_horizontal ipsClearfix ipsSpacer_both ipsResponsive_hidePhone"> {{if $database->can('add')}} <li class='ipsToolList_primaryAction'> <a class="ipsButton ipsButton_medium ipsButton_important ipsButton_fullWidth" {{if $database->use_categories}}data-ipsDialog="1" data-ipsDialog-size="narrow" data-ipsDialog-title="{lang="cms_select_category"}"{{endif}} href="{$url->setQueryString( array( 'do' => 'form', 'd' => \IPS\cms\Databases\Dispatcher::i()->databaseId ) )}">{lang="cms_add_new_record_button" sprintf="$database->recordWord( 1 )"}</a> </li> {{endif}} </ul> {{endif}} <hr class='ipsHr'> <section class='ipsType_normal ipsSpacer_both'> {{if count($articles)}} <div class='ipsGrid ipsGrid_collapsePhone'> {{foreach $articles as $id => $record}} <div class='ipsGrid_span4'> {template="entry" app="cms" location="database" group="Videos" params="$record, $database"} </div> {{endforeach}} </div> {{endif}} </section> {{if $database->featured_settings['pagination'] and ( $pagination['pages'] > 1 )}} {template="pagination" app="core" location="global" group="global" params="$url, $pagination['pages'], $pagination['page'], $database->featured_settings['perpage'], TRUE, 'page'"} {{endif}}Any help would be appreciated. Edited August 9, 2015 by craigf136
Jujuwar Posted August 9, 2015 Posted August 9, 2015 For some reason, after the main article that appears at the top I seem to get an indent on the others...any idea why? @Ralf Herrmann - Have you got any idea on this? I don't know how GridLayout should work, but here the reason of this : The first ipsGrid_span6 after the ipsGrid_span12 has this style : html[dir="ltr"] .ipsGrid_span12:nth-child( 1n ), html[dir="ltr"] .ipsGrid_span12 + [class*="ipsGrid_span"], html[dir="ltr"] .ipsGrid_span6:nth-child( odd ), html[dir="ltr"] .ipsGrid_span4:nth-child( 3n+1 ), html[dir="ltr"] .ipsGrid_span3:nth-child( 4n+1 ), html[dir="ltr"] .ipsGrid_span2:nth-child( 6n+1 ), html[dir="ltr"] .ipsGrid_span1:nth-child( 12n+1 ) { margin-left: 0; } and the others have this : html[dir="ltr"] .ipsGrid > [class*="ipsGrid_span"] { float: left; margin-left: 2.127659574468085%; }
chilihead Posted August 9, 2015 Posted August 9, 2015 (edited) And regarding the grid view for article listings: while that is not a default option, it only needs a small template change, since a responsive grid is already in the CSS. So to have a grid view for articles: 1. Add a custom database template in the Pages’ template manager. Make sure it’s of the type “Featured Records”. Also make sure you assign it to your article database. Also call it “Article Grid” (that name is later used in the code). 2. Open the “index” template of this newly created template group. Replace this part: {{if count($articles)}} {{foreach $articles as $id => $record}} {template="entry" app="cms" location="database" group="article_grid" params="$record, $database"} {{endforeach}} {{endif}} With this: {{if count($articles)}} <div class='ipsGrid ipsGrid_collapsePhone'> {{foreach $articles as $id => $record}} <div class='ipsGrid_span6'> {template="entry" app="cms" location="database" group="article_grid" params="$record, $database"} </div> {{endforeach}} </div> {{endif}} That’s it. Your articles are now displayed as a grid which automatically collapses on smaller screen. And a bonus for all those who want the 2x1x1 layout from 3.4 – use this instead: {{if count($articles)}} <div class='ipsGrid ipsGrid_collapsePhone'> {{foreach $articles as $id => $record}} {{if ($id == 0)}} <div class='ipsGrid_span12'> {{else}}<div class='ipsGrid_span6'> {{endif}} {template="entry" app="cms" location="database" group="article_grid" params="$record, $database"} </div> {{endforeach}} </div> {{endif}} This is a good example of why I'd like to be able to highlight/mark posts, not just follow topics! Like marking as "Favorite." For now, I will just quote it for later, thanks. Edited August 9, 2015 by chilihead
wmarcy Posted August 9, 2015 Posted August 9, 2015 This is a good example of why I'd like to be able to highlight/mark posts, not just follow topics! Like marking as "Favorite."For now, I will just quote it for later, thanks.Chilihead, check out my subscription system at sedonconnect.com, it does exactly that. chilihead 1
Joel R Posted August 9, 2015 Posted August 9, 2015 This is a good example of why I'd like to be able to highlight/mark posts, not just follow topics! Like marking as "Favorite."For now, I will just quote it for later, thanks.Have you seen Bookmarks by @ipsrocks? ipsrocks and chilihead 2
ABGenc Posted August 10, 2015 Posted August 10, 2015 For some reason, after the main article that appears at the top I seem to get an indent on the others...any idea why? @Ralf Herrmann - Have you got any idea on this? You are not alone https://community.invisionpower.com/topic/417791-pages-confused-by-ipb-the-staff/?do=findComment&comment=2566236b Nice work, this is already looking amazing! Hope you get the indent sorted, I think someone above had a similar issue (might be wrong though) It was me and I was not able to get any answer ..
Tibory Posted August 10, 2015 Posted August 10, 2015 I've managed to fix the indent issue but I now can't seem to put a clear separation between the left and right articles they seem to but touching. Is there anyways to add a gap between these?
bradl Posted August 12, 2015 Posted August 12, 2015 I've managed to fix the indent issue ... It would be a kindness to share how, exactly, for those who have not yet managed to find the correct implementation GrooveOnBeat 1
craigf136 Posted August 13, 2015 Posted August 13, 2015 Does this help?https://community.invisionpower.com/topic/417791-pages-confused-by-ipb-the-staff/?do=findComment&comment=2565963
bradl Posted August 13, 2015 Posted August 13, 2015 Using ipsPad made it worse, although it did lead me to retry setting margin to zero one more time— which I thought I'd already tried nine times.{{else}}<div class='ipsGrid_span6' style="margin-left:0;min-height:350px"> Tx.
craigf136 Posted August 30, 2015 Posted August 30, 2015 (edited) I'm having issue caused by the topic titltes, and tags (removed, so not visible in image below), how easy is it to truncate tags and title? That would resolve my problem. Edited August 30, 2015 by craigf136
Recommended Posts