Mobile fixes

client/src/app.js

@@ -41,10 +41,10 @@ import "./contacts/contact-info-editor.js";
 import "./contacts/contact-type-icon.js";
 import "./contacts/edit-contact-info.js";
 
-import "./offers/marketplace-offer.js";
-import "./offers/marketplace-offers.js";
-import "./offers/offer-form.js";
-import "./offers/user-edit-offer.js";
+import "./marketplace/marketplace-offer.js";
+import "./marketplace/marketplace-offers.js";
+import "./marketplace/offer-form.js";
+import "./marketplace/user-edit-offer.js";
 
 import "./terms_and_conditions/terms-and-conditions.js";
 import "./terms_and_conditions/privacy-policy.js";

client/src/contacts/contact-info-list.js

@@ -5,8 +5,15 @@ customElements.define('contact-info-list', class extends Component {
         super(`
             <style>
                 :host { display: block; }
+                article {
+                    display: flex;
+                }
+                @media only screen and (min-device-width: 1000px) {
+                }
             </style>
-            <slot></slot>
+            <article>
+                <slot></slot>
+            </article>
         `);
     }
 });

client/src/marketplace/marketplace-offers.js

@@ -17,16 +17,23 @@ customElements.define('marketplace-offers', class extends Component {
                 }
                 #offers {
                     display: block;
+                    padding: 8px;
+                }
+                #publishSection {
+                    display: none;
+                }
+                :host([account-id]) #publishSection {
+                    display: block;
                 }
                 ::slotted(marketplace-offer), ::slotted(user-edit-offer) {
-                    width: 100%;
-                    margin: 0 20px 20px;
+                    margin-bottom: 20px;
                 }
                 @media only screen and (min-device-width: 1000px) {
                     #offers {
                         display: flex;
                         justify-content: space-between;
                         flex-wrap: wrap;
+                        justify-items: stretch;
                     }
                     ::slotted(marketplace-offer), ::slotted(user-edit-offer) {
                         width: calc(33% - 40px);
@@ -36,7 +43,7 @@ customElements.define('marketplace-offers', class extends Component {
                 ${ BUTTON_STYLE }
             </style>
             <article>
-                <section>
+                <section id="publishSection">
                     <button id="publish" class="btn">Dodaj ogłoszenie</button>
                 </section>
                 <section><slot></slot></section>

client/src/marketplace/offer-form.js

@@ -142,7 +142,7 @@ customElements.define('offer-form', class extends Component {
         const form = this.shadowRoot.querySelector('form');
         const input = form.querySelector('#offer-id');
         input && input.remove();
-        form.action = '/offers/create';
+        form.action = '/marketplace/create';
         form.querySelector('input[type=submit]').value = 'Utwórz';
     }
 
@@ -154,7 +154,7 @@ customElements.define('offer-form', class extends Component {
         input.setAttribute('name', 'id');
         input.setAttribute('id', 'offer-id');
         input.value = v;
-        form.action = '/offers/update';
+        form.action = '/marketplace/update';
         form.querySelector('input[type=submit]').value = 'Zmień';
     }
 });

server/assets/templates/marketplace/new.html

@@ -0,0 +1,7 @@
+{% extends "../base.html" %}
+{% block content %}
+<marketplace-offers>
+    <h2>Tworzenie oferty</h2>
+    <offer-form></offer-form>
+</marketplace-offers>
+{% endblock %}

server/src/routes/unrestricted/marketplace.rs

@@ -73,6 +73,53 @@ async fn marketplace(req: HttpRequest, db: Data<PgPool>, id: Identity) -> HttpRe
     )
 }
 
+#[derive(Default, Serialize, Template)]
+#[template(path = "./marketplace/new.html")]
+struct NewOfferTemplate {
+    account: Option<db::Account>,
+    error: Option<String>,
+    page: Page,
+    #[serde(skip)]
+    h: Helper,
+}
+
+#[get("/new")]
+async fn new_marketplace(req: HttpRequest, db: Data<PgPool>, id: Identity) -> HttpResult {
+    let pool = db.into_inner();
+    let mut t = crate::ok_or_internal!(&req, pool.begin().await);
+    let account = match id.identity() {
+        Some(id) => queries::account_by_id(&mut t, id).await,
+        _ => None,
+    };
+    let account = match account {
+        Some(a) => a,
+        _ => {
+            return HttpResult::res(
+                &req,
+                StatusCode::NOT_FOUND,
+                NewOfferTemplate {
+                    page: Page::Marketplace,
+                    account,
+                    error: Some("Musisz być zalogowany żeby to zrobić".into()),
+                    ..Default::default()
+                },
+            )
+        }
+    };
+
+    t.commit().await.ok();
+
+    HttpResult::res(
+        &req,
+        StatusCode::OK,
+        NewOfferTemplate {
+            page: Page::Marketplace,
+            account: Some(account),
+            ..Default::default()
+        },
+    )
+}
+
 #[derive(Default, Serialize, Template)]
 #[template(path = "./marketplace/edit.html")]
 struct EditOfferTemplate {
@@ -148,6 +195,7 @@ async fn edit_marketplace(
 pub fn configure(config: &mut ServiceConfig) {
     config.service(
         web::scope("/marketplace")
+            .service(new_marketplace)
             .service(edit_marketplace)
             .service(marketplace),
     );