Merge pull request #12 from lakhanmandloi/master

Issue #9 feat: Categories, Tags , Sidebar, Edit Link & Report Issue
techjoomla · Nov 18, 2017 · c228d68 · c228d68
2 parents d8ab166 + 90d1ee5
commit c228d68
Show file tree

Hide file tree

Showing 22 changed files with 226 additions and 160 deletions.
diff --git a/_includes/header.html b/_includes/header.html
@@ -0,0 +1,13 @@
+<header>
+	<div class="wrapper">
+		<section class="top-bar">
+				<div class="logo"><a href="https://techjoomla.com" target="_blank">{% include logo.html %}</a></div>
+				{% include navigation.html %}
+		</section>
+		<section class="hero_search">
+			<h1>Documentation</h1>
+			<p>Everything you need to know about using and extending Techjoomla products.</p>
+				{% include search.html %}
+		</section>
+	</div>
+</header>
diff --git a/_includes/sidebar.html b/_includes/sidebar.html
@@ -0,0 +1,19 @@
+<section class="sidebar">
+	<div class="logo"><a href="https://techjoomla.com" target="_blank">{% include logo.html %}</a> </div>
+	<div class="home-link"><a href="/"><i class="material-icons">home</i> Docs Homepage</a></div>
+	{% assign categories = site.categories | sort %}
+	{% for category in categories %}
+		{% assign name = category[0] %}
+		{% assign posts = category[1] %}
+		{% assign size = posts | size %}
+		<div class = 'category-module {% if name == page.categories[0] %}active{% endif %}'>
+			<span class="heading">{{ name | replace: "-", " " }}</span>
+			<ul>
+				{% assign tutorials = posts | sort: "title" %}
+				{% for tutorial in tutorials | sort: "navigation_weight" %}
+					<li {% if tutorial.url == page.url %}class="active"{% endif %}><a href="{{ site.baseurl }}{{ tutorial.url }}">{{ tutorial.title }}</a></li>
+				{% endfor %}
+			</ul>
+		</div>
+	{% endfor %}
+</section>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -12,6 +12,8 @@
 		<link rel="icon" type="image/png" href="{{ site.baseurl }}/touch-icon.png" sizes="192x192">
 		<link rel="icon" type="image/png" href="{{ site.baseurl }}/images/favicon.png">
 		<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Merriweather:400italic,400,300italic,300,700,700italic|Open+Sans:400italic,600italic,700italic,700,600,400|Inconsolata:400,700">
+		<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet">
 		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 
 		{% seo %}
@@ -31,27 +33,9 @@
 	</head>
 
 	<body class="{{ page.body_class }}">
-		<header>
-			<div class="wrapper">
-				<section class="top-bar">
-					<div class="logo"><a href="https://techjoomla.com" target="_blank">{% include logo.html %}</a></div>
-					{% include navigation.html %}
-				</section>
-				<section class="hero_search">
-					<h1>Documentation</h1>
-					<p>Everything you need to know about using and extending Techjoomla products.</p>
-					{% include search.html %}
-				</section>
-			</div>
-
-		</header>
 		<section class="content">
-			<div class="wrapper">
 				{{ content }}
-			</div>
 		</section>
-
-		{% include footer.html %}
 		<script>
 			$(function() {
 				$('a[href*=\\#]').not(".no-smooth").on('click', function(event){

diff --git a/_layouts/post.html b/_layouts/post.html
@@ -1,8 +1,9 @@
 ---
 layout: default
 ---
-<section class="">
-	<section class="tutorial-content">
+{% include sidebar.html %}
+<section class="post">
+	<section class="post-content">
 		{% if page.type == "Video" %}
 			{% include youtube.html video_id=page.video_id %}
 
@@ -18,7 +19,13 @@
 		{% endif %}
 
 		<div class="tutorial-main">
+
 			{{ content }}
+			<hr />
+			<div class="pull-right">
+				<a target="_blank" href="https://github.com/techjoomla/techjoomla.github.io/edit/master/{{page.path}}"> <i class="material-icons">mode_edit</i> Edit</a> | 
+				<a target="_blank" href="https://github.com/techjoomla/techjoomla.github.io/issues"> <i class="material-icons">report</i> Report Issue</a>
+			</div>
 			{% include categories.html %}
 			{% include tags.html %}
 		</div>
@@ -27,46 +34,41 @@
 			<a class="modalOpen no-smooth" href="#share">{% include social-icon.html icon="Share" %} Share</a>
 		</div>
 	</section>
+	<section class="post-related">
+		{% assign related_posts = site.related_posts %}
+		{% assign related_posts_size = related_posts | size %}
+		{% if related_posts_size > 0 %}
+			<div class="related">
+				<h3>Related articles</h3>
+				{% include listings.html listings=site.related_posts %}
+			</div>
+		{% endif %}
+	</section>
+	<section class="post-comment">
+		{% if site.disqus_shortname and page.comments %}
+		<div id="disqus_thread"></div>
+		<script>
+			var disqus_shortname = '{{ site.disqus_shortname }}';
+			var disqus_config = function () {
+				this.page.url = "{{ page.url | prepend: site.url }}";
+				this.page.identifier = "{{ page.id }}";
+			};
+			(function() {  // DON'T EDIT BELOW THIS LINE
+				var d = document, s = d.createElement('script');
+				s.src = '//' + disqus_shortname + '.disqus.com/embed.js';
+				s.setAttribute('data-timestamp', +new Date());
+				(d.head || d.body).appendChild(s);
+			})();
+		</script>
+		<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
+		{% endif %}
+	</section>
+	{% include footer.html %}
 </section>
 
-{% if page.set %}
-	{% assign set_file_name = "_sets/" | append: page.set | append: ".md" %}
-	{% assign set = site.sets | where: "title", "Getting Started" | first %}
-	{% assign series_posts = site.posts | where: "set", page.set %}
-	<div class="tutorial-series">
-		<h3>{{ set.title }} - Series</h3>
-		<p>{{ set.description }}</p>
 
-		{% include listings.html listings=series_posts numbered=true%}
-	</div>
-{% endif %}
-{% assign related_posts = site.related_posts %}
-{% assign related_posts_size = related_posts | size %}
-{% if related_posts_size > 0 %}
-	<div class="related">
-		<h3>Related articles</h3>
-
-		{% include listings.html listings=site.related_posts %}
-	</div>
-{% endif %}
-
-{% if site.disqus_shortname and page.comments %}
-	<div id="disqus_thread"></div>
-	<script>
-		var disqus_shortname = '{{ site.disqus_shortname }}';
-		var disqus_config = function () {
-			this.page.url = "{{ page.url | prepend: site.url }}";
-			this.page.identifier = "{{ page.id }}";
-		};
-		(function() {  // DON'T EDIT BELOW THIS LINE
-			var d = document, s = d.createElement('script');
-			s.src = '//' + disqus_shortname + '.disqus.com/embed.js';
-			s.setAttribute('data-timestamp', +new Date());
-			(d.head || d.body).appendChild(s);
-		})();
-	</script>
-	<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
-{% endif %}
+
+
 
 <div id="subscribe" class="modalDialog">
 	<div>

diff --git a/_posts/2017-01-17-com-api-introduction.md b/_posts/2017-01-17-com-api-introduction.md
@@ -8,6 +8,7 @@ tags:
   - Joomla
   - REST API
 type: Document
+navigation_weight: 1
 ---
 
 # REST API framework for Joomla

diff --git a/_posts/2017-01-17-com-api-plugin-development.md b/_posts/2017-01-17-com-api-plugin-development.md
@@ -8,6 +8,7 @@ tags:
   - Joomla
   - REST API
 type: Document
+navigation_weight: 0
 ---
 
 # Writing your own API Plugin

diff --git a/_posts/2017-09-16-hierarchy-manager-overview.md b/_posts/2017-09-16-hierarchy-manager-overview.md
@@ -8,6 +8,7 @@ tags:
   - Joomla
   - Hierarchy
 type: Document
+navigation_weight: 1
 ---
 # Hierarchy Management 
 

diff --git a/_posts/2017-09-16-tc-manager-overview.md b/_posts/2017-09-16-tc-manager-overview.md
@@ -1,12 +1,13 @@
 ---
 date: 2017-01-16
-title: Terms & Conditions Manager Overview
+title:  Overview
 categories:
-  - TC Manager
+  - T & C Manager
 tags:
   - Joomla
   - Terms & Conditions Manager
 type: Document
+navigation_weight: 1
 ---
 
 # Terms & Conditions Manager

diff --git a/_sass/elements.scss b/_sass/elements.scss
@@ -1,7 +1,6 @@
 html, body {
 	padding: 0;
 	margin: 0;
-	background: #343642;
 }
 
 body {
@@ -45,4 +44,4 @@ code, pre, tt {
 	color: #FAFAFA;
 	border-radius: 2px;
 	padding: 2px 5px;
-}
+}
diff --git a/_sass/footer.scss b/_sass/footer.scss
@@ -9,7 +9,7 @@ footer {
 	}
 
 	.copyright {
-		color: $medium-grey;
+		color: $light-grey;
 		margin: 0;
 		text-align: center;
 		font-size: .9em;
@@ -37,7 +37,7 @@ footer {
 	}
 
 	svg {
-		fill: $medium-grey;
+		fill: $light-grey;
 		position: relative;
 		top: 5px;
 		transition: fill 200ms ease-in;

diff --git a/_sass/header.scss b/_sass/header.scss
@@ -11,14 +11,9 @@
 header {
 	padding: 16px 0 10px 0;
 	color: #fff;
-    background: #43C6AC;  /* fallback for old browsers */
-    background: -webkit-linear-gradient(to left,#43C6AC ,#191654 );  /* Chrome 10-25, Safari 5.1-6 */ 
-    background: linear-gradient(to left, #43C6AC, #191654); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-
-
-
-
-
+    background: #808080;  /* fallback for old browsers */
+	background: -webkit-linear-gradient(to right, #3fada8, #808080);  /* Chrome 10-25, Safari 5.1-6 */
+	background: linear-gradient(to right, #3fada8, #808080); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
 
 	form {
 		position: relative;

diff --git a/_sass/layout.scss b/_sass/layout.scss
@@ -13,7 +13,7 @@
 
 .content {
 	background: #fff;
-	padding: 60px 0;
+	padding:0;
 }
 
 dt, h2 {
@@ -49,3 +49,71 @@ dt, h2 {
 		height: 100%;
 	}
 }
+.sidebar{
+	position:fixed;
+	max-width:275px;
+	background: #808080;
+    background: -webkit-linear-gradient(to bottom, #3fada8, #808080);
+    background: linear-gradient(to bottom, #3fada8, #808080);
+    padding: 15px;
+    box-sizing:border-box;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    height:100vh;
+
+    .logo{
+		text-align:center;
+    }
+    a{
+		color:#fff;
+		text-decoration:none;
+		font-weight:600;
+    }
+    ul {
+		list-style:none;
+		margin:0;
+		padding:0;
+		li{
+			margin:0;
+			padding:0;
+			a{
+				font-weight:500;
+				font-size: 0.8em;
+			}
+		}
+    }
+    span , i{
+		color:#fff;
+		font-weight:600;
+    }
+}
+.category-module {
+	margin: 0;
+	ul {
+		display:block;
+	}
+	&.active ul{
+		display:block;
+	}
+}
+.post{
+	top: 0;
+    right: 0;
+    position: fixed;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    height: 100%;
+    left: 275px;
+    padding:15px 0;
+    section {
+		padding:10px 30px;
+    }
+}
+.space{
+	padding:60px 0;
+}
+.home-link{
+margin-bottom:10px;
+}
+a i.material-icons{vertical-align: sub;}
+.pull-right{float:right;}
diff --git a/_sass/typography.scss b/_sass/typography.scss
@@ -123,7 +123,7 @@ hr {
 	height: 1px;
 	border: 0;
 	border-top: #EFEFEF 1px solid;
-	margin: 3.2em 0;
+	margin: 10px 0;
 	padding: 0
 }
 
@@ -248,4 +248,4 @@ kbd {
 	h6 {
 		font-size: 1.8rem
 	}
-}
+}
diff --git a/categories/api.html b/categories/api.html
@@ -3,8 +3,8 @@
 permalink: /category/joomla-rest-api
 title: Joomla REST API
 ---
-
-<div id="archives">
+{% include header.html %}
+<div id="archives" class="wrapper space">
 {% assign categories = site.categories | sort %}
 {% for category in categories %}
 	<div class="archive-group">
@@ -21,3 +21,4 @@
 	</div>
 {% endfor %}
 </div>
+{% include footer.html %}
diff --git a/categories/categories.html b/categories/categories.html
@@ -3,9 +3,8 @@
 permalink: /category/
 title: Categories
 ---
-
-
-<div id="archives">
+{% include header.html %}
+<div id="archives" class="wrapper space">
 {% assign categories = site.categories | sort %}
 {% for category in categories %}
 	<div class="archive-group">
@@ -21,3 +20,4 @@
 	<br />
 {% endfor %}
 </div>
+{% include footer.html %}