View Issue Details
ID | Project | Category | View Status | Date Submitted | Last Update |
---|---|---|---|---|---|
1242 | Composr | news | public | 2013-05-20 22:12 | 2013-05-21 01:44 |
Reporter | Chris Graham | Assigned To | Chris Graham | ||
Priority | normal | Severity | feature | ||
Status | resolved | Resolution | fixed | ||
Summary | 1242: Make side_news_archive block more compact | ||||
Description | For more space efficiency, make side_news_archive block start out as collapsed, showing just a list of years. Then if you click on a year, the 12 months expand underneath. If you click on another year, that one exands and the previous one collapses | ||||
Tags | No tags attached. | ||||
Attach Tags | |||||
Attached Files | news.diff (5,086 bytes)
diff --git a/sources/blocks/side_news_archive.php b/sources/blocks/side_news_archive.php index aa08664..1115729 100644 --- a/sources/blocks/side_news_archive.php +++ b/sources/blocks/side_news_archive.php @@ -149,7 +149,7 @@ class Block_side_news_archive break; } - $url=build_url(array('page'=>'news','type'=>'misc','filter'=>$filter,'start'=>count($rows)-$offset-1),$zone); + $url=build_url(array('page'=>'news','type'=>'misc','filter'=>$filter,'start'=>count($rows)-$offset-1,'year'=>$current_year,'month'=>$current_month),$zone); array_unshift($years[$current_year]['TIMES'],array('URL'=>$url,'MONTH'=>strval($current_month),'MONTH_STRING'=>$month_string)); } diff --git a/themes/default/css/news.css b/themes/default/css/news.css index 328c4b1..3e86d32 100755 --- a/themes/default/css/news.css +++ b/themes/default/css/news.css @@ -3,6 +3,30 @@ Copyright (c) ocProducts, 2004-2013 */ +.box___block_side_news_archive .box_inner>.compact_list, .box___block_side_news_archive .box_inner>.compact_list>li { + list-style-type: none; + margin: 0; + padding: 0; +} + +.box___block_side_news_archive .box_inner>.compact_list>li { + padding-top: 0.2em; + padding-bottom: 0.2em; +} + +.box___block_side_news_archive .toggleable_tray_button { + float: {!en_left}; +} + +.box___block_side_news_archive .toggleable_tray_button img { + padding-{!en_left}: 0em !important; + padding-{!en_right}: 0.5em !important; +} + +.box___block_side_news_archive .box_inner>.compact_list>li ul { + margin-{!en_left}: 2em; +} + .compacted_subbox_stream .box.box___news_brief { border-top: 0 !important; } diff --git a/themes/default/templates/BLOCK_SIDE_NEWS_ARCHIVE.tpl b/themes/default/templates/BLOCK_SIDE_NEWS_ARCHIVE.tpl index b2aa0e4..b91df03 100644 --- a/themes/default/templates/BLOCK_SIDE_NEWS_ARCHIVE.tpl +++ b/themes/default/templates/BLOCK_SIDE_NEWS_ARCHIVE.tpl @@ -1,17 +1,33 @@ +{$REQUIRE_CSS,news} +{$REQUIRE_JAVASCRIPT,javascript_dyn_comcode} + +{$,Try and set to year of currently viewed item or otherwise the current year} +{$SET,news_archive_year,{$?,{$IS_EMPTY,{$_GET,year}},{$?,{$IS_EMPTY,{$META_DATA,created}},{$FROM_TIMESTAMP,Y},{$PREG_REPLACE,-.*$,,{$META_DATA,created}}},{$_GET,year}}} + <section class="box box___block_side_news_archive"><div class="box_inner"> <h3>{TITLE*}</h3> <ul class="compact_list"> {+START,LOOP,YEARS} - <li>{YEAR} - <ul class="compact_list associated_details"> - {+START,LOOP,TIMES} - <li> - <a href="{URL*}">{MONTH_STRING}</a> - </li> - {+END} - </ul> - </li> + {$SET,is_current_year,{$EQ,{YEAR},{$GET,news_archive_year}}} + + {+START,IF_NON_EMPTY,{TIMES}} + <li class="accordion_trayitem"> + {+START,IF,{$JS_ON}}<a class="toggleable_tray_button" href="#" onclick="return accordion(this.parentNode);"><img {+START,IF,{$NOT,{$GET,is_current_year}}}alt="{!EXPAND}: {$STRIP_TAGS,{TITLE}}" title="{!EXPAND}" src="{$IMG*,expand}"{+END}{+START,IF,{$GET,is_current_year}}alt="{!CONTRACT}: {$STRIP_TAGS,{TITLE}}" title="{!CONTRACT}" src="{$IMG*,contract}"{+END} /></a> {+END} + + <span onclick="return accordion(this.parentNode);"><strong>{YEAR}</strong></span>: + + <div class="toggleable_tray accordion_trayitem"{+START,IF,{$NOT,{$GET,is_current_year}}} style="display: {$JS_ON,none,block}" aria-expanded="false"{+END}> + <ul class="compact_list associated_details"> + {+START,LOOP,TIMES} + <li> + <a href="{URL*}">{MONTH_STRING}</a> + </li> + {+END} + </ul> + </div> + </li> + {+END} {+END} </ul> </div></section> diff --git a/themes/default/templates/JAVASCRIPT_DYN_COMCODE.tpl b/themes/default/templates/JAVASCRIPT_DYN_COMCODE.tpl index fe33360..e3fd151 100755 --- a/themes/default/templates/JAVASCRIPT_DYN_COMCODE.tpl +++ b/themes/default/templates/JAVASCRIPT_DYN_COMCODE.tpl @@ -5,7 +5,7 @@ function accordion(e) var i,nodes=get_elements_by_class_name(e.parentNode.parentNode,'toggleable_tray'); for (i=0;i<nodes.length;i++) { - if ((nodes[i].parentNode!=e) && (nodes[i].style.display!='none') && (nodes[i].className.indexOf('box')!=-1)) + if ((nodes[i].parentNode!=e) && (nodes[i].style.display!='none') && (nodes[i].className.indexOf('accordion_trayitem')!=-1)) { toggleable_tray(nodes[i].parentNode,true); } diff --git a/themes/default/templates/STANDARDBOX_accordion.tpl b/themes/default/templates/STANDARDBOX_accordion.tpl index 265d86b..de26688 100644 --- a/themes/default/templates/STANDARDBOX_accordion.tpl +++ b/themes/default/templates/STANDARDBOX_accordion.tpl @@ -1,6 +1,6 @@ {$REQUIRE_JAVASCRIPT,javascript_dyn_comcode} -<div class="box box___standardbox_accordion"{+START,IF_NON_EMPTY,{WIDTH}} style="width: {WIDTH*}"{+END}> +<div class="box box___standardbox_accordion accordion_trayitem"{+START,IF_NON_EMPTY,{WIDTH}} style="width: {WIDTH*}"{+END}> {+START,IF_NON_EMPTY,{TITLE}} <h3 class="toggleable_tray_title" onkeypress="this.onclick(event);" onclick="this.getElementsByTagName('a')[0].onclick(event);"> {+START,IF_NOT_IN_ARRAY,OPTIONS,tray_open} | ||||
Time estimation (hours) | 1 | ||||
Sponsorship open | |||||
|
if there's any slicker way you'd rather do this which plans ahead for many decades worth of archives, feel free to implement. |
|
Thanks for the sponsorship :). Implemented using an accordion technique, using standard Composr expand/contract styling. Rishi - I have deployed direct for you. Others - This is incorporated into the v10 branch. A patch that is v9 compatible is attached. |
|
I forgot to mention... It tries to open the year for the content you're currently viewing. If none is known, it will open the current year. |
|
nice, looking good, thank you |