Exploring the world of Django, angularJS, and lumx in my website creation. Still navigating my way through this framework, especially when it comes to basic lumx functionalities. Followed the installation instructions from (using "bower install lumx"). Thankfully, Django is all set up to handle static files properly.
Currently testing out my base.html file with a simple dropdown box:
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8>
<script src="{% static 'browse/js/script.js' %}"></script>
<link rel="stylesheet" href="{% static 'browse/bower_components/lumx/dist/lumx.css' %}">
<script src="{% static 'browse/bower_components/jquery/dist/jquery.js' %}"></script>
<script src="{% static 'browse/bower_components/velocity/velocity.js' %}"></script>
<script src="{% static 'browse/bower_components/moment/min/moment-with-locales.js' %}"></script>
<script src="{% static 'browse/bower_components/angular/angular.js' %}"></script>
<script src="{% static 'browse/bower_components/lumx/dist/lumx.js' %}"></script>
</head>
<body>
<lx-dropdown over-toggle="true">
<button class="btn btn--m btn--black btn--flat" lx-ripple lx-dropdown-toggle>
Dropdown toggle
</button>
<lx-dropdown-menu>
<ul>
<li><a class="dropdown-link" ng-click="dropdownAlert()">Notification</a></li>
<li><a class="dropdown-link">Another action</a></li>
<li><a class="dropdown-link">Another action</a></li>
<li><a class="dropdown-link">Another action</a></li>
<li><a class="dropdown-link">Something else here</a></li>
<li class="dropdown-divider"></li>
<li><span class="dropdown-link dropdown-link--is-header">Header</span></li>
<li><a class="dropdown-link">Separated link</a></li>
</ul>
</lx-dropdown-menu>
</lx-dropdown>
</body>
Encountering an issue where animations are not functioning as expected. Despite having all CSS and JS files being successfully called according to server logs, lumx animations like button ripple are not working. However, icons are being displayed without any hassle.