Merge pull request #70 from vidyasagar-r/blog_design_branch

new frontend design templates integrated for django_blot_it app
MicroPyramid · Jul 18, 2016 · 7fa9bd3 · 7fa9bd3
2 parents 39e7122 + 1a89e10
commit 7fa9bd3
Show file tree

Hide file tree

Showing 11 changed files with 1,479 additions and 6 deletions.
diff --git a/django_blog_it/django_blog_it/static/css/frontend_main.css b/django_blog_it/django_blog_it/static/css/frontend_main.css
diff --git a/django_blog_it/django_blog_it/static/css/menu/dropdown_submenu.css b/django_blog_it/django_blog_it/static/css/menu/dropdown_submenu.css
@@ -0,0 +1,56 @@
+
+.dropdown-submenu {
+    position: relative;
+}
+
+.dropdown-submenu>.dropdown-menu {
+    top: 0;
+    left: 100%;
+    margin-top: -1px;
+    margin-left: -1px;
+    -webkit-border-radius: 0 6px 6px 6px;
+    -moz-border-radius: 0 6px 6px;
+    border-radius: 0 6px 6px 6px;
+}
+
+.dropdown-submenu:hover>.dropdown-menu {
+    display: block;
+}
+
+.dropdown-submenu, .dropdown-menu a {
+    color: #00a97a!important;
+}
+
+.dropdown-submenu, .dropdown-menu a:hover {
+    color: #fff!important;
+}
+
+.dropdown-submenu>a:after {
+    display: block;
+    content: " ";
+    float: right;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+    border-width: 5px 0 5px 5px;
+    border-left-color: #ccc;
+    margin-top: 5px;
+    margin-right: -10px;
+}
+
+.dropdown-submenu:hover>a:after {
+    border-left-color: #fff;
+}
+
+.dropdown-submenu.pull-left {
+    float: none;
+}
+
+.dropdown-submenu.pull-left>.dropdown-menu {
+    left: -100%;
+    margin-left: 10px;
+    -webkit-border-radius: 6px 0 6px 6px;
+    -moz-border-radius: 6px 0 6px 6px;
+    border-radius: 6px 0 6px 6px;
+}
diff --git a/django_blog_it/django_blog_it/templates/new_base.html b/django_blog_it/django_blog_it/templates/new_base.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Blog - {% block title %}Home{% endblock %}</title>
+    {% block description %}
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta property="og:title"  content="Home - micro-blog - simple blog package - MicroPyramid." />
+    <meta property="og:description" content="micro-blog - simple blog package - MicroPyramid." />
+    <meta name="description" content="micro-blog - simple blog package - MicroPyramid." />
+    <meta name="keywords" content="simple" />
+    {% endblock %}
+
+  {% load staticfiles %}
+  {% load blog_tags %}
+  <!-- Latest compiled and minified CSS -->
+  <link href='https://fonts.googleapis.com/css?family=Poppins:400,300,500,600,700' rel='stylesheet' type='text/css'>
+  <link rel="stylesheet" href="{% static 'css/style.css' %}" type="text/css">
+  <link rel="stylesheet" href="{% static 'css/frontend_main.css' %}" type="text/css">
+  <!--
+  -->
+  <link rel="stylesheet" href="{% static 'css/menu/sm-core-css.css' %}" type="text/css">
+  <link rel="stylesheet" href="{% static 'css/menu/sm-blue.css' %}" type="text/css">
+  <!-- for online links -->
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="{% static 'css/menu/dropdown_submenu.css' %}" type="text/css">
+  {% block extra_css %}
+  {% endblock %}
+</head>
+<body>
+  <header>
+  {% block menu_block %}
+    {% load_menu %}
+  {% endblock %}
+  </header>
+  <div class="main_container">
+    <div class="container">
+
+      {% if messages %}
+        {% for message in messages %}
+          <div class="alert alert-{% if message.tags %}{{ message.tags }}{% endif %} alert-dismissible my_alert" role="alert">
+            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+            <strong>{% if message.tags %}{{ message.tags|title }} !{% endif %}</strong> {{ message }}.
+          </div>
+        {% endfor %}
+      {% endif %}
+      {% block main_content %}
+      <div class="row" id="head_style">
+        {% block content %}
+        {% endblock content %}
+      </div>
+      {% endblock main_content %}
+
+      <footer class="my_footer">
+      </footer>
+
+    </div>
+  </div>
+  <!-- end div container -->
+
+  <!-- for online links  -->
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
+  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
+  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.smartmenus/1.0.0/jquery.smartmenus.js"></script> -->
+
+  <script type="text/javascript">
+
+    // for pagination
+    // $(function() {
+    //   $('#main-menu').smartmenus({
+    //     subMenusSubOffsetX: 1,
+    //     subMenusSubOffsetY: -8
+    //   });
+    // });
+    $( document ).ready(function() {
+      $('#myModal').modal('hide');
+      $('#myModal').on('hidden', function () {
+        // Load up a new modal...
+        $('#myModal1').modal('show')
+      })
+    });
+
+    $('.pagination li a.active').each(function(){
+        $(this).css('background', '#337AB7');
+        $(this).css('color', '#fff');
+    });
+
+   if($('.pagination li:first').find('a span').text() == '<<'){
+        $('.pagination li:first').find('a span').text('First');
+    }
+
+    if($('.pagination li:nth-child(2)').find('a span').text() == '<'){
+        $('.pagination li:nth-child(2)').find('a span').text('Prev');
+    }
+
+    if($('.pagination li:last').find('a span').text() == '>>'){
+        $('.pagination li:last').find('a span').text('Last');
+    }
+    if($('.pagination li:nth-last-child(2)').find('a span').text() == '>'){
+        $('.pagination li:nth-last-child(2)').find('a span').text('Next');
+    }
+
+  </script>
+
+  <script type="text/javascript">
+    $(document).ready(function() {
+            setTimeout(function() {
+                  $('.my_alert').fadeOut(2000, function(){
+                });
+                  }, 3000);
+
+    });
+    //window.setTimeout(function() {
+    //    $(".alert-message").fadeTo(500, 0).slideUp(500, function(){
+    //        $(this).remove();
+    //    });
+    //}, 5000);
+  </script>
+
+  {% block js_script %}
+
+  {% endblock %}
+
+</body>
+</html>
diff --git a/django_blog_it/django_blog_it/templates/posts/nav_submenu.html b/django_blog_it/django_blog_it/templates/posts/nav_submenu.html
@@ -0,0 +1,18 @@
+{% load recurse %}
+
+  {% recurse menu.menu_set.all|dictsort:"lvl" with menu as menu %}
+    {% loop %}
+      <li class="dropdown-submenu">
+        <a tabindex="-1" href="#" class="dropdown-toggle" data-toggle="dropdown">{{ menu.title }}</a>
+        <ul class="dropdown-menu">
+        {% for submenu in menu.get_children %}
+          {% if submenu.has_children %}
+            {% include "posts/nav_submenu.html" with menu=submenu %}
+          {% else %}
+            <li><a tabindex="-1" href="{{ submenu.url }}">{{ submenu.title }}</a></li>
+          {% endif %}
+        {% endfor %}
+        </ul>
+      </li>
+    {% endloop %}
+  {% endrecurse %}
diff --git a/django_blog_it/django_blog_it/templates/posts/new_base.html b/django_blog_it/django_blog_it/templates/posts/new_base.html
@@ -0,0 +1,102 @@
+{% extends 'new_base.html' %}
+{% load static %}
+{% load blog_tags %}
+{% block title %} Home {% endblock %}
+{% block extra_css %}
+  <link rel="stylesheet" href="{% static 'css/frontend_main.css' %}" type="text/css">
+{% endblock extra_css %}
+{% block main_content %}
+    <div class="row middle_container">
+      <div class="main_left_container col-md-9 col-sm-8 col-xs-12">
+      {% block blog_content %}
+      {% endblock blog_content %}
+      </div>
+      <div class="main_right_container col-md-3 col-sm-4 col-xs-12">
+        <!-- recent_posts starts here -->
+             <div class="recent_posts_container">
+                <div class="panel panel-default">
+                  <div class="panel-heading">
+                      <span class="head_line"></span>
+                      <span class="heading">Recent Posts</span>
+                  </div>
+                  <div class="panel-body">
+                    {% for post in recent_posts %}
+                      <!-- recent_blog starts here -->
+                      <div class="blog_block">
+                       <div class="blog_date">
+                          {{ post.updated_on|date:"F d, Y" }}
+                        </div>
+                        <div class="blog_title">
+                           <a href="{% url 'blog_post_view' blog_slug=post.slug %}">{{ post.title }}</a>
+                        </div>
+                        <div class="blog_cat_author">
+                          <a href="#" class="author">By {{ post.user }}</a>
+                          <a href="{% url 'selected_category' category_slug=post.category.slug %}" class="category">{{ post.category }}</a>
+                        </div>
+                        <br clear="all">
+                        <div class="blog_content">
+                        {{ post.content|safe|truncatewords_html:20 }}
+                        </div>
+                      </div>
+                      <!-- recent blog ends here -->
+                    {% endfor %}
+                  </div>
+                </div>
+             </div>
+             <!-- recent_posts ends here -->
+        <!-- categories starts here -->
+         <div class="recent_posts_container">
+            <div class="panel panel-default">
+              <div class="panel-heading">
+                  <span class="head_line"></span>
+                  <span class="heading">Categories</span>
+              </div>
+              <div class="panel-body">
+                <ul class="category_list">
+                  {% for category in categories_list %}
+                    <li class="cat-item cat-item-2"><a href="{% url 'selected_category' category_slug=category.slug %}">{{ category }} ({{ category|category_posts }})</a></li>
+                  {% endfor %}
+                </ul>
+              </div>
+            </div>
+         </div>
+         <!-- categories ends here -->
+         <!-- Blog-posts starts here -->
+         <div class="recent_posts_container">
+            <div class="panel panel-default">
+              <div class="panel-heading">
+                  <span class="head_line"></span>
+                  <span class="heading">Blog-Posts</span>
+              </div>
+              <div class="panel-body">
+                <ul class="category_list">
+                  {% get_archives as archives %}
+                  {% for archive in archives %}
+                  <li><a href="{% url 'archive_posts' year=archive|date:'Y' month=archive|date:'n' %}">{{ archive|date:"F Y" }}</a></li>
+                  {% endfor %}
+                </ul>
+              </div>
+            </div>
+         </div>
+         <!-- Blog-posts ends here -->
+        <!-- tags starts here -->
+         <div class="recent_posts_container">
+            <div class="panel panel-default">
+              <div class="panel-heading">
+                  <span class="head_line"></span>
+                  <span class="heading">Tags</span>
+              </div>
+              <div class="panel-body">
+               <div class="tags_block">
+                  {% for tag in tags_list %}
+                    <a href="{% url 'selected_tag' tag_slug=tag.slug %}"><i class="fa fa-tag"></i> {{ tag }}</a>
+                  {% endfor %}
+                </div>
+              </div>
+            </div>
+         </div>
+         <!-- tags ends here -->
+      </div>
+    </div>
+  </div>
+{% endblock main_content %}