added umb-packages.less, added repeater for packages + minimal styling

src/Umbraco.Web.UI.Client/src/less/belle.less

@@ -108,6 +108,7 @@
 @import "components/umb-empty-state.less";
 @import "components/umb-property-editor.less";
 @import "components/umb-iconpicker.less";
+@import "components/umb-packages.less";
 
 @import "components/buttons/umb-button.less";
 @import "components/buttons/umb-button-group.less";

src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less

@@ -0,0 +1,42 @@
+.umb-packages {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.umb-package {
+    flex: 0 0 25%;
+
+    padding-left: 20px;
+    padding-right: 20px;
+
+    box-sizing: border-box;
+}
+
+.umb-package-link {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+
+    padding: 20px;
+
+    background: whitesmoke;
+    border: 2px solid #ececec;
+    border-radius: 3px;
+
+    text-decoration: none !important;
+}
+
+
+.umb-package-icon {
+    padding: 20px;
+    text-align: center;
+}
+
+.umb-package-name {
+    font-weight: bold;
+}
+
+.umb-package-numbers {
+    display: flex;
+    flex-wrap: wrap;
+}

src/Umbraco.Web.UI.Client/src/views/packagesNew/edit.controller.js

@@ -7,7 +7,38 @@
 
         vm.page = {};
         vm.page.name = "Packages";
-        
+
+        vm.packages = [
+            {
+                "name": "Test App",
+                "description": "lorem flaxis slk asjasd ks",
+                "karma": "1",
+                "downloads": "2",
+                "icon": "flax"
+            },
+            {
+                "name": "Tessti flaxi",
+                "description": "loremlaksjd lkajs dasjasd ks",
+                "karma": "10",
+                "downloads": "22",
+                "icon": "flaxo"
+            },
+            {
+                "name": "Walla",
+                "description": "lorem flaxis slk asjasd ks",
+                "karma": "1",
+                "downloads": "2",
+                "icon": "flax"
+            },
+            {
+                "name": "Walla",
+                "description": "lorem flaxis slk asjasd ks",
+                "karma": "1",
+                "downloads": "2",
+                "icon": "flax"
+            }
+        ];
+
 
     }
 

src/Umbraco.Web.UI.Client/src/views/packagesNew/edit.html

@@ -1,27 +1,62 @@
 <div ng-controller="Umbraco.Editors.Packages.EditController as vm">
 
-   <umb-load-indicator ng-if="page.loading"></umb-load-indicator>
+    <umb-load-indicator ng-if="page.loading"></umb-load-indicator>
 
-   <form name="packagesForm"
-      ng-submit="save()"
-      novalidate>
+    <form name="packagesForm" ng-submit="save()" novalidate>
 
-       <umb-editor-view ng-if="!page.loading">
+        <umb-editor-view ng-if="!page.loading">
 
-          <umb-editor-header
-             name="vm.page.name"
-             name-locked="true"
-             hide-icon="true"
-             hide-description="true"
-             hide-alias="true">
-          </umb-editor-header>
+            <umb-editor-header
+                name="vm.page.name"
+                name-locked="true"
+                hide-icon="true"
+                hide-description="true"
+                hide-alias="true">
+            </umb-editor-header>
 
-          <umb-editor-container>
-              This is my new package repository
-          </umb-editor-container>
+            <umb-editor-container>
 
-       </umb-editor-view>
+                <div class="umb-packages-search">
 
-   </form>
+                </div>
+
+                <div class="umb-packages-categories">
+
+                </div>
+
+                <div class="umb-packages">
+
+                    <div class="umb-package" ng-repeat="package in vm.packages"> <!-- Repeated -->
+                        <a class="umb-package-link" href="#">
+                            <div class="umb-package-icon">
+                                {{ package.icon }}
+                            </div>
+
+                            <div class="umb-package-info">
+                                <div class="umb-package-name">
+                                    {{ package.name }}
+                                </div>
+
+                                <div class="umb-package-numbers">
+                                    <div class="umb-package-downloads">
+                                        {{ package.downloads }}
+                                    </div>
+                                    <div class="umb-package-karma">
+                                        {{ package.karma }}
+                                    </div>
+                                </div>
+
+                            </div>
+                        </a>
+
+                    </div>
+
+                </div>
+
+            </umb-editor-container>
+
+        </umb-editor-view>
+
+    </form>
 
 </div>