Trang chủ Khám phá Trợ giúp
Đăng nhập
oznt
/
pwman3
1
0
Fork 0
Các tập tin Các vấn đề 0 Yêu cầu kéo về 0 Wiki
Browse Source

improve UI

oz123 9 năm trước cách đây
mục cha
7e25a3ec93
commit
5a9582107a
2 tập tin đã thay đổi với 98 bổ sung và 451 xóa
Split View Hiển thị tình trạng sai khác
  1. 93 42
      pwman/ui/templates/foxy.html
  2. 5 409
      pwman/ui/templates/static/css/main.css

+ 93 - 42
pwman/ui/templates/foxy.html
Xem Tập Tin 

@@ -1,13 +1,13 @@
 
-<DOCTYPE html>
 
+<!  DOCTYPE html>
 
 <html lang="en">
 
 <head>
 
-  <title>Bootstrap Case</title>
 
+  <title>Fox! Password Manager</title>
 
   <meta charset="utf-8">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
   <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 
   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
 
-  <link rel="stylesheet" href="styles.css"> 
+  <link rel="stylesheet" href="./static/css/main.css"> 
     
 </head>
 
 <body>
 
@@ -20,22 +20,10 @@
 
         <span class="icon-bar"></span>
 
         <span class="icon-bar"></span>                        
       </button>
 
-      <a class="navbar-brand" href="#">WebSiteName</a>
 
+      <a class="navbar-brand" href="#">Fox! Password Manager</a>
 
     </div>
 
+    
     <div class="collapse navbar-collapse" id="myNavbar">
 
-      <ul class="nav navbar-nav">
 
-        <li class="active"><a href="#">Home</a></li>
 
-        <li class="dropdown">
 
-          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
 
-          <ul class="dropdown-menu">
 
-            <li><a href="#">Page 1-1</a></li>
 
-            <li><a href="#">Page 1-2</a></li>
 
-            <li><a href="#">Page 1-3</a></li>
 
-          </ul>
 
-        </li>
 
-        <li><a href="#">Page 2</a></li>
 
-        <li><a href="#">Page 3</a></li>
 
-      </ul>
 
       <ul class="nav navbar-nav navbar-right">
 
         <li>
 
             <form class="navbar-form navbar-right" role="button"> 
@@ -44,17 +32,6 @@
 
             </button>        
             </form>
 
         </li>
 
-        <!-- This should only be shown if authenticated -->
 
-        <!-- 
-         <li>
 
-            <form class="navbar-form navbar-right" role="button"> 
-            <button type="button" class="btn btn-default" id="hide">
 
-                <span class="glyphicon glyphicon-log-out"></span> Leave
 
-            </button>        
-            </form>
 
-        </li>
 
-        -->
 
-        <!-- End of hidden part -->
 
         <li>
 
             <form class="navbar-form navbar-right" role="button">
 
                     <div class="form-group" id="show" style="display: none;">
 
@@ -69,23 +46,97 @@
 
 </nav>
 
   
 <div class="container">
 
+  
   <div class="row">
 
-  <div class="col-md-6 col-md-push-6">B
 
-        <ul class="nav nav-pills nav-stacked">
 
-        <li class="active"><a href="#">Home</a></li>
 
-        <li class="dropdown">
 
-          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1 <span class="caret"></span></a>
 
-          <ul class="dropdown-menu">
 
-            <li><a href="#">Submenu 1-1</a></li>
 
-            <li><a href="#">Submenu 1-2</a></li>
 
-            <li><a href="#">Submenu 1-3</a></li>                        
-          </ul>
 
-        </li>
 
-        <li><a href="#">Menu 2</a></li>
 
-        <li><a href="#">Menu 3</a></li>
 
+  <div class="col-md-6 col-md-push-6">
 
+  <div class="custom-collapse">
 
+    
+  <button class="btn collapse-toggle visible-xs" type="button" data-toggle="collapse" data-parent="custom-collapse" data-target="#tags">
 
+      <span class="">Tags</span>
 
+  </button> 
+    <div class="collapse" id="tags">
 
+      <ul class="nav nav-pills nav-stacked" id="side-menu-collapse">
 
+        <li class="active"><a href="#">Tag1</a></li>
 
+        <li><a href="#">Tag2</a></li>
 
+        <li><a href="#">Tag2</a></li>
 
       </ul>
 
+    </div>
 
+  </div>
 
+  
+  </div>
 
+  <div class="col-md-6 col-md-pull-6">
 
+    <table class="table table-hover">
 
+    <thead>
 
+      <tr>
 
+        <th>User</th>
 
+        <th>URL</th>
 
+        <th>Tags</th>
 
+        <th></th>
 
+      </tr>
 
+    </thead>
 
+    <tbody>
 
+      <tr>
 
+        <td>John</td>
 
+        <td>john@example.com</td>
 
+        <td>tag1, tag2</td>
 
+        <td>
 
+        <a href="#">
 
+          <span class="glyphicon glyphicon-eye-open"></span>
 
+        </a>
 
+        <a href="#">
 
+          <span class="glyphicon glyphicon-eye-close" style="display: none;"></span>
 
+        </a>
 
+        <a href="#">
 
+          <span class="glyphicon glyphicon-edit"></span>
 
+        </a>
 
+          <a href="#">
 
+        <span class="glyphicon glyphicon-remove"></span>
 
+        </a>
 
+        </td>
 
+      </tr>
 
+      <tr>
 
+        <td>Mary</td>
 
+        <td>mary@example.com</td>
 
+        <td>tag1, tag2</td>
 
+        <td>
 
+        <a href="#">
 
+          <span class="glyphicon glyphicon-eye-open"></span>
 
+        </a>
 
+        <a href="#">
 
+          <span class="glyphicon glyphicon-eye-close" style="display: none;"></span>
 
+        </a>
 
+        <a href="#">
 
+          <span class="glyphicon glyphicon-edit"></span>
 
+        </a>
 
+          <a href="#">
 
+        <span class="glyphicon glyphicon-remove"></span>
 
+        </a>
 
+        </td>
 
+      </tr>
 
+      <tr>
 
+        <td>July</td>
 
+        <td>july@example.com</td>
 
+        <td>tag1, tag2</td>
 
+        <td>
 
+        <a href="#">
 
+          <span class="glyphicon glyphicon-eye-open"></span>
 
+        </a>
 
+        <a href="#">
 
+          <span class="glyphicon glyphicon-eye-close" style="display: none;"></span>
 
+        </a>
 
+        <a href="#">
 
+          <span class="glyphicon glyphicon-edit"></span>
 
+        </a>
 
+          <a href="#">
 
+        <span class="glyphicon glyphicon-remove"></span>
 
+        </a>
 
+        </td>
 
+      </tr>
 
+    </tbody>
 
+  </table>
 
+  
+  
   </div>
 
-  <div class="col-md-6 col-md-pull-6">A</div>
 
   </div>
 
     <div class="clearfix visible-lg"></div>
 
   </div>

+ 5 - 409
pwman/ui/templates/static/css/main.css
Xem Tập Tin 

@@ -1,410 +1,6 @@
 
-/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */
 
-
 
-html,
 
-button,
 
-input,
 
-select,
 
-textarea {
 
-    color: #222;
 
-}
 
-
 
-html {
 
-    font-size: 1em;
 
-    line-height: 1.4;
 
-}
 
-
 
-::-moz-selection {
 
-    background: #b3d4fc;
 
-    text-shadow: none;
 
-}
 
-
 
-::selection {
 
-    background: #b3d4fc;
 
-    text-shadow: none;
 
-}
 
-
 
-hr {
 
-    display: block;
 
-    height: 1px;
 
-    border: 0;
 
-    border-top: 1px solid #ccc;
 
-    margin: 1em 0;
 
-    padding: 0;
 
-}
 
-
 
-audio,
 
-canvas,
 
-img,
 
-video {
 
-    vertical-align: middle;
 
-}
 
-
 
-fieldset {
 
-    border: 0;
 
-    margin: 0;
 
-    padding: 0;
 
-}
 
-
 
-textarea {
 
-    resize: vertical;
 
-}
 
-
 
-.browsehappy {
 
-    margin: 0.2em 0;
 
-    background: #ccc;
 
-    color: #000;
 
-    padding: 0.2em 0;
 
-}
 
-
 
-
 
-/* ===== Initializr Styles ==================================================
 
-   Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template
 
-   ========================================================================== */
 
-
 
-body {
 
-    font: 16px/26px Helvetica, Helvetica Neue, Arial;
 
-}
 
-
 
-.wrapper {
 
-    width: 90%;
 
-    margin: 0 5%;
 
-}
 
-
 
-/* ===================
 
-    ALL: Orange Theme
 
-   =================== */
 
-
 
-.header-container {
 
-    border-bottom: 20px solid #e44d26;
 
-}
 
-
 
-.footer-container,
 
-.main aside {
 
-    border-top: 20px solid #e44d26;
 
-}
 
-
 
-.header-container,
 
-.footer-container,
 
-.main aside {
 
-    background: #f16529;
 
-}
 
-
 
-.title {
 
-    color: white;
 
-}
 
-
 
-/* ==============
 
-    MOBILE: Menu
 
-   ============== */
 
-
 
-nav ul {
 
-    margin: 0;
 
-    padding: 0;
 
-}
 
-
 
-nav a {
 
-    display: block;
 
-    margin-bottom: 10px;
 
-    padding: 15px 0;
 
-
 
-    text-align: center;
 
-    text-decoration: none;
 
-    font-weight: bold;
 
-
 
-    color: white;
 
-    background: #e44d26;
 
-}
 
-
 
-nav a:hover,
 
-nav a:visited {
 
-    color: white;
 
-}
 
-
 
-nav a:hover {
 
-    text-decoration: underline;
 
-}
 
-
 
-/* ==============
 
-    MOBILE: Main
 
-   ============== */
 
-
 
-.main {
 
-    padding: 30px 0;
 
-}
 
-
 
-.main article h1 {
 
-    font-size: 2em;
 
-}
 
-
 
-.main aside {
 
-    color: white;
 
-    padding: 0px 5% 10px;
 
-}
 
-
 
-/* ===============
 
-    ALL: IE Fixes
 
-   =============== */
 
-
 
-.ie7 .title {
 
-    padding-top: 20px;
 
-}
 
-
 
-/* ==========================================================================
 
-   Author's custom styles
 
-   ========================================================================== */
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-/* ==========================================================================
 
-   Media Queries
 
-   ========================================================================== */
 
-
 
-@media only screen and (min-width: 480px) {
 
-
 
-/* ====================
 
-    INTERMEDIATE: Menu
 
-   ==================== */
 
-
 
-    nav a {
 
-        float: left;
 
-        width: 27%;
 
-        margin: 0 1.7%;
 
-        padding: 25px 2%;
 
-        margin-bottom: 0;
 
-    }
 
-
 
-    nav li:first-child a {
 
-        margin-left: 0;
 
-    }
 
-
 
-    nav li:last-child a {
 
-        margin-right: 0;
 
-    }
 
-
 
-/* ========================
 
-    INTERMEDIATE: IE Fixes
 
-   ======================== */
 
-
 
-    nav ul li {
 
-        display: inline;
 
-    }
 
-
 
-    .oldie nav a {
 
-        margin: 0 0.7%;
 
-    }
 
-}
 
-
 
-@media only screen and (min-width: 768px) {
 
-
 
-/* ====================
 
-    WIDE: CSS3 Effects
 
-   ==================== */
 
-
 
-    .header-container,
 
-    .main aside {
 
-        -webkit-box-shadow: 0 5px 10px #aaa;
 
-           -moz-box-shadow: 0 5px 10px #aaa;
 
-                box-shadow: 0 5px 10px #aaa;
 
-    }
 
-
 
-/* ============
 
-    WIDE: Menu
 
-   ============ */
 
-
 
-    .title {
 
-        float: left;
 
-    }
 
-
 
-    nav {
 
-        float: right;
 
-        width: 38%;
 
-    }
 
-
 
-/* ============
 
-    WIDE: Main
 
-   ============ */
 
-
 
-    .main article {
 
-        float: left;
 
-        width: 57%;
 
-    }
 
-
 
-    .main aside {
 
-        float: right;
 
-        width: 28%;
 
-    }
 
-}
 
-
 
-@media only screen and (min-width: 1140px) {
 
-
 
-/* ===============
 
-    Maximal Width
 
-   =============== */
 
-
 
-    .wrapper {
 
-        width: 1026px; /* 1140px - 10% for margins */
 
-        margin: 0 auto;
 
-    }
 
-    
-    .header-container,
 
-    .main aside {
 
-    background: #f16529;
 
-    margin-left: 10%;
 
-    margin-right: 10%;
 
-    }
 
-    
-    .footer-container, footer{
 
-	background: #f16529;
 
-    margin-left: 10%;
 
-    margin-right: 10%;
 
-    width:80%;
 
-    height: 15%;
 
-	position:absolute;
 
-	bottom:0;
 
-    }
 
-    .forget-button {
 
-     width: 50%;
 
-     margin: 4% 46%;
 
-    }
 
-}
 
-
 
-/* ==========================================================================
 
-   Helper classes
 
-   ========================================================================== */
 
-
 
-.ir {
 
-    background-color: transparent;
 
-    border: 0;
 
-    overflow: hidden;
 
-    *text-indent: -9999px;
 
-}
 
-
 
-.ir:before {
 
-    content: "";
 
-    display: block;
 
-    width: 0;
 
-    height: 150%;
 
-}
 
-
 
-.hidden {
 
-    display: none !important;
 
-    visibility: hidden;
 
-}
 
-
 
-.visuallyhidden {
 
-    border: 0;
 
-    clip: rect(0 0 0 0);
 
-    height: 1px;
 
-    margin: -1px;
 
-    overflow: hidden;
 
-    padding: 0;
 
-    position: absolute;
 
-    width: 1px;
 
-}
 
-
 
-.visuallyhidden.focusable:active,
 
-.visuallyhidden.focusable:focus {
 
-    clip: auto;
 
-    height: auto;
 
-    margin: 0;
 
-    overflow: visible;
 
-    position: static;
 
-    width: auto;
 
-}
 
-
 
-.invisible {
 
-    visibility: hidden;
 
-}
 
-
 
-.clearfix:before,
 
-.clearfix:after {
 
-    content: " ";
 
-    display: table;
 
-}
 
-
 
-.clearfix:after {
 
-    clear: both;
 
-}
 
-
 
-.clearfix {
 
-    *zoom: 1;
 
-}
 
-
 
-/* ==========================================================================
 
-   Print styles
 
-   ========================================================================== */
 
-
 
-@media print {
 
-    * {
 
-        background: transparent !important;
 
-        color: #000 !important;
 
-        box-shadow: none !important;
 
-        text-shadow: none !important;
 
-    }
 
-
 
-    a,
 
-    a:visited {
 
-        text-decoration: underline;
 
-    }
 
-
 
-    a[href]:after {
 
-        content: " (" attr(href) ")";
 
-    }
 
-
 
-    abbr[title]:after {
 
-        content: " (" attr(title) ")";
 
-    }
 
-
 
-    .ir a:after,
 
-    a[href^="javascript:"]:after,
 
-    a[href^="#"]:after {
 
-        content: "";
 
-    }
 
-
 
-    pre,
 
-    blockquote {
 
-        border: 1px solid #999;
 
-        page-break-inside: avoid;
 
-    }
 
-
 
-    thead {
 
-        display: table-header-group;
 
-    }
 
-
 
-    tr,
 
-    img {
 
-        page-break-inside: avoid;
 
-    }
 
-
 
-    img {
 
-        max-width: 100% !important;
 
-    }
 
-
 
-    @page {
 
-        margin: 0.5cm;
 
-    }
 
-
 
-    p,
 
-    h2,
 
-    h3 {
 
-        orphans: 3;
 
-        widows: 3;
 
-    }
 
-
 
-    h2,
 
-    h3 {
 
-        page-break-after: avoid;
 
-    }
 
+@media screen and (min-width: 768px) {
 
+ 
+.custom-collapse .collapse{
 
+  			display:block;
 
+      }  
 }