Tsumanu/oswilno
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

UI fixes

Browse Source
This commit is contained in:
Adrian Woźniak 2022-07-26 13:05:17 +02:00
parent 3f7ff8e7c7
commit 7b167698ac
No known key found for this signature in database
GPG Key ID: 0012845A89C7352B
19 changed files with 119 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
client/src/app.js
View File

@ -1,6 +1,7 @@
import "./shared/rich-text-editor.js";
import "./shared/form-navigation.js";
import "./shared/image-popup.js";
import "./shared/facebook-button.js";
import "./shared/nav/ow-nav.js";
import "./shared/nav/ow-path.js";
import "./shared/price/price-input.js";

1
client/src/business-items/business-item-editor.js
View File

@ -36,6 +36,7 @@ customElements.define('business-item-editor', class extends Component {
${ FORM_STYLE }
</style>
<article id="business-details">
<h2>Edycja konta przedsiębiorcy</h2>
<form method="post" action="/business-item/atomic-update">
<input type="hidden" name="id" id="id">
<div>

4
client/src/business-items/business-item.js
View File

@ -51,7 +51,7 @@ customElements.define('business-item', class extends Component {
</svg>
</button>
</div>
<image-input></image-input>
<image-input send-original="true"></image-input>
<div>
<label>Nazwa</label>
<input name="name" id="name" />
@ -90,7 +90,7 @@ customElements.define('business-item', class extends Component {
updateForm.querySelector('#price').value = this.price;
updateForm.querySelector('#picture_url').value = this.picture_url;
updateForm.querySelector('#item_order').value = this.item_order;
updateForm.submit();
// updateForm.submit();
});
this.shadowRoot.querySelector('#delete').addEventListener('click', ev => {
ev.stopPropagation();

1
client/src/contacts/contact-info-editor.js
View File

@ -34,6 +34,7 @@ customElements.define('contact-info-editor', class extends Component {
${ FORM_STYLE }
</style>
<article>
<h2>Edycja listy danych kontaktowych</h2>
<section>
<form method="post" action="/contacts/create">
<div id="contact-wrapper">

16
client/src/local-businesses/local-business-item.js
View File

@ -10,13 +10,9 @@ customElements.define('local-business-item', class extends Component {
<style>
:host { display: block; }
* { font-family: 'Noto Sans', sans-serif; }
:host([picture-url = '']) img {
:host([picture-url = '']) #img {
display: none;
}
img {
width: 128px;
max-width: 128px;
}
#item {
display: grid;
grid-template-areas: 'img name' 'img price';
@ -31,7 +27,9 @@ customElements.define('local-business-item', class extends Component {
#price {
grid-area: price; text-align: right;
}
img {
#img {
width: 128px;
max-width: 128px;
grid-area: img;
border-radius: 6px;
}
@ -51,14 +49,14 @@ customElements.define('local-business-item', class extends Component {
font-weight: bold;
width: 180px;
}
img {
#img {
width: 128px;
max-width: 128px;
}
}
</style>
<section id="item">
<img alt="" src="" />
<image-popup id="img"></image-popup>
<h3 id="name"></h3>
<price-view id="price"></price-view>
</section>
@ -102,7 +100,7 @@ customElements.define('local-business-item', class extends Component {
v = v || '';
if (!(v || '').startsWith("/")) v = '';
this.setAttribute('picture-url', v);
const el = this.shadowRoot.querySelector('img');
const el = this.shadowRoot.querySelector('#img');
el.src = v;
}
});

67
client/src/ow-account/account-view.js
View File

@ -21,7 +21,11 @@ customElements.define('account-view', class extends Component {
display: flex;
padding: .375rem .75rem;
}
#register-success { display: none; text-align: center; color: darkgreen; }
#register-success {
display: none;
text-align: center;
color: darkgreen;
}
:host([register-success]) #register-success {
display: block;
}
@ -34,13 +38,27 @@ customElements.define('account-view', class extends Component {
article {
margin: 8px;
}
#rules a {
display: block;
}
#logout {
border-color: var(--red-color);
color: var(--red-color);
}
section input[type="button"],
section input[type="button"],
section input[type="submit"] {
width: 100%;
}
section input[type="submit"],
section a.btn {
padding-bottom: 0;
padding-top: 0;
display: block;
}
::slotted(#editService) {
width: calc(100% - 1.5rem) !important;
padding-bottom: 0 !important;
padding-top: 0 !important;
display: block !important;
}
@media only screen and (min-device-width: 1000px) {
article {
margin: 0;
@ -49,36 +67,53 @@ customElements.define('account-view', class extends Component {
display: flex;
justify-content: space-between;
}
#rules a {
display: block;
min-width: calc(120px - 1.5rem);
width: auto;
}
input {
min-width: 120px;
width: auto;
}
::slotted(#editService) {
min-width: 120px !important;
width: auto !important;
display: inline-block !important;
}
}
${ FORM_STYLE }${ BUTTON_STYLE }
</style>
<article>
<h3 id="register-success">Konto utworzone!</h3>
<div>
<section>
<input id="id" name="id" readonly type="hidden" />
</div>
<div>
</section>
<section>
<label>Login</label>
<input id="name" name="name" readonly />
</div>
<div>
</section>
<section>
<label>E-Mail</label>
<input id="email" name="email" readonly />
</div>
<div id="fb-button">
</section>
<section id="fb-button">
<facebook-button width="100">
<p>Powiąż z kontem Facebook</p>
</facebook-button>
</div>
<div id="fb-id">
</section>
<section id="fb-id">
<label>Powiązane konto Facebook</label>
<input id="facebook_id" name="facebook_id" readonly />
</div>
<div>
</section>
<section>
<slot name="editService"></slot>
</section>
<section>
<form action="/logout" method="post">
<input id="logout" value="Wyloguj" type="submit" />
</form>
</div>
</section>
<section id="rules">
<a class="btn" href="/terms-and-condition" target="_blank">Regulamin</a>
<a class="btn" href="/privacy-policy" target="_blank">Polityka prywatności</a>

4
client/src/ow-account/ow-account.js
View File

@ -45,10 +45,10 @@ customElements.define('ow-account', class extends Component {
<login-form></login-form>
<register-form></register-form>
<section id="switch-register">
<a>Nie masz konta? Utwórz nowe</a>
<a class="btn">Nie masz konta? Utwórz nowe</a>
</section>
<section id="switch-login">
<a>Posiadasz konto? Zaloguj się</a>
<a class="btn">Posiadasz konto? Zaloguj się</a>
</section>
</article>
<account-view></account-view>

2
client/src/register-form/register-item-form-row.js
View File

@ -25,7 +25,7 @@ customElements.define('register-item-form-row', class extends PseudoForm {
<section>
<form method="post">
<slot name="head"></slot>
<image-input></image-input>
<image-input send-original="true"></image-input>
<div id="name">
<label>Nazwa</label>
<input id="name" class="item-name" name="items[none][name]" type="text" required />

2
client/src/register-form/register-submit-form.js
View File

@ -53,7 +53,7 @@ customElements.define('register-submit-form', class extends PseudoForm {
<div class="actions">
<form-navigation next="hidden"></form-navigation>
<input type="submit" value="Dodaj usługi/produkty" />
<input type="submit" value="Utwórz konto" />
</div>
</form>
`);

63
client/src/register-form/register-user-form.js
View File

@ -1,5 +1,4 @@
import { Component, FORM_STYLE } from "../shared";
import "../shared/facebook-button";
customElements.define('register-user-form', class extends Component {
static get observedAttributes() {
@ -11,13 +10,6 @@ customElements.define('register-user-form', class extends Component {
<style>
:host { display: block; }
* { font-family: 'Noto Sans', sans-serif; }
#icons {
display: flex;
justify-content: space-between;
}
#form {
display: none;
}
:host([mode="email"]) #form {
display: block;
}
@ -28,9 +20,7 @@ customElements.define('register-user-form', class extends Component {
fill: var(--border-slim-color);
}
.option {
width: 48%;
display: block;
border: 1px solid var(--border-slim-color);
border-radius: 16px;
padding: 16px;
text-align: center;
@ -38,27 +28,33 @@ customElements.define('register-user-form', class extends Component {
color: var(--border-slim-color);
margin: 8px;
}
#or {
text-align: center;
}
@media only screen and (min-device-width: 1200px) {
#icons .option {
display: block;
border-radius: 16px;
padding: 16px;
text-align: center;
cursor: pointer;
}
.option svg, .option facebook-button {
#formSection svg {
width: 200px;
display: inline-block;
}
#social {
display: flex;
justify-content: start;
}
#social > div {
margin-right: 16px;
}
facebook-button {
width: 64px;
}
facebook-button[fb-sdk="false"] {
width: auto;
}
}
${ FORM_STYLE }
</style>
<section id="icons">
<div class="option">
<svg id="email-icon" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
<path d="M123.25 24.192c0-.018 0-.034-.005-.052s-.007-.063-.009-.094a1.734 1.734 0 0 0-.083-.408c-.006-.018 0-.037-.011-.055s-.01-.015-.013-.023a1.734 1.734 0 0 0-.227-.407c-.021-.028-.043-.053-.066-.08a1.755 1.755 0 0 0-.31-.294c-.012-.009-.022-.02-.034-.028a1.744 1.744 0 0 0-.414-.2c-.034-.012-.068-.022-.1-.032a1.733 1.733 0 0 0-.474-.073H6.5a1.733 1.733 0 0 0-.474.073c-.035.01-.068.02-.1.032a1.744 1.744 0 0 0-.414.2c-.012.008-.022.019-.034.028a1.755 1.755 0 0 0-.31.294c-.022.027-.045.052-.066.08a1.734 1.734 0 0 0-.227.407c0 .008-.01.015-.013.023s-.005.037-.011.055a1.734 1.734 0 0 0-.083.408c0 .032-.009.063-.009.094s-.005.034-.005.052v79.615c0 .023.006.045.007.068a1.737 1.737 0 0 0 .019.188c.008.051.015.1.027.152a1.74 1.74 0 0 0 .056.179c.017.047.033.094.054.139a1.729 1.729 0 0 0 .093.172c.024.04.048.081.075.119a1.743 1.743 0 0 0 .125.152c.033.036.066.072.1.106.021.019.037.042.059.061s.036.017.052.03a1.736 1.736 0 0 0 .452.263c.035.014.071.022.107.033a1.732 1.732 0 0 0 .488.085c.012 0 .023.006.035.006H121.501c.012 0 .023-.006.034-.006a1.732 1.732 0 0 0 .489-.085c.035-.011.07-.019.1-.033a1.736 1.736 0 0 0 .453-.263c.016-.013.036-.017.052-.03s.038-.042.059-.061c.036-.034.069-.069.1-.106a1.743 1.743 0 0 0 .125-.152c.027-.038.051-.078.075-.119a1.729 1.729 0 0 0 .093-.172c.021-.045.037-.092.054-.139a1.74 1.74 0 0 0 .056-.179c.012-.05.019-.1.027-.152a1.737 1.737 0 0 0 .019-.188c0-.023.007-.045.007-.068zM45.8 60.316l17.058 14.677a1.751 1.751 0 0 0 2.283 0L82.2 60.316l35.512 41.741H10.289zM8.25 99.052V28.007l34.9 30.026zm76.6-41.019 34.9-30.026v71.045zm31.931-32.091L81.276 56.493c-.006.005-.014.008-.02.014l-.019.02L64 71.358 46.763 56.527l-.019-.02-.02-.014-35.507-30.551z"/>
</svg>
<article>
<h2>Utwórz konto</h2>
<section id="formSection">
<form id="form" method="post" action="/register">
<input type="hidden" id="account_type" name="account_type" value="User">
<input type="hidden" id="facebook_id" name="facebook_id">
@ -78,11 +74,13 @@ customElements.define('register-user-form', class extends Component {
<input type="submit" value="Zarejestruj" />
</div>
</form>
</div>
<div class="option">
</section>
<section id="social">
<div id="or">lub zaloguj się za pomocą:</div>
<facebook-button></facebook-button>
</div>
</section>
</section>
</article>
`);
const form = this.shadowRoot.querySelector('form');
@ -100,17 +98,10 @@ customElements.define('register-user-form', class extends Component {
form.querySelector('#account_type').value = 'User';
form.submit();
});
this.shadowRoot.querySelector('#email-icon').addEventListener('click', ev => {
ev.stopPropagation();
ev.preventDefault();
this.mode = 'email';
});
}
connectedCallback() {
this.mode = '';
this.mode = 'email';
}
attributeChangedCallback(name, oldV, newV) {

2
client/src/register-form/register-user-type.js
View File

@ -106,7 +106,7 @@ customElements.define('register-user-type', class extends Component {
<path d="M489.4 171.05c0-2.1-.5-4.1-1.6-5.9l-72.8-128c-2.1-3.7-6.1-6.1-10.4-6.1H84.7c-4.3 0-8.3 2.3-10.4 6.1l-72.7 128c-1 1.8-1.6 3.8-1.6 5.9 0 28.7 17.3 53.3 42 64.2v211.1c0 6.6 5.4 12 12 12h381.3c6.6 0 12-5.4 12-12v-209.6c0-.5 0-.9-.1-1.3 24.8-10.9 42.2-35.6 42.2-64.4zM91.7 55.15h305.9l56.9 100.1H34.9l56.8-100.1zm256.6 124c-3.8 21.6-22.7 38-45.4 38s-41.6-16.4-45.4-38h90.8zm-116.3 0c-3.8 21.6-22.7 38-45.4 38s-41.6-16.4-45.5-38H232zm-207.2 0h90.9c-3.8 21.6-22.8 38-45.5 38-22.7.1-41.6-16.4-45.4-38zm176.8 255.2h-69v-129.5c0-9.4 7.6-17.1 17.1-17.1h34.9c9.4 0 17.1 7.6 17.1 17.1v129.5h-.1zm221.7 0H225.6v-129.5c0-22.6-18.4-41.1-41.1-41.1h-34.9c-22.6 0-41.1 18.4-41.1 41.1v129.6H66v-193.3c1.4.1 2.8.1 4.2.1 24.2 0 45.6-12.3 58.2-31 12.6 18.7 34 31 58.2 31s45.5-12.3 58.2-31c12.6 18.7 34 31 58.1 31 24.2 0 45.5-12.3 58.1-31 12.6 18.7 34 31 58.2 31 1.4 0 2.7-.1 4.1-.1v193.2zm-4.1-217.1c-22.7 0-41.6-16.4-45.4-38h90.9c-3.9 21.5-22.8 38-45.5 38z"/>
</svg>
<div>Usługodawca</div>
<div class="tip">Usługodawca posiadający stałe usłuugi lub produkty w ofercie</div>
<div class="tip">Usługodawca posiadający stałe usługi lub produkty w ofercie</div>
</a>
</li>
</ul>

1
client/src/shared/facebook-button.js
View File

@ -12,6 +12,7 @@ customElements.define('facebook-button', class extends Component {
<style>
:host {
display: block;
cursor: pointer;
}
#not-available {
display: block;

7
client/src/shared/image-input.js
View File

@ -84,6 +84,7 @@ customElements.define('image-input', class extends Component {
maxWidth = maxWidth < image.naturalWidth ? maxWidth : image.naturalWidth;
maxHeight = maxHeight < image.naturalHeight ? maxHeight : image.naturalHeight;
}
console.warn(this.send_original, maxWidth, maxHeight)
const width = image.width > image.height
? maxWidth
@ -133,7 +134,7 @@ customElements.define('image-input', class extends Component {
get width() {
const v = parseInt(this.getAttribute('width'));
return isNaN(v) ? 200 : v;
return isNaN(v) ? 1000 : v;
}
set width(v) {
@ -142,7 +143,7 @@ customElements.define('image-input', class extends Component {
get height() {
const v = parseInt(this.getAttribute('height'));
return isNaN(v) ? 200 : v;
return isNaN(v) ? 1000 : v;
}
set height(v) {
@ -190,7 +191,7 @@ customElements.define('image-input', class extends Component {
}
get send_original() {
return this.getAttribute('send-original') === 'true';
return this.hasAttribute('send-original');
}
set send_original(v) {

11
server/assets/templates/account.html
View File

@ -2,13 +2,18 @@
{% block content %}
{% match account.as_ref() %}
{% when Some with (a) %}
<ow-account
mode="display"
<account-view
id="{{a.id}}"
name="{{a.login}}"
email="{{a.email}}"
facebook-id="{{a.facebook_id.as_deref().unwrap_or_default()}}"
></ow-account>
>
{% if h.is_above_user(account) -%}
<a id="editService" slot="editService" href="/account/business-items" title="Moje usługi" class="btn">
Edytuj usługi
</a>
{%- endif %}
</account-view>
{% when None %}
<ow-account
mode="form"

10
server/assets/templates/nav.html
View File

@ -48,16 +48,6 @@
<div>Konto</div>
</ow-path>
{% if h.is_above_user(account) -%}
<ow-path path="/account/business-items" selected="{{ page.select_account_business() }}" title="Moje usługi">
<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path d="M25 26a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V5h10V3H5v23a3 3 0 0 0 3 3h16a3 3 0 0 0 3-3V13h-2Z"/>
<path d="M27.12 2.88a3.08 3.08 0 0 0-4.24 0L17 8.75l-1 5.3L21.25 13l5.87-5.87a3 3 0 0 0 0-4.25Zm-6.86 8.27-1.76.35.35-1.76 3.32-3.33 1.42 1.42Zm5.45-5.44-.71.7L23.59 5l.7-.71a1 1 0 0 1 1.42 0 1 1 0 0 1 0 1.42Z"/>
</svg>
<div>Moje usługi</div>
</ow-path>
{%- endif %}
{% if h.is_admin(account) -%}
<ow-path path="/admin" selected="{{ page.select_admin_news() }}" title="Admin">
<svg viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">

8
server/src/model/view.rs
View File

@ -60,14 +60,6 @@ impl Page {
}
}
pub fn select_account_business(&self) -> &str {
if matches!(self, Page::AccountBusinessItems) {
"selected"
} else {
""
}
}
pub fn select_marketplace(&self) -> &str {
if matches!(self, Page::Marketplace | Page::AccountOffers) {
"selected"

4
server/src/routes/restricted/contacts.rs
View File

@ -105,7 +105,9 @@ async fn delete_contact(
Err(e) => {
dbg!(e);
t.rollback().await.ok();
Ok(HttpResponse::BadRequest().body("Nie można usunąć danych kontaktowych"))
Ok(HttpResponse::BadRequest()
.content_type("text/html")
.body("Nie można usunąć danych kontaktowych"))
}
}
}

12
server/src/routes/unrestricted/account.rs
View File

@ -33,7 +33,9 @@ impl AccountTemplate {
}
pub fn bad_request<Error: Into<String>>(error: Error, page: Page) -> Result<HttpResponse> {
Ok(HttpResponse::BadRequest().body(AccountTemplate::error(error, page).render().unwrap()))
Ok(HttpResponse::BadRequest()
.content_type("text/html")
.body(AccountTemplate::error(error, page).render().unwrap()))
}
}
@ -109,7 +111,7 @@ async fn register(
Err(e) => {
dbg!(e);
t.rollback().await.unwrap();
return Ok(HttpResponse::BadRequest().body(
return Ok(HttpResponse::BadRequest().content_type("text/html").body(
AccountTemplate {
error: Some("Problem z utworzeniem konta".into()),
page: Page::Register,
@ -250,7 +252,7 @@ async fn login(form: web::Form<LoginForm>, db: Data<PgPool>, id: Identity) -> Re
error!("{e:?}");
dbg!(e);
t.rollback().await.ok();
return Ok(HttpResponse::Ok().body(
return Ok(HttpResponse::Ok().content_type("text/html").body(
AccountTemplate {
error: Some("Nie znaleziono konta".into()),
page: Page::Login,
@ -265,7 +267,7 @@ async fn login(form: web::Form<LoginForm>, db: Data<PgPool>, id: Identity) -> Re
error!("{e}");
dbg!(e);
t.rollback().await.ok();
return Ok(HttpResponse::BadRequest().body(
return Ok(HttpResponse::BadRequest().content_type("text/html").body(
AccountTemplate {
error: Some("Hasło i/lub adres e-mail są nieprawidłowe".into()),
page: Page::Login,
@ -318,7 +320,7 @@ async fn account_page(id: Identity, db: Data<PgPool>) -> Result<HttpResponse> {
}
};
t.commit().await.ok();
Ok(HttpResponse::Ok().body(
Ok(HttpResponse::Ok().content_type("text/html").body(
AccountTemplate {
account,
page: Page::Account,

2
server/src/routes/unrestricted/terms.rs
View File

@ -17,7 +17,7 @@ pub struct TermsTemplate {
#[get("/terms-and-condition")]
pub async fn terms_and_condition() -> HttpResponse {
HttpResponse::Ok().body(
HttpResponse::Ok().content_type("text/html").body(
TermsTemplate {
page: Page::Terms,
..Default::default()