fix design & using api

electron_src/popup/index.html

@@ -20,8 +20,8 @@
     </div>
 
     <div class="result-block row-fluid">
-      <ul id="result-list" class="result-list left-pane" ng-class="{focused:isFocusing == 2}">
+      <ul id="result-list" class="result-list left-pane">
-        <li ng-click="selectSnippet($index)" ng-repeat="snippet in filteredSnippets" ng-class="{active:$index == selectIndex}"><a href="#">{{snippet.description}}</a></li>
+        <li ng-click="selectSnippet($index)" ng-repeat="snippet in filteredSnippets" ng-class="{active:$index == selectIndex}"><a href="#"> <span ng-bind="snippet.callSign"></span> <small ng-bind="snippet.description"></small></a></li>
       </ul>
 
       <div class="right-pane">

electron_src/styles/_popup.styl

@@ -24,7 +24,7 @@
     .result-list
       list-style:none
       padding: 0
-      border-right: 1px solid $border-color
+      border-right: 1px solid $baseBorderColor
       li
         &:nth-child(even)
           background-color $baseBackgroundColor

main.js

@@ -220,8 +220,8 @@ app.on('ready', function () {
   function makeNewMainWindow () {
     console.log('new Window!')
     mainWindow = new BrowserWindow({
-      width: 800,
+      width: 920,
-      height: 600,
+      height: 640,
       'web-preferences': {
           'overlay-scrollbars': true
         }

src/controllers/states/SnippetsDetailController.js

@@ -7,9 +7,7 @@ angular.module('codexen')
 
     var snippetId = $state.params.id
 
-    Snippet.show(snippetId, {
+    Snippet.show(snippetId)
-      'include': ['Tag']
-    })
       .success(function (data) {
         vm.snippet = data
         vm.isLoaded = true

src/controllers/states/SnippetsListController.js

@@ -74,9 +74,7 @@ angular.module('codexen')
 
     function loadSnippets() {
       if ($auth.isAuthenticated) {
-        Snippet.findMine({
+        Snippet.findMine()
-          'include': ['Tag']
-        })
           .success(function (data) {
             vm.snippets = data
           })

src/styles/states/snippets.styl

@@ -88,32 +88,43 @@ $snippet-list-active-bg= $brand-primary
 
 
 .snippets-detail-state
+  position absolute
+  top 0
+  width 100%
+  bottom 0
+  overflow hidden
   .detail-header
+    position absolute
+    top 0
+    width 100%
     background-color lighten($baseBackgroundColor, 5%)
-    padding: 5px 10px
+    padding 5px 10px
-    height: 50px
+    height 50px
-    border-bottom: solid 1px $baseBorderColor
+    border-bottom solid 1px $baseBorderColor
     .detail-header-title
-      color: $textColorHighlight
+      color $textColorHighlight
+      line-height 40px
+      font-size 1.2em
       small
         font-size: 0.6em
-        color: $textColor
+        color $textColor
 
-      line-height: 40px
-      font-size: 1.2em
 
     .detail-header-control
-      padding:3px
+      padding 3px
-
 
   .detail-body
-    padding: 5px 10px
+    position absolute
+    top 50px
+    width 100%
+    bottom 0
+    padding 5px 10px
+    overflow-y auto
     .ace_editor
-      min-height: 300px
+      min-height 300px
-      border: solid 1px $border-color
+      border solid 1px $border-color
-      border-radius: 5px
+      border-radius 5px
-
+      margin-bottom 5px
-
 
 .tags
   word-break: break-all

src/tpls/states/auth.tpl.html

@@ -1,6 +1,6 @@
 <div class="auth-state container-fluid">
   <div class="row">
-    <div class="col-sm-6 col-sm-offset-3 panel panel-default">
+    <div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2 col-lg-6 col-lg-offset-3 panel panel-default">
 
       <div class="text-center">