Basically I am trying to have an fixed on top nav-bar and using only vanilla bootstrap. This required me to have a modification as the content needs to be padded in order for the page to render correctly.
Below is the form page it renders the Nav Bar on top but the content renders underneath the navbar instead of below it.
NOTE, that the base page itself works for other templates. What gives??
works(list Page):
{% extends 'expirations/index.html' %}
{% block content %}
<div class="container-fluid">
{% for drug in drugs %}
<div class = '.col-sm-12'>
<ul class = 'list-group'>
<li class = "list-group-item" >
<span class = "badge">First Expiration: {{ drug.early_exp|date:"l M d Y" }}</span>
{{ drug.name }}
{% regroup drug.expiration_dates.all by facility as facility_list %}
{% for x in facility_list %}
<span class="label label-info">{{ x.grouper }}</span>
{% endfor %}
</li>
</ul>
</div>
{% endfor %}
</div>
{% endblock %}
doesn't work (form Page):
{% extends "expirations/index.html" %}
{% block content %}
<div class = "container">
<h1>Add Expiration for:</h1>
<h4>{{drug_name.name}}</h4>
<form method="POST" class="post-form">
{% csrf_token %}
{{form.as_p}}
<button type="submit" class="btn btn-primary">Save</button>
</form>
</div>
{% endblock %}
index.html:
<html>
<head>
<title>Expirations Tracker</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
{# Fonts#}
<link href="https://fonts.googleapis.com/css?family=Montserrat|Russo+One" rel="stylesheet">
<!---DatePicker-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>>
body {
padding-top: 100px;
}
#media (max-width: 979px) {
body {
padding-top: 0px;
}
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navBar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">Expirations</a>
</div>
<div class="collapse navbar-collapse" id="navBar">
<ul class="nav navbar-nav">
<li class="nav-item"><span class ="glyphicon glyphicon-home"></span> Home</li>
<li class="nav-item"><span class = "glyphicon glyphicon-plus"></span> Add Drugs</li>
<li class="nav-item"><span class = "glyphicon glyphicon-calendar"></span> List By Expirations</li>
<li class="nav-item"><span class = "glyphicon glyphicon-map-marker"></span> Facilities Serviced</li>
</ul>
</div>
</div>
</nav>
{% block content %}
{% endblock %}
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="Stylesheet" type="text/css" />
<script>
$('#id_expirationDate').datepicker({
changeMonth: true,
changeYear: true,
startView: 2,
autoclose: true
});
</script>
</body>
</html>
For me, both of them, the form and the list page, are rendering content underneath the nav bar.
However, there is a typo in your index.html:
<style>>
body {
padding-top: 100px;
}
#media (max-width: 979px) {
body {
padding-top: 0px;
}
}
</style>
Remove the extra '>' after the <style> tag and it should work fine.
Related
I am working on a web app and need it to be compatible with mobile devices.
The web app is written using Django, I am using Bootstrap 5 for arranging the page to be responsive. I am totally a newbie with mobile frontend development.
Now I understand that the grid system could help us scale the whole page to fit mobile devices properly. But as the page is developed using desktop, when viewing in mobile devices, the elements in the page is so small. I was originally thinking that Bootstrap would magically enlarge each row when it scale to fit mobile devices, but that's not the case.
Consulting with my friends, we seem to need to manually set size (width * height) based on the device-width. Then that's a lot of work. Is this the only way to go?
The page does scale to fit mobile devices, but each card is so small that it is very difficult to see the text/button.
<head>
<title>.....</title>
<meta charset="utf-8">
<meta name="viewpoint" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Sofia' rel='stylesheet'>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="container-lg pt-1">
<div class="Heading .text-center">
<div class="row">
<h1 class="col-sm-12">Title Here</h1>
</div>
</div>
<div data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50">
<nav class="navbar navbar-expand-sm justify-content-center sticky-top">
<ul class="navbar-nav">
{% for categ in categories_list %}
<li><a class="nav-link" href="#{{categ.split|join:'-'}}"> {{categ}}</a></li>
{% endfor %}
</ul>
</nav>
{% for categ in categories_list %} {% with entrees=foods_by_categ|get_item:categ %}
<div id="{{categ.split|join:'-'}}">
<h3>{{categ|capfirst}}</h3>
{% for entree in entrees %}
<div class="card">
<div class="card-header">
{{entree.name}}
<button data-bs-toggle="modal" data-bs-target="#food-{{entree.id}}" class="btn float-end">Add to Cart</button>
</div>
{% if entree.description %}
<div class="card-body">
<pre>{{entree.description}}</pre>
</div>
{% endif %}
<form id="food-{{entree.id}}" action="{% url 'cart:add2cart' %}" class="card-body modal fade" method="post">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
{% with add2cart_form=add2cart_forms|get_item:entree.name %} {% csrf_token %} {{ add2cart_form.non_field_errors }}
<div class="modal-header">
<h4 class="modal-title">{{entree.name}}</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<ul class="list-group list-group-flush">
{% if entree.small_available %}
<li class="list-group-item">
{{ add2cart_form.size_opt.errors }} {{ add2cart_form.size_opt.label_tag}} {{ add2cart_form.size_opt }}
</li>
{% endif %}
<li class="list-group-item">
<button type="submit" class="btn btn-primary float-end">Add</button>
</li>
</ul>
</div>
{% endwith %}
</div>
</div>
</form>
</div>
{% endfor %}
</div>
{% endwith %} {% endfor %}
</div>
</body>
I created a route and named it login. So when I created the navbar. I added href="{{ path('login') }}" for the link that leads to the login page. But when I click on the link, it doesn't lead me to the login page. I stay on the home page.
Where can be the problem ? Thank you for your help. :)
Code in SecurityController.php file
<?php
namespace App\Controller;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;
use Symfony\Component\Security\Http\Authentication\AuthenticationUtils;
class SecurityController extends AbstractController
{
#[Route(path: '/login', name: 'login')]
public function login(AuthenticationUtils $authenticationUtils): Response
{
// if ($this->getUser()) {
// return $this->redirectToRoute('target_path');
// }
// get the login error if there is one
$error = $authenticationUtils->getLastAuthenticationError();
// last username entered by the user
$lastUsername = $authenticationUtils->getLastUsername();
return $this->render('security/login.html.twig', ['last_username' => $lastUsername, 'error' => $error]);
}
#[Route(path: '/logout', name: 'logout')]
public function logout(): void
{
throw new \LogicException('This method can be blank - it will be intercepted by the logout key on your firewall.');
}
}
Code in base.html.twig file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}{% endblock %}</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text></svg>">
{# Bootstrap #}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
{# Google fonts #}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
{% block stylesheets %}
{{ encore_entry_link_tags('app') }}
{% endblock %}
{% block javascripts %}
{{ encore_entry_script_tags('app') }}
{% endblock %}
</head>
<body>
<header class="fixed-top">
<nav class="navbar navbar-expand-lg bg-light">
<!-- Home page -->
<a class="navbar-brand" href="{{ path('home') }}">
<img src="/docs/5.2/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
</a>
<!-- Bouton de déploiement -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto px-4">
<!-- Connexion -->
<li class="nav-item">
<a class="nav-link" href="{{ path('login') }}">Se connecter</a>
</li>
<!-- Inscription -->
<li class="nav-item">
<a class="nav-link" href="#">S'inscrire</a>
</li>
</ul>
</div>
</nav>
</header>
{% block main %}{% endblock %}
</body>
</html>
You are generating path for homepage. Change href="{{ path('home') }}" to href="{{ path('login') }}".
Your 'home' path is targeting the homepage, you should replace it by 'login' path.
If you need to protect the 'home' route by authentication, you can creates some access control rules: https://symfony.com/doc/current/security/access_control.html
I am trying to customize the look of the login page for my laravel application.
Here is the file content structure that I have:
In the layouts/app.blade.php file I am trying to add a "app.min.1.css" css file:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- CSS -->
<link href="{{ asset('templates/admin/Template/css/app.min.1.css') }}" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<!-- Scripts -->
<script>
window.Laravel = {!! json_encode([
'csrfToken' = > csrf_token(),
]) !!};
</script>
</head>
so it's the app.min.css, but when I go and run my application I get a parsing error as follows:
The file is there and I did verify it, by creating an stan alone view to see if all the css file and js file were loaded correctly:
All I am trying to do is to use the existing Auth pages provided by laravel, but give them my own look and feel. Is it possible to add you own css and js files ?
Here is the code for the app.blade:
<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- CSS -->
<link href="{{ asset('templates/admin/Template/css/app.min.1.css') }}" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<!-- Scripts -->
<script>
window.Laravel = {!! json_encode([
'csrfToken' = > csrf_token(),
]) !!};
</script>
</head>
<body>
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
#if (Auth::guest())
<li>Login</li>
<li>Register</li>
#else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
#endif
</ul>
</div>
</div>
</nav>
#yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
here is the code for the auth/login/blade:
#extends('layouts.app')
#section('content')
<div class="login" data-lbg="teal">
<!-- Login -->
<div class="l-block toggled" id="l-login">
<div class="lb-header palette-Teal bg">
<i class="zmdi zmdi-account-circle"></i>
Salve! Per favore effettui il login
</div>
<form class="form-horizontal" role="form" method="POST" action="{{ route('login') }}">
{{ csrf_field() }}
<div class="lb-body">
<div class="form-group fg-float">
<div class="fg-line">
<input type="text" class="input-sm form-control fg-input">
<label class="fg-label">Indirizzo Email</label>
</div>
</div>
<div class="form-group fg-float ">
<div class="fg-line">
<input type="password" class="input-sm form-control fg-input">
<label class="fg-label">Password</label>
</div>
</div>
<button class="btn palette-Teal bg">Entra</button>
<div class="m-t-20">
<a data-block="#l-register" data-bg="blue" class="palette-Teal text d-block m-b-5" href="">Crea un Account</a>
<a data-block="#l-forget-password" data-bg="purple" href="" class="palette-Teal text">Password Dimenticata?</a>
</div>
</div>
</form>
</div>
</div>
#endsection
You have an error here.
Remove the space between = and > for 'csrfToken' = > csrf_token(),
<script>
window.Laravel = {!! json_encode([
'csrfToken' => csrf_token(),
]) !!};
</script>
You've got an extra space here:
'csrfToken' = > csrf_token(),
Fix so that it is:
'csrfToken' => csrf_token(),
I made authentication example page with php artisan make:auth.
example page If i make changes in css stylesheet nothing is happening. Page is looking same all time. Css stylesheet is located in \public\css folder.
app.blade.php
<!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">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Styles -->
<link rel="stylesheet" href="{{ URL::asset('/css/app.css') }}">
<!-- Scripts -->
<script>
window.Laravel = <?php echo json_encode([
'csrfToken' => csrf_token(),
]); ?>
</script>
</head>
<body>
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data- toggle="collapse" data-target="#app-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
#if (Auth::guest())
<li>Login</li>
<li>Register</li>
#else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="{{ url('/logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>
<form id="logout-form" action="{{ url('/logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
#endif
</ul>
</div>
</div>
</nav>
#yield('content')
</div>
<!-- Scripts -->
<script src="/js/app.js"></script>
</body>
</html>
app.css is blank
app.scss
// Fonts
#import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);
// Variables
#import "variables";
// Bootstrap
#import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
_variables.scss
// Body
$body-bg: #f5f8fa;
// Borders
$laravel-border-color: darken($body-bg, 10%);
$list-group-border: $laravel-border-color;
$navbar-default-border: $laravel-border-color;
$panel-default-border: $laravel-border-color;
$panel-inner-border: $laravel-border-color;
// Brands
$brand-primary: #3097D1;
$brand-info: #8eb4cb;
$brand-success: #2ab27b;
$brand-warning: #cbb956;
$brand-danger: #bf5329;
// Typography
$font-family-sans-serif: "Raleway", sans-serif;
$font-size-base: 14px;
$line-height-base: 1.6;
$text-color: #636b6f;
// Navbar
$navbar-default-bg: #fff;
// Buttons
$btn-default-color: $text-color;
// Inputs
$input-border: lighten($text-color, 40%);
$input-border-focus: lighten($brand-primary, 25%);
$input-color-placeholder: lighten($text-color, 30%);
// Panels
$panel-default-heading-bg: #fff;
From https://laravel.com/docs/5.8/frontend#writing-css:
You can compile your SASS files to plain CSS using Laravel Mix. The
npm run dev command will process the instructions in your
webpack.mix.js file.
So execute:
npm install
npm run dev
I'm not sure if you are talking about editing the app.css file or a new custom one.
If app.css gets overwritten by the pre-processor (normally shoudn't), you can always create a new css file in public/css/my-styles.css and load it in your view:
<!-- Styles -->
<link rel="stylesheet" href="{{ URL::asset('/css/app.css') }}">
<link rel="stylesheet" href="{{ URL::asset('/css/my-styles.css') }}">
Make sure to use greater specificity on your css rules to overwrite any predefined settings or use !important when you have too.
Also clearing your browser's cache (or using private mode, like Chrome's Incognito) will make sure that your are seeing your current css settings and not some cached content.
The question title describes my problem. I'm currently trying to make it work with static files, but I also tried using Bootstrap's CDN and tried using hard coded path to the Bootstrap CSS. Additional infos:
settings.py:
STATIC_PATH = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'
STATICFILES_DIRS = (
STATIC_PATH,
)
base.html:
<!DOCTYPE html>
<html lang="en" ng-app="IA">
<head>
{% load staticfiles %}
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="iso-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}"/>
<link rel="stylesheet" href="{% static 'css/ionic.min.css' %}"/>
<link rel="stylesheet" href="{% static 'css/ionicons.min.css' %}"/>
</head>
<body ng-controller="LFSTD">
<div class="container">
<div class="jumbotron">
<div class="bar bar-header">
<button class="button button-icon icon ion-navicon" ng-click="toggleLeft()"></button>
<div class="h1 title">
<b>
{% block header_title_block %}{% endblock %}
</b>
</div>
</div>
<div>
<ion-side-menus>
<!-- Center content -->
<ion-side-menu-content ng-controller="LFSTD">
<ion-content class="has-header">
<div>
{% block body_block %}{% endblock %}
</div>
</ion-content>
</ion-side-menu-content>
<!--Left menu -->
<ion-side-menu side="left">
<ion-content class="has-header">
<div class="list">
<a class="item item-icon-left" href="{% url 'profile' %}">
<i class="icon ion-person"></i>
Profile
</a>
<a class="item item-icon-left" href="{% url 'lfstd' %}">
<i class="icon ion-person-stalker"></i>
LFSTD
<span class="badge badge-assertive">10</span>
</a>
</div>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</div>
</div>
</div>
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="{% static 'js/bootstrap.min.js'%}"></script>
<script src="{% static 'js/ionic.bundle.min.js' %}"></script>
<script src="{% static 'js/ia.js' %}"></script>
</body>
</html>
Anyone has an idea of why Bootstrap ain't loading? The container and the jumbotron divs simply don't modify the look of the page.
The network monitor gives me 304 on both the bootstrap CSS and JS files:
Edit:
Here is my BASEDIR:
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
Working hardcoded URL:
/static/css/bootstrap.min.css
How I call it with static files:
{% static 'css/bootstrap.min.css' %}
URL from view source:
href="/static/css/bootstrap.min.css"
Edit #2, lead to solution:
After playing around with the static files and the templates, I realized that it is AngularJS messing up my CSS. When I remove
ng-app="IA"
From my < html > tag, all formatting (except from angularJS of course) works.