Re: [flask] reponsive template not working in flask app
- From:
- Nico Gevers
- Date:
- 2013-07-05 @ 11:34
I suggest you use something like stack overflow to ask this question. Its
not strictly related to flask, and you'll have a much wider audience to
help out.
On Fri, Jul 5, 2013 at 1:21 PM, Kundan Singh <ksingh.pilani@gmail.com>wrote:
> Hello,
> I have an responsive template (HTML, JS, CSS3) which i'm trying to use in
> my flask app which uses Jinja2.
>
> Attached is reponsive-index.html which works fine when windows size is
> reduced, stretched etc.
>
> But i need to use it in Flask app using Jinja2 and For links i used
> {{url_for('index'}} and other changes. I spilitted template into base.html
> which has common template features and index.html has main logic.
> I used util.html by importing in base.html and other.
> Code snippet:
> <div class="navbar">
> <div class="navbar-inner">
> <div class="container">
> <a class="btn btn-navbar" data-toggle="collapse"
> data-target=".nav-collapse">
> Menu
> </a>
> <div class="nav-collapse collapse">
> <!-- Navigation links starts here -->
> <ul class="nav">
> <!-- Main menu -->
> <li><a href="{{ url_for('index') }}">Home</a></li>
> {% if current_user.is_authenticated() %}
> <li>{{ nav_link('Goals', 'index') }}</li>
> {% endif %}
> {% if current_user.is_authenticated() %}
> <li class="dropdown">
> <a href="#" class="dropdown-toggle"
> data-toggle="dropdown">{{current_user|safe}}<b class="caret"></b></a>
> <!-- Submenus -->
> <ul class="dropdown-menu">
> <li>{{ nav_link('Settings', 'index') }}</li>
> <li>{{ nav_link('Log Out', 'logout') }}</li>
> </ul>
> </li>
> {% else %}
> <li>{{ nav_link('Sign In', 'login') }}</li>
> {% endif %}
> </ul>
> </div>
> </div>
> </div>
> </div>
>
> Issue is:
> In resposnive template *Menu* feature works fine on resize but no effect
> on using it in flask app. similarly dropdown menu also doesn't work
> although its {{% if current_user.is_authenticated() %}} logic works fine
> but not dropdown menu is shown when user is logged in.
>
> Is it something due to Jinja template? or why resposive Menu's not working
> in my flask app's template?
>
> Please have a look of attached .html files and help me out. I'm messing up
> with this issue since many hours.
>
> Regards
> Kundan
>
>
> {% from "util.html" import nav_link with context %} ** {% block head %}
> {% endblock %}
> **
> Challengify
> **
> Menu
>
> - Home {% if current_user.is_authenticated() %}
> - {{ nav_link('Goals', 'index') }} {% endif %} {% if
> current_user.is_authenticated() %}
> - {{current_user|safe}}** <#13fae90e4d200097_>
> - {{ nav_link('Settings', 'index') }}
> - {{ nav_link('Log Out', 'logout') }}
> {% else %}
> - {{ nav_link('Sign In', 'login') }} {% endif %}
>
> {% for message in get_flashed_messages() %}
> {{ message }}
> {% endfor %}
> {% block content %} {% endblock %} **
>
> Copyright © Challengify.in <http://challengify.in> | Contact Team
> Challengify <contact@challengify.in?subject=Say+Hello>
> **
>
> {% from "util.html" import render_field %} {% extends "base.html" %} {%
> block content %}
> GET
>
> Rewards
> Inspiration
> Accomplishment
>
> while doing a task
> EARN
>
> Gifts
> Coupons
> Endorsements
>
> when goal is achieved
> EXPERIENCE
>
> Fun
> Productivity
> Social Connect
>
> with Challengify
> Start Now
>
>
> Register <http://register.html>
> or
> Login <http://login.html>
> @ Challengify
> {% endblock %}
> **
> **
> Challengify <http://index.html>
> **
> Menu
>
> - Home <http://index.html>
> - Goals <#13fae90e4d200097_>
> - Sign In <http://login.html>
> - Profile** <#13fae90e4d200097_>
> - Settings <#13fae90e4d200097_>
> - Log Out <#13fae90e4d200097_>
> - Contact <http://contact.html>
>
> GET
>
> Rewards
> Inspiration
> Accomplishment
>
> while doing a task
> EARN
>
> Gifts
> Coupons
> Endorsements
>
> when goal is achieved
> EXPERIENCE
>
> Fun
> Productivity
> Social Connect
>
> with Challengify
> Start Now
>
>
> Register <http://register.html>
> or
> Login <http://login.html>
> @ Challengify
> **
>
> Copyright © Challengify.in <http://challengify.in> | Contact Team
> Challengify <contact@challengify.in?subject=Say+Hello>
> **
> {%- macro nav_link(label, endpoint) -%}
> {{ label }} {%- endmacro -%} {% macro render_field(field) %}
> {% if kwargs.get('label', True) %} {{ field.label(class="control-label")
> }} {% endif %}
> {{ field(**kwargs) }} {% for error in field.errors %}
>
> {{ error }}
> {% endfor %}
> {% endmacro %} {% macro render_pagination(pagination, endpoint) %}
>
> {% if pagination.has_prev %}
> - « {% else %}
> - « {% endif %} {%- for page in pagination.iter_pages() %} {% if page
> %} {% if page == pagination.page %}
> - {{ page }} {% else %}
> - {{ page }} {% endif %} {% else %}
> - ... {% endif %} {%- endfor %} {% if pagination.has_next %}
> - » {% else %}
> - » {% endif %}
>
> {% endmacro %}
>
Re: [flask] reponsive template not working in flask app
- From:
- Owein Reese
- Date:
- 2013-07-05 @ 11:49
If it's not working split up in flask, it must not be rendering the way you
think it would. I suggest the following:
1. Render the page through flask
2. Plug in the same values in your basic HTML file
3. Use a diff tool to figure out what the difference is
It's probably something that went missing which you've overlooked.
On Jul 5, 2013 7:23 AM, "Kundan Singh" <ksingh.pilani@gmail.com> wrote:
> Hello,
> I have an responsive template (HTML, JS, CSS3) which i'm trying to use in
> my flask app which uses Jinja2.
>
> Attached is reponsive-index.html which works fine when windows size is
> reduced, stretched etc.
>
> But i need to use it in Flask app using Jinja2 and For links i used
> {{url_for('index'}} and other changes. I spilitted template into base.html
> which has common template features and index.html has main logic.
> I used util.html by importing in base.html and other.
> Code snippet:
> <div class="navbar">
> <div class="navbar-inner">
> <div class="container">
> <a class="btn btn-navbar" data-toggle="collapse"
> data-target=".nav-collapse">
> Menu
> </a>
> <div class="nav-collapse collapse">
> <!-- Navigation links starts here -->
> <ul class="nav">
> <!-- Main menu -->
> <li><a href="{{ url_for('index') }}">Home</a></li>
> {% if current_user.is_authenticated() %}
> <li>{{ nav_link('Goals', 'index') }}</li>
> {% endif %}
> {% if current_user.is_authenticated() %}
> <li class="dropdown">
> <a href="#" class="dropdown-toggle"
> data-toggle="dropdown">{{current_user|safe}}<b class="caret"></b></a>
> <!-- Submenus -->
> <ul class="dropdown-menu">
> <li>{{ nav_link('Settings', 'index') }}</li>
> <li>{{ nav_link('Log Out', 'logout') }}</li>
> </ul>
> </li>
> {% else %}
> <li>{{ nav_link('Sign In', 'login') }}</li>
> {% endif %}
> </ul>
> </div>
> </div>
> </div>
> </div>
>
> Issue is:
> In resposnive template *Menu* feature works fine on resize but no effect
> on using it in flask app. similarly dropdown menu also doesn't work
> although its {{% if current_user.is_authenticated() %}} logic works fine
> but not dropdown menu is shown when user is logged in.
>
> Is it something due to Jinja template? or why resposive Menu's not working
> in my flask app's template?
>
> Please have a look of attached .html files and help me out. I'm messing up
> with this issue since many hours.
>
> Regards
> Kundan
>
>
> {% from "util.html" import nav_link with context %} ** {% block head %}
> {% endblock %}
> **
> Challengify
> **
> Menu
>
> - Home {% if current_user.is_authenticated() %}
> - {{ nav_link('Goals', 'index') }} {% endif %} {% if
> current_user.is_authenticated() %}
> - {{current_user|safe}}** <#13fae9286abd11cd_>
> - {{ nav_link('Settings', 'index') }}
> - {{ nav_link('Log Out', 'logout') }}
> {% else %}
> - {{ nav_link('Sign In', 'login') }} {% endif %}
>
> {% for message in get_flashed_messages() %}
> {{ message }}
> {% endfor %}
> {% block content %} {% endblock %} **
>
> Copyright © Challengify.in <http://challengify.in> | Contact Team
> Challengify <contact@challengify.in?subject=Say+Hello>
> **
>
> {% from "util.html" import render_field %} {% extends "base.html" %} {%
> block content %}
> GET
>
> Rewards
> Inspiration
> Accomplishment
>
> while doing a task
> EARN
>
> Gifts
> Coupons
> Endorsements
>
> when goal is achieved
> EXPERIENCE
>
> Fun
> Productivity
> Social Connect
>
> with Challengify
> Start Now
>
>
> Register <http://register.html>
> or
> Login <http://login.html>
> @ Challengify
> {% endblock %}
> **
> **
> Challengify <http://index.html>
> **
> Menu
>
> - Home <http://index.html>
> - Goals <#13fae9286abd11cd_>
> - Sign In <http://login.html>
> - Profile** <#13fae9286abd11cd_>
> - Settings <#13fae9286abd11cd_>
> - Log Out <#13fae9286abd11cd_>
> - Contact <http://contact.html>
>
> GET
>
> Rewards
> Inspiration
> Accomplishment
>
> while doing a task
> EARN
>
> Gifts
> Coupons
> Endorsements
>
> when goal is achieved
> EXPERIENCE
>
> Fun
> Productivity
> Social Connect
>
> with Challengify
> Start Now
>
>
> Register <http://register.html>
> or
> Login <http://login.html>
> @ Challengify
> **
>
> Copyright © Challengify.in <http://challengify.in> | Contact Team
> Challengify <contact@challengify.in?subject=Say+Hello>
> **
> {%- macro nav_link(label, endpoint) -%}
> {{ label }} {%- endmacro -%} {% macro render_field(field) %}
> {% if kwargs.get('label', True) %} {{ field.label(class="control-label")
> }} {% endif %}
> {{ field(**kwargs) }} {% for error in field.errors %}
>
> {{ error }}
> {% endfor %}
> {% endmacro %} {% macro render_pagination(pagination, endpoint) %}
>
> {% if pagination.has_prev %}
> - « {% else %}
> - « {% endif %} {%- for page in pagination.iter_pages() %} {% if page
> %} {% if page == pagination.page %}
> - {{ page }} {% else %}
> - {{ page }} {% endif %} {% else %}
> - ... {% endif %} {%- endfor %} {% if pagination.has_next %}
> - » {% else %}
> - » {% endif %}
>
> {% endmacro %}
>