UI cleaning

Author: ParvJain

static/css/example.css

@@ -1,45 +1,3 @@
-body {
-  background-color: #942A57;
-  margin: 0 auto;
-  max-width: 760px;
-}
-
-html, body {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-*, *:before, *:after {
-  -webkit-box-sizing: inherit;
-  -moz-box-sizing: inherit;
-  box-sizing: inherit;
-}
-
-body, input, button {
-  font-family: Georgia, Helvetica;
-  font-size: 17px;
-  color: #ecf0f1;
-}
-
-h1 {
-  text-align: center;
-  background-color: #AC5C7E;
-  margin-top: 20px;
-  margin-bottom: 0;
-  padding: 10px;
-}
-
-h3 {
-  background-color: rgba(255, 255, 255, 0.2);
-  border-bottom: 5px solid #A13462;
-  text-align: center;
-  padding: 10px;
-}
-
-h3 div {
-  margin-bottom: 10px;
-}
 
 .tagline {
   margin-top: 0;
@@ -53,14 +11,6 @@ h3 div {
   border-bottom: 5px solid #c00;
 }
 
-a {
-  font-weight: bold;
-}
-a,
-a:hover {
-  color: #ecf0f1;
-}
-
 pre {
   white-space: pre-wrap;
 }
@@ -93,33 +43,11 @@ ul {
   background-color: rgba(255, 255, 255, 0.2);
   margin: 50px 0;
   padding: 20px;
-}
-
-input {
-  border: none;
-  outline: none;
-  background-color: #ecf0f1;
-  padding: 10px;
-  color: #942A57;
-  border: 0;
-  margin: 5px 0;
-  display: block;
-  width: 100%;
-}
-
-button {
-  background-color: #ecf0f1;
-  color: #942A57;
-  border: 0;
-  padding: 18px 12px;
-  margin-left: 6px;
-  cursor: pointer;
-  outline: none;
-}
-
-button:hover {
-  background-color: #e74c3c;
-  color: #ecf0f1;
+  overflow-x: scroll;;
+  overflow-y: hidden;
+  white-space: nowrap;
+  width: 1600px;
+  height: 520px;
 }
 
 .gh-fork {
@@ -175,3 +103,20 @@ button:hover {
   background-color: rgba(0, 0, 0, 0.4);
   cursor: move;
 }
+
+.task-box {
+  top: 0px;
+  display: inline-block;
+  min-width: 300px;
+  height: 500px;
+  overflow-y: scroll;
+}
+
+.task-card {
+  width: 250px;
+}
+
+.add-task {
+  width: 300px;
+  bottom: 10px;
+}

static/js/app.module.js

@@ -2,18 +2,6 @@
     'use strict';
 
     angular.module('app', [
-        /*
-         * Order is not important. Angular makes a
-         * pass to register all of the modules listed
-         * and then when app.dashboard tries to use app.data,
-         * it's components are available.
-         */
-
-        /*
-         * Everybody has access to these.
-         * We could place these under every feature area,
-         * but this is easier to maintain.
-         */
         'app.controller',
         angularDragula(angular),
     ]);

static/js/controller.js

@@ -8,7 +8,7 @@
   Kanban.$inject = ['$scope'];
 
   function Kanban($scope) {
-    
+
     $scope.groups = [
       {
         name: 'Group A',
@@ -17,7 +17,23 @@
       {
         name: 'Group B',
         items: [{name: 'Item 1'},{name: 'Item 2'},{name: 'Item 3'},{name: 'Item 4'}]
-      }
+      },
+      {
+        name: 'Group B',
+        items: [{name: 'Item 1'},{name: 'Item 2'},{name: 'Item 3'},{name: 'Item 4'}]
+      },
+      {
+        name: 'Group B',
+        items: [{name: 'Item 1'},{name: 'Item 2'},{name: 'Item 3'},{name: 'Item 4'}]
+      },
+      {
+        name: 'Group B',
+        items: [{name: 'Item 1'},{name: 'Item 2'},{name: 'Item 3'},{name: 'Item 4'}]
+      },
+      {
+        name: 'Group B',
+        items: [{name: 'Item 1'},{name: 'Item 2'},{name: 'Item 3'},{name: 'Item 4'}]
+      },
     ];
 
 

templates/home.html

@@ -3,25 +3,15 @@
 {% block content %}
 
 <div class="container">
-    <div class="row">
-        <div class="jumbotron">
-            <h1>Hello</h1>
-            <p>You are on your Dashboard</p>
-        </div>
-    </div>
     <div class='parent' ng-controller='Kanban as vm'>
-        <label for='hy'><strong>Angular-specific example.</strong> Fancy some nested <code>ng-repeat</code>?</label>
-        <div class='wrapper'>
-          <div class='container' ng-repeat="group in groups" dragula="'nested-bag'" dragula-scope="$parent">
-            <div ng-repeat='item in group.items' ng-bind='item.name' data-toggle="modal" data-target="#myModal"></div>
-          </div>
+        <!-- <label for='hy'><strong>Angular-specific example.</strong> Fancy some nested <code>ng-repeat</code>?</label> -->
+          <div class="task-box" ng-repeat="group in groups" dragula="'nested-bag'" dragula-scope="$parent" >
+            <span class="add-task">{{group.name}}</span>
+            <div class="task-card" ng-repeat='item in group.items' ng-bind='item.name' data-toggle="modal" data-target="#myModal"></div>
         </div>
       </div>
 </div>
 
-<!-- Trigger the modal with a button -->
-<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
-
 <!-- Modal -->
 <div id="myModal" class="modal fade" role="dialog">
   <div class="modal-dialog">