librelist archives

« back to archive

reponsive template not working in flask app

reponsive template not working in flask app

From:
Kundan Singh
Date:
2013-07-05 @ 11:21
could not decode message

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 %}
>