me/portfolio
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update GCSE CS blog

Browse Source 
Insert blog pages via jQuery .load();
Ensure presentation buttons don't have content between them;
Improve styling
This commit is contained in:
Matthew Grove
2018-12-08 08:54:05 +00:00
parent bf02130a75
commit 3f7f4ee573
7 changed files with 86 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
assets/global.css
View File

@@ -10,12 +10,6 @@
.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label, .mdc-list-item--activated .mdc-list-item__text, .mdc-drawer .mdc-list-item--activated .mdc-list-item__graphic { .mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label, .mdc-list-item--activated .mdc-list-item__text, .mdc-drawer .mdc-list-item--activated .mdc-list-item__graphic {
color: var(--mdc-theme-primary); color: var(--mdc-theme-primary);
} }
.mdc-fab {
background-color: var(--mdc-theme-secondary);
}
.material-icons:hover {
text-decoration: none;
}
/* hide unwanted overflow from mdc-text-field :before & :after */ /* hide unwanted overflow from mdc-text-field :before & :after */
.mdc-text-field-container { .mdc-text-field-container {
@@ -65,8 +59,22 @@ body {
margin: 20px; margin: 20px;
} }
/* for cookie notice */ /* ensure that buttons' colours don't change on hover and background colour changes are animated */
.mdc-button:hover, .mdc-fab:hover, .material-icons:hover, .mdc-button:focus, .mdc-fab:focus, .material-icons:focus {
text-decoration: none;
transition: background-color 0.75s;
}
.mdc-button:hover {
color: var(--mdc-theme-primary);
}
.mdc-fab:hover {
color: #fff;
}
.mdc-fab::before, .mdc-top-app-bar__action-item::before, .mdc-top-app-bar__navigation-icon::before {
transition-duration: 0.15s;
}
/* for cookie notice */
#cookies { #cookies {
display: none; display: none;
width: 100%; width: 100%;

11
computer-science-blog/css/main.css
View File

@@ -1,11 +1,11 @@
/* Reading School 2018, CSS*/ /* Reading School 2018, CSS*/
.carousel-inner { .carousel-inner {
height: 500px; height: 250px;
} }
.carousel-inner .item { .carousel-inner .item {
height: 100%; height: 100%;
} }
.carousel-inner iframe { .carousel-inner div {
width: 100%; width: 100%;
border: none; border: none;
height: 100%; height: 100%;
@@ -22,6 +22,13 @@
.presentation-button-right { .presentation-button-right {
float: right; float: right;
} }
/* ensure content below buttons doesn't cover them */
.presentation-buttons-container {
width: 100%;
min-height: 32px;
}
/* add side margins depending on screen size */
#main-content { #main-content {
text-align: left; text-align: left;
margin: 20px 15%; margin: 20px 15%;

13
computer-science-blog/index.html
View File

@@ -75,7 +75,7 @@
<p>The current date is: <span id="current_date">unknown</span></p> <p>The current date is: <span id="current_date">unknown</span></p>
<div id="blog-insert"></div> <div id="blog-insert"></div>
<h1>HTTP Introduction</h1> <h1>HTTP Introduction</h1>
<div class="presentation-container">
<div id="http_presentation" class="carousel slide" data-interval="false" data-ride="carousel"> <div id="http_presentation" class="carousel slide" data-interval="false" data-ride="carousel">
<!-- Indicators --> <!-- Indicators -->
<ol class="carousel-indicators"> <ol class="carousel-indicators">
@@ -90,16 +90,17 @@
</div> </div>
<div class="presentation-buttons-container"> <div class="presentation-buttons-container">
<!-- button to go to previous slide --> <!-- button to go to previous slide -->
<button class="presentation-button-left mdc-button mdc-button--outlined" href="#presentation" data-slide="prev" data-mdc-auto-init="MDCRipple"> <button class="presentation-button-left mdc-button mdc-button--outlined" href="#http_presentation" data-slide="prev" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-button__icon">navigate_before</i> <i class="material-icons mdc-button__icon">navigate_before</i>
Previous Previous
</button> </button>
<!-- button to go to next slide --> <!-- button to go to next slide -->
<button class="presentation-button-right mdc-button mdc-button--outlined" href="#presentation" data-slide="next" data-mdc-auto-init="MDCRipple"> <button class="presentation-button-right mdc-button mdc-button--outlined" href="#http_presentation" data-slide="next" data-mdc-auto-init="MDCRipple">
Next Next
<i class="material-icons mdc-button__icon">navigate_next</i> <i class="material-icons mdc-button__icon">navigate_next</i>
</button> </button>
</div> </div>
</div>
<!-- HTML presentation --> <!-- HTML presentation -->
<h1>HTML, CSS & JS Introduction</h1> <h1>HTML, CSS & JS Introduction</h1>
@@ -115,19 +116,19 @@
</div> </div>
<div class="presentation-buttons-container"> <div class="presentation-buttons-container">
<!-- button to go to previous slide --> <!-- button to go to previous slide -->
<button class="presentation-button-left mdc-button mdc-button--outlined" href="#presentation" data-slide="prev" data-mdc-auto-init="MDCRipple"> <button class="presentation-button-left mdc-button mdc-button--outlined" href="#html_presentation" data-slide="prev" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-button__icon">navigate_before</i> <i class="material-icons mdc-button__icon">navigate_before</i>
Previous Previous
</button> </button>
<!-- button to go to next slide --> <!-- button to go to next slide -->
<button class="presentation-button-right mdc-button mdc-button--outlined" href="#presentation" data-slide="next" data-mdc-auto-init="MDCRipple"> <button class="presentation-button-right mdc-button mdc-button--outlined" href="#html_presentation" data-slide="next" data-mdc-auto-init="MDCRipple">
Next Next
<i class="material-icons mdc-button__icon">navigate_next</i> <i class="material-icons mdc-button__icon">navigate_next</i>
</button> </button>
</div> </div>
<!-- link to source code on GitHub --> <!-- link to source code on GitHub -->
<a href="https://github.com/mgrove36/demo-code/blob/master/computer-science-blog/index.html" class="source-code-link mdc-fab mdc-fab--extended" data-mdc-auto-init="MDCRipple"></a> <a href="https://github.com/mgrove36/demo-code/tree/master/computer-science-blog/" class="source-code-link mdc-fab mdc-fab--extended" data-mdc-auto-init="MDCRipple"></a>
</div> </div>
</main> </main>
<footer> <footer>

23
computer-science-blog/pages/hyperlinks.html
View File

@@ -1,23 +1,12 @@
<!-- Reading School 2018, HTML page by Matthew Grove, Year 10 --> <!-- Reading School 2018, HTML page by Matthew Grove, Year 10 -->
<!DOCTYPE html> <h3>Hyperlinks</h3>
<html> <p>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
<!-- styles -->
<!-- <link rel="stylesheet" type="text/css" href="../css/pages.css"> -->
<!-- scripts -->
<!-- <script type="text/javascript" src="../scripts/scripts.js"></script> -->
</head>
<body>
<h1>Hyperlinks</h1>
A hyperlink is simply a link on the web to some other resource. It uses a special kind of command that jumps you to some other content in your web browser, usually to another page.  A hyperlink is simply a link on the web to some other resource. It uses a special kind of command that jumps you to some other content in your web browser, usually to another page. 
<br>
The way to tell if something is a hyperlink is by seeing if your mouse becomes a pointing hand when hovering over it. It is also usually either displayed as blue underlined text or an image/advert. However, the appearance does not change the function. The way to tell if something is a hyperlink is by seeing if your mouse becomes a pointing hand when hovering over it. It is also usually either displayed as blue underlined text or an image/advert. However, the appearance does not change the function.
<br>
Some website owners wish to reserve the right to not be hyperlinked without permission. Some website owners wish to reserve the right to not be hyperlinked without permission.
<br>
Creating a hyperlink in html: Creating a hyperlink in html:
<code>&lt;a href="LINK GOES HERE"&gt;TEXT GOES HERE&lt;/a&gt;</code> <code>&lt;a href="LINK GOES HERE"&gt;TEXT GOES HERE&lt;/a&gt;</code>
</body> </p>
</html>

16
computer-science-blog/scripts/scripts.js
View File

@@ -40,30 +40,34 @@ window.onload = function() {
$("#current_date").html(current_date); $("#current_date").html(current_date);
// define variables for HTTP presentation pages // define variables for HTTP presentation pages
http_pages = ["pages/hyperlinks.html"]; http_pages = ["hyperlinks", "http", "https", "cookies"];
// displays HTTP presentation pages // displays HTTP presentation pages
http_pages.forEach(function(item, index) { http_pages.forEach(function(item, index) {
$.get("pages/" + item + ".html", function(content) {
if (index == 0) { if (index == 0) {
$("#http_presentation .carousel-inner").append('<div class="item active"><iframe src="' + item + '"></iframe></div>'); $("#http_presentation .carousel-inner").append('<div class="item active">' + content + '</div>');
$("#http_presentation .carousel-indicators").append('<li data-target="#http_presentation" class="active" data-slide-to="' + index + '"></li>') $("#http_presentation .carousel-indicators").append('<li data-target="#http_presentation" class="active" data-slide-to="' + index + '"></li>')
} else { } else {
$("#http_presentation .carousel-inner").append('<div class="item"><iframe src="' + item + '"></iframe></div>'); $("#http_presentation .carousel-inner").append('<div class="item">' + content + '</div>');
$("#http_presentation .carousel-indicators").append('<li data-target="#http_presentation" data-slide-to="' + index + '"></li>') $("#http_presentation .carousel-indicators").append('<li data-target="#http_presentation" data-slide-to="' + index + '"></li>')
} }
}); });
});
// define variables for HTML presentation pages // define variables for HTML presentation pages
html_pages = ["pages/page_1.html"]; html_pages = ["page"];
// displays HTML presentation pages // displays HTML presentation pages
html_pages.forEach(function(item, index) { html_pages.forEach(function(item, index) {
$.get("pages/" + item + ".html", function(content) {
if (index == 0) { if (index == 0) {
$("#html_presentation .carousel-inner").append('<div class="item active"><iframe src="' + item + '"></iframe></div>'); $("#html_presentation .carousel-inner").append('<div class="item active">' + content + '</div>');
$("#html_presentation .carousel-indicators").append('<li data-target="#html_presentation" class="active" data-slide-to="' + index + '"></li>') $("#html_presentation .carousel-indicators").append('<li data-target="#html_presentation" class="active" data-slide-to="' + index + '"></li>')
} else { } else {
$("#html_presentation .carousel-inner").append('<div class="item"><iframe src="' + item + '"></iframe></div>'); $("#html_presentation .carousel-inner").append('<div class="item">' + content + '</div>');
$("#html_presentation .carousel-indicators").append('<li data-target="#html_presentation" data-slide-to="' + index + '"></li>') $("#html_presentation .carousel-indicators").append('<li data-target="#html_presentation" data-slide-to="' + index + '"></li>')
} }
}); });
});
// displays first blog page // displays first blog page
$("#blog-insert").load("pages/blog.html"); $("#blog-insert").load("pages/blog.html");

2
luhn-algorithm/index.html
View File

@@ -93,7 +93,7 @@
<p id="validation_message"></p> <p id="validation_message"></p>
<!-- link to source code on GitHub --> <!-- link to source code on GitHub -->
<a href="https://github.com/mgrove36/demo-code/blob/master/luhn-algorithm/index.html" class="source-code-link mdc-fab mdc-fab--extended" data-mdc-auto-init="MDCRipple"></a> <a href="https://github.com/mgrove36/demo-code/tree/master/luhn-algorithm/" class="source-code-link mdc-fab mdc-fab--extended" data-mdc-auto-init="MDCRipple"></a>
</div> </div>
</main> </main>
<footer> <footer>

4
page-inserts/navbar.html
View File

@@ -15,5 +15,9 @@
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">credit_card</i> <i class="material-icons mdc-list-item__graphic" aria-hidden="true">credit_card</i>
<span class="mdc-list-item__text">Luhn Algorithm</span> <span class="mdc-list-item__text">Luhn Algorithm</span>
</a> </a>
<a class="mdc-list-item" href="/computer-science-blog/">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">code</i>
<span class="mdc-list-item__text">GCSE Computer Science Blog</span>
</a>
</div> </div>
</div> </div>