tg-button+fix-align (#64)

brewpipeline · Dec 11, 2024 · cd67e98 · cd67e98
1 parent 466b933
commit cd67e98
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 3 deletions.
diff --git a/index.css b/index.css
@@ -231,6 +231,27 @@
     margin-left: 30px;
 }
 
+.telegram-button {
+    padding: 0px;
+}
+
+.telegram-button .inner {
+    border-radius: 5px;
+    background-position: revert;
+    background-size: 130px;
+    background-position-x: 100%;
+    background-position-y: 5px;
+    background-repeat: no-repeat;
+    background-image: var(--tg-img);
+    height: 100px; 
+    text-align: initial; 
+    vertical-align: initial; 
+    display: flex;
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 195px;
+}
+
 article .article-img {
     position: relative!important;
     left: -12px!important;

diff --git a/src/components/navigation_menu.rs b/src/components/navigation_menu.rs
@@ -14,6 +14,30 @@ pub fn navigation_menu() -> Html {
             .author()
             .map(|a| a.editor == 1)
             .unwrap_or(false);
+
+
+    #[cfg(feature = "telegram")]
+    let tg_button: Option<Html> = Some(html! {
+        <button 
+            title="Войти через Telegram"
+            aria-label="Войти через Telegram"
+            type="button"
+            data-bs-toggle="modal"
+            data-bs-target="#loginModal"
+            class="btn btn-light telegram-button"
+        >
+            <div class="btn inner">
+                <p>
+                    <span>{ "Войти через" }</span>
+                    <br/>
+                    <span>{ "Telegram" }</span>
+                </p>
+            </div>
+        </button>
+    });
+    #[cfg(not(feature = "telegram"))]
+    let tg_button: Option<Html> = None;
+
     html! {
         <>
             <Link<Route>
@@ -66,6 +90,7 @@ pub fn navigation_menu() -> Html {
                     { "Неопубликованное" }
                 </Link<Route>>
             }
+            { tg_button }
         </>
     }
 }
diff --git a/src/components/post_card.rs b/src/components/post_card.rs
@@ -112,13 +112,13 @@ pub fn post_card(props: &PostCardProps) -> Html {
         <div class="card mb-3">
             <div class="card-header placeholder-glow border-0">
                 <div class="row align-items-center">
-                    <div class="d-flex col-6 align-items-center justify-content-start" style="height:24px;">
+                    <div class="d-flex col-5 align-items-center justify-content-start" style="height:24px;">
                         <div class="img-block rounded me-1" style="height:24px;width:24px;overflow:hidden;">
                             <AuthorImage author={ post.as_ref().map(|p| p.author.clone()) } />
                         </div>
                         if let Some(post) = &post {
                             <Link<Route, (), Author>
-                                classes={ classes!("text-decoration-none") }
+                                classes="text-decoration-none"
                                 to={ Route::Author { slug: post.author.slug.clone() } }
                                 state={ Some(post.author.clone()) }
                             >
@@ -130,7 +130,7 @@ pub fn post_card(props: &PostCardProps) -> Html {
                             <span class="placeholder col-3 bg-secondary"></span>
                         }
                     </div>
-                    <div class="d-flex col-6 align-items-center justify-content-end" style="height: 24px;">
+                    <div class="d-flex col-7 align-items-center justify-content-end" style="height: 24px;">
                         <DelayedComponent<Option<Post>> component={ |post: Option<Post>| html! {
                             if let Some(post) = post {
                                 <small> { date::format(post.created_at) } </small>