Merge pull request #79 from mazehall/development

Readme + design changes
mazehall · May 18, 2016 · 8e78941 · 8e78941
2 parents c7528da + 9f8c271
commit 8e78941
Show file tree

Hide file tree

Showing 8 changed files with 64 additions and 136 deletions.
diff --git a/resources/screen_eintopf.png b/resources/screen_eintopf.png
diff --git a/src/public/css/local.css b/src/public/css/local.css
@@ -32,6 +32,9 @@ button{
 .cssBgGreenAlpha{
     background-color: rgba(228, 240, 232, 0.3);
 }
+.cssBgRed{
+    background-color: rgba(242, 105, 94, 1.0);
+}
 .cssBgRedAlpha{
     background-color: rgba(242, 105, 94, 0.3);
 }
@@ -251,6 +254,9 @@ button{
     margin-left:1em;
     margin-right:0;
 }
+.cssSidebar .media .media-body{
+    line-height:1.8rem;
+}
 .btn-round{
     border-radius: 50%;
     border: 1px solid;
@@ -767,27 +773,29 @@ li.cssPanelBox:hover{
 /* -------------- popover ----------------- */
 .ns-popover-list-theme.ns-popover-left-placement.ns-popover-top-align{
     max-width:6rem;
+    min-width:20rem;
 }
 .ns-popover-list-theme {
     z-index:1040;
-    min-width:20rem;
+
 }
 .cssPopover{
     box-sizing: border-box;
-    border: solid 1px #d8d8d8;
-    border-radius: 5px;
-    background-color: #fff;
+
     margin-top:20px;
-    -webkit-box-shadow: 0 0.3125rem 0.625rem rgba(0, 0, 0, 0.2);
-    -moz-box-shadow: 0 0.3125rem 0.625rem rgba(0, 0, 0, 0.2);
-    box-shadow: 0 0.3125rem 0.625rem rgba(0, 0, 0, 0.2);
+
+    color:#fff;
+}
+.cssPopover .grd-row{
+    border-radius: 2px;
 }
 .cssPopover.recipe{
     box-sizing: border-box;
     border: solid 1px #d8d8d8;
     border-radius: 5px;
     background-color: #fff;
     margin-top:0px;
+    padding-top:10px;
     margin-right:-30px;
     -webkit-box-shadow: 0 0.3125rem 0.625rem rgba(0, 0, 0, 0.2);
     -moz-box-shadow: 0 0.3125rem 0.625rem rgba(0, 0, 0, 0.2);
@@ -811,26 +819,25 @@ li.cssPanelBox:hover{
     border-color: transparent;
     position: absolute;
 }
-.ns-popover-bottom-placement .triangle{
-    border-bottom-color:#e1e1e1;
+.ns-popover-bottom-placement .triangle.on{
+    border-bottom-color:rgba(19, 103, 112, 1.0);
     left:50%;
     top: -21px;
     margin-left: -10px;
 }
-.cssPopoverHead{
-    border-bottom:1px solid #ccc;
-    -moz-border-radius: 5px 5px 0px 0px / 5px 5px;
-    border-radius: 5px 5px 0px 0px / 5px 5px;
-    background-color:#e1e1e1;
+.ns-popover-bottom-placement .triangle.off{
+    border-bottom-color:rgba(242, 105, 94, 1.0);
+    left:50%;
+    top: -21px;
+    margin-left: -10px;
 }
-.cssPopoverHeaderTitle{
-   position:relative;
-    border-bottom:1px solid #ccc;
+.cssPopoverHead{
+
 }
 .cssPopoverHeaderCloseBtn{
     position:absolute;
-    top:0;
-    right:0;
+    top:5px;
+    right:-20px;
 }
 .cssPopoverFooter{
     border-top:1px solid #ccc;

diff --git a/src/public/partials/cooking.html b/src/public/partials/cooking.html
@@ -7,28 +7,26 @@
 
       <ul class="list--unstyled flt--right m0 p0">
         <li class="flt--left" ng-class="states.vagrant? 'on' : 'off'">
-          <button ns-popover="false" class="cssIcon"
+          <button ns-popover class="cssIcon"
                   ns-popover-active-class="active"
-                  ns-popover-template="partials/pop.vm.html"
-                  title="VM status">
+                  ns-popover-template="partials/pop.vm.html">
             <i class="fa fa-cube"></i>
           </button>
 
         </li>
         <li class="flt--left" ng-class="states.proxy? 'on' : 'off'">
-          <button ns-popover="false" class="cssIcon"
+          <button ns-popover class="cssIcon"
                   ns-popover-active-class="active"
-                  ns-popover-template="partials/pop.proxy.html"
-                  title="Proxy status">
+                  ns-popover-template="partials/pop.proxy.html">
+
             <i class="fa fa-sitemap"></i>
           </button>
           </a>
         </li>
         <li class="flt--left" ng-class="states.internet? 'on' : 'off'">
-          <button ns-popover="false" class="cssIcon"
+          <button ns-popover class="cssIcon"
                   ns-popover-active-class="active"
-                  ns-popover-template="partials/pop.net.html"
-                  title="Internet connectivity">
+                  ns-popover-template="partials/pop.net.html">
             <i class="fa fa-cloud"></i>
           </button>
 

diff --git a/src/public/partials/cooking.projects.html b/src/public/partials/cooking.projects.html
@@ -19,7 +19,7 @@
              ui-sref="cooking.projects.recipe({id: project.id})" ui-sref-active='active'>
             <div class="media">
 
-              <div class="media-body txt--left">
+              <div class="media-body txt--left cssNowrap">
                 <p class="small m0 p0 cssNowrap">
                   {{project.name}}
                 </p>

diff --git a/src/public/partials/cooking.projects.recipe_menu.html b/src/public/partials/cooking.projects.recipe_menu.html
@@ -2,8 +2,8 @@
 <div class="triangle"></div>
 <div class="grd m0 p0 cssPopover recipe">
     <div class="grd-row ">
-        <div class="grd-row-col-6 p05 m0">
-            <div class="p05 m0 txt--center cssPopoverHeaderTitle">
+        <div class="grd-row-col-6 p0 m0">
+            <div class="p0 m0 cssPopoverHeaderTitle">
                 <span class="px1 fnt--mid-gray">Project actions</span>
                 <button class="cssPopoverHeaderCloseBtn close icon-x fnt--light-gray" ng-click="hidePopover()">
                     <i class="fa fa-close"></i>
@@ -45,8 +45,8 @@
         <div class="grd-row-col-6 p05">
 
             <div class=" p05">
-                <p class="small m0 py05 cssPopoverFooterBorder">Description:</p>
-                <p class="small m0 py05 ">{{project.description}}</p>
+                <p class="small m0 py05 cssPopoverFooterBorder fnt--mid-gray">Description:</p>
+                <p class="small m0 py05 fnt--mid-gray">{{project.description}}</p>
             </div>
 
 

diff --git a/src/public/partials/pop.net.html b/src/public/partials/pop.net.html
@@ -1,43 +1,12 @@
-<div class="triangle"></div>
+<div class="triangle" ng-class="states.internet? 'on' : 'off'"></div>
 <div class="grd m0 p0 cssPopover">
-    <div class="grd-row cssPopoverHead ">
-        <div class="grd-row-col-6 p05">
-            <div class="px1 m0 txt--center">
-
-                <span class="px1">Internet</span>
+    <div class="grd-row ">
+        <div class="grd-row-col-6 p0">
+            <div class="p1 m0 small" ng-class="states.internet? 'cssBgDarkGreen' : 'cssBgRed'">
+                <i class="fa" ng-class="states.internet? 'fa-check-circle fnt-eintopf-green' : 'fa-ban'"></i>
+                <span>Internet</span>
+                <span>{{states.internet? 'is connected' : 'is not connected'}}</span>
             </div>
         </div>
     </div>
-    <div class="grd-row cssPopoverBody">
-        <div class="grd-row-col-6 cssBgWhite">
-            <div class="m0 p1">
-                <ul class="list--unstyled m0 p1">
-                    <li class="grd-row">
-                        <a href="" class="grd-row-col-6">test</a>
-                    </li>
-                    <li>
-                        <a href="" class="grd-row-col-6">test</a>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    </div>
-    <div class="grd-row cssPopoverFooter ">
-        <div class="grd-row-col-6 p05">
-
-            <div class="px1 m0" ng-if="states.internet">
-                <i class="fa fa-check-circle fnt--green"></i>
-                <span class="small px1">
-                  connected
-                </span>
-            </div>
-
-            <div class="px1 m0 fnt--red" ng-if="!states.internet">
-                <i class="fa fa-ban">
-                    <span class="small px1">not connection</span>
-                </i>
-            </div>
-
-        </div>
-    </div>
 </div>
diff --git a/src/public/partials/pop.proxy.html b/src/public/partials/pop.proxy.html
@@ -1,39 +1,19 @@
-<div class="triangle"></div>
+<div class="triangle" ng-class="states.proxy? 'on' : 'off'"></div>
 <div class="grd m0 p0 cssPopover">
-    <div class="grd-row cssPopoverHead ">
-        <div class="grd-row-col-6 p05">
-            <div class="px1 m0 txt--center">
-                <span class="px1">Proxy</span>
+    <div class="grd-row ">
+        <div class="grd-row-col-6 p0">
+            <div class="p1 m0 small" ng-class="states.proxy? 'cssBgDarkGreen' : 'cssBgRed'">
+                <i class="fa" ng-class="states.proxy? 'fa-check-circle fnt-eintopf-green' : 'fa-ban'"></i>
+                <span>Proxy</span>
+                <span>{{states.proxy? 'is running' : 'is not running'}}
 
-            </div>
-        </div>
-    </div>
-    <div class="grd-row cssPopoverBody">
-      <div class="grd-row-col-6 cssBgWhite">
-          <div class="m0 p1 bg--red" ng-if="states.proxyError">
-            {{states.proxyError}}
-          </div>
-      </div>
-    </div>
-    <div class="grd-row cssPopoverFooter ">
-        <div class="grd-row-col-6 p05">
-
-            <div class="px1 m0" ng-if="states.proxy">
-                <i class="fa fa-check-circle fnt--green"></i>
-                <span class="small px1">
-                  is running
                 </span>
+                 <div class="m0 p0" {{states.proxyError?}}>
+                     {{states.proxyError}}
+                 </div>
             </div>
-
-            <div class="px1 m0 fnt--red" ng-if="!states.proxy">
-                <i class="fa fa-ban">
-                    <span class="small px1">
-                      is not running
-                    </span>
-                </i>
-            </div>
-
         </div>
     </div>
 </div>
 
+
diff --git a/src/public/partials/pop.vm.html b/src/public/partials/pop.vm.html
@@ -1,38 +1,12 @@
-<div class="triangle"></div>
+<div class="triangle" ng-class="states.vagrant? 'on' : 'off'"></div>
 <div class="grd m0 p0 cssPopover">
-    <div class="grd-row cssPopoverHead ">
-        <div class="grd-row-col-6 p05">
-            <div class="px1 m0 txt--center">
-
-                <span class="px1">Virtual Machine</span>
+    <div class="grd-row ">
+        <div class="grd-row-col-6 p0">
+            <div class="p1 m0 small" ng-class="states.vagrant? 'cssBgDarkGreen' : 'cssBgRed'">
+                <i class="fa" ng-class="states.vagrant? 'fa-check-circle fnt-eintopf-green' : 'fa-ban'"></i>
+                <span>Virtual Machine</span>
+                <span>{{states.vagrant? 'is running' : 'is not running'}}</span>
             </div>
         </div>
     </div>
-    <div class="grd-row cssPopoverBody">
-        <div class="grd-row-col-6 cssBgWhite">
-            <div class="m0 p1">
-
-                </div>
-        </div>
-    </div>
-    <div class="grd-row cssPopoverFooter ">
-        <div class="grd-row-col-6 p05">
-
-          <div class="px1 m0" ng-if="states.vagrant">
-            <i class="fa fa-check-circle fnt--green"></i>
-                <span class="small px1">
-                  is running
-                </span>
-          </div>
-
-          <div class="px1 m0 fnt--red" ng-if="!states.vagrant">
-            <i class="fa fa-ban">
-                <span class="small px1">
-                  is not running
-                </span>
-            </i>
-          </div>
-
-        </div>
-    </div>
-</div>
+</div>