Author: Pedro Lucas Porcellis <pedrolucasporcellis@gmail.com>
Update to conform with new form structures
core/templates/login.html | 55 +++++++----- core/templates/new_cycle.html | 104 ++++++++++++------------ core/templates/new_group.html | 54 ++++++++---- core/templates/new_product.html | 109 +++++++++++++++---------- core/templates/new_product_category.html | 53 +++++++----- core/templates/sign_up.html | 67 ++++++++-------
diff --git a/core/templates/login.html b/core/templates/login.html index e44cddf9b6aa7c9d85a728b93a9c8410a99612c5..ebf53870cac985d6b6422994deb65a78be3824be 100644 --- a/core/templates/login.html +++ b/core/templates/login.html @@ -1,32 +1,39 @@ {% extends 'layout.html' %} {% block body %} - {% with messages = get_flashed_messages() %} - {% if messages %} - <section> - {{ messages[0] }} - </section> - {% endif %} - {% endwith %} - <section> - <h2> Entrar na sua conta </h2> - <p> Use suas credenciais para entrar na sua conta </p> - </section> +{% with messages = get_flashed_messages() %} +{% if messages %} +<section class="mt-5 mb-5"> + {{ messages[0] }} +</section> +{% endif %} +{% endwith %} + +<form method="POST" action="/auth/login"> + <fieldset class="umbo-fieldset"> + <legend class="legend-xl umbo-fieldset-legend"> + <h1>Entrar na sua conta</h1> + <span class="hint"> + Use suas credenciais para entrar na sua conta + </span> + </legend> + + + <div class='umbo-form-group'> + <label class="umbo-label" for="email">Email</label> + <input class="umbo-input" type="email" placeholder="seu@email.com" name="email" /> + </div> - <form method="POST" action="/auth/login"> - <div class='form-section'> - <label for="email">Email</label> - <input type="email" placeholder="seu@email.com" name="email" /> - </div> + <div class='umbo-form-group'> + <label for="password" class="umbo-label">Senha</label> + <input class="umbo-input" type="password" placeholder="******" name="password" /> + </div> - <div class='form-section'> - <label for="password">Senha</label> - <input type="password" placeholder="******" name="password" /> - </div> + <div class='umbo-form-actions'> + <button type="submit" rel="button"> Entrar </button> + </div> - <div class='form-action'> - <button type="submit" rel="button"> Entrar </button> - </div> - </form> + </fieldset> +</form> {% endblock %} diff --git a/core/templates/new_cycle.html b/core/templates/new_cycle.html index cc97f9bc9700589f3affee8766671b1990b85dfb..6cb6024c5f368f3d24e07e7d0d63b1bf4bb3a2ae 100644 --- a/core/templates/new_cycle.html +++ b/core/templates/new_cycle.html @@ -1,18 +1,32 @@ {% extends 'layout.html' %} {% block body %} - <form action="/cycles/" method="POST"> + <form action="/cycles/" method="POST" class="mt-5"> <div class="form-section"> - <label for="">Título desse ciclo</label> - <input type="text" name="name"> + <label class="umbo-label" for="">Título desse ciclo</label> + <input class="umbo-input" type="text" name="name"> </div> <div class="form-section"> - <label for="">Descrição</label> - <textarea rows="10" columns="10" name="description"></textarea> + <label class="umbo-label" for="">Descrição</label> + <textarea class="umbo-input" rows="10" cols="72" name="description"></textarea> </div> - <fieldset> - <legend class="legend-xl"> + <div class="form-section"> + <label class="umbo-label" for="">Margem sobre o valor dos produtos nesse ciclo</label> + <input name="price_margin" type="number" step="0.1" class="umbo-input" /> + </div> + + <div class="form-section"> + <label class="umbo-label" for="">Estado inicial desse ciclo</label> + <select class="umbo-input" name="status"> + {% for cycle in cycles %} + <option value="{{cycle[0]}}">{{cycle[1]}}</option> + {% endfor %} + </select> + </div> + + <fieldset class="umbo-fieldset"> + <legend class="legend-xl umbo-fieldset-legend"> <h1> Quando esse ciclo se inicia? </h1> </legend> @@ -23,28 +37,28 @@ <div class="form-date-group"> <div class="date-group-item"> <div class="form-section"> - <label for="">Dia</label> - <input class="form-input-width-2" name="start_at_day" type="text"> + <label class="umbo-label" for="">Dia</label> + <input class="umbo-input" name="start_at_day" type="text"> </div> </div> <div class="date-group-item"> <div class="form-section"> - <label for="">Mês</label> - <input class="form-input-width-2" name="start_at_month" type="text"> + <label class="umbo-label" for="">Mês</label> + <input class="umbo-input" name="start_at_month" type="text"> </div> </div> <div class="date-group-item"> <div class="form-section"> - <label for="">Ano</label> - <input class="form-input-width-4" name="start_at_year" type="text" readonly value="2020"> + <label class="umbo-label" for="">Ano</label> + <input class="umbo-input" name="start_at_year" type="text" readonly value="2020"> </div> </div> </div> </fieldset> - <fieldset> - <legend class="legend-xl"> + <fieldset class="umbo-fieldset"> + <legend class="legend-xl umbo-fieldset-legend"> <h1> Quando esse ciclo se encerra? </h1> </legend> @@ -55,28 +69,28 @@ <div class="form-date-group"> <div class="date-group-item"> <div class="form-section"> - <label for="">Dia</label> - <input class="form-input-width-2" name="end_at_day" type="text"> + <label class="umbo-label" for="">Dia</label> + <input class="umbo-input" name="end_at_day" type="text"> </div> </div> <div class="date-group-item"> <div class="form-section"> - <label for="">Mês</label> - <input class="form-input-width-2" name="end_at_month" type="text"> + <label class="umbo-label" for="">Mês</label> + <input class="umbo-input" name="end_at_month" type="text"> </div> </div> <div class="date-group-item"> <div class="form-section"> - <label for="">Ano</label> - <input class="form-input-width-4" name="end_at_year" type="text" readonly value="2020"> + <label class="umbo-label" for="">Ano</label> + <input class="umbo-input" name="end_at_year" type="text" readonly value="2020"> </div> </div> </div> </fieldset> - <fieldset> - <legend class="legend-xl"> + <fieldset class="umbo-fieldset"> + <legend class="legend-xl umbo-fieldset-legend"> <h1> Quando começa o período de entrega? </h1> </legend> @@ -87,28 +101,28 @@ <div class="form-date-group"> <div class="date-group-item"> <div class="form-section"> - <label for="">Dia</label> - <input class="form-input-width-2" name="delivery_start_at_day" type="text"> + <label class="umbo-label" for="">Dia</label> + <input class="umbo-input" name="delivery_start_at_day" type="text"> </div> </div> <div class="date-group-item"> <div class="form-section"> - <label for="">Mês</label> - <input class="form-input-width-2" name="delivery_start_at_month" type="text"> + <label class="umbo-label" for="">Mês</label> + <input class="umbo-input" name="delivery_start_at_month" type="text"> </div> </div> <div class="date-group-item"> <div class="form-section"> - <label for="">Ano</label> - <input class="form-input-width-4" name="delivery_start_at_year" type="text" readonly value="2020"> + <label class="umbo-label" for="">Ano</label> + <input class="umbo-input" name="delivery_start_at_year" type="text" readonly value="2020"> </div> </div> </div> </fieldset> - <fieldset> - <legend class="legend-xl"> + <fieldset class="umbo-fieldset"> + <legend class="legend-xl umbo-fieldset-legend"> <h1> Quando se encerra o período de entrega? </h1> </legend> @@ -119,40 +133,26 @@ <div class="form-date-group"> <div class="date-group-item"> <div class="form-section"> - <label for="">Dia</label> - <input class="form-input-width-2" name="delivery_end_at_day" type="text"> + <label class="umbo-label" for="">Dia</label> + <input class="umbo-input" name="delivery_end_at_day" type="text"> </div> </div> <div class="date-group-item"> <div class="form-section"> - <label for="">Mês</label> - <input class="form-input-width-2" name="delivery_end_at_month" type="text"> + <label class="umbo-label" for="">Mês</label> + <input class="umbo-input" name="delivery_end_at_month" type="text"> </div> </div> <div class="date-group-item"> <div class="form-section"> - <label for="">Ano</label> - <input class="form-input-width-4" name="delivery_end_at_year" type="text" readonly value="2020"> + <label class="umbo-label" for="">Ano</label> + <input class="umbo-input" name="delivery_end_at_year" type="text" readonly value="2020"> </div> </div> </div> </fieldset> - <div class="form-section"> - <label for="">Margem sobre o valor dos produtos nesse ciclo</label> - <input name="price_margin" type="number" step="0.1" class="form-input-width-4" /> - </div> - - <div class="form-section"> - <label for="">Estado inicial desse ciclo</label> - <select name="status"> - {% for cycle in cycles %} - <option value="{{cycle[0]}}">{{cycle[1]}}</option> - {% endfor %} - </select> - </div> - - <div class="form-action"> + <div class="umbo-form-actions mt-5 mb-5"> <button class="btn btn-primary" type="submit">Criar Ciclo</button> </div> </form> diff --git a/core/templates/new_group.html b/core/templates/new_group.html index 7b654c6b845bce228168dde80df45c3fbe5c5001..36b6c3305ca41d410a191f3a62da0f5b3aa1c740 100644 --- a/core/templates/new_group.html +++ b/core/templates/new_group.html @@ -13,27 +13,47 @@ <form action='{{ url_for('groups.index') }}' method="POST"> - <div class="form-section"> - <label for="name">Name</label> - <input type="text" placeholder="Name" name="name"> - </div> + <fieldset class="umbo-fieldset"> + <legend class="legend-xl umbo-fieldset-legend"> + <h1> Quais as informações básicas desse fornecedor? </h1> + </legend> - <div class="form-section"> - <label for="location">Location</label> - <input type="text" placeholder="Location" name="location"> - </div> + <span class="hint"> + Nome, onde eles se localizam + </span> - <div class="form-section"> - <label for="lat">Lat</label> - <input type="text" placeholder="Lat" name="lat"> - </div> + <div class="umbo-form-group"> + <label class="umbo-label" for="name">Nome do Fornecedor</label> + <input class="umbo-input" type="text" placeholder="Gonçalo" name="name"> + </div> - <div class="form-section"> - <label for="lng">Lng</label> - <input type="text" placeholder="Lng" name="lng"> - </div> + <div class="umbo-form-group"> + <label class="umbo-label" for="location">Localização</label> + <input class="umbo-input" type="text" placeholder="Pelotas, RS" name="location"> + </div> + </fieldset> + + <fieldset class="umbo-fieldset"> + <legend class="legend-xl umbo-fieldset-legend"> + <h1>Informações adicionais sobre a Localização</h1> + </legend> + + <span class="hint"> + Essas informações são opcionais, mas nos ajudarão a marcar com precisão + </span> - <div class="form-action"> + <div class="umbo-form-group"> + <label class="umbo-label" for="lat">Latitude Geográfica</label> + <input class="umbo-input" type="text" placeholder="-33.513" name="lat"> + </div> + + <div class="umbo-form-group"> + <label class="umbo-label" for="lng">Longitude Geográfica</label> + <input class="umbo-input" type="text" placeholder="-54.122" name="lng"> + </div> + </fieldset> + + <div class="umbo-form-actions"> <button type="submit" rel="button">Criar Grupo </button> </div> diff --git a/core/templates/new_product.html b/core/templates/new_product.html index 6e66fa9dcc96847e377a41226af0f929467f1fdb..f67883b14372231f601eaf4c4b46cd89512e976b 100644 --- a/core/templates/new_product.html +++ b/core/templates/new_product.html @@ -1,56 +1,81 @@ {% extends 'layout.html' %} {% block body %} - <section class="messages"> - {% with messages = get_flashed_messages() %} - {% if messages %} - <section> - {{ messages[0] }} - </section> - {% endif %} - {% endwith %} - </section> +<section class="messages"> + {% with messages = get_flashed_messages() %} + {% if messages %} + <section> + {{ messages[0] }} + </section> + {% endif %} + {% endwith %} +</section> + +<form action='{{ url_for('products.index') }}' method="POST"> + + <fieldset class="umbo-fieldset"> + <legend class="legend-xl umbo-fieldset-legend"> + <h1>Informações básicas sobre esse produto</h1> + </legend> + + <div class="umbo-form-group"> + <label class="umbo-label" for="title">Título do Produto</label> + <input class="umbo-input" type="text" placeholder="Mucilon Agroecologico" name="title"> + </div> + + <div class="umbo-form-group"> + <label class="umbo-label" for="description">Descreva o produto</label> + <textarea class="umbo-input" rows="10" cols="72" placeholder="Description" name="description"></textarea> + </div> + </fieldset> - <form action='{{ url_for('products.index') }}' method="POST"> + <fieldset class="umbo-fieldset"> + <legend class="legend-xl umbo-fieldset-legend"> + <h1>Categoria e de quem pertence esse produto?</h1> + <span class="hint"> + Se não estiver na lista, cadastre primeiro <a href="{{ url_for('product_categories.new') }}">aqui</a> + </span> + </legend> - <div class="form-section"> - <label for="title">Title</label> - <input type="text" placeholder="Title" name="title"> - </div> + <div class="umbo-form-group"> + <label class="umbo-label" for="group_id">Fornecedor</label> + <select class="umbo-input" id="" name="group_id"> + {% for group in groups %} + <option value="{{group.id}}">{{group.name}}</option> + {% endfor %} + </select> + </div> - <div class="form-section"> - <label for="description">Description</label> - <textarea rows="10" columns="50" placeholder="Description" name="description"></textarea> - </div> + <div class="umbo-form-group"> + <label class="umbo-label" for="category_id">Categoria</label> + <select class="umbo-input" id="" name="category_id"> + {% for category in categories %} + <option value="{{ category.id }}">{{ category.name }}</option> + {% endfor %} + </select> + </div> + </fieldset> - <div class="form-section"> - <label for="group_id">Group</label> - <select id="" name="group_id"> - {% for group in groups %} - <option value="{{group.id}}">{{group.name}}</option> - {% endfor %} - </select> - </div> + <fieldset class="umbo-fieldset"> + <legend class="legend-xl umbo-fieldset-legend"> + <h1>Valor do produto</h1> - <div class="form-section"> - <label for="category_id">Category</label> - <select id="" name="category_id"> - {% for category in categories %} - <option value="{{ category.id }}">{{ category.name }}</option> - {% endfor %} - </select> - </div> + <span class="hint"> + Esse é o valor sem a margem, que será adicionada a cada ciclo + </span> + </legend> - <div class="form-section"> - <label for="price">Price</label> - <input type="text" placeholder="14.20" name="price" /> - </div> + <div class="umbo-form-group"> + <label class="umbo-label" for="price">Price</label> + <input class="umbo-input" type="text" placeholder="14.20" name="price" /> + </div> + </fieldset> - <div class="form-action"> - <button type="submit" rel="button">Criar Produto</button> - </div> + <div class="umbo-form-actions"> + <button type="submit" rel="button">Criar Produto</button> + </div> - </form> +</form> {% endblock %} diff --git a/core/templates/new_product_category.html b/core/templates/new_product_category.html index a9fa5af3c7b61e4e08b73eeadf02b8be735a3c63..6bf438412418ca4330a18f00176db08cf73b3e13 100644 --- a/core/templates/new_product_category.html +++ b/core/templates/new_product_category.html @@ -1,33 +1,42 @@ {% extends 'layout.html' %} {% block body %} - <section class="messages"> - {% with messages = get_flashed_messages() %} - {% if messages %} - <section> - {{ messages[0] }} - </section> - {% endif %} - {% endwith %} - </section> +<section class="messages"> + {% with messages = get_flashed_messages() %} + {% if messages %} + <section> + {{ messages[0] }} + </section> + {% endif %} + {% endwith %} +</section> + +<form action='{{ url_for('product_categories.index') }}' method="POST"> + <fieldset class="umbo-fieldset"> + <legend class="legend-xl"> + <h1>Informações básicas</h1> - <form action='{{ url_for('product_categories.index') }}' method="POST"> + <span class="hint"> + Descreva qual tipo de produtos entram nessa categoria + </span> + </legend> - <div class="form-section"> - <label for="name">Name</label> - <input type="text" placeholder="Name" name="name"> - </div> + <div class="umbo-form-group"> + <label class="umbo-label" for="name">Name</label> + <input class="umbo-input" type="text" placeholder="Name" name="name"> + </div> - <div class="form-section"> - <label for="description">Description</label> - <textarea rows="10" columns="50" placeholder="Description" name="description"></textarea> - </div> + <div class="umbo-form-group"> + <label class="umbo-label" for="description">Description</label> + <textarea class="umbo-input" rows="10" cols="72" placeholder="Description" name="description"></textarea> + </div> + </fieldset> - <div class="form-action"> - <button type="submit" rel="button">Criar Categoria</button> - </div> + <div class="umbo-form-actions"> + <button type="submit" rel="button">Criar Categoria</button> + </div> - </form> +</form> {% endblock %} diff --git a/core/templates/sign_up.html b/core/templates/sign_up.html index 0c8a2e85392e4d7da7484a503ac6225478dc40bf..34ac256d1510013ae134e5bd36795fab169a4f35 100644 --- a/core/templates/sign_up.html +++ b/core/templates/sign_up.html @@ -1,45 +1,48 @@ {% extends 'layout.html' %} {% block body %} - <form method="POST" action="/auth/sign_up"> - <section> - <h2> Comece a consumir responsávelmente </h2> - <p> - Ao se cadastrar você poderá <mark>fazer pedidos</mark> na feira, acompanhar os ciclos - e contribuir para uma alimentação <mark>saudável</mark>, <mark>responsável</mark> e <mark>consciente</mark>. - </p> - </section> +<form method="POST" action="/auth/sign_up"> + <fieldset class="umbo-fieldset"> + <legend class="legend-xl umbo-fieldset-legend"> + <h1>Comece a consumir responsávelmente</h1> + <span class="hint"> + Ao se cadastrar você poderá <mark>fazer pedidos</mark> na feira, acompanhar os ciclos + e contribuir para uma alimentação <mark>saudável</mark>, <mark>responsável</mark> e <mark>consciente</mark>. + </span> + </legend> - <div class='form-section'> - <label for="username">Username</label> - <input type="text" placeholder="Username" name="username" /> - </div> + <div class='form-section'> + <label class="umbo-label" for="username">Username</label> + <input class="umbo-input" type="text" placeholder="Username" name="username" /> + </div> + + <div class='form-section'> + <label class="umbo-label" for="email">Email</label> + <input class="umbo-input" type="email" placeholder="email@host.com" name="email" /> + </div> - <div class='form-section'> - <label for="email">Email</label> - <input type="email" placeholder="email@host.com" name="email" /> - </div> + <div class='form-section'> + <label class="umbo-label" for="password">Password</label> + <input class="umbo-input" type="password" placeholder="********" name="password" /> + </div> - <div class='form-section'> - <label for="password">Password</label> - <input type="password" placeholder="********" name="password" /> - </div> + <div class='form-section'> + <label class="umbo-label" for="first_name">First Name</label> + <input class="umbo-input" type="text" placeholder="John Doe" name="first_name" /> + </div> - <div class='form-section'> - <label for="first_name">First Name</label> - <input type="text" placeholder="John Doe" name="first_name" /> - </div> + <div class='form-section'> + <label class="umbo-label" for="last_name"> Last Name </label> + <input class="umbo-input" type="text" placeholder="Doe" name="last_name" /> + </div> - <div class='form-section'> - <label for="last_name"> Last Name </label> - <input type="text" placeholder="Doe" name="last_name" /> - </div> + </fieldset> - <div class='form-action'> - <button type="submit"> Sign Up </button> - </div> + <div class='umbo-form-actions'> + <button class="umbo-button" type="submit"> Sign Up </button> + </div> - </form> +</form> {% endblock %}