brewpipeline · tikitko · Dec 27, 2023 · Dec 26, 2023 · Dec 26, 2023 · Dec 26, 2023
diff --git a/index.css b/index.css
@@ -1,6 +1,9 @@
 :root {
     --header-height: 70px;
     --bs-border-radius: 5px;
+
+    --tg-color: #54a9eb;
+    --tg-img: url(data:image/svg+xml,%3Csvg%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m1.95617055%2011.392196c5.77764656-2.42328736%209.63031585-4.02086673%2011.55800785-4.79273807%205.5039525-2.20384954%206.6476266-2.5866818%207.3930574-2.59932314.1639507-.00278035.5305319.0363352.7679878.22182361.2005031.15662277.2556695.36819788.2820684.51669348.026399.1484956.0592719.48677234.0331404.75109194-.2982611%203.0169019-1.5888322%2010.33812718-2.2454015%2013.71710898-.2778191%201.4297738-.8288514%201.7357846-1.3584441%201.7826999-1.1509274.1019576-2.0208916-.5588425-3.1356211-1.2622918-1.7443316-1.1007592-2.3854935-1.3972358-4.0786694-2.4713734-1.95675765-1.2413519-.8891962-1.8911034.2259543-3.0061212.2918402-.2918054%205.3989024-4.83750096%205.497052-5.24030969.0122753-.05037796-.1557336-.55407742-.2716182-.65323489-.1158847-.09915747-.2869204-.06524947-.4103446-.03828214-.17495.03822537-2.9615423%201.81132342-8.35977698%205.31929412-.79096496.5228681-1.50739646.7776269-2.1492945.7642766-.70764107-.0147176-2.06885864-.3851791-3.08078398-.7018404-1.24116762-.388398-1.69932554-.5713149-1.61342745-1.2309348.04474105-.3435709.36011227-.7024173.94611366-1.0765391z%22%20fill%3D%22%23fff%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
 }
 
 .card {
@@ -216,7 +219,7 @@
     background-position-x: 98%;
     background-position-y: 40%;
     background-repeat: no-repeat;
-    background-image: url(data:image/svg+xml,%3Csvg%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m1.95617055%2011.392196c5.77764656-2.42328736%209.63031585-4.02086673%2011.55800785-4.79273807%205.5039525-2.20384954%206.6476266-2.5866818%207.3930574-2.59932314.1639507-.00278035.5305319.0363352.7679878.22182361.2005031.15662277.2556695.36819788.2820684.51669348.026399.1484956.0592719.48677234.0331404.75109194-.2982611%203.0169019-1.5888322%2010.33812718-2.2454015%2013.71710898-.2778191%201.4297738-.8288514%201.7357846-1.3584441%201.7826999-1.1509274.1019576-2.0208916-.5588425-3.1356211-1.2622918-1.7443316-1.1007592-2.3854935-1.3972358-4.0786694-2.4713734-1.95675765-1.2413519-.8891962-1.8911034.2259543-3.0061212.2918402-.2918054%205.3989024-4.83750096%205.497052-5.24030969.0122753-.05037796-.1557336-.55407742-.2716182-.65323489-.1158847-.09915747-.2869204-.06524947-.4103446-.03828214-.17495.03822537-2.9615423%201.81132342-8.35977698%205.31929412-.79096496.5228681-1.50739646.7776269-2.1492945.7642766-.70764107-.0147176-2.06885864-.3851791-3.08078398-.7018404-1.24116762-.388398-1.69932554-.5713149-1.61342745-1.2309348.04474105-.3435709.36011227-.7024173.94611366-1.0765391z%22%20fill%3D%22%23fff%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
+    background-image: var(--tg-img);
 }
 
 .telegramAuth .telegramAuthContainer {
@@ -263,4 +266,12 @@ article .article-iframe {
 
 img {
     color: transparent;
+}
+
+.bi-tg::before {
+    content: var(--tg-img)!important;
+}
+
+.bg-color-tg {
+    background-color: var(--tg-color)!important;
 }
diff --git a/src/components/auth_user_block.rs b/src/components/auth_user_block.rs
@@ -11,25 +11,63 @@ use crate::Route;
 pub fn auth_user_block() -> Html {
     let logged_user_context = use_context::<LoggedUserContext>().unwrap();
 
+    let social_tries = use_state_eq(|| 0);
+
     if logged_user_context.is_not_inited() {
         return html! {};
     }
 
+    let social_tries_out = *social_tries >= 2;
+
     let Some(_) = logged_user_context.token().cloned() else {
-        return html! {
+        #[cfg(feature = "telegram")]
+        let tg_button = Some(html! {
             <button
-                title="Войти"
-                aria-label="Войти"
+                title="Войти через Telegram"
+                aria-label="Войти через Telegram"
                 type="button"
-                class="item btn btn-light"
-                data-bs-toggle="modal"
-                data-bs-target="#loginModal"
+                class={ classes!(
+                    "item",
+                    "btn",
+                    "bg-color-tg",
+                    { if social_tries_out { "d-none" } else { "d-block" } }
+                ) }
+                ONCLICK="return TWidgetLogin.auth();"
+                onclick={
+                    let social_tries = social_tries.clone();
+                    move |_e: MouseEvent| social_tries.set(*social_tries + 1)
+                }
             >
-                <div class="d-block d-lg-none">
-                    <i class="bi bi-person-add"></i>
-                </div>
-                <div class="d-none d-lg-block"> { "Войти" } </div>
+                <i class="bi bi-tg"></i>
             </button>
+        });
+        #[cfg(not(feature = "telegram"))]
+        let tg_button: Option<Html> = None;
+
+        return html! {
+            <>
+                { tg_button.clone() }
+                <button
+                    title="Войти"
+                    aria-label="Войти"
+                    type="button"
+                    class={ classes!(
+                        "item",
+                        "btn",
+                        "btn-light",
+                        { if tg_button == None || social_tries_out { "d-block" } else { "d-none" } }
+                    ) }
+                    data-bs-toggle="modal"
+                    data-bs-target="#loginModal"
+                >
+                    <div class="d-block d-lg-none">
+                        <i class="bi bi-person-add"></i>
+                    </div>
+                    <div class="d-none d-lg-block">
+                        { "Войти" }
+                    </div>
+                </button>
+            </>
         };
     };
 

diff --git a/src/pages/edit_post.rs b/src/pages/edit_post.rs
@@ -284,20 +284,19 @@ pub fn edit_post(props: &EditPostProps) -> Html {
             .map(|h| h.checked())
             .unwrap_or(post_published);
         html! {
-            <>
-                <form>
-                    <h5 class="mb-3">
-                        if let Some(post) = post.as_ref() {
-                            { "Редактирование публикации: " }
-                            { post.title.clone() }
-                        } else {
-                            { "Новая публикация" }
-                        }
-                    </h5>
-
+            <div class="card"><div class="card-body">
+                <h5 class="card-title mb-3">
+                    if let Some(post) = post.as_ref() {
+                        { "Редактирование публикации: " }
+                        { post.title.clone() }
+                    } else {
+                        { "Новая публикация" }
+                    }
+                </h5>
+                <form class="card-text">
                     <div
-                        class="mb-4 border rounded-3 d-flex align-items-center justify-content-center p-3 py-6"
-                        style="font-size: 10em"
+                        class="mb-3 border rounded-3 d-flex align-items-center justify-content-center p-3 py-6"
+                        style="font-size: 10em;"
                         role="img"
                     >
                         <i class="bi bi-file-post"></i>
@@ -408,7 +407,7 @@ pub fn edit_post(props: &EditPostProps) -> Html {
                         </div>
                     }
 
-                    <div class="mb-3">
+                    <div>
                         <button
                             class="btn btn-light"
                             type="submit"
@@ -462,7 +461,7 @@ pub fn edit_post(props: &EditPostProps) -> Html {
                     #[cfg(not(feature = "client"))]
                     unreachable!()
                 }} deps={ () } />
-            </>
+            </div></div>
         }
     });