Merge pull request #342 from CTPUG/bs4-alpha6

Bootstrap 4 Alpha 6

package.json

@@ -3,10 +3,12 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "bootstrap": "^4.0.0-alpha.6",
     "font-awesome": "^4.6.3",
-    "bootstrap": "^4.0.0-alpha.4"
+    "jquery": ">=1.9.1",
+    "tether": "^1.4.0"
   },
   "scripts": {
-    "postinstall" : "rsync -d --del node_modules/* wafer/static/vendor/"
+    "postinstall" : "rsync -a --delete node_modules/ wafer/static/vendor/"
   }
 }

wafer/pages/templates/wafer.pages/page.html

@@ -5,8 +5,8 @@
 <div>
     {{ page.content.rendered|safe }}
     {% if perms.pages.change_page %}
-        <a href="{{ page.get_absolute_url }}?compare" class="float-xs-right btn btn-secondary btn-lg">{% trans 'Compare to Previous version' %}</a>
-        <a href="{{ page.get_absolute_url }}?edit" class="float-xs-right btn btn-secondary btn-lg">{% trans 'Edit' %}</a>
+        <a href="{{ page.get_absolute_url }}?compare" class="float-right btn btn-secondary btn-lg">{% trans 'Compare to Previous version' %}</a>
+        <a href="{{ page.get_absolute_url }}?edit" class="float-right btn btn-secondary btn-lg">{% trans 'Edit' %}</a>
     {% endif %}
 </div>
 {% endblock %}

wafer/schedule/templates/wafer.schedule/edit_schedule.html

@@ -13,7 +13,7 @@
   </div>
   <div class="col-md-8">
     <h1>Schedule Editor
-      <div class="float-xs-right">
+      <div class="float-right">
         <ul class="nav nav-pills navbar-nav navbar-right">
           <li role="presentation" class="dropdown">
             <a class="dropdown-toggle" data-toggle="dropdown"

wafer/schedule/templates/wafer.schedule/full_schedule.html

@@ -6,7 +6,7 @@
   <h1>
     {% trans "Schedule" %}
     {% if user.is_authenticated and user.is_staff %}
-      <div class="float-xs-right">
+      <div class="float-right">
         <a class="btn btn-secondary"
             href="{% url 'admin:schedule_editor' %}">
           Edit schedule

wafer/sponsors/templates/wafer.sponsors/sponsors.html

@@ -17,7 +17,7 @@ <h2 class="bs-callout bs-callout-default bs-callout-{{ sponsor.packages.first.na
          {% else %}
          {{ sponsor.name }}
          {% endif %}
-        <small class="text-xs-right">{{ sponsor.packages.first.name }}</small>
+        <small class="text-right">{{ sponsor.packages.first.name }}</small>
       </h2>
       {{ sponsor.description.rendered|safe }}
     </div>

wafer/static/css/wafer.css

@@ -139,3 +139,13 @@
 .bs-callout-patron {
     border-left-color: #A4C639;
 }
+
+/* Temporary workaronud for Bootstrap4 alpha 6
+ * Fixed upstream in https://github.com/twbs/bootstrap/pull/21722
+ */
+@media (max-width: 767px) {
+    nav .container {
+        margin-left: 0;
+        margin-right: 0;
+    }
+}

wafer/talks/templates/wafer.talks/speakers.html

@@ -8,10 +8,10 @@
       {% for user_profile in row %}
         <div class="col-md-3">
           <a href="{% url 'wafer_user_profile' username=user_profile.user.username %}">
-            <img class="thumbnail m-x-auto" src="{{ user_profile.avatar_url }}">
+            <img class="thumbnail mx-auto" src="{{ user_profile.avatar_url }}">
           </a>
           <a href="{% url 'wafer_user_profile' username=user_profile.user.username %}">
-            <h3 class="text-xs-center">
+            <h3 class="text-center">
               {{ user_profile.display_name }}
             </h3>
           </a>

wafer/talks/templates/wafer.talks/talk.html

@@ -6,7 +6,7 @@
   <h1>
     {{ object.title }}
     {% if can_edit %}
-      <a href="{% url 'wafer_talk_edit' object.pk %}" class="float-xs-right btn btn-secondary btn-lg">{% trans 'Edit' %}</a>
+      <a href="{% url 'wafer_talk_edit' object.pk %}" class="float-right btn btn-secondary btn-lg">{% trans 'Edit' %}</a>
     {% endif %}
   </h1>
   <div>

wafer/talks/tests/test_views.py

@@ -379,10 +379,10 @@ def test_view_one_speaker(self):
             '<div class="row">',
             '    <div class="col-md-3">',
             '      <a href="/users/%s/">' % username,
-            '        <img class="thumbnail m-x-auto" src="%s">' % img,
+            '        <img class="thumbnail mx-auto" src="%s">' % img,
             '      </a>',
             '      <a href="/users/%s/">' % username,
-            '        <h3 class="text-xs-center">author_a</h3>',
+            '        <h3 class="text-center">author_a</h3>',
             '      </a>',
             '    </div>',
             '</div>',

wafer/templates/wafer/base.html

@@ -33,6 +33,7 @@ <h1>{{ WAFER_CONFERENCE_NAME }}</h1>
     </div>
     {% sponsors %}
     <script src="{% static 'vendor/jquery/dist/jquery.min.js' %}"></script>
+    <script src="{% static 'vendor/tether/dist/js/tether.min.js' %}"></script>
     <script src="{% static 'vendor/bootstrap/dist/js/bootstrap.min.js' %}"></script>
     {% block extra_foot %}{% endblock %}
 </body>

wafer/templates/wafer/nav.html

@@ -1,17 +1,22 @@
 {% load i18n %}
-<nav class="navbar navbar-dark bg-inverse {{ WAFER_NAVIGATION_VISIBILITY }}">
+<nav class="navbar navbar-toggleable-sm navbar-inverse bg-inverse {{ WAFER_NAVIGATION_VISIBILITY }}">
   <div class="container">
     {% block navtogglebutton %}
-    <button type="button" class="navbar-toggler hidden-sm-up" data-toggle="collapse" data-target="#wafer-navbar-collapse" aria-controls="#wafer-navbar-collapse" aria-expanded="false" aria-label="Toggle navigation"></button>
+    <button type="button" class="navbar-toggler navbar-toggler-right"
+            data-toggle="collapse" data-target="#wafer-navbar-collapse"
+            aria-controls="wafer-navbar-collapse" aria-expanded="false"
+            aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
     {% endblock navtogglebutton %}
 
     {% block navtitle %}
     <a class="navbar-brand" href="{% url 'wafer_page' %}">{{ WAFER_CONFERENCE_NAME }}</a>
     {% endblock navtitle %}
 
-    <div class="collapse navbar-toggleable-xs" id="wafer-navbar-collapse">
+    <div class="collapse navbar-collapse" id="wafer-navbar-collapse">
       {% block navmenulist %}
-      <ul class="nav navbar-nav">
+      <ul class="navbar-nav mr-auto">
       {% for item in WAFER_MENUS.items %}
         {% if item.image and item.url %}
         <li class="nav-item icon">
@@ -41,7 +46,7 @@
       </ul>
       {% endblock navmenulist %}
       {% block navauthmenu %}
-      <ul class="nav navbar-nav float-sm-right">
+      <ul class="navbar-nav float-md-right">
         {% if user.is_authenticated %}
         {% block navauthenticated %}
         <li class="nav-item dropdown">
@@ -77,4 +82,3 @@
     </div>
   </div>
 </nav>
-

wafer/users/templates/wafer.users/profile.html

@@ -25,7 +25,7 @@
     </div>
     <div class="col-md-10">
         {% if can_edit %}
-        <ul class="float-xs-right btn-group btn-group-vertical profile-links">
+        <ul class="float-right btn-group btn-group-vertical profile-links">
             <li><a href="{% url 'wafer_user_edit' object.username %}" class="btn btn-secondary">{% trans 'Edit User' %}</a></li>
             <li><a href="{% url 'wafer_user_edit_profile' object.username %}" class="btn btn-secondary">{% trans 'Edit Profile' %}</a></li>
             {% if WAFER_REGISTRATION_OPEN %}
@@ -136,7 +136,7 @@ <h2>{% trans 'Submitted or Under Consideration Talks:' %}</h2>
     the edit button for people with 'change-talk' permissions, but we
     accept that tradeoff for simplicity here.
     {% endcomment %}
-    <a href="{% url 'wafer_talk_edit' talk.pk %}" class="float-xs-right btn btn-secondary btn-lg">{% trans 'Edit' %}</a>
+    <a href="{% url 'wafer_talk_edit' talk.pk %}" class="float-right btn btn-secondary btn-lg">{% trans 'Edit' %}</a>
     <p>{{ talk.abstract.rendered|safe }}</p>
 </div>
 {% endfor %}