Improved search form design

This commit is contained in:
Michael Mayer 2018-09-08 10:09:27 +02:00
parent 926b2f66c9
commit 7773859775
4 changed files with 15 additions and 25 deletions

View file

@ -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
--------------
The Web frontend is based on [Vuetify](https://vuetifyjs.com/en/), a [Material Design](https://material.io/) component framework for Vue.js 2.
Web Frontend
------------
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")

Binary file not shown.

Before

Width:  |  Height:  |  Size: 438 KiB

After

Width:  |  Height:  |  Size: 582 KiB

View file

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

View file

@ -1,8 +1,8 @@
<template>
<div>
<v-form ref="form" lazy-validation @submit="formChange" dense>
<v-toolbar>
<v-text-field class="pt-3"
<v-toolbar flat color="blue-grey lighten-4">
<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"
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);"
<v-card class="pt-0"
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>