WIP: Bootstrap 4

core/static/css/_constants.scss

@@ -7,17 +7,9 @@ $background-headerbar: #37215D;
 $background-footer: #000;
 $background-dropdown: #fff;
 
-$font-color-light: #fff;
-$font-color-dark: #000;
-$font-color-link: $piratepurple;
-$font-color-link-hover: lighten($piratepurple, 20%);
-
-$font-heading: "Montserrat";
-$font-text: Arial, sans-serif;
 $font-size: 14pt;
 
 $color-btn-light: #eee;
-$color-btn-primary: lighten($piratepurple, 20%);
 
 $white: #fff;
 $black: #000;

core/static/css/_navbar.scss

@@ -1,7 +1,5 @@
 .navbar {
    background-color: $background-menubar;
-   height: 70px;
-   padding-right: 50px;
 
    .btn, button {
      color: $font-color-light;

core/static/css/_profile.scss

@@ -1,50 +0,0 @@
-
-
-.profile {
-  width: 100%;
-  display: flex;
-	flex-direction: column;
-	flex-wrap: wrap;
-	align-items: stretch;
-	align-content: stretch;
-}
-
-
-
-@include tablet() {
-  .profile {
-    flex-direction: row;
-
-    div {
-      h1 {
-        font-size: 30px;
-        color: #000;
-      }
-    }
-
-    &-picture {
-      float: right;
-      width: 40%;
-      padding: 15px;
-    }
-
-    &-bio {
-      width: 50%;
-      text-align: justify;
-    }
-
-    &-thingsdone {
-      width: 50%;
-      padding-left: 20px;
-    }
-
-    &-candidacies {
-      width: 100%;
-    }
-
-    &-proposals {
-
-    }
-
-  }
-}

core/static/css/_sidebar.scss

@@ -41,19 +41,8 @@
   border-top: 1px solid $background-lightgray;
 }
 
-
 .sidebar-nav .dropdown-menu {
-  width: $sidebar-width;
-}
-
-.sidebar-nav .dropdown-menu li {
-  text-indent: 0px;
-  border-bottom: 1px solid $background-lightgray;
-}
-
-.sidebar-nav .dropdown-menu li > a {
-  white-space: normal;
-  padding-left: 10px;
+  min-width: $sidebar-width;
 }
 
 .sidebar-nav li {
@@ -85,12 +74,6 @@
   margin-left: 10px;
 }
 
-.navbar-toggle {
-  float: left;
-  margin-left: 12px;
-  margin-right: 6px;
-}
-
 @media(max-width:767px) {
   #sidebar-wrapper {
     box-shadow: 1px 0px 4px #ccc;

core/static/css/_widgets.scss

@@ -4,7 +4,14 @@
   font-family: $font-heading;
 }
 
+.btn-default:hover {
+  background-color: $color-btn-primary;
+  color: white;
+  cursor: pointer;
+}
+
 .btn-default {
+  border: 1px solid #ccc;
   background: none;
   background-image: none;
   background-color: $color-btn-light;

core/static/css/application.scss

@@ -3,7 +3,6 @@
 @import "_constants.scss";
 
 body {
-  margin-top: 70px;
   padding-bottom: 40px;
   font-size: $font-size;
 }
@@ -75,8 +74,16 @@ footer {
 .rejected { color: #a00; }
 .abstained { color: grey; }
 
-#ajax-status-messages { position: absolute; top: 55px; width: 100%; }
-#ajax-status-messages div { max-width: 400px; margin: 0 auto 0 auto; }
+#ajax-status-messages {
+  position: absolute;
+  top: 85px;
+  right: 10px;
+  z-index:1;
+}
+#ajax-status-messages div {
+  max-width: 50vw;
+  margin: 0 auto 0 auto;
+}
 
 /* Headers */
 h1 {
@@ -127,6 +134,9 @@ div#submit-working { background: #bbb; }
 #cancel-url { display: none; }
 
 .dropdown-menu { cursor: pointer; }
+.dropdown-item:hover{
+  color:white;
+}
 
 .nav-tabs>li.active>a {
   border-left-width: 2px;

cover.css

@@ -11,4 +11,4 @@
 }
 #index {
     margin: 6em 0 0 3em;
-}
+}

requirements.txt

@@ -6,7 +6,6 @@
 
 # Django packages
 Django==2.2.28
-django-bootstrap-form==3.4
 django-crispy-forms==1.8.1
 django-dotenv==1.4.2
 django-prosemirror==0.0.12

wasa2il/forms.py

@@ -30,9 +30,9 @@ def __init__(self, *args, **kwargs):
 
         # Make form pretty
         self.helper = FormHelper(self)
-        self.helper.form_class = 'form-horizontal'
-        self.helper.label_class = 'col-md-3'
-        self.helper.field_class = 'col-md-6'
+        self.helper.form_class = ''
+        self.helper.label_class = 'col-lg-3'
+        self.helper.field_class = 'col-lg-6'
 
         # Add save/cancel buttons
         self.helper.add_input(Submit('save', _('Save')))
@@ -60,4 +60,4 @@ def __init__(self, *args, **kwargs):
             elif field_type is ModelMultipleChoiceField:
                 field.widget = forms.CheckboxSelectMultiple()
             elif field_type is DateTimeField:
-                field.widget = DateTimeWidget(options=self.dateTimeOptions, bootstrap_version=3)
+                field.widget = DateTimeWidget(options=self.dateTimeOptions, bootstrap_version=4)

wasa2il/settings.py

@@ -297,7 +297,6 @@
     'django.contrib.admin',
 
     'registration',
-    'bootstrapform',
     'diff_match_patch',
     'datetimewidget',
     'crispy_forms',
@@ -319,7 +318,7 @@
 except:
     pass
 
-CRISPY_TEMPLATE_PACK = 'bootstrap3'
+CRISPY_TEMPLATE_PACK = 'bootstrap4'
 CRISPY_FAIL_SILENTLY = not DEBUG
 
 # Allow users to attempt log-ins using any of the following:

wasa2il/templates/_comments_section.html

@@ -2,10 +2,10 @@
     <div id="{{ obj_key }}_comments">
     </div>
     {% if not closed %}
-        <form class="form-inline comment_form" role="form">
+        <form class="my-2" role="form">
             {% csrf_token %}
             <div class="form-group" style="width: 100%;">
-                <textarea id="id_comment"></textarea>
+                <textarea rows="4" id="id_comment" class="form-control"></textarea>
             </div>
             <div class="form-group">
                 <button type="button" class="btn btn-primary" onclick="commentSend('{{ obj_key }}', {{ obj_id }}, $('#id_comment'));">{{ btntext }}</button>
@@ -20,4 +20,4 @@
             commentTimerStart('{{ obj_key }}', {{ obj_id }});
         });
     </script>
-</div>
+</div>

wasa2il/templates/_sidenav_polity.html

@@ -53,11 +53,11 @@
 <li>
   {% if user_is_member %}
       {% if user in polity.officers.all %}
-          <span class="label label-success">{% trans 'You are an officer in this polity.' %}</span>
+          <span class="badge badge-success">{% trans 'You are an officer in this polity.' %}</span>
       {% else %}
-          <span class="label label-primary">{% trans 'You are a member of this polity.' %}</span>
+          <span class="badge badge-primary">{% trans 'You are a member of this polity.' %}</span>
       {% endif %}
   {% elif user.is_authenticated %}
-      <span class="label label-warning">{% trans 'You are not a member of this polity.' %}</span>
+      <span class="badge badge-warning">{% trans 'You are not a member of this polity.' %}</span>
   {% endif %}
 </li>