"Create New Project" button in "My Projects" page.

hc/accounts/models.py

@@ -115,7 +115,7 @@ class Profile(models.Model):
 
         is_owner = models.Q(owner=self.user)
         is_member = models.Q(member__user=self.user)
-        return Project.objects.filter(is_owner | is_member)
+        return Project.objects.filter(is_owner | is_member).order_by("name")
 
     def checks_from_all_projects(self):
         """ Return a queryset of checks from projects we have access to. """

hc/front/views.py

@@ -102,6 +102,7 @@ def my_checks(request, code):
         request.profile.save()
 
     if request.profile.current_project_id != project.id:
+        request.project = project
         request.profile.current_project = project
         request.profile.save()
 

static/css/add_project_modal.css

@@ -0,0 +1,12 @@
+#add-project-modal .modal-header {
+    border-bottom: 0;
+}
+
+#add-project-modal .modal-body {
+    padding: 0 50px 50px 50px;
+}
+
+#add-project-modal h1 {
+    text-align: center;
+    margin: 0 0 50px 0;
+}

static/css/projects.css

@@ -1,15 +1,13 @@
-#my-projects a {
-    display: block;
+#project-selector a {
     color: #333;
 }
 
-#my-projects a:hover {
+#project-selector a:hover {
     text-decoration: none;
 }
 
 
-#my-projects a:hover .panel {
+#project-selector a:hover .panel {
     border-color: #0091EA;
 }
 
-

templates/accounts/add_project_modal.html

@@ -0,0 +1,34 @@
+<div id="add-project-modal" class="modal">
+    <div class="modal-dialog">
+    <form method="post" action="{% url 'hc-add-project' %}" class="form-horizontal">
+        {% csrf_token %}
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal">&times;</button>
+            </div>
+            <div class="modal-body">
+                <h1>Create New Project</h1>
+
+                <p>Name your project</p>
+
+                <input
+                    type="text"
+                    name="name"
+                    class="form-control input-lg"
+                    autocomplete="off">
+
+                <p>&nbsp;</p>
+
+                {% csrf_token %}
+                <button
+                    type="submit"
+                    name="set_project_name"
+                    class="btn btn-lg btn-primary btn-block">
+                    Create Project
+                </button>
+
+            </div>
+        </div>
+    </form>
+    </div>
+</div>

templates/accounts/profile.html

@@ -117,7 +117,7 @@
                         href="#"
                         class="btn btn-default pull-right"
                         data-toggle="modal"
-                        data-target="#create-project-modal">Create Project</a>
+                        data-target="#add-project-modal">Create New Project</a>
             </div>
 
             {% if left_project %}
@@ -170,39 +170,6 @@
     </div>
 </div>
 
-<div id="create-project-modal" class="modal">
-    <div class="modal-dialog">
-        <form method="post" action="{% url 'hc-add-project' %}" class="form-horizontal">
-            {% csrf_token %}
-            <div class="modal-content">
-                <div class="modal-header">
-                    <button type="button" class="close" data-dismiss="modal">&times;</button>
-                    <h4>Create Project</h4>
-                </div>
-                <div class="modal-body">
-                    <div class="form-group">
-                        <label for="project-name" class="col-sm-4 control-label">Project Name</label>
-                        <div class="col-sm-7">
-                            <input
-                                type="text"
-                                class="form-control"
-                                id="project-name"
-                                name="name">
-                        </div>
-                    </div>
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-                    <button
-                        type="submit"
-                        name="set_project_name"
-                        class="btn btn-primary">Create Project</button>
-                </div>
-            </div>
-        </form>
-    </div>
-</div>
-
 <div id="leave-project-modal" class="modal">
     <div class="modal-dialog">
         <form id="leave-project-form" method="post">
@@ -235,6 +202,8 @@
     </div>
 </div>
 
+{% include "accounts/add_project_modal.html" %}
+
 {% endblock %}
 
 {% block scripts %}

templates/base.html

@@ -44,6 +44,7 @@
     <link rel="stylesheet" href="{% static 'css/billing.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/login.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/projects.css' %}" type="text/css">
+    <link rel="stylesheet" href="{% static 'css/add_project_modal.css' %}" type="text/css">
     {% endcompress %}
 </head>
 <body class="page-{{ page }}">

templates/front/projects.html

@@ -7,16 +7,22 @@
 {% block content %}
 <div class="row">
     <div class="col-sm-12">
-        <h1 class="settings-title">My Projects</h1>
-        {% for message in messages %}
-            <p class="alert alert-{{ message.tags }}">{{ message }}</p>
-        {% endfor %}
-
-        <div id="my-projects" class="row">
+        <h1 class="settings-title">
+            My Projects
+
+            <div class="pull-right">
+                <button
+                    class="btn btn-primary"
+                    data-toggle="modal"
+                    data-target="#add-project-modal">Create New Project</button>
+            </div>
+        </h1>
+
+        <div id="project-selector" class="row">
             {% for project in projects%}
             <a href="{% url 'hc-checks' project.code %}">
                 <div class="col-sm-6 col-md-4">
-                    <div class="panel panel-default project-panel">
+                    <div class="panel panel-default">
                         <div class="panel-body">
                             <h4>{{ project }}</h4>
                             <div>
@@ -28,25 +34,20 @@
                                 {{ n }} integration{{ n|pluralize }}
                                 {% endwith %}
                             </div>
-                            {% if show_plans %}
                             <div class="text-muted">
-                                {% if project.owner.subscription %}
-                                    Plan: {{ project.owner.subscription.plan_name }}
-                                {% else %}
-                                    Plan: Hobbyist
-                                {% endif %}
+                                {{ project.owner.email }}
                             </div>
-                            {% endif %}
                         </div>
                     </div>
                 </div>
             </a>
             {% endfor %}
         </div>
-
     </div>
 </div>
 
+{% include "accounts/add_project_modal.html" %}
+
 {% endblock %}
 
 {% block scripts %}