Problem with burger simbol for folding menu in Django navbar #1

gilleswx · 2022-03-01T17:17:15Z

Hi there,
I have done some Django projects in the past and on a project right now I am trying to include the burger symbol for a folding unfolding menu in the nav-bar using bootstrap. It didn't work so I tried with django-autostatic-libs and also including the CDN for bootstrap (css &js), and also downloading the css and js files in the static folder. Did not work properly...any recommendation?
For the django-static-libs I included it in the setting.py:
My settings.py is like that:

# Application definition

INSTALLED_APPS = [
    'projects.apps.ProjectsConfig',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'django_auto_static_libs',
]
.......
# Static files (CSS, JavaScript, Images)

STATIC_URL = 'static/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
    os.path.join(BASE_DIR, 'boot'),
]

The text was updated successfully, but these errors were encountered:

rokdd · 2022-03-01T17:28:34Z

And the include in the template?

rokdd · 2022-03-01T17:39:16Z

So first of all you need to declare that you want to use bootstrap in the settings.py:

from django_auto_static_libs.libraries import bootstrap
DJANGO_AUTO_STATIC_LIBS = {
    'libraries': {
        'bootstrap': bootstrap,
    },
    'destination_folder': 'django-auto-static-libs'
}

Then run once manually:

python manage.py static-libs-download

When you go with this settings it should download the files into:

<STATIC_ROOT>/django-auto-static-libs/bootstrap/<the files>

Try to check whether the files are downloaded and whether they are accessible from the browser by url.

Afterwards there should be the include in your template:

{% load static %}
<script src=”{% static 'django-auto-static-libs/bootstrap/js/bootstrap.min.js' %}”></script>
<link rel=”stylesheet” href=”{% static 'django-auto-static-libs/bootstrap/css/bootstrap.min.css' %}">

rokdd · 2022-03-01T18:50:16Z

Sorry that was my mistake because I had to rename the package some time ago:

from django_auto_static_libs.libraries import bootstrap

gilleswx · 2022-03-01T19:02:29Z

Ah OK thanks!
It is already quite late over there, I really appreciate you taking the time,
Still give me this error message about providers:

File "/home/meteogeek/Documents/2022_01_Jan_Jul_2022/SDNLV2_Dev_Folder/SDNL1V2P0P1/SDNL1V2/settings.py", line 17, in <module>
    from django_auto_static_libs.libraries import boostrap
  File "/home/meteogeek/.local/share/virtualenvs/SDNLV2_Dev_Folder-TG8qO8ap/lib/python3.8/site-packages/django_auto_static_libs/libraries.py", line 1, in <module>
    from django_auto_static_libs.providers.GithubProvider import GithubProvider
ModuleNotFoundError: No module named 'django_auto_static_libs.providers'

rokdd · 2022-03-01T19:19:33Z

You have still a typo in boostrap ;-) . I just tried at my machines and I do not get this error... do you have copied it somehow that you have no access to the files from the python (or the user which is running python)? Do you have the folder providers?

gilleswx · 2022-03-01T19:36:06Z

Sorry I need new glasses...I corrected my booo mistake
But sill I get an error message:
ModuleNotFoundError: No module named 'django_auto_static_libs.providers'
Here goes the full error message:
python manage.py static-libs-download

Traceback (most recent call last):
  File "/home/meteogeek/.local/share/virtualenvs/SDNLV2_Dev_Folder-TG8qO8ap/lib/python3.8/site-packages/django/core/management/__init__.py", line 243, in fetch_command
    app_name = commands[subcommand]
KeyError: 'static-libs-download'

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
  File "manage.py", line 22, in <module>
    main()
  File "manage.py", line 18, in main
    execute_from_command_line(sys.argv)
  File "/home/meteogeek/.local/share/virtualenvs/SDNLV2_Dev_Folder-TG8qO8ap/lib/python3.8/site-packages/django/core/management/__init__.py", line 425, in execute_from_command_line
    utility.execute()
  File "/home/meteogeek/.local/share/virtualenvs/SDNLV2_Dev_Folder-TG8qO8ap/lib/python3.8/site-packages/django/core/management/__init__.py", line 419, in execute
    self.fetch_command(subcommand).run_from_argv(self.argv)
  File "/home/meteogeek/.local/share/virtualenvs/SDNLV2_Dev_Folder-TG8qO8ap/lib/python3.8/site-packages/django/core/management/__init__.py", line 250, in fetch_command
    settings.INSTALLED_APPS
  File "/home/meteogeek/.local/share/virtualenvs/SDNLV2_Dev_Folder-TG8qO8ap/lib/python3.8/site-packages/django/conf/__init__.py", line 84, in __getattr__
    self._setup(name)
  File "/home/meteogeek/.local/share/virtualenvs/SDNLV2_Dev_Folder-TG8qO8ap/lib/python3.8/site-packages/django/conf/__init__.py", line 71, in _setup
    self._wrapped = Settings(settings_module)
  File "/home/meteogeek/.local/share/virtualenvs/SDNLV2_Dev_Folder-TG8qO8ap/lib/python3.8/site-packages/django/conf/__init__.py", line 179, in __init__
    mod = importlib.import_module(self.SETTINGS_MODULE)
  File "/usr/lib/python3.8/importlib/__init__.py", line 127, in import_module
    return _bootstrap._gcd_import(name[level:], package, level)
  File "<frozen importlib._bootstrap>", line 1014, in _gcd_import
  File "<frozen importlib._bootstrap>", line 991, in _find_and_load
  File "<frozen importlib._bootstrap>", line 975, in _find_and_load_unlocked
  File "<frozen importlib._bootstrap>", line 671, in _load_unlocked
  File "<frozen importlib._bootstrap_external>", line 848, in exec_module
  File "<frozen importlib._bootstrap>", line 219, in _call_with_frames_removed
  File "/home/meteogeek/Documents/2022_01_Jan_Jul_2022/SDNLV2_Dev_Folder/SDNL1V2P0P1/SDNL1V2/settings.py", line 18, in <module>
    from django_auto_static_libs.libraries import bootstrap
  File "/home/meteogeek/.local/share/virtualenvs/SDNLV2_Dev_Folder-TG8qO8ap/lib/python3.8/site-packages/django_auto_static_libs/libraries.py", line 1, in <module>
    from django_auto_static_libs.providers.GithubProvider import GithubProvider
ModuleNotFoundError: No module named 'django_auto_static_libs.providers'

gilleswx · 2022-03-01T19:38:02Z

OK just read the last part of your comment
I am looking into it, sorry

gilleswx · 2022-03-01T19:46:50Z

Hi again,
Should the prviders folder should be inside the django_auto_static_libs?
I looked inside:
~/.local/share/virtualenvs/SDNLV2_Dev_Folder-TG8qO8ap/lib/python3.8/site-packages/django_auto_static_libs
But nothing there

rokdd · 2022-03-01T20:12:41Z

Good news... it was not your mistake, there was a bug in the setup.py which I fixed and pushed again to pypi. So it should install version 0.4.6 with pip. When not just uninstall and install it again.

gilleswx · 2022-03-01T20:30:40Z

Hi,
Thanks again,
I did that, so it is updated,
One more question, I am guessing, for the destination path, should it be the static one?
Defined with os.path.join(BASE_DIR, 'static')?

rokdd · 2022-03-01T20:39:07Z

Well there are two settings:

Path for the whole folder of module destination_folder:
- if it is a absolute path it does not require STATIC_ROOT
- else it get joined with STATIC_ROOT
Path for each library:
- currently it supports only the relative name by key of the dict of settings
- in the future I guess it can be also implemented with different absolute paths for each library

gilleswx · 2022-03-01T22:26:00Z

Hi again,
I am not sure I understood your last message,
I tried to put the absolute path to the static folder,
It give me the following error:

TypeError: expected str, bytes or os.PathLike object, not NoneType
Here is the full output for the python manage.py static-libs-download:
 
Traceback (most recent call last):
  File "manage.py", line 22, in <module>
    main()
  File "manage.py", line 18, in main
    execute_from_command_line(sys.argv)
  File "/home/meteogeek/.local/share/virtualenvs/SDNLV2_Dev_Folder-TG8qO8ap/lib/python3.8/site-packages/django/core/management/__init__.py", line 425, in execute_from_command_line
    utility.execute()
  File "/home/meteogeek/.local/share/virtualenvs/SDNLV2_Dev_Folder-TG8qO8ap/lib/python3.8/site-packages/django/core/management/__init__.py", line 419, in execute
    self.fetch_command(subcommand).run_from_argv(self.argv)
  File "/home/meteogeek/.local/share/virtualenvs/SDNLV2_Dev_Folder-TG8qO8ap/lib/python3.8/site-packages/django/core/management/__init__.py", line 263, in fetch_command
    klass = load_command_class(app_name, subcommand)
  File "/home/meteogeek/.local/share/virtualenvs/SDNLV2_Dev_Folder-TG8qO8ap/lib/python3.8/site-packages/django/core/management/__init__.py", line 39, in load_command_class
    module = import_module('%s.management.commands.%s' % (app_name, name))
  File "/usr/lib/python3.8/importlib/__init__.py", line 127, in import_module
    return _bootstrap._gcd_import(name[level:], package, level)
  File "<frozen importlib._bootstrap>", line 1014, in _gcd_import
  File "<frozen importlib._bootstrap>", line 991, in _find_and_load
  File "<frozen importlib._bootstrap>", line 975, in _find_and_load_unlocked
  File "<frozen importlib._bootstrap>", line 671, in _load_unlocked
  File "<frozen importlib._bootstrap_external>", line 848, in exec_module
  File "<frozen importlib._bootstrap>", line 219, in _call_with_frames_removed
  File "/home/meteogeek/.local/share/virtualenvs/SDNLV2_Dev_Folder-TG8qO8ap/lib/python3.8/site-packages/django_auto_static_libs/management/commands/static-libs-download.py", line 6, in <module>
    from django_auto_static_libs import settings
  File "/home/meteogeek/.local/share/virtualenvs/SDNLV2_Dev_Folder-TG8qO8ap/lib/python3.8/site-packages/django_auto_static_libs/settings.py", line 20, in <module>
    DESTINATION_ROOT=os.path.join(STATIC_ROOT,DJANGO_AUTO_STATIC_LIBS['destination_folder'])
  File "/usr/lib/python3.8/posixpath.py", line 76, in join
    a = os.fspath(a)
TypeError: expected str, bytes or os.PathLike object, not NoneType

rokdd · 2022-03-02T08:15:41Z

I would not recommend to set another absolute path but anyway it should work.. what did you put as a option in settings.py for the path?

gilleswx · 2022-03-02T13:14:19Z

Hi there,
Starting the day over here,
for the DJANGO_AUTO_STATIC_LIBS part you mean?
I put:
DJANGO_AUTO_STATIC_LIBS = {
'libraries': {
'bootstrap': bootstrap,
},
'/home/meteogeek/Documents/2022_01_Jan_Jul_2022/SDNLV2_Dev_Folder/SDNL1V2P0P1/static/ ': 'dajngo-auto-static-libs'
}

rokdd · 2022-03-02T13:31:59Z

Okay then it is clear that it is not working. Try like this:

DJANGO_AUTO_STATIC_LIBS = {
'libraries': {
'bootstrap': bootstrap,
},
 'destination_folder': '/home/meteogeek/Documents/2022_01_Jan_Jul_2022/SDNLV2_Dev_Folder/SDNL1V2P0P1/static/ '
}

gilleswx · 2022-03-02T13:39:48Z

OK, made that change, thanks,
Now running the command line: python manage.py static-libs-download
I get the Download and update static lib "bootstrap" starting
But then I get the following:
Not extracted bootstrap-5.1.3/: Not matching include rule
Not extracted bootstrap-5.1.3/.babelrc.js: Not matching include rule
Not extracted bootstrap-5.1.3/.browserslistrc: Not matching include rule
Not extracted bootstrap-5.1.3/.bundlewatch.config.json: Not matching include rule
Not extracted bootstrap-5.1.3/.cspell.json: Not matching include rule
Not extracted bootstrap-5.1.3/.editorconfig: Not matching include rule
Not extracted bootstrap-5.1.3/.eslintignore: Not matching include rule
Not extracted bootstrap-5.1.3/.eslintrc.json: Not matching include rule
Not extracted bootstrap-5.1.3/.gitattributes: Not matching include rule
Not extracted bootstrap-5.1.3/.github/: Not matching include rule
Not extracted bootstrap-5.1.3/.github/CODEOWNERS: Not matching include rule
Not extracted bootstrap-5.1.3/.github/CONTRIBUTING.md: Not matching include rule
Not extracted bootstrap-5.1.3/.github/ISSUE_TEMPLATE/: Not matching include rule
Not extracted bootstrap-5.1.3/.github/ISSUE_TEMPLATE/bug_report.yml: Not matching include rule
...........................................
And so on

rokdd · 2022-03-02T13:41:51Z

well is there something in the folder?

gilleswx · 2022-03-02T13:48:00Z

If you mean in the static folder, yes,
there are 2 folders (js and css) and 2 files (logo)

rokdd · 2022-03-02T14:26:13Z

Good.. but it should work with the css and js folder and include them in the template?

The other files are just files which are included and not neccesary to run (and when they are necessary I can change the config to copy them as well)

gilleswx · 2022-03-02T15:21:38Z

OK, thanks for your feed back,
By saying "it should work with the css and js folder", you mean keeping them in there, so just let it like it is, is that correct?
I have put the tmeplates the following way:
I have in a folder call partials the _navbar.html I call in my base.html file which is in the upper folder called templates
It is working fine most of it, just still cannot get this burger symbol pop out in the nav bar.
I am not sure where to call and how to call the js part to get that working
The css part I call it directly from the static/css folder:

But now that I included your great work I am not sure how to call these css and js things in the html files

rokdd · 2022-03-02T15:27:08Z

Can you post your include of the files in header?

Should be something like this:

{% load static %}
<script src=”{% static 'django-auto-static-libs/bootstrap/js/bootstrap.min.js' %}”></script>
<link rel=”stylesheet” href=”{% static 'django-auto-static-libs/bootstrap/css/bootstrap.min.css' %}">

gilleswx · 2022-03-02T15:38:40Z

I am doing something wrong with the post just above, it does not seem to send all the info I put in

gilleswx · 2022-03-02T15:55:44Z

Learning how to use github, sorry,

gilleswx · 2022-03-02T15:57:37Z

I am trying to cite the code and even with does not want to post it

rokdd · 2022-03-02T16:01:15Z

Just paste it in and mark the text and press the code button above in the editor then it is like escaped..

For steping forward: The plugin correctly supports only to download the files and not to link them in the template. So the procees how you embed your files is the same like for any static folder / file . So I would recoomend that you hard code the url of the min and js file which you want to include and make sure that this files are properly loaded.

gilleswx · 2022-03-02T16:06:15Z

OK, thanks,
I think I understand that,
Just before redeaing your lastpot I did paste it
Got this
02/Mar/2022 16:02:17] "GET /projects/ HTTP/1.1" 200 2811
[02/Mar/2022 16:02:17] "GET /static/css/homepage.css HTTP/1.1" 304 0
Not Found: /projects/”/static/django-auto-static-libs/bootstrap/js/bootstrap.min.js”
[02/Mar/2022 16:02:17] "GET /projects/%E2%80%9D/static/django-auto-static-libs/bootstrap/js/bootstrap.min.js%E2%80%9D HTTP/1.1" 404 3046
[02/Mar/2022 16:02:17] "GET /static/css/bootstrap.css HTTP/1.1" 200 205484
[02/Mar/2022 16:02:17] "GET /static/css/bootstrap.min.css HTTP/1.1" 200 163873
[02/Mar/2022 16:02:17] "GET /static/STC_logo.png HTTP/1.1" 200 19500

gilleswx · 2022-03-02T16:07:14Z

Sorry if all my questions are simple
Is that normal that in static there in a folder without name in which there is the bootstrap folder?

rokdd · 2022-03-02T16:54:17Z

no I guess not... a folder without name?..

I only see that you get a 404 and that you url looks not very healthy:

you have to point to your absolute path you are using. so when you do not have a absolute path with "django-auto-static-libs" then you should not include it in the url.. you will need like <your absolute url path>/bootstrap/css/bootstrap.min.css
you have a quote in the url.. and projects.

From the absolute url you sent before it should be: /static/bootstrap/css/bootstrap.min.css
Can you maybe make a screenshot of the folder under static or list it somehow?

gilleswx · 2022-03-02T17:01:11Z

Yes sure, here goes a screenshot

gilleswx · 2022-03-02T17:01:58Z

The bootstrap folder is inside the folder without name on the left

gilleswx · 2022-03-02T17:07:46Z

So I wonder if I could simply rename with whatever name that folder and put it in the full path

rokdd · 2022-03-02T17:12:32Z

Sure simply rename.. can you unfold or just make a small summary what is in each folder... but when you have no bootstrap folder then you also have to remove the bootstrap folder from the url.. it is simple like a img.. you need the path to the js and the css file. everything else is bootstrap loading

gilleswx · 2022-03-02T17:20:15Z

OK, I did so,
Inside static:
-the css folder has on homemade css file and all the previously downloaded css bootstrap ones
-the js one has all the previously downloaded bootstrap js files
Inisde the folder iwthout name (I renamed it stf for now) is the bootstrap folder with the following shown in the screenshot:

rokdd · 2022-03-02T17:22:05Z

OK.. then put the path together with stf included and it should be work to load in the template / browser?

gilleswx · 2022-03-02T17:50:34Z

The problem I see using absolute path is that after if I move the project somewhere else I would have to go in and modify it manually each time

gilleswx · 2022-03-02T18:01:41Z

So I used:

<script src="{% static 'stf/bootstrap/js/bootstrap.min.js' %}"></script>
<link rel="stylesheet" href="{% static 'stf/bootstrap/css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'stf/bootstrap/css/bootstrap.css' %}">

gilleswx · 2022-03-02T18:02:05Z

And it found the files no problem

gilleswx · 2022-03-02T18:04:59Z

Now I need to figure out the js and css files I need to get the folding/unfolding list and the burger icon

rokdd · 2022-03-02T18:19:35Z

Well, I guess you should only use min or not min for css, not both. Well as I said I do not know bootstrap very well. Just double check that in the Browser Network are no 404 because bootstrap might load additionally files in background. Else, I do not know where the error appears, and I guess it is not related to this package anymore (hopefully). Just read through how initialize.. hope you will manage ;-)

gilleswx · 2022-03-02T18:25:15Z

Ok I will try with iwth only one of the 2 and see which one works out!
I have no more 404 now, so that is much better
Thanks for your guidance and help, it is more than appreciated :)

Repository owner deleted a comment from gilleswx Mar 2, 2022

Problem with burger simbol for folding menu in Django navbar #1

Problem with burger simbol for folding menu in Django navbar #1

Comments

gilleswx commented Mar 1, 2022 • edited by rokdd Loading

rokdd commented Mar 1, 2022

rokdd commented Mar 1, 2022 • edited Loading

rokdd commented Mar 1, 2022

gilleswx commented Mar 1, 2022 • edited by rokdd Loading

rokdd commented Mar 1, 2022

gilleswx commented Mar 1, 2022 • edited by rokdd Loading

gilleswx commented Mar 1, 2022

gilleswx commented Mar 1, 2022

rokdd commented Mar 1, 2022

gilleswx commented Mar 1, 2022

rokdd commented Mar 1, 2022 • edited Loading

gilleswx commented Mar 1, 2022 • edited by rokdd Loading

rokdd commented Mar 2, 2022 • edited Loading

gilleswx commented Mar 2, 2022

rokdd commented Mar 2, 2022

gilleswx commented Mar 2, 2022

rokdd commented Mar 2, 2022

gilleswx commented Mar 2, 2022

rokdd commented Mar 2, 2022

gilleswx commented Mar 2, 2022

rokdd commented Mar 2, 2022

gilleswx commented Mar 2, 2022

gilleswx commented Mar 2, 2022

gilleswx commented Mar 2, 2022

rokdd commented Mar 2, 2022

gilleswx commented Mar 2, 2022

gilleswx commented Mar 2, 2022

rokdd commented Mar 2, 2022

gilleswx commented Mar 2, 2022

gilleswx commented Mar 2, 2022

gilleswx commented Mar 2, 2022

rokdd commented Mar 2, 2022

gilleswx commented Mar 2, 2022

rokdd commented Mar 2, 2022

gilleswx commented Mar 2, 2022

gilleswx commented Mar 2, 2022

gilleswx commented Mar 2, 2022

gilleswx commented Mar 2, 2022

rokdd commented Mar 2, 2022

gilleswx commented Mar 2, 2022

gilleswx commented Mar 1, 2022 •

edited by rokdd

Loading

rokdd commented Mar 1, 2022 •

edited

Loading

gilleswx commented Mar 1, 2022 •

edited by rokdd

Loading

gilleswx commented Mar 1, 2022 •

edited by rokdd

Loading

rokdd commented Mar 1, 2022 •

edited

Loading

gilleswx commented Mar 1, 2022 •

edited by rokdd

Loading

rokdd commented Mar 2, 2022 •

edited

Loading