m (Changed protection level for "Template:Example2" ([Edit=Allow only administrators] (indefinite) [Move=Allow only administrators] (indefinite)) [cascading]) |
|||
(86 intermediate revisions by 6 users not shown) | |||
Line 3: | Line 3: | ||
<script> | <script> | ||
− | // This is the jquery part of your template. Try not modify any of this code since it makes your menu work. | + | // This is the jquery part of your template. |
− | + | // Try not modify any of this code too much since it makes your menu work. | |
$(document).ready(function() { | $(document).ready(function() { | ||
− | |||
$("#HQ_page").attr('id',''); | $("#HQ_page").attr('id',''); | ||
− | + | // call the functions that control the menu | |
menu_functionality(); | menu_functionality(); | ||
+ | hide_show_menu(); | ||
− | + | //this function controls the expand and collapse buttons of the menu and changes the +/- symbols | |
− | + | ||
function menu_functionality() { | function menu_functionality() { | ||
+ | //when clicking on a "menu_button", it will change the "+/-" accordingly and it will show/hide the corresponding submenu | ||
$(".menu_button").click(function(){ | $(".menu_button").click(function(){ | ||
+ | |||
+ | // add or remove the class "open" , this class holds the "-" | ||
+ | $(this).children().toggleClass("open"); | ||
+ | // show or hide the submenu | ||
$(this).next('.submenu_wrapper').fadeToggle(400); | $(this).next('.submenu_wrapper').fadeToggle(400); | ||
}); | }); | ||
+ | // when the screen size is smaller than 800px, the display_menu_control button appears and will show/hide the whole menu | ||
$("#display_menu_control").click(function(){ | $("#display_menu_control").click(function(){ | ||
$('#menu_content').fadeToggle(400); | $('#menu_content').fadeToggle(400); | ||
}); | }); | ||
+ | // call the current page highlight function | ||
highlight_current_page(); | highlight_current_page(); | ||
} | } | ||
+ | // call the highlight current page function to show it on the menu with a different background color | ||
function highlight_current_page() { | function highlight_current_page() { | ||
− | + | // select a page from the menu based on the id assigned to it and the current page name and add the class "current page" to make it change background color | |
+ | $("#"+ wgPageName.substring(wgPageName.lastIndexOf("/")+1, wgPageName.length ) + "_page").addClass("current_page"); | ||
− | $(" | + | // now that the current_page class has been added to a menu item, make the submenu fade in |
− | + | $(".current_page").parents(".submenu_wrapper").fadeIn(400); | |
− | + | // change the +/- symbol of the corresponding menu button | |
− | + | $(".current_page").parents(".submenu_wrapper").prev().children().toggleClass("open"); | |
− | + | ||
} | } | ||
Line 46: | Line 53: | ||
− | + | // allow button on the black menu bar to show/hide the side menu | |
function hide_show_menu() { | function hide_show_menu() { | ||
+ | |||
+ | // in case you preview mode is selected, the menu is hidden for better visibility | ||
+ | if (window.location.href.indexOf("submit") >= 0) { | ||
+ | $(".igem_2017_menu_wrapper").hide(); | ||
+ | } | ||
+ | // if the black menu bar has been loaded | ||
if (document.getElementById('bars_item')) { | if (document.getElementById('bars_item')) { | ||
+ | |||
+ | // when the "bars_item" has been clicked | ||
$("#bars_item").click(function() { | $("#bars_item").click(function() { | ||
$("#sideMenu").hide(); | $("#sideMenu").hide(); | ||
+ | |||
+ | // show/hide the menu wrapper | ||
$(".igem_2017_menu_wrapper").fadeToggle("100"); | $(".igem_2017_menu_wrapper").fadeToggle("100"); | ||
}); | }); | ||
} | } | ||
+ | |||
+ | // because the black menu bars loads at a different time than the rest of the page, this function is set on a time out so it can run again in case it has not been loaded yet | ||
else { | else { | ||
setTimeout(hide_show_menu, 15); | setTimeout(hide_show_menu, 15); | ||
Line 65: | Line 84: | ||
</script> | </script> | ||
+ | |||
+ | |||
+ | |||
Line 77: | Line 99: | ||
#home_logo, #sideMenu { display:none; } | #home_logo, #sideMenu { display:none; } | ||
#sideMenu, #top_title, .patrollink {display:none;} | #sideMenu, #top_title, .patrollink {display:none;} | ||
− | #content { | + | #content { width:100%; padding:0px; margin-top:-7px; margin-left:0px;} |
body {background-color:white; } | body {background-color:white; } | ||
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; } | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; } | ||
Line 89: | Line 111: | ||
width: 15%; | width: 15%; | ||
height:100vh; | height:100vh; | ||
− | position:fixed; | + | position:fixed; |
+ | right:0%; | ||
padding:0px; | padding:0px; | ||
float:right; | float:right; | ||
+ | border-left: 1px solid #d3d3d3; | ||
background-color:#dddddd; | background-color:#dddddd; | ||
text-align:left; | text-align:left; | ||
− | + | font-family:Tahoma, Geneva, sans-serif; | |
overflow-y: auto; | overflow-y: auto; | ||
overflow-x: hidden; | overflow-x: hidden; | ||
− | |||
} | } | ||
+ | /* this hides the scrollbar to keep view consistency */ | ||
+ | .igem_2017_menu_wrappe::-webkit-scrollbar { | ||
+ | display: none; | ||
+ | } | ||
Line 116: | Line 143: | ||
.igem_2017_menu_wrapper .menu_button { | .igem_2017_menu_wrapper .menu_button { | ||
width: 100%; | width: 100%; | ||
+ | padding: 10px 0px 10px 15px; | ||
+ | float:left; | ||
border-bottom: 1px solid #d3d3d3; | border-bottom: 1px solid #d3d3d3; | ||
− | |||
− | |||
font-size: 12px; | font-size: 12px; | ||
+ | font-weight: bold; | ||
color: #5e5f5f; | color: #5e5f5f; | ||
− | |||
cursor: pointer; | cursor: pointer; | ||
} | } | ||
+ | |||
+ | .igem_2017_menu_wrapper .menu_bottom_padding { | ||
+ | width: 100%; | ||
+ | height: 30px; | ||
+ | float:left; | ||
+ | } | ||
+ | |||
+ | .menu_button.direct_to_page { | ||
+ | padding-left: 36px; | ||
+ | } | ||
+ | |||
+ | |||
+ | .igem_2017_menu_wrapper .menu_button .expand_collapse_icon { | ||
+ | width:10%; | ||
+ | float:left; | ||
+ | } | ||
+ | |||
+ | .igem_2017_menu_wrapper .menu_button .expand_collapse_icon::before { | ||
+ | content: "+"; | ||
+ | } | ||
+ | |||
+ | .open::before { | ||
+ | content: "-" !important; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
/* styling for the menu buttons on hover */ | /* styling for the menu buttons on hover */ | ||
.igem_2017_menu_wrapper .menu_button:hover, .igem_2017_menu_wrapper .submenu_button:hover , .submenu_button.current_page:hover { | .igem_2017_menu_wrapper .menu_button:hover, .igem_2017_menu_wrapper .submenu_button:hover , .submenu_button.current_page:hover { | ||
− | |||
background-color: #3399ff; | background-color: #3399ff; | ||
text-decoration: none; | text-decoration: none; | ||
+ | color:#ffffff; | ||
} | } | ||
Line 142: | Line 196: | ||
.igem_2017_menu_wrapper .submenu_button { | .igem_2017_menu_wrapper .submenu_button { | ||
width: 100%; | width: 100%; | ||
+ | padding: 10px 0px 10px 34px; | ||
+ | float:left; | ||
+ | background-color:#f2f2f2; | ||
border-bottom: 1px solid #d3d3d3; | border-bottom: 1px solid #d3d3d3; | ||
− | |||
font-size: 12px; | font-size: 12px; | ||
color: #5e5f5f; | color: #5e5f5f; | ||
− | |||
− | |||
cursor: pointer; | cursor: pointer; | ||
} | } | ||
Line 168: | Line 222: | ||
.igem_2017_content_wrapper { | .igem_2017_content_wrapper { | ||
width: 81%; | width: 81%; | ||
+ | margin: 2%; | ||
+ | display:block; | ||
float:left; | float:left; | ||
background-color:white; | background-color:white; | ||
− | + | font-family:Tahoma, Geneva, sans-serif; | |
− | + | ||
} | } | ||
Line 180: | Line 235: | ||
.igem_2017_content_wrapper h1, .igem_2017_content_wrapper h2 { | .igem_2017_content_wrapper h1, .igem_2017_content_wrapper h2 { | ||
padding:5px 15px; | padding:5px 15px; | ||
− | border-bottom:0px; | + | border-bottom: 0px; |
− | color: | + | color: #3399ff; |
} | } | ||
Line 197: | Line 252: | ||
padding: 0px 15px; | padding: 0px 15px; | ||
font-size: 13px; | font-size: 13px; | ||
− | |||
} | } | ||
Line 216: | Line 270: | ||
.igem_2017_content_wrapper a:hover { | .igem_2017_content_wrapper a:hover { | ||
text-decoration:none; | text-decoration:none; | ||
− | + | color:#000000; | |
} | } | ||
Line 274: | Line 328: | ||
/* styling for images in a full width column*/ | /* styling for images in a full width column*/ | ||
.column.full_size img { | .column.full_size img { | ||
− | |||
width:97%; | width:97%; | ||
+ | padding: 10px 15px; | ||
} | } | ||
Line 284: | Line 338: | ||
/* styling for images in a half width column*/ | /* styling for images in a half width column*/ | ||
.column.half_size img { | .column.half_size img { | ||
− | |||
width: 94.5%; | width: 94.5%; | ||
+ | padding: 10px 15px; | ||
} | } | ||
Line 307: | Line 361: | ||
/* highlight class, makes content slightly smaller */ | /* highlight class, makes content slightly smaller */ | ||
.igem_2017_content_wrapper .highlight { | .igem_2017_content_wrapper .highlight { | ||
− | |||
margin: 0px 15px; | margin: 0px 15px; | ||
+ | padding: 15px 0px; | ||
} | } | ||
Line 319: | Line 373: | ||
/* highlight with decoration blue line on top */ | /* highlight with decoration blue line on top */ | ||
.igem_2017_content_wrapper .highlight.blue_top { | .igem_2017_content_wrapper .highlight.blue_top { | ||
− | + | border-top: 4px solid #3399ff; | |
} | } | ||
/* highlight with a full blue border decoration */ | /* highlight with a full blue border decoration */ | ||
.igem_2017_content_wrapper .highlight.blue_border { | .igem_2017_content_wrapper .highlight.blue_border { | ||
− | + | border: 4px solid #3399ff; | |
} | } | ||
Line 331: | Line 385: | ||
.igem_2017_content_wrapper .button{ | .igem_2017_content_wrapper .button{ | ||
max-width: 35%; | max-width: 35%; | ||
− | + | margin: 30px auto; | |
− | + | padding: 12px 10px; | |
− | + | background-color: #3399ff; | |
− | + | text-align: center; | |
− | + | color: #ffffff; | |
-webkit-transition: all 0.4s ease; | -webkit-transition: all 0.4s ease; | ||
-moz-transition: all 0.4s ease; | -moz-transition: all 0.4s ease; | ||
Line 344: | Line 398: | ||
/* styling for button on hover */ | /* styling for button on hover */ | ||
.igem_2017_content_wrapper .button:hover{ | .igem_2017_content_wrapper .button:hover{ | ||
− | + | background-color: #3399ff; | |
− | + | color: #000000; | |
} | } | ||
Line 359: | Line 413: | ||
.igem_2017_menu_wrapper {width:15%; right:0;} | .igem_2017_menu_wrapper {width:15%; right:0;} | ||
.highlight {padding:10px 0px;} | .highlight {padding:10px 0px;} | ||
− | #display_menu_control { display:none; } | + | .igem_2017_menu_wrapper #display_menu_control { display:none; } |
#menu_content { display:block;} | #menu_content { display:block;} | ||
+ | .menu_button.direct_to_page {padding-left: 17px;} | ||
} | } | ||
Line 370: | Line 425: | ||
.igem_2017_content_wrapper {width:100%; margin-left:0px;} | .igem_2017_content_wrapper {width:100%; margin-left:0px;} | ||
.column.half_size {width:100%; } | .column.half_size {width:100%; } | ||
− | .column.full_size img, .column.half_size img { | + | .column.full_size img, .column.half_size img { width: 100%; padding: 10px 0px;} |
.highlight {padding:15px 5px;} | .highlight {padding:15px 5px;} | ||
− | #display_menu_control { display:block; } | + | .igem_2017_menu_wrapper #display_menu_control { display:block; } |
#menu_content { display:none;} | #menu_content { display:none;} | ||
+ | .igem_2017_menu_wrapper .menu_button .expand_collapse_icon { width: 5%; } | ||
+ | .menu_bottom_padding {display:none;} | ||
+ | .menu_button.direct_to_page { padding-left: 36px; } | ||
} | } | ||
Line 381: | Line 439: | ||
/* special class that the system uses to make sure the team wants a page to be evaluated */ | /* special class that the system uses to make sure the team wants a page to be evaluated */ | ||
.judges-will-not-evaluate { | .judges-will-not-evaluate { | ||
− | + | width: 96.6%; | |
− | + | ||
margin: 5px 15px; | margin: 5px 15px; | ||
− | + | display: block; | |
+ | border: 4px solid #3399ff; | ||
font-weight: bold; | font-weight: bold; | ||
} | } | ||
Line 420: | Line 478: | ||
<div id="menu_content"> | <div id="menu_content"> | ||
+ | |||
+ | |||
+ | |||
+ | <a href="https://2017.igem.org/Team:Example2"> | ||
+ | <div class="menu_button direct_to_page"> | ||
+ | HOME | ||
+ | </div> | ||
+ | </a> | ||
+ | |||
+ | |||
+ | |||
<div class="menu_button"> | <div class="menu_button"> | ||
− | TEAM | + | <div class="expand_collapse_icon"> </div> TEAM |
</div> | </div> | ||
− | <div class="submenu_wrapper" | + | <div class="submenu_wrapper" id="team_submenu"> |
<a href="https://2017.igem.org/Team:Example2/Team"> | <a href="https://2017.igem.org/Team:Example2/Team"> | ||
Line 446: | Line 515: | ||
<div class="menu_button"> | <div class="menu_button"> | ||
− | PROJECT | + | <div class="expand_collapse_icon"> </div> PROJECT |
</div> | </div> | ||
Line 453: | Line 522: | ||
<a href="https://2017.igem.org/Team:Example2/Description"> | <a href="https://2017.igem.org/Team:Example2/Description"> | ||
− | <div class="submenu_button"> | + | <div class="submenu_button" id="Description_page"> |
Description | Description | ||
</div> | </div> | ||
Line 459: | Line 528: | ||
<a href="https://2017.igem.org/Team:Example2/Design"> | <a href="https://2017.igem.org/Team:Example2/Design"> | ||
− | <div class="submenu_button"> | + | <div class="submenu_button" id="Design_page"> |
Design | Design | ||
</div> | </div> | ||
Line 465: | Line 534: | ||
<a href="https://2017.igem.org/Team:Example2/Experiments"> | <a href="https://2017.igem.org/Team:Example2/Experiments"> | ||
− | <div class="submenu_button"> | + | <div class="submenu_button" id="Experiments_page"> |
Experiments | Experiments | ||
</div> | </div> | ||
Line 472: | Line 541: | ||
<a href="https://2017.igem.org/Team:Example2/Notebook"> | <a href="https://2017.igem.org/Team:Example2/Notebook"> | ||
− | <div class="submenu_button"> | + | <div class="submenu_button" id="Notebook_page"> |
Notebook | Notebook | ||
</div> | </div> | ||
Line 478: | Line 547: | ||
<a href="https://2017.igem.org/Team:Example2/InterLab"> | <a href="https://2017.igem.org/Team:Example2/InterLab"> | ||
− | <div class="submenu_button"> | + | <div class="submenu_button" id="InterLab_page"> |
InterLab | InterLab | ||
</div> | </div> | ||
Line 484: | Line 553: | ||
<a href="https://2017.igem.org/Team:Example2/Contribution"> | <a href="https://2017.igem.org/Team:Example2/Contribution"> | ||
− | <div class="submenu_button"> | + | <div class="submenu_button" id="Contribution_page"> |
Contribution | Contribution | ||
</div> | </div> | ||
Line 490: | Line 559: | ||
<a href="https://2017.igem.org/Team:Example2/Model"> | <a href="https://2017.igem.org/Team:Example2/Model"> | ||
− | <div class="submenu_button"> | + | <div class="submenu_button" id="Model_page"> |
Model | Model | ||
</div> | </div> | ||
Line 496: | Line 565: | ||
<a href="https://2017.igem.org/Team:Example2/Results"> | <a href="https://2017.igem.org/Team:Example2/Results"> | ||
− | <div class="submenu_button"> | + | <div class="submenu_button" id="Results_page"> |
Results | Results | ||
</div> | </div> | ||
Line 503: | Line 572: | ||
<a href="https://2017.igem.org/Team:Example2/Demonstrate"> | <a href="https://2017.igem.org/Team:Example2/Demonstrate"> | ||
− | <div class="submenu_button"> | + | <div class="submenu_button" id="Demonstrate_page"> |
Demonstrate | Demonstrate | ||
</div> | </div> | ||
Line 509: | Line 578: | ||
<a href="https://2017.igem.org/Team:Example2/Improve"> | <a href="https://2017.igem.org/Team:Example2/Improve"> | ||
− | <div class="submenu_button"> | + | <div class="submenu_button" id="Improve_page"> |
Improve | Improve | ||
</div> | </div> | ||
Line 515: | Line 584: | ||
<a href="https://2017.igem.org/Team:Example2/Attributions"> | <a href="https://2017.igem.org/Team:Example2/Attributions"> | ||
− | <div class="submenu_button"> | + | <div class="submenu_button" id="Attributions_page"> |
− | + | Attributions | |
</div> | </div> | ||
</a> | </a> | ||
Line 528: | Line 597: | ||
<div class="menu_button"> | <div class="menu_button"> | ||
− | PARTS | + | <div class="expand_collapse_icon"> </div> PARTS |
</div> | </div> | ||
Line 535: | Line 604: | ||
<a href="https://2017.igem.org/Team:Example2/Parts"> | <a href="https://2017.igem.org/Team:Example2/Parts"> | ||
− | <div class="submenu_button"> | + | <div class="submenu_button" id="Parts_page"> |
Parts | Parts | ||
</div> | </div> | ||
Line 541: | Line 610: | ||
<a href="https://2017.igem.org/Team:Example2/Basic_Part"> | <a href="https://2017.igem.org/Team:Example2/Basic_Part"> | ||
− | <div class="submenu_button"> | + | <div class="submenu_button" id="Basic_Part_page"> |
Basic Parts | Basic Parts | ||
</div> | </div> | ||
Line 547: | Line 616: | ||
<a href="https://2017.igem.org/Team:Example2/Composite_Part"> | <a href="https://2017.igem.org/Team:Example2/Composite_Part"> | ||
− | <div class="submenu_button"> | + | <div class="submenu_button" id="Composite_Part_page"> |
Composite Parts | Composite Parts | ||
</div> | </div> | ||
Line 553: | Line 622: | ||
<a href="https://2017.igem.org/Team:Example2/Part_Collection"> | <a href="https://2017.igem.org/Team:Example2/Part_Collection"> | ||
− | <div class="submenu_button"> | + | <div class="submenu_button" id="Part_Collection_page"> |
Part Collection | Part Collection | ||
</div> | </div> | ||
Line 565: | Line 634: | ||
<a href="https://2017.igem.org/Team:Example2/Safety"> | <a href="https://2017.igem.org/Team:Example2/Safety"> | ||
− | <div class="menu_button"> | + | <div class="menu_button direct_to_page"> |
SAFETY | SAFETY | ||
</div> | </div> | ||
</a> | </a> | ||
+ | |||
Line 576: | Line 646: | ||
<div class="menu_button" > | <div class="menu_button" > | ||
− | HUMAN PRACTICES | + | <div class="expand_collapse_icon"> </div> HUMAN PRACTICES |
</div> | </div> | ||
Line 583: | Line 653: | ||
<a href="https://2017.igem.org/Team:Example2/HP/Silver"> | <a href="https://2017.igem.org/Team:Example2/HP/Silver"> | ||
− | <div class="submenu_button"> | + | <div class="submenu_button" id="Silver_page"> |
Silver HP | Silver HP | ||
</div> | </div> | ||
Line 589: | Line 659: | ||
<a href="https://2017.igem.org/Team:Example2/HP/Gold_Integrated"> | <a href="https://2017.igem.org/Team:Example2/HP/Gold_Integrated"> | ||
− | <div class="submenu_button"> | + | <div class="submenu_button" id="Gold_Integrated_page"> |
Integrated and Gold | Integrated and Gold | ||
</div> | </div> | ||
Line 596: | Line 666: | ||
<a href="https://2017.igem.org/Team:Example2/Engagement"> | <a href="https://2017.igem.org/Team:Example2/Engagement"> | ||
− | <div class="submenu_button"> | + | <div class="submenu_button" id="Engagement_page"> |
Public Engagement | Public Engagement | ||
</div> | </div> | ||
Line 605: | Line 675: | ||
<div class="menu_button"> | <div class="menu_button"> | ||
− | AWARDS | + | <div class="expand_collapse_icon"> </div> AWARDS |
</div> | </div> | ||
Line 612: | Line 682: | ||
<a href="https://2017.igem.org/Team:Example2/Applied_Design"> | <a href="https://2017.igem.org/Team:Example2/Applied_Design"> | ||
− | <div class="submenu_button"> | + | <div class="submenu_button" id="Applied_Design_page"> |
Applied Design | Applied Design | ||
</div> | </div> | ||
Line 618: | Line 688: | ||
<a href="https://2017.igem.org/Team:Example2/Entrepreneurship"> | <a href="https://2017.igem.org/Team:Example2/Entrepreneurship"> | ||
− | <div class="submenu_button"> | + | <div class="submenu_button" id="Entrepreneurship_page"> |
Entrepreneurship | Entrepreneurship | ||
</div> | </div> | ||
Line 624: | Line 694: | ||
<a href="https://2017.igem.org/Team:Example2/Hardware"> | <a href="https://2017.igem.org/Team:Example2/Hardware"> | ||
− | <div class="submenu_button"> | + | <div class="submenu_button" id="Hardware_page"> |
Hardware | Hardware | ||
</div> | </div> | ||
Line 630: | Line 700: | ||
<a href="https://2017.igem.org/Team:Example2/Measurement"> | <a href="https://2017.igem.org/Team:Example2/Measurement"> | ||
− | <div class="submenu_button"> | + | <div class="submenu_button" id="Measurement_page"> |
Measurement | Measurement | ||
</div> | </div> | ||
Line 636: | Line 706: | ||
<a href="https://2017.igem.org/Team:Example2/Model"> | <a href="https://2017.igem.org/Team:Example2/Model"> | ||
− | <div class="submenu_button"> | + | <div class="submenu_button" id="Model_page"> |
Model | Model | ||
</div> | </div> | ||
Line 642: | Line 712: | ||
<a href="https://2017.igem.org/Team:Example2/Plant"> | <a href="https://2017.igem.org/Team:Example2/Plant"> | ||
− | <div class="submenu_button"> | + | <div class="submenu_button" id="Plant_page"> |
Plant | Plant | ||
</div> | </div> | ||
Line 649: | Line 719: | ||
<a href="https://2017.igem.org/Team:Example2/Software"> | <a href="https://2017.igem.org/Team:Example2/Software"> | ||
− | <div class="submenu_button"> | + | <div class="submenu_button" id="Software_page"> |
Software | Software | ||
</div> | </div> | ||
</a> | </a> | ||
+ | </div> | ||
+ | |||
+ | <a href="https://igem.org/2017_Judging_Form?team=Example2"> | ||
+ | <div class="menu_button direct_to_page"> | ||
+ | JUDGING FORM | ||
+ | </div> | ||
+ | </a> | ||
+ | |||
+ | |||
+ | |||
+ | <div class="menu_bottom_padding" > | ||
</div> | </div> | ||
</div> | </div> | ||
+ | |||
+ | |||
+ | |||
+ | |||
</div> | </div> | ||
Line 663: | Line 748: | ||
<!-- start of content --> | <!-- start of content --> | ||
<div class="igem_2017_content_wrapper"> | <div class="igem_2017_content_wrapper"> | ||
+ | <h1>Example2</h1> |
Latest revision as of 14:03, 15 September 2017