Improved search form design

README.md

@@ -12,7 +12,8 @@
 [issues]: https://github.com/photoprism/photoprism/issues
 [ci]: https://travis-ci.org/photoprism/photoprism
 
-PhotoPrism is a server-based application for privately managing large amounts of JPEG and RAW files. It is functionally similar to popular cloud services such as [Flickr](https://www.flickr.com/) or [Google Photos](https://photos.google.com/).
+PhotoPrism is a server-based application for privately managing large amounts of JPEG and RAW files. It is functionally similar to
+popular cloud services such as [Flickr](https://www.flickr.com/) or [Google Photos](https://photos.google.com/).
 Originals are stored in the file system in a structured way for easy backup and reliable long-term accessibility.
 
 *Note: This software is still alpha and under active development. You're welcome to join our team.*
@@ -27,9 +28,10 @@ Our goal is to provide the following features (tested as a proof-of-concept):
 - Image search with powerful filters
 - Easy backup and export
 
-User Interface
+Web Frontend
---------------
+------------
-The Web frontend is based on [Vuetify](https://vuetifyjs.com/en/), a [Material Design](https://material.io/) component framework for Vue.js 2.
+Open a terminal an type `photoprism start` to start the built-in server. It will listen on localhost port 80 by default.
+The UI is based on [Vuetify](https://vuetifyjs.com/en/), a [Material Design](https://material.io/) component framework for Vue.js 2.
 
 ![](docs/img/search.png "Advanced Search")
 

frontend/src/app.js

@@ -25,6 +25,9 @@ Vue.use(Vuetify, {
         secondary: '#b0bec5',
         accent: '#8c9eff',
         error: '#b71c1c',
+        info: '#2196F3',
+        success: '#4CAF50',
+        warning: '#FFC107',
     },
 });
 

frontend/src/app/pages/photos.vue

@@ -1,8 +1,8 @@
 <template>
     <div>
         <v-form ref="form" lazy-validation @submit="formChange" dense>
-            <v-toolbar>
+            <v-toolbar flat color="blue-grey lighten-4">
-                <v-text-field class="pt-3"
+                <v-text-field class="pt-3 pr-3"
                               single-line
                               label="Search"
                               prepend-inner-icon="search"
@@ -10,7 +10,7 @@
                               v-model="query.q"
                               @keyup.enter.native="formChange"
                 ></v-text-field>
-
+                <v-btn @click="formChange" color="secondary">Search</v-btn>
                 <v-spacer></v-spacer>
 
                 <v-btn icon @click="advandedSearch = !advandedSearch">
@@ -18,8 +18,9 @@
                 </v-btn>
             </v-toolbar>
             <v-slide-y-transition>
-                <v-card class="theme--light v-toolbar pt-0"
+                <v-card class="pt-0"
-                        style="box-shadow: 0 4px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 4px 10px 0 rgba(0,0,0,.12);"
+                        flat
+                        color="blue-grey lighten-4"
                         v-show="advandedSearch">
                     <v-card-text>
                         <v-layout row wrap>
@@ -56,26 +57,11 @@
                                 </v-select>
                             </v-flex>
                         </v-layout>
-                        <v-flex pa-3>
-                            <v-range-slider
-                                    :tick-labels="['2001','2002','2003','2004','2005','2006','2007','2008','2009','2010','2011','2012','2013','2014','2015']"
-                                    :value="[6, 30]"
-                                    step="10"
-                                    ticks
-                            >
-                            </v-range-slider>
-                        </v-flex>
-                        <p class="text-lg-right">
-                            <v-btn @click="formChange" color="secondary">Create Filter</v-btn>
-                            <v-btn @click="formChange" color="accent">Search</v-btn>
-                        </p>
                     </v-card-text>
                 </v-card>
             </v-slide-y-transition>
         </v-form>
         <v-container fluid>
-
-
             <div class="page-container photo-grid pt-3">
                 <template v-for="photo in items">
 
@@ -107,7 +93,6 @@
                                  :src="'/api/v1/files/' + file.ID + '/square_thumbnail?size=250'">
                         </template>
                     </div>
-
                 </template>
             </div>
             <div style="clear: both"></div>