Merged in wwwredfish (pull request Laverna#1)

Added notes search form
4lch4 · Aug 11, 2013 · 45c64a4 · 45c64a4
2 parents 5eaa6f7 + 574a778
commit 45c64a4
Show file tree

Hide file tree

Showing 4 changed files with 156 additions and 12 deletions.
diff --git a/app/list.html b/app/list.html
@@ -29,25 +29,33 @@
                     </li>
                 </ul>
             </div>
+            <form class="form-inline search-form">
+                <span class="glyphicon glyphicon-search input-append"></span>
+                <input type="text" placeholder="Search" class="input-append search-input" />
+                <!--<span class="glyphicon glyphicon-off input-append"></span>-->
+            </form>
             <div class="main">
-                <form class="form-inline">
-
-                </form>
                 <div class="list-group">
                     <a href="#" class="list-group-item active">
                         <h4 class="list-group-item-heading">List group item heading</h4>
                         <p class="clearfix list-group-item-text">
                             some text... . .. .. . .. .. . . ..
-                            <span class="favourite pull-right glyphicon glyphicon-star-empty"></span>
+                            <span class="favourite pull-right glyphicon glyphicon-star active"></span>
                         </p>
                     </a>
                     <a href="#" class="list-group-item">
                         <h4 class="list-group-item-heading">List group item heading</h4>
-                        <p class="list-group-item-text">...</p>
+                        <p class="clearfix list-group-item-text">
+                            some text... . .. .. . .. .. . . ..
+                            <span class="favourite pull-right glyphicon glyphicon-star active"></span>
+                        </p>
                     </a>
                     <a href="#" class="list-group-item">
                         <h4 class="list-group-item-heading">List group item heading</h4>
-                        <p class="list-group-item-text">...</p>
+                        <p class="clearfix list-group-item-text">
+                            some text... . .. .. . .. .. . . ..
+                            <span class="favourite pull-right glyphicon glyphicon-star"></span>
+                        </p>
                     </a>
                 </div>
             </div>

diff --git a/app/styles/main.css b/app/styles/main.css
@@ -4600,7 +4600,7 @@ body,
   padding-top: 8px;
   padding-bottom: 8px;
   border: 1px solid #e6e6e6;
-  border-radius: 5px;
+  border-radius: 0;
 }
 #sidebar .navbar .nav a.addlink {
   color: #FFF;
@@ -4618,9 +4618,55 @@ body,
   border-left: 5px solid #007366;
   background: #00A693;
 }
+#sidebar .main .list-group .list-group-item.active .favourite.active {
+  color: #FFF;
+}
 #sidebar .main .list-group .list-group-item .favourite {
   font-size: 22px;
   margin-right: -5px;
+  color: #b3b3b3;
+}
+#sidebar .main .list-group .list-group-item .favourite.active {
+  color: #007366;
+}
+#sidebar .search-form {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+#sidebar .search-form .row {
+  margin-right: 0;
+  width: 100%;
+}
+#sidebar .search-form .row .input-append input {
+  float: left;
+  width: 10%;
+}
+#sidebar .search-form span.glyphicon-search {
+  margin-left: 10px;
+  width: 3%;
+  color: #cccccc;
+}
+#sidebar .search-form span.glyphicon-search.active {
+  color: #101010;
+}
+#sidebar .search-form .search-input {
+  border-radius: 0;
+  border: 1px solid transparent;
+  box-shadow: none;
+  padding-top: 5px;
+  padding-left: 5px;
+  padding-bottom: 5px;
+  width: 80%;
+}
+#sidebar .search-form .search-input:focus {
+  box-shadow: none;
+  border: 1px solid #00A693;
+}
+#sidebar .search-form button {
+  padding: 5px;
+}
+#sidebar .search-form button span {
+  margin-left: 0;
 }
 #content {
   padding-left: 0;
@@ -4637,7 +4683,7 @@ body,
   padding-top: 8px;
   padding-bottom: 8px;
   border: 1px solid #e6e6e6;
-  border-radius: 5px;
+  border-radius: 0;
   margin-left: 10px;
 }
 #content .main {

diff --git a/app/styles/styles.css b/app/styles/styles.css
@@ -516,7 +516,7 @@ body,
   padding-top: 8px;
   padding-bottom: 8px;
   border: 1px solid #e6e6e6;
-  border-radius: 5px;
+  border-radius: 0;
 }
 #sidebar .navbar .nav a.addlink {
   color: #FFF;
@@ -534,9 +534,55 @@ body,
   border-left: 5px solid #007366;
   background: #00A693;
 }
+#sidebar .main .list-group .list-group-item.active .favourite.active {
+  color: #FFF;
+}
 #sidebar .main .list-group .list-group-item .favourite {
   font-size: 22px;
   margin-right: -5px;
+  color: #b3b3b3;
+}
+#sidebar .main .list-group .list-group-item .favourite.active {
+  color: #007366;
+}
+#sidebar .search-form {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+#sidebar .search-form .row {
+  margin-right: 0;
+  width: 100%;
+}
+#sidebar .search-form .row .input-append input {
+  float: left;
+  width: 10%;
+}
+#sidebar .search-form span.glyphicon-search {
+  margin-left: 10px;
+  width: 3%;
+  color: #cccccc;
+}
+#sidebar .search-form span.glyphicon-search.active {
+  color: #101010;
+}
+#sidebar .search-form .search-input {
+  border-radius: 0;
+  border: 1px solid transparent;
+  box-shadow: none;
+  padding-top: 5px;
+  padding-left: 5px;
+  padding-bottom: 5px;
+  width: 80%;
+}
+#sidebar .search-form .search-input:focus {
+  box-shadow: none;
+  border: 1px solid #00A693;
+}
+#sidebar .search-form button {
+  padding: 5px;
+}
+#sidebar .search-form button span {
+  margin-left: 0;
 }
 #content {
   padding-left: 0;
@@ -553,7 +599,7 @@ body,
   padding-top: 8px;
   padding-bottom: 8px;
   border: 1px solid #e6e6e6;
-  border-radius: 5px;
+  border-radius: 0;
   margin-left: 10px;
 }
 #content .main {

diff --git a/app/styles/styles.less b/app/styles/styles.less
@@ -23,7 +23,7 @@ html, body, #wrapper{
         padding-top: 8px;
         padding-bottom: 8px;
         border: 1px solid darken(#FFF, 10%);
-        border-radius: 5px;
+        border-radius: 0;
       }
       a.addlink{
         color: #FFF;
@@ -43,14 +43,58 @@ html, body, #wrapper{
           border-color: #00A693;
           border-left: 5px solid darken(#00A693, 10%);
           background: #00A693;
+          .favourite.active{
+            color: #FFF;
+          }
+        ;
         }
         .favourite{
           font-size: 22px;
           margin-right: -5px;
+          color: darken(#FFF, 30%);
+          &.active{
+            color: darken(#00A693, 10%);
+          }
         }
       }
     }
   }
+  .search-form{
+    padding-top: 10px;
+    padding-bottom: 10px;
+    .row{
+      margin-right: 0;
+      width: 100%;
+      .input-append input { float:left; width:10% }
+    }
+    span.glyphicon-search{
+      margin-left: 10px;
+      width: 3%;
+      color: darken(#FFF, 20%);
+      &.active{
+        color: #101010;
+      }
+    }
+    .search-input{
+      border-radius: 0;
+      border: 1px solid transparent;
+      box-shadow: none;
+      padding-top: 5px;
+      padding-left: 5px;
+      padding-bottom: 5px;
+      width: 80%;
+      &:focus{
+        box-shadow: none;
+        border: 1px solid #00A693;
+      }
+    }
+    button{
+      padding: 5px;
+      span{
+        margin-left: 0;
+      }
+    }
+  }
 }
 #content{
   padding-left: 0;
@@ -67,7 +111,7 @@ html, body, #wrapper{
         padding-top: 8px;
         padding-bottom: 8px;
         border: 1px solid darken(#FFF, 10%);
-        border-radius: 5px;
+        border-radius: 0;
         margin-left: 10px;
       }
     }