update credential list and sidebar style to support nc 25

Signed-off-by: binsky <timo@binsky.org>

css/app.css

@@ -505,30 +505,19 @@
   .link span {
     cursor: pointer; }
 
-#app-sidebar {
-  height: auto; }
-  #app-sidebar .sidebar {
-    display: inline-block; }
-    #app-sidebar .sidebar .sidebar-icon {
-      margin-right: 15px; }
-      #app-sidebar .sidebar .sidebar-icon .icon-image-size {
-        width: 44px; }
-      #app-sidebar .sidebar .sidebar-icon i {
-        width: 44px; }
-    #app-sidebar .sidebar .sidebar-label {
-      float: right;
-      line-height: 44px; }
-
 .vaultlist_sidebar_hidden {
   width: 100vw !important;
   margin-left: 0px !important; }
 
 #app-content {
   overflow-x: hidden; }
-  @media only screen and (max-width: 769px) {
+  #app-content .ng-app-frame {
+    min-height: 100%;
+    display: flex; }
+  @media only screen and (max-width: 1024px) {
     #app-content {
       width: 100vw; } }
-  @media only screen and (min-width: 770px) {
+  @media only screen and (min-width: 1025px) {
     #app-content {
       width: calc(100vw - 300px); } }
   #app-content .edit_credential {
@@ -639,6 +628,10 @@
       padding-right: 10px; }
     #app-content .edit_credential .import-selection select {
       margin-left: 15px; }
+  #app-content .main_list {
+    width: 100%;
+    display: flow-root;
+    padding-right: 15px; }
     #app-content .main_list #passman-controls {
       text-align: center;
       border-bottom: 1px solid #c9c9c9; }
@@ -740,6 +733,15 @@
         background-clip: padding-box; }
         #app-content .main_list .searchboxContainer .searchOptions input {
           cursor: pointer; }
+    #app-content .main_list .credential-list {
+      display: flex;
+      height: 100%; }
+    #app-content .main_list .credential-table-wrapper {
+      flex: 1;
+      float: left;
+      height: auto;
+      overflow: auto;
+      width: 100%; }
     #app-content .main_list .credential-table {
       width: 100%; }
       #app-content .main_list .credential-table tr:hover {
@@ -814,10 +816,12 @@
       height: 100%;
       display: flex;
       flex-wrap: wrap; }
+      #app-content .main_list .grid-view li {
+        height: fit-content; }
       #app-content .main_list .grid-view .credential {
         display: flex;
         width: 100%;
-      border: 2px solid rgba(240, 240, 240, 0.9);
+        border: 2px solid var(--color-primary);
         margin: 25px;
         -webkit-border-radius: 10px;
         border-radius: 10px;
@@ -865,43 +869,55 @@
       margin-left: auto;
       margin-top: 1%;
       text-align: center; }
-  #app-content .main_list .app_sidebar {
+  #app-content .app_sidebar {
+    height: auto;
     float: right;
     padding: 10px;
     overflow-y: auto; }
-    #app-content .main_list .app_sidebar h2 {
+    #app-content .app_sidebar .sidebar {
+      display: inline-block; }
+      #app-content .app_sidebar .sidebar .sidebar-icon {
+        margin-right: 15px; }
+        #app-content .app_sidebar .sidebar .sidebar-icon .icon-image-size {
+          width: 44px; }
+        #app-content .app_sidebar .sidebar .sidebar-icon i {
+          width: 44px; }
+      #app-content .app_sidebar .sidebar .sidebar-label {
+        float: right;
+        line-height: 44px; }
+    #app-content .app_sidebar h2 {
       margin-bottom: 10px;
       font-weight: 400;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
       max-width: 90%; }
-    #app-content .main_list .app_sidebar .close.icon-close {
+    #app-content .app_sidebar .close.icon-close {
       position: absolute;
       top: 10px;
       right: 10px;
       cursor: pointer; }
-    #app-content .main_list .app_sidebar.item_selected {
+    #app-content .app_sidebar.item_selected {
       height: 25%;
       display: inline-block; }
-    #app-content .main_list .app_sidebar .credential-data .compromised-details {
+    #app-content .app_sidebar .credential-data .compromised-details {
       margin-top: 15px;
       margin-bottom: 15px;
       display: flex; }
-      #app-content .main_list .app_sidebar .credential-data .compromised-details .icon {
+      #app-content .app_sidebar .credential-data .compromised-details .icon {
         float: left;
         height: 20px; }
-      #app-content .main_list .app_sidebar .credential-data .compromised-details .text {
+      #app-content .app_sidebar .credential-data .compromised-details .text {
         padding-left: 5px;
         padding-right: 30px;
         color: #e9322d; }
-    #app-content .main_list .app_sidebar .credential-data .row {
+    #app-content .app_sidebar .credential-data .row {
       margin-bottom: 11px; }
-    #app-content .main_list .app_sidebar .credential-data .tags {
+    #app-content .app_sidebar .credential-data .tags {
       margin-top: 15px;
       margin-bottom: 15px;
       float: none; }
-      #app-content .main_list .app_sidebar .credential-data .tags .tag {
+      #app-content .app_sidebar .credential-data .tags .tag {
         background-color: rgba(240, 240, 240, 0.9);
         padding: 4px;
         margin-right: 3px; }
@@ -1422,7 +1438,8 @@ h3 {
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  height: 54px !important;
+  min-height: 54px !important;
+  height: auto !important;
   padding-right: 20px !important; }
   @media only screen and (max-width: 769px) {
     #passman-controls .breadcrumb {

sass/app.scss

@@ -75,7 +75,8 @@
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  height: 54px !important;
+  min-height: 54px !important;
+  height: auto!important;
   padding-right: 20px !important;
 
   .breadcrumb{
@@ -93,11 +94,7 @@
     width: 100%;
   }
 }
-@media only screen and (min-width: 1024px){
-  #app-navigation+#app-content #passman-controls {
 
-  }
-}
 #passman-controls .button,  #passman-controls, #passman-controls input[type='submit'],  #passman-controls input[type='text'],  #passman-controls input[type='password'],  #passman-controls select {
   box-sizing: border-box;
   //display: inline-block;

sass/credentials.scss

@@ -39,37 +39,21 @@
 }
 
 
-//this fixes the scrollbars, because passman-contols are shown above the sidebar.
-#app-sidebar{
-  height: auto;
-  .sidebar{
-    display: inline-block;
-    .sidebar-icon {
-      margin-right: 15px;
-      .icon-image-size{
-        width: 44px;
-      }
-      i {
-        width: 44px;
-      }
-    }
-    .sidebar-label{
-      float:right;
-      line-height: 44px;
-    }
-  }
-}
-
 .vaultlist_sidebar_hidden{
   width: 100vw !important;
   margin-left: 0px !important;
 }
 #app-content {
 
-  @media only screen and (max-width: 769px) {
+  .ng-app-frame {
+    min-height: 100%;
+    display: flex;
+  }
+
+  @media only screen and (max-width: 1024px) {
     width: 100vw;
   }
-  @media only screen and (min-width: 770px) {
+  @media only screen and (min-width: 1025px) {
     width: calc(100vw - 300px);
   }
 
@@ -231,6 +215,10 @@
 
   //width: 100%;
   .main_list {
+    width: 100%;
+    display: flow-root;
+    padding-right: 15px;
+
     //min-height: 95%;
     //display:flex;
     //hack for missing separatorbar when app-sidebar is opened
@@ -354,6 +342,19 @@
       }
     }
 
+    .credential-list {
+      display: flex;
+      height: 100%;
+    }
+
+    .credential-table-wrapper {
+      flex: 1;
+      float: left;
+      height: auto;
+      overflow: auto;
+      width: 100%;
+    }
+
     .credential-table {
       width: 100%;
       tr:hover {
@@ -453,10 +454,15 @@
       //margin-top: 44px;
       display: flex;
       flex-wrap: wrap;
+
+      li {
+        height: fit-content;
+      }
+
       .credential {
         display: flex;
         width: 100%;
-        border: 2px solid rgba(240, 240, 240, .9);
+        border: 2px solid var(--color-primary);
         margin: 25px;
         @include border-radius(10px);
         .credential_content {
@@ -523,8 +529,29 @@
       margin-top: 1%;
       text-align: center;
     }
+  }
 
   .app_sidebar {
+
+    //this fixes the scrollbars, because passman-contols are shown above the sidebar.
+    height: auto;
+    .sidebar{
+      display: inline-block;
+      .sidebar-icon {
+        margin-right: 15px;
+        .icon-image-size{
+          width: 44px;
+        }
+        i {
+          width: 44px;
+        }
+      }
+      .sidebar-label{
+        float:right;
+        line-height: 44px;
+      }
+    }
+
     float:right;
     h2 {
       margin-bottom: 10px;
@@ -577,7 +604,6 @@
       }
     }
   }
-  }
 }
 
 .credential_field {

templates/main.php

@@ -231,6 +231,6 @@ style('passman', 'app');
     </div>
 
     <div id="app-content" ng-class="{'vaultlist_sidebar_hidden': !selectedVault}">
-        <div ng-view=""></div>
+        <div ng-view="" class="ng-app-frame"></div>
     </div>
 </div>

templates/views/show_vault.html

@@ -40,7 +40,8 @@
 	<div class="loaderContainer" ng-if="show_spinner">
 		<div class="loader" use-theme type="'border-bottom-color'"></div>
 	</div>
-	<div ng-init="menuOpen = false;">
+	<div class="credential-list">
+		<div class="credential-table-wrapper" ng-init="menuOpen = false;">
 			<table class="credential-table"
 				   ng-if="view_mode === 'list'">
 				<tr ng-repeat="credential in filtered_credentials | orderBy:'label'"
@@ -73,8 +74,7 @@
 				<li class="credential"
 					ng-repeat="credential in filtered_credentials | orderBy:'label'"
 					ng-if="credential.hidden == 0 && showCredentialRow(credential)"
-				ng-click="selectCredential(credential)"
+					ng-click="selectCredential(credential)">
-				use-theme type="'border-color'">
 					<div class="credential_content">
 						<div>
 						<span class="icon" ng-if="credential.url">
@@ -142,9 +142,7 @@
 			</div>
 
 		</div>
-</div>
+		<div id="app-sidebar" class="app_sidebar" ng-show="selectedCredential" off-click="closeSelected()" >
-
-<div id="app-sidebar" class="app_sidebar" ng-show="selectedCredential" off-click="closeSelected()" >
 
 			<span class="close icon-close" ng-click="closeSelected()" alt="Close"></span>
 
@@ -197,6 +195,8 @@
 					</button>
 				</div>
 			</div>
+		</div>
+	</div>
 </div>
 
 <div class="share_popup" style="display: none" title="{{ 'sharereq.title' | translate }}">