Refactored openstack-dashboard to use Django 1.3's contrib.staticfiles app as per current best-practices. This bumps the minimum required version of Django to 1.3 and introduces a backwards-incompatible change for any third-party code that relied on hard-coded paths to the media directory.

openstack-dashboard/dashboard/settings.py

@@ -37,9 +37,11 @@ ENABLE_VNC = True
 LOGIN_URL = '/auth/login'
 LOGIN_REDIRECT_URL = '/'
 
-MEDIA_ROOT = os.path.join(ROOT_PATH, '..', 'media')
+MEDIA_ROOT = os.path.abspath(os.path.join(ROOT_PATH, '..', 'media'))
 MEDIA_URL = '/media/'
-ADMIN_MEDIA_PREFIX = '/media/admin/'
+STATIC_ROOT = os.path.abspath(os.path.join(ROOT_PATH, '..', 'static'))
+STATIC_URL = '/static/'
+ADMIN_MEDIA_PREFIX = '/static/admin/'
 
 CREDENTIAL_AUTHORIZATION_DAYS = '5'
 
@@ -61,6 +63,7 @@ TEMPLATE_CONTEXT_PROCESSORS = (
     'django.core.context_processors.i18n',
     'django.core.context_processors.request',
     'django.core.context_processors.media',
+    'django.core.context_processors.static',
     'django.contrib.messages.context_processors.messages',
     'django_openstack.context_processors.swift',
     'django_openstack.context_processors.tenants',
@@ -76,11 +79,16 @@ TEMPLATE_DIRS = (
     os.path.join(ROOT_PATH, 'templates'),
 )
 
+STATICFILES_DIRS = (
+    os.path.join(ROOT_PATH, 'static'),
+)
+
 INSTALLED_APPS = (
     'dashboard',
     'django.contrib.contenttypes',
     'django.contrib.sessions',
     'django.contrib.messages',
+    'django.contrib.staticfiles',
     'django_openstack',
     'django_openstack.templatetags',
     'mailer',

openstack-dashboard/dashboard/static/dashboard/css/django-admin-widgets.css

@@ -48,12 +48,12 @@ SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
 .selector-available h2, .selector-chosen h2 {
     border: 1px solid #ccc;
-    background: #C9DBED url(/media/admin/img/admin/default-bg.gif) bottom left repeat-x;
+    background: #C9DBED url(../admin/img/admin/default-bg.gif) bottom left repeat-x;
     color: #fff;
 }
 
 .selector .selector-available h2 {
-    background: white url(/media/admin/img/admin/nav-bg.gif) bottom left repeat-x;
+    background: white url(../admin/img/admin/nav-bg.gif) bottom left repeat-x;
     color: #666;
 }
 
@@ -80,7 +80,7 @@ SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
     float: left;
     width: 22px;
     height: 50px;
-    background: url(/media/admin/img/admin/chooser-bg.gif) top center no-repeat;
+    background: url(../admin/img/admin/chooser-bg.gif) top center no-repeat;
     margin: 8em 3px 0 3px;
     padding: 0;
 }
@@ -104,12 +104,12 @@ SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 }
 
 .selector-add {
-    background: url(/media/admin/img/admin/selector-add.gif) top center no-repeat;
+    background: url(../admin/img/admin/selector-add.gif) top center no-repeat;
     margin-bottom: 2px;
 }
 
 .selector-remove {
-    background: url(/media/admin/img/admin/selector-remove.gif) top center no-repeat;
+    background: url(../admin/img/admin/selector-remove.gif) top center no-repeat;
 }
 
 a.selector-chooseall, a.selector-clearall {
@@ -129,11 +129,11 @@ a.selector-chooseall:hover, a.selector-clearall:hover {
 
 a.selector-chooseall {
     width: 7em;
-    background: url(/media/admin/img/admin/selector-addall.gif) left center no-repeat;
+    background: url(../admin/img/admin/selector-addall.gif) left center no-repeat;
 }
 
 a.selector-clearall {
-    background: url(/media/admin/img/admin/selector-removeall.gif) left center no-repeat;
+    background: url(../admin/img/admin/selector-removeall.gif) left center no-repeat;
 }
 
 
@@ -165,7 +165,7 @@ a.selector-clearall {
     height: 22px;
     width: 50px;
     margin: 0 0 3px 40%;
-    background: url(/media/admin/img/admin/chooser_stacked-bg.gif) top center no-repeat;
+    background: url(../admin/img/admin/chooser_stacked-bg.gif) top center no-repeat;
 }
 
 .stacked .selector-chooser li {
@@ -178,11 +178,11 @@ a.selector-clearall {
 }
 
 .stacked .selector-add {
-    background-image: url(/media/admin/img/admin/selector_stacked-add.gif);
+    background-image: url(../admin/img/admin/selector_stacked-add.gif);
 }
 
 .stacked .selector-remove {
-    background-image: url(/media/admin/img/admin/selector_stacked-remove.gif);
+    background-image: url(../admin/img/admin/selector_stacked-remove.gif);
 }
 
 
@@ -269,7 +269,7 @@ p.file-upload {
     color: #666;
     padding: 2px 3px;
     text-align: center;
-    background: #e1e1e1 url(/media/admin/img/admin/nav-bg.gif) 0 50% repeat-x;
+    background: #e1e1e1 url(../admin/img/admin/nav-bg.gif) 0 50% repeat-x;
     border-bottom: 1px solid #ddd;
 }
 
@@ -337,7 +337,7 @@ p.file-upload {
     position: absolute;
     font-weight: bold;
     font-size: 12px;
-    background: #C9DBED url(/media/admin/img/admin/default-bg.gif) bottom left repeat-x;
+    background: #C9DBED url(../admin/img/admin/default-bg.gif) bottom left repeat-x;
     padding: 1px 4px 2px 4px;
     color: white;
 }
@@ -360,7 +360,7 @@ p.file-upload {
     margin: 0 !important;
     padding: 0;
     font-size: 10px;
-    background: #e1e1e1 url(/media/admin/img/admin/nav-bg.gif) 0 50% repeat-x;
+    background: #e1e1e1 url(../admin/img/admin/nav-bg.gif) 0 50% repeat-x;
     border-top: 1px solid #ddd;
 }
 
@@ -397,7 +397,7 @@ ul.orderer li {
     border-width: 0 1px 1px 0;
     white-space: nowrap;
     overflow: hidden;
-    background: #e2e2e2 url(/media/admin/img/admin/nav-bg-grabber.gif) repeat-y;
+    background: #e2e2e2 url(../admin/img/admin/nav-bg-grabber.gif) repeat-y;
 }
 
 ul.orderer li:hover {
@@ -429,7 +429,7 @@ ul.orderer li.selected {
 }
 
 ul.orderer li.deleted {
-    background: #bbb url(/media/admin/img/admin/deleted-overlay.gif);
+    background: #bbb url(../admin/img/admin/deleted-overlay.gif);
 }
 
 ul.orderer li.deleted a:link, ul.orderer li.deleted a:visited {
@@ -437,7 +437,7 @@ ul.orderer li.deleted a:link, ul.orderer li.deleted a:visited {
 }
 
 ul.orderer li.deleted .inline-deletelink {
-    background-image: url(/media/admin/img/admin/inline-restore.png);
+    background-image: url(../admin/img/admin/inline-restore.png);
 }
 
 ul.orderer li.deleted:hover, ul.orderer li.deleted a.selector:hover {
@@ -449,7 +449,7 @@ ul.orderer li.deleted:hover, ul.orderer li.deleted a.selector:hover {
 .inline-deletelink {
     display: block;
     text-indent: -9999px;
-    background: transparent url(/media/admin/img/admin/inline-delete.png) no-repeat;
+    background: transparent url(../admin/img/admin/inline-delete.png) no-repeat;
     width: 15px;
     height: 15px;
     margin: 0.4em 0;
@@ -488,11 +488,11 @@ ul.orderer li.deleted:hover, ul.orderer li.deleted a.selector:hover {
 }
 
 .editinline tr.deleted {
-    background: #ddd url(/media/admin/img/admin/deleted-overlay.gif);
+    background: #ddd url(../admin/img/admin/deleted-overlay.gif);
 }
 
 .editinline tr.deleted .inline-deletelink {
-    background-image: url(/media/admin/img/admin/inline-restore.png);
+    background-image: url(../admin/img/admin/inline-restore.png);
 }
 
 .editinline tr.deleted td:hover {
@@ -523,13 +523,13 @@ ul.orderer li.deleted:hover, ul.orderer li.deleted a.selector:hover {
 .editinline-stacked .inline-splitter {
     float: left;
     width: 9px;
-    background: #f8f8f8 url(/media/admin/img/admin/inline-splitter-bg.gif) 50% 50% no-repeat;
+    background: #f8f8f8 url(../admin/img/admin/inline-splitter-bg.gif) 50% 50% no-repeat;
     border-right: 1px solid #ccc;
 }
 
 .editinline-stacked .controls {
     clear: both;
-    background: #e1e1e1 url(/media/admin/img/admin/nav-bg.gif) top left repeat-x;
+    background: #e1e1e1 url(../admin/img/admin/nav-bg.gif) top left repeat-x;
     padding: 3px 4px;
     font-size: 11px;
     border-top: 1px solid #ddd;

openstack-dashboard/dashboard/static/dashboard/css/openstack.css

@@ -165,7 +165,7 @@ p .ui-icon {
 
 #content.home #projects a	{
 	display: block;
-	background: url(/media/dashboard/img/server_icon.png) no-repeat 13px 9px;
+	background: url(../img/server_icon.png) no-repeat 13px 9px;
 	padding: 5px 0 5px 58px;
 	font-weight: bold;
 }
@@ -213,7 +213,7 @@ span.data {
 #home_login input[type="submit"], #lnk_register {
 	float: right;
 	height: 31px;
-	background: url(/media/dashboard/img/login_btn.png) top left repeat-x;
+	background: url(../img/login_btn.png) top left repeat-x;
 	border: 1px solid #206cb5;
 	color: #fff;
 	font-weight: bold;
@@ -508,7 +508,7 @@ td.detail_wrapper {
 
 }
 div.image_detail, div.instance_detail {
-	background: url(/media/dashboard/img/image_detail.png) top left no-repeat;
+	background: url(../img/image_detail.png) top left no-repeat;
 	height: 90px;
 	width: 674px;
 	padding: 8px 8px 16px 8px;