From b7ee95b31bf246ce0cc7bc75e93702a2684d6a94 Mon Sep 17 00:00:00 2001 From: Phil Howard Date: Sat, 20 Feb 2016 16:35:57 +0000 Subject: [PATCH] New design for boards grouping, and featured items --- generate-html.py | 138 +++++++++++++++++++++++++----------- resources/pinout.css | 130 ++++++++++++++++++++++----------- resources/pinout.js | 37 ++++++---- src/en/template/layout.html | 19 ++--- 4 files changed, 218 insertions(+), 106 deletions(-) diff --git a/generate-html.py b/generate-html.py index 413af43..028ab73 100755 --- a/generate-html.py +++ b/generate-html.py @@ -12,6 +12,37 @@ reload(sys) sys.setdefaultencoding('utf8') + +lang = "en" +default_strings = { + 'made_by': 'Made by {manufacturer}', + 'type_hat': 'HAT form-factor', + 'type_classic': 'Classic form-factor', + 'pin_header': '{} pin header', + 'uses_i2c': 'Uses I2C', + 'wiring_pi_pin': 'Wiring Pi pin {}', + 'uses_n_gpio_pins': 'Uses {} GPIO pins', + 'bcm_pin_rev1_pi': 'BCM pin {} on Rev 1 ( very early ) Pi', + 'physical_pin_n': 'Physical pin {}', + 'more_information': 'More Information', + 'github_repository': 'GitHub Repository', + 'buy_now': 'Buy Now', + 'group_multi': 'Multi', + 'group_led': 'LED', + 'group_iot': 'IOT', + 'group_instrument': 'Instrument', + 'group_lcd': 'LCD', + 'group_other': 'Other', + 'group_motor': 'Motor', + 'group_audio': 'Audio', + 'group_gesture': 'Gesture', + 'group_pinout': 'Pinout', + 'group_info': 'Info', + 'group_featured': 'Featured' +} + + + def cssify(value): value = slugify(value); if value[0] == '3' or value[0] == '5': @@ -143,7 +174,7 @@ def load_md(filename): return html except IOError: - print('Unable to load markdown from {}'.format(filename)) + print('!! Unable to load markdown from {}'.format(filename)) return '' @@ -356,33 +387,6 @@ def get_lang_urls(src): Main Program Flow ''' -lang = "en" -default_strings = { - 'made_by': 'Made by {manufacturer}', - 'type_hat': 'HAT form-factor', - 'type_classic': 'Classic form-factor', - 'pin_header': '{} pin header', - 'uses_i2c': 'Uses I2C', - 'wiring_pi_pin': 'Wiring Pi pin {}', - 'uses_n_gpio_pins': 'Uses {} GPIO pins', - 'bcm_pin_rev1_pi': 'BCM pin {} on Rev 1 ( very early ) Pi', - 'physical_pin_n': 'Physical pin {}', - 'more_information': 'More Information', - 'github_repository': 'GitHub Repository', - 'buy_now': 'Buy Now', - 'group_multi': 'Multi', - 'group_led': 'LED', - 'group_iot': 'IOT', - 'group_instrument': 'Instrument', - 'group_lcd': 'LCD', - 'group_other': 'Other', - 'group_motor': 'Motor', - 'group_audio': 'Audio', - 'group_gesture': 'Gesture', - 'group_pinout': 'Pinout', - 'group_info': 'Info' -} - if len(sys.argv) > 1: lang = sys.argv[1] @@ -434,6 +438,8 @@ if not os.path.isdir('output/{}/pinout'.format(lang)): exit('Failed to create output/{}/pinout dir'.format(lang)) overlays = map(load_overlay, overlays) +overlay_subnav = ['featured'] +featured_boards = [] ''' Build up the navigation between overlays. This needs to be done before rendering pages @@ -446,27 +452,63 @@ for overlay in overlays: overlays_html += [link] + if 'featured' in overlay and 'image' in overlay and len(featured_boards) < 3: + featured_boards.append(overlay) + if 'class' in overlay and 'type' in overlay: o_class = overlay['class'] o_type = overlay['type'] - if o_class in nav_html: - if o_type in nav_html[o_class]: - nav_html[o_class][o_type] += [link] - else: - nav_html[o_class][o_type] = [link] - else: + if o_class not in nav_html: nav_html[o_class] = {} - nav_html[o_class][o_type] = [link] + if o_type not in nav_html[o_class]: + nav_html[o_class][o_type] = [] + + if o_class == 'board' and o_type not in overlay_subnav: + overlay_subnav.append(o_type) + + nav_html[o_class][o_type] += [link] + + + +featured_boards_html = '' +for overlay in featured_boards: + featured_boards_html += '
{name}{description}
'.format( + image=overlay['image'], + name=overlay['name'], + page_url=overlay['page_url'], + base_url=base_url, + resource_url=resource_url, + description=overlay['description'] + ) + +featured_boards_html = '
' + featured_boards_html + '
' + +''' +Generate legacy navigation menu for all overlays in a single drop-down +''' overlays_html.sort() overlays_html = ''.join(map(lambda x: '
  • {}
    • '.format(base_url, x[0], x[1]), overlays_html)) +''' +Generate the new categorised navigation menu +''' +overlay_subnav = ''.join(map(lambda overlay_type: '
  • {text}
    • '.format(cls=overlay_type,text=strings['group_' + overlay_type]),overlay_subnav)) + for overlay_type in nav_html.keys(): for overlay_group, items in nav_html[overlay_type].iteritems(): items.sort() - nav_html[overlay_type][overlay_group] = '
    • ' + group_items = (''.join(map(lambda x: '
  • {}
    • '.format(base_url, x[0], x[1]), items))) + + nav_html[overlay_type][overlay_group] = '
    ' nav_html[overlay_type] = ''.join(nav_html[overlay_type].values()) + + if overlay_type == 'board': + nav_html[overlay_type] = '
    ' + featured_boards_html + nav_html[overlay_type] + + +print(nav_html) ''' Manually add the index page as 'pinout', this is due to how the @@ -479,7 +521,17 @@ pages['index'] = {} pages['index']['rendered_html'] = render_overlay_page({'name': 'Index', 'long_description': load_md('index.md')}) navs['index'] = render_nav('pinout') -print('Rendering pin pages...') +''' +Add the 404 page if 404.md is present. +''' +page404 = load_md('404.md') +if page404 is not None: + pages['404'] = {} + pages['404']['rendered_html'] = render_overlay_page({'name': '404', 'long_description': page404}) + navs['404'] = render_nav('pinout') + + +print('\nRendering pin pages...') for pin in range(1, len(pinout.pins) + 1): (pin_url, pin_html, pin_title) = render_pin_page(pin) @@ -502,13 +554,14 @@ for pin in range(1, len(pinout.pins) + 1): langcode=lang, nav_html=nav_html ) - print('Outputting page {}'.format(pin_url)) + + print('>> pinout/{}.html'.format(pin_url)) with open(os.path.join('output', lang, 'pinout', '{}.html'.format(pin_url)), 'w') as f: f.write(pin_html) -print('Rendering overlay and index pages...') +print('\nRendering overlay and index pages...') for url in pages: content = pages[url]['rendered_html'] @@ -545,10 +598,13 @@ for url in pages: langcode=lang, nav_html=nav_html ) - print('Outputting page {}'.format(url)) - if url != 'index': + if url != 'index' and url != '404': url = os.path.join('pinout', url) + print('>> {}.html'.format(url)) + with open(os.path.join('output', lang, '{}.html'.format(url)), 'w') as f: f.write(html) + +print('\nAll done!') diff --git a/resources/pinout.css b/resources/pinout.css index c65ad87..65fdff0 100644 --- a/resources/pinout.css +++ b/resources/pinout.css @@ -167,7 +167,7 @@ Drop down nav top:50%; margin-top:-5px; } -#sections ul div { +#sections ul .dropdown { display:none; position:absolute; right:0px; @@ -175,58 +175,108 @@ Drop down nav max-width:704px; z-index:1; } -#sections ul div > ul { + +#sections .dropdown .group, #sections .dropdown .group-nav { padding:10px; - text-align:right; box-sizing:border-box; display:block; } -#sections ul ul li { - float:none; - display: inline-block; + +#sections ul .dropdown .group-nav { + padding-right:0; } -#sections ul ul a, #sections .group-title { - color:#FFF; - padding:8px; + +#sections .group li { display:inline-block; - font-size:16px; - margin:2px; -} -#sections .group .group-title { - position:relative; - padding-right:20px; -} -#sections .group .group-title:after { - content: ''; - border:5px solid transparent; - border-left-color:#ffffff; - position:absolute; - right:0; - top:50%; - margin-top:-5px; + margin-right:5px; + margin-bottom:5px; } -#sections > ul > li:nth-child(1) a, #sections > ul > li:nth-child(1) div {background: #D33682;} -#sections > ul > li:nth-child(1) ul a {background: #C32672;} -#sections > ul > li:nth-child(1) ul a:hover {color: #D33682;background:#FFF;} - -#sections > ul > li:nth-child(2) a, #sections > ul > li:nth-child(2) div {background: #6c71c4;} -#sections > ul > li:nth-child(2) ul a {background: #5c61b4;} -#sections > ul > li:nth-child(2) ul a:hover {color: #6c71c4;background:#FFF;} - -#sections > ul > li:nth-child(3) a, #sections > ul > li:nth-child(3) div {background: #268BD2;} -#sections > ul > li:nth-child(3) ul a {background: #167BC2;} -#sections > ul > li:nth-child(3) ul a:hover {color: #268BD2;background:#FFF;} - -#sections > ul > li:nth-child(2) .group-title, #sections > ul > li:nth-child(3) .group-title { - display:none; +#sections .group a { + color:#FFF; + padding:5px 10px; + display:block; } -#sections > ul > li:first-child { +#sections .boards .group-nav { + width:25%; + display:block; + float:left; +} + +#sections .boards .group { + width:75%; + display:block; + float:left; + min-height:390px; +} + +#sections .boards .group-nav li { + display:block; + color:#FFFFFF; + padding:5px 10px; + display:block; + margin-bottom:5px; + cursor:pointer; +} + +#sections .boards .group-nav li:hover, +#sections .boards .group-nav li.active {background: #C32672;} + +#sections .boards a, #sections .boards .dropdown {background: #D33682;} +#sections .boards .group {background: #C32672;} +#sections .boards ul a:hover {color: #D33682;background:#FFF;} + +#sections .interfaces a, #sections .interfaces .dropdown {background: #6c71c4;} +#sections .interfaces ul a {background: #5c61b4;} +#sections .interfaces ul a:hover {color: #6c71c4;background:#FFF;} + +#sections .guides a, #sections .guides .dropdown {background: #268BD2;} +#sections .guides ul a {background: #167BC2;} +#sections .guides ul a:hover {color: #268BD2;background:#FFF;} + +#sections .boards { border-left:none; width:34%; } +#sections .featured { + box-sizing:border-box; + width:33.3333%; + display:block; + float:left; + text-align:center; +} +#sections .featured img { + max-width:100%; + height:auto; + display:block; +} +#sections .featured a { + background:none; +} + +#sections .featured a:hover { + background: #D33682; +} +#sections .featured strong { + font-size:20px; + font-family: 'Avenir', sans-serif; + font-weight: 500; + color:#FFFFFF; + margin: 0; + padding: 0 5px; + display:block; +} +#sections .featured span { + color: #FFFFFF; + font-size: 16px; + font-weight: normal; + margin: 0; + padding: 0 5px; + display:block; +} + /* Footer */ @@ -452,7 +502,7 @@ ol.linenums {margin-left:30px;} .board { right:1200px; } - #sections ul div { + #sections ul .dropdown { min-width:700px; max-width:700px; } diff --git a/resources/pinout.js b/resources/pinout.js index a7d0135..158d82d 100644 --- a/resources/pinout.js +++ b/resources/pinout.js @@ -1,27 +1,42 @@ jQuery(document).ready(function(){ var overlay_slideUp; - var dropdowns = $('#sections ul li div'); + var dropdowns = $('#sections ul li .dropdown'); $('pre').addClass('prettyprint').addClass('linenums'); window.prettyPrint&&prettyPrint(); + var groups = $('#sections .boards .group'); + var group_nav = $('#sections .boards .group-nav li'); + + groups.hide().filter(':eq(0)').show(); + group_nav.removeClass('active').filter(':eq(0)').addClass('active'); + + group_nav.on('click',function(e){ + group_nav.removeClass('active'); + $(this).addClass('active'); + groups.hide(); + + var group = $(this).data('group'); + + groups.filter('.group_' + group).show(); + }) $('#container').on('click',function(){ dropdowns.slideUp(100); }); - $('#sections > ul > li > a').click(function(e){ + $('#sections > ul > li > a').on('click',function(e){ e.preventDefault(); e.stopPropagation(); - var dropdown = $(this).parent().find('div'); + var dropdown = $(this).parent().find('.dropdown'); dropdowns.hide(); dropdown.show(); }); $('#sections > ul > li > a').hover(function(e){ e.preventDefault(); - var dropdown = $(this).parent().find('div'); + var dropdown = $(this).parent().find('.dropdown'); clearTimeout(overlay_slideUp); if(dropdowns.filter(':visible').length){ dropdowns.hide(); @@ -33,12 +48,16 @@ jQuery(document).ready(function(){ } },function(e){ e.preventDefault(); - var dropdown = $(this).parent().find('div'); + var dropdown = $(this).parent().find('.dropdown'); clearTimeout(overlay_slideUp); overlay_slideUp = setTimeout(function(){dropdown.slideUp(100);}, 100); }); - $('#sections > ul > li > div').hover(function(e){ + dropdowns.on('click',function(e){ + e.stopPropagation(); + }) + + dropdowns.hover(function(e){ clearTimeout(overlay_slideUp); },function(e){ e.preventDefault(); @@ -47,12 +66,6 @@ jQuery(document).ready(function(){ overlay_slideUp = setTimeout(function(){dropdown.slideUp(100);}, 100); }) - $.gaat({ - trackExternal: true, - trackDownload: false, - trackFTP: false - }) - $('article p').each(function(){ html = $(this).html(); diff --git a/src/en/template/layout.html b/src/en/template/layout.html index 72485a3..ef4eb03 100755 --- a/src/en/template/layout.html +++ b/src/en/template/layout.html @@ -33,20 +33,14 @@
    @@ -71,7 +65,6 @@ -