HTML deskDrawer not working on mobile - html

I'm using a desk drawer for my page when it's in phone. But for some reason when I try out the links inside the desk drawer on mobile, they won't work. I was hoping anyone could give me a hint as to what I'm doing wrong.
Because it works when I try it on the computer on Chrome while simulating a phone browser but not in my phone's browser. The page is www.bebe2go.com and the desk drawer I'm using is this one: http://git.blivesta.com/drawer/fixed-navbar-left.
Here is the code for the navigator:
<div class="row">
<div class="col-lg-12">
<div class="drawer-header">
<button type="button" class="drawer-toggle drawer-hamburger">
<span class="sr-only">toggle navigation</span>
<span class="drawer-hamburger-icon"></span>
</button>
</div>
<div class="drawer-main drawer-navbar-default">
<nav class="container drawer-nav" role="navigation">
<div class="drawer-brand hidden-md hidden-lg">Bebe2Go</div>
<ul class="drawer-menu">
{% for link in linklists.main-menu.links %}
{% assign child_list_handle = link.title | handleize %}
{% if linklists[child_list_handle].links != blank %}
<li class="drawer-menu-item dropdown drawer-dropdown-hover">
{{ link.title | escape }}<span class="caret"></span>
<ul class="drawer-submenu dropdown-menu" role="menu">
<li class="drawer-submenu-item">{{ link.title | escape }}</li>
{% for childlink in linklists[child_list_handle].links %}
<li class="drawer-submenu-item">{{ childlink.title | escape }}</li>
{% endfor %}
</ul>
</li>
{% else %}
<li class="drawer-menu-item">{{ link.title | escape }}</li>
{% endif %}
{% endfor %}
</ul>
</nav>
</div>
</div>
</div>
Here is the link for the js: https://github.com/blivesta/drawer/blob/master/src/js/jquery.drawer.js
and here the link to the css:
https://github.com/blivesta/drawer/blob/master/dist/css/drawer.css

Related

Menu weblink span appearing 2x, just want it to appear 1x?

stack community I'm completely an amateur in HTML, Liquid, Adx, in short programming and applying logic, don't have great understanding.
Im not sure why the <span> Test2 </span> is appearing 2x, as you can see from the image,
I want to achieve the following, Test2 new name? as one text and the left Test2 don't want it to be displayed. Please advise.
{% assign homeurl = website.adx_partialurl %}
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div id="navbar" class="navbar-collapse collapse">
{% assign primary_nav = weblinks["Primary Navigation"] %}
{% if primary_nav %}
<div class="data-weblinks-maxdepth="">
<ul class="nav navbar-nav weblinks" role="menubar">
{% for link in primary_nav.weblinks %}
<li role="none" class="weblink {% if sublinks.size > 0 %} dropdown{% endif %}">
<a role="menuitem" aria-label="{{ link.name | escape }}" {%- if link.tooltip %} title="{{ link.tooltip | escape }}"
{% endif %}>
<span> Test2 </span>
{%- unless link.display_image_only -%}
{{ link.name | escape }}
{%- endunless -%}
</a>
</li>
{% endfor %}
</ul>
{% editable primary_nav %}
</div>
{% endif %}
</div>
</div>
</div>
To change the name of the link and perhaps add something in front of it all you have to do is add something into the if clause like below:
{% assign homeurl = website.adx_partialurl %}
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div id="navbar" class="navbar-collapse collapse">
{% assign primary_nav = weblinks["Primary Navigation"] %}
{% if primary_nav %}
<div class="data-weblinks-maxdepth="">
<ul class="nav navbar-nav weblinks" role="menubar">
{% for link in primary_nav.weblinks %}
<li role="none" class="weblink {% if sublinks.size > 0 %} dropdown{% endif %}">
<a role="menuitem" aria-label="{{ link.name | escape }}" {%- if link.tooltip %} title="{{ link.tooltip | escape }}"{% endif %}>
{%- unless link.display_image_only -%}
Text 2 {{ link.name | escape }}
{%- endunless -%}
</a>
</li>
{% endfor %}
</ul>
{% editable primary_nav %}
</div>
{% endif %}
</div>
</div>
</div>

Override the :root in html and css in django template

I'm working on a project and during it I had to use :root to set the font size. However I also need to override it in the next section and I can't seem to do it.
I used the root from the online template here.
However in the main section I failed to reset the html font size to 16px. This is my code:
layout.html:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>{% block title %}{% endblock %}</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="{% static 'cs50gram/styles.css' %}" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
{% block style %}{% endblock %}
{% block script %}{% endblock %}
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light" id="nav-background">
<a class="navbar-brand" id="nav-brand" href="{% url 'index' %}">CS50gram</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
{% if user.is_authenticated %}
<div class="navbar-nav">
<a class="nav-item nav-link" href="{% url 'index' %}">Home </a>
<a class="nav-item nav-link" href="{% url 'explore' %}">Explore</a>
<a class="nav-item nav-link" href="{% url 'profile' request.user %}">Profile</a>
<a class="nav-item nav-link" href="{% url 'add-post' %}">Add Post</a>
</div>
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link" href="{% url 'logout' %}">Logout</a>
</div>
{% else %}
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link" href="{% url 'login' %}">Login</a>
<a class="nav-item nav-link" href="{% url 'register' %}">Register</a>
</div>
{% endif %}
</div>
</nav>
<div id="body">
{% block body %}
{% endblock %}
</div>
<!-- Bootstrap 4 CDN -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
The main page where I want to reset the font-size in <main>:
{% extends 'cs50gram/layout.html' %}
{% load static %}
{% block title %}
Profile
{% endblock %}
{% block body %}
<header>
<div class="container">
<div class="profile">
<div class="profile-image">
<img src="https://pbs.twimg.com/profile_images/1313117763519606784/IkM0WYGt_400x400.jpg" alt="Profile Picture" width="150px">
</div>
<div class="profile-user-settings">
<h1 class="profile-user-name">{{ profile.user.username }}</h1>
{% if user.is_authenticated and request.user.username == profile.user.username %}
<button class="btn profile-edit-btn">Edit Profile</button>
{% elif user.is_authenticated and request.user.username != profile.user %}
<button class="btn profile-edit-btn">Follow</button>
{% endif %}
<!-- button class="btn profile-settings-btn" aria-label="profile settings"><i class="fas fa-cog" aria-hidden="true"></i></button -->
</div>
<div class="profile-stats">
<ul>
<li><span class="profile-stat-count">{{ profile.user.posts.count }}</span> posts</li>
<li><span class="profile-stat-count">188</span> followers</li>
<li><span class="profile-stat-count">{{ profile.followings.count }}</span> following</li>
</ul>
</div>
<div class="profile-bio">
<hr>
<h2 class="profile-real-name">{{ profile.user.first_name }} {{ profile.user.last_name }}</h2>
<hr>
<p> <b> Date Joined:</b> {{ profile.user.date_joined|date:"D d M Y" }}
{% if profile.birthdate %}
<span style="margin-left: 10px"> <b> BirthDate: </b> {{ profile.birthdate }}</span></p>
{% endif %}
{% if profile.gender %}
<p> <b> Gender: </b> {{ profile.gender }}</p>
{% endif %}
<hr>
{% if profile.bio %}
<p> {{ profile.bio }}</p>
{% endif %}
</div>
</div>
<!-- End of profile section -->
</div>
<!-- End of container -->
</header>
<main> <!-- Here I want to restore font-size to 16px -->
<div class="container">
{% for post in profile.user.posts.all %}
<div class="row justify-content-center mt-3">
<div class="col-md-6" style="background-color: #f4f6f6">
<!-- Username -->
<h5 class="mt-2"> #{{ post.posted_by }} </h5>
<!-- Post image -->
<img src="{{ post.image.url }}" class="img-fluid" width="550px">
<!-- Like Icon and Counter -->
<img data-id="{{post.id}}" id="post-like-{{post.id}}" class="liked"
{% if request.user in post.like.all %}
data-is_liked="yes"
src="https://img.icons8.com/ios-filled/32/fa314a/hearts.png"
{% else %}
data-is_liked="no"
src="https://img.icons8.com/windows/32/000000/like--v2.png"
{% endif %}
/> <span id="like-counter-{{post.id}}"> {{ post.like.count }} </span>
<!-- Comment icon and counter -->
<span class="comment-pointer" data-id="{{post.id}}" id="view-comments" data-toggle="modal" data-target="#exampleModalCenter">
<img src="https://img.icons8.com/windows/32/000000/speech-bubble--v1.png" class="comment-icon" /> <span id="comment-counter-{{post.id}}"> {{ post.comments.all.count }} </span>
</span>
<!-- Caption -->
{% if post.caption %}
<h5 class="mt-2"><strong>{{ post.posted_by }}</strong> {{ post.caption }}</h5>
{% endif %}
<!-- Date Posted -->
<h6 class="gray">Posted on {{ post.date_posted }}</h6>
<!-- Add Comment -->
<div class="input-group mb-3">
<input type="text" placeholder="Add Comment" id="post-comment-{{post.id}}" class="form-control mr-1">
<button class="btn btn-outline-dark comment" data-id="{{post.id}}" type="button">Add Comment</button>
</div>
<!-- Show comments -->
{% if post.comments.all %}
<!-- Gets the comments of each post based on the related_name -->
{% for comment in post.comments.all.reverse|slice:":2" %}
<div>
<b> {{ comment.commented_by }} </b>
<span class="gray"> {{ comment.comment }} </span>
</div>
{% endfor %}
<!-- Div to show recently added comment -->
<div id="recent_comment"></div>
<div class="text-center mb-2 view-all">
<a data-toggle="modal" data-id="{{post.id}}" id="view-comments" data-target="#exampleModalCenter">View all comments...</a>
</div>
{% endif %}
</div>
</div>
{% endfor %}
</main>
{% endblock %}
{% block style %}
<link href="{% static 'cs50gram/profile.css' %}" rel="stylesheet">
{% endblock %}
Please note that the profile.css is taken from the link provided above.

How to exclude a category from Jekyll blog index?

I have a category called "tachartasan" which I have excluded from my index page however the posts in this category are still being counted in the pagination which is currently set to 10 posts per page.
7 of my most recent posts have been in the tachartasan category and it has resulted in my front page showing only 3 posts total.
<div class="container">
{% for post in paginator.posts %}
{% unless post.categories contains 'tachartasan' %}
<div class="row">
<div class="col-md-3">
<img src="{{ post.image }}" class="index-image">
</div>
<div class="col-md-9">
<h5 class="post-title">{{ post.title }}</h5>
{% if post.author %}
<p class="text-muted">{{ post.date | date: "%Y-%m-%d" }} le {{ post.author }}</p>
{% else %}
<p class="text-muted">{{ post.date | date: "%Y-%m-%d" }} le Crìstean MacMhìcheil</p>
{% endif %}
{{ post.excerpt }}
</div>
</div>
<hr/>
{% endunless %}
{% endfor %}
<!-- Pagination -->
<nav>
<ul class="pagination justify-content-center pagination-lg">
{% if paginator.next_page %}
<li class="page-item">
<a class="page-link" href="{{ site.baseurl }}/duilleag-{{paginator.next_page}}">
<i class="fas fa-arrow-left"></i>
</a>
</li>
{% else %}
<li class="page-item disabled">
<a class="page-link" href="{{ site.baseurl }}/">
<i class="fas fa-arrow-left"></i>
</a>
</li>
{% endif %}
<li class="page-item disabled">
<a class="page-link" href="{{ site.baseurl }}/">
Duilleag {{ paginator.page }} / {{ paginator.total_pages }}
</a>
</li>
{% if paginator.previous_page %}
{% if paginator.page == 2 %}
<li class="page-item">
<a class="page-link" href="{{ site.baseurl }}/">
<i class="fas fa-arrow-right"></i>
</a>
</li>
{% else %}
<li class="page-item">
<a class="page-link" href="{{ site.baseurl }}/duilleag-{{paginator.previous_page}}">
<i class="fas fa-arrow-right"></i>
</a>
</li>
{% endif %}
{% else %}
<li class="page-item disabled">
<a class="page-link" href="{{ site.baseurl }}/">
<i class="fas fa-arrow-right"></i>
</a>
</li>
{% endif %}
</ul>
</nav>
</div>
I don't want the hidden "tachartasan" posts to be counted as part of the 10 posts per page.
Adding this line to the front matter of my excluded posts solved it. They are hidden on the index page and no longer counted against the pagination limit and are still visible on the specific category page.
hidden: true

Bootstrap Tab Panels with a Jinja2 for loop

I'm trying to get bootstrap 4 dev tabs working with a for loop in jinja2.
Here's the test code I'm trying:
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
{% for e in range(1,3) %}
<li class="nav-item">
<a class="nav-link {% if loop.index == 1 %}active{% endif %}" href="#{{ e }}" role="tab"
data-toggle="tab">{{ e }}</a>
</li>
{% endfor %}
</ul>
<!-- Tab panes -->
<div class="tab-content">
{% for e in range(1,3) %}
<div role="tabpanel" class="tab-pane fade {% if loop.index == 1 %}in active{% endif %}"
id="{{ e }}">{{ e }}</div>
{% endfor %}
</div>
The nav tabs function as expected, two tabs are visible, "1" and "2", and the active class is correctly applied.
However the content tabs do not change when clicking between nav tabs. The content tab is static on "1".
Changing the loop.index condition to loop.index == 2 means the tab content is static on "2".
What am I missing here?
Thanks.
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
{% for club in clubs %}
<li class="nav-item">
<a class="nav-link {% if loop.index == 1 %}active{% endif %}" href="#{{ club }}" role="tab"
data-toggle="tab">{{ club }}</a>
</li>
{% endfor %}
<!-- Tab panes -->
<div class="tab-content">
{% for club in clubs %}
<div role="tabpanel" class="tab-pane fade {% if loop.index == 1 %}in active{% endif %}"
id="{{ clubs }}">{{ clubs }}</div>
{% endfor %}
Changing the for loop from a range to the actual NDB datastore query worked.

how to make a Vertical menu bar in Buycraft

I am trying to make a vertical menu bar on the left of the buycraft shop, however I sadly do not know the css for this, I would appreciate help. The menu bar should look something like this
This is to be used for a 'Buycraft' shop page.
My code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ store.name }} | {{ page.title }}</title>
<link href="/templates/209/css/style.min.css" rel="stylesheet">
<link rel="shortcut icon" href="/templates/209/img/favicon.ico">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36735942-3']);
_gaq.push(['_trackPageview']);
{% if store.googleAnalytics %}
_gaq.push(['b._setAccount', '{{ store.googleAnalytics }}']);
_gaq.push(['b._trackPageview']);
{% endif %}
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<style>{{ store.css|raw }}</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="logo">
{% if store.logo %}
<img src="{{ store.logo }}" />
{% else %}
<span>{{ store.name }}</span>
{% endif %}
</div>
<div class="buttons">
<div class="toolbar">
<div class="logout">
{% if basket.username %}
{{ lang("button.logout") }}
{% endif %}
</div>
<div class="currency">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
{{ basket.currency }} <span class="fa fa-caret-down"></span>
</button>
<ul class="dropdown-menu" role="menu">
{% for currency in store.currencies %}
{% if currency.code in [store.currency, "AUD", "BRL", "CAD", "DKK", "EUR", "NOK", "NZD", "GBP", "SEK", "USD", "PLN"] %}
<li {% if basket.currency == currency.code %}class="active"{% endif %}>
{{ currency.code }}
</li>
{% endif %}
{% endfor %}
</ul>
</div>
<div class="basket">
{% if basket.packages|length > 0 %}
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
{{ lang("basket.count", basket.packages|length, basket.price|money, basket.currency) }} <span class="fa fa-caret-down"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
{% for package in basket.packages %}
<li class="item">
<div class="name">{{ package.name[:25] }}</div>
<div class="price">{{ package.price|money }} <small>{{ basket.currency }}</small></div>
<div class="remove"><span class="fa fa-times"</span></div>
</li>
{% endfor %}
<li class="checkout">
<div class="total"><b>{{ lang("basket.total") }}:</b> {{ basket.price|money }} <small>{{ basket.currency }}</small></div>
<div class="button">Checkout</div>
</li>
</ul>
{% else %}
<i class="icon-shopping-cart icon-white"></i> {{ lang("basket.count", 0, 0.00, basket.currency) }}
{% endif %}
</div>
</div>
</div>
</div>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">{{ store.name }}</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="{% if page.category == "index" %}active{% endif %}">{{ lang("category.home") }}</li>
{% for category in store.categories %}
{% if category.subcategories|length > 0 %}
<li class="dropdown {% if category.active %}active{% endif %}">
{{ category.name }} <i class="fa fa-caret-down"></i>
<ul class="dropdown-menu">
{% for subcategory in category.subcategories %}
<li>{{ subcategory.name }}</li>
{% endfor %}
</ul>
{% else %}
<li class="{% if category.active %}active{% endif %}">{{ category.name }}</li>
{% endif %}
{% endfor %}
{% if basket.packages|length > 0 %}
<li class="visible-xs {% if page.category == "checkout" %}active{% endif %}">Checkout</li>
{% endif %}
{% if basket.username %}
<li class="visible-xs">Logout</li>
{% endif %}
</ul>
</div>
</div>
</nav>
<div class="notification">
{% if page.message.display %}
<div class="alert alert-{{ page.message.type}} alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
{{ page.message.text }}
</div>
{% endif %}
</div>
{% block content %}{% endblock %}
{% if store.plan == "1" %}
<div class="advertisement">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px;" data-ad-client="ca-pub-9830135219921132" data-ad-slot="7404819681"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>
{% endif %}
<div class="footer">
<div class="language">
<div class="dropdown dropup">
<span class="fa fa-globe"></span> Language
<ul class="dropdown-menu up">
{% for language in store.languages %}
<li>{{ language.name }}</li>
{% endfor %}
</ul>
</div>
</div>
{% if store.branding or store.plan != "3" %}
<div class="branding">
<!-- Do not remove the Buycraft branding if you are not on the Ultimate Plan. Your account will be deleted. -->
Powered by Buycraft.net
</div>
{% endif %}
</div>
</div>
<div class="modal" id="popup-modal" tabindex="-1" role="dialog"></div>
{% if page.category == "checkout" %}
<script src="https://wallet.google.com/inapp/lib/buy.js"></script>
<script src="https://js.stripe.com/v2/"></script>
{% endif %}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="/templates/209/js/bootstrap.min.js"></script>
<script src="/templates/209/js/skin.min.js"></script>
<script src="/templates/209/js/site.js"></script>
</body>
</html>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
a:link, a:visited {
display: block;
font-weight: bold;
color: #FFFFFF;
background-color: #98bf21;
width: 120px;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #7A991A;
}
</style>