diff --git a/app/static/styles.css b/app/static/styles.css index eabb86b7..41c86ecb 100644 --- a/app/static/styles.css +++ b/app/static/styles.css @@ -873,7 +873,6 @@ div.navbar { .post_teaser_body { position: relative; - padding-bottom: 32px; } .post_teaser_article_preview, .post_teaser_link_preview { @@ -969,12 +968,6 @@ time { width: 100%; } -.post_utilities_bar_wrapper { - position: absolute; - bottom: -9px; - width: 97%; -} - .post_utilities_bar { display: flex; min-height: 44px; @@ -986,38 +979,16 @@ time { justify-content: left; } } -.post_utilities_bar .cross_post_button { +.post_utilities_bar div { display: flex; - justify-content: left; + justify-content: center; align-items: center; - width: 44px; - height: 44px; - line-height: 44px; - padding: 3px; - padding-left: 0; -} -.post_utilities_bar .post_replies_link { - display: flex; min-width: 44px; height: 44px; - padding: 3px; - align-items: center; - margin-left: -3px; + line-height: 44px; } -.post_utilities_bar .voting_buttons_new { - display: flex; - height: 44px; - padding: 3px; - justify-content: center; - align-items: center; -} -.post_utilities_bar .post_cross_post_link, .post_utilities_bar .post_options_link, .post_utilities_bar .preview_image { - display: flex; - width: 44px; - height: 44px; - padding: 3px; - justify-content: center; - align-items: center; +.post_utilities_bar .notify_toggle { + margin-left: auto; /* pull right */ } .post_full .post_utilities_bar .voting_buttons_new { @@ -1213,9 +1184,6 @@ time { height: auto; } -.voting_buttons_new { - display: inline-block; -} .voting_buttons_new .upvote_button, .voting_buttons_new .downvote_button { position: relative; /* so the htmx-indicators can be position: absolute */ display: inline-block; @@ -1396,26 +1364,27 @@ time { } .comment .comment_actions { margin-top: -18px; - position: relative; - padding-bottom: 5px; + display: flex; + min-height: 44px; + /* justify-content: space-between; */ + justify-content: left; } -.comment .comment_actions a { - text-decoration: none; - padding: 0; +@media (min-width: 992px) { + .comment .comment_actions { + justify-content: left; + } } -.comment .comment_actions .hide_button { - display: inline-block; -} -.comment .comment_actions .hide_button a { - padding: 5px 15px; +.comment .comment_actions div { + display: flex; + justify-content: center; + align-items: center; + min-width: 44px; + height: 44px; + line-height: 44px; } .comment .comment_actions .notify_toggle { - display: inline-block; -} -.comment .comment_actions .notify_toggle a { - text-decoration: none; + margin-left: auto; /* pull right */ font-size: 87%; - padding: 5px 15px; } .comment .replies { margin-top: 0; @@ -1883,30 +1852,6 @@ form h5 { margin-bottom: 10px; } -.post_options_link { - display: block; - width: 41px; - text-decoration: none; -} - -.comment_actions_link { - display: block; - position: absolute; - top: 3px; - right: -16px; - width: 41px; - text-decoration: none; -} - -.notify_toggle { - display: block; - position: absolute; - top: 2px; - right: 30px; - width: 41px; - text-decoration: none; -} - .alert { width: 96%; } diff --git a/app/static/styles.scss b/app/static/styles.scss index e5fa0451..896523d9 100644 --- a/app/static/styles.scss +++ b/app/static/styles.scss @@ -469,7 +469,6 @@ div.navbar { .post_teaser_body { position: relative; - padding-bottom: 32px; } .post_teaser_article_preview, .post_teaser_link_preview { @@ -571,12 +570,6 @@ time { width: 100%; } -.post_utilities_bar_wrapper { - position: absolute; - bottom: -9px; - width: 97%; -} - .post_utilities_bar { display: flex; min-height: $min-touch-target; @@ -586,41 +579,17 @@ time { justify-content: left; } - .cross_post_button { + div { display: flex; - justify-content: left; + justify-content: center; align-items: center; - width: $min-touch-target; - height: $min-touch-target; - line-height: $min-touch-target; - padding: 3px; - padding-left: 0; - } - - .post_replies_link { - display: flex; min-width: $min-touch-target; height: $min-touch-target; - padding: 3px; - align-items: center; - margin-left: -3px; + line-height: $min-touch-target; } - .voting_buttons_new { - display: flex; - height: $min-touch-target; - padding: 3px; - justify-content: center; - align-items: center; - } - - .post_cross_post_link, .post_options_link, .preview_image { - display: flex; - width: $min-touch-target; - height: $min-touch-target; - padding: 3px; - justify-content: center; - align-items: center; + .notify_toggle { + margin-left: auto; /* pull right */ } } @@ -848,8 +817,6 @@ time { } .voting_buttons_new { - display: inline-block; - .upvote_button, .downvote_button { position: relative; /* so the htmx-indicators can be position: absolute */ display: inline-block; @@ -1059,28 +1026,26 @@ time { .comment_actions { margin-top: -18px; - position: relative; - padding-bottom: 5px; - a { - text-decoration: none; - padding: 0; + display: flex; + min-height: $min-touch-target; + /* justify-content: space-between; */ + justify-content: left; + @include breakpoint(tablet) { + justify-content: left; } - .hide_button { - display: inline-block; - - a { - padding: 5px 15px; - } + div { + display: flex; + justify-content: center; + align-items: center; + min-width: $min-touch-target; + height: $min-touch-target; + line-height: $min-touch-target; } .notify_toggle { - display: inline-block; - a { - text-decoration: none; - font-size: 87%; - padding: 5px 15px; - } + margin-left: auto; /* pull right */ + font-size: 87%; } } @@ -1594,30 +1559,6 @@ form { margin-bottom: 10px; } -.post_options_link { - display: block; - width: 41px; - text-decoration: none; -} - -.comment_actions_link { - display: block; - position: absolute; - top: 3px; - right: -16px; - width: 41px; - text-decoration: none; -} - -.notify_toggle { - display: block; - position: absolute; - top: 2px; - right: 30px; - width: 41px; - text-decoration: none; -} - .alert { width: 96%; } diff --git a/app/templates/post/_post_full.html b/app/templates/post/_post_full.html index 931f8eed..79e2fe1e 100644 --- a/app/templates/post/_post_full.html +++ b/app/templates/post/_post_full.html @@ -2,9 +2,6 @@