From fa14859a6a8d84a1c60f4b805f329d3cb92376b0 Mon Sep 17 00:00:00 2001 From: Andreas Nedbal Date: Sun, 19 Apr 2020 23:13:39 +0200 Subject: [PATCH] Adjust dropdowns to Bootstrap 4 layout --- app/views/layouts/_notifications.html.haml | 220 +++++++++--------- app/views/layouts/_profile.html.haml | 61 +++-- app/views/moderation/_discussion.html.haml | 9 +- app/views/shared/_answerbox.html.haml | 24 +- app/views/shared/_answerbox_buttons.html.haml | 32 ++- app/views/shared/_comments.html.haml | 23 +- 6 files changed, 174 insertions(+), 195 deletions(-) diff --git a/app/views/layouts/_notifications.html.haml b/app/views/layouts/_notifications.html.haml index 34f27641..4a3583ff 100644 --- a/app/views/layouts/_notifications.html.haml +++ b/app/views/layouts/_notifications.html.haml @@ -8,119 +8,115 @@ %i.fa.fa-bell %span.sr-only Notifications %span.badge= notification_count - %ul.dropdown-menu.notification-center + .dropdown-menu.notification-center - if notifications.count == 0 - %li.text-center - .notifications--none - %i.fa.fa-bell-o.no-notifications - %p No new notifications. - %li.text-center - %a{href: notifications_path('all')} - %i.fa.fa-fw.fa-chevron-right - Show all notifications + .dropdown-item.text-center.notifications--none + %i.fa.fa-bell-o.no-notifications + %p No new notifications. + %a.dropdown-item.text-center{href: notifications_path('all')} + %i.fa.fa-fw.fa-chevron-right + Show all notifications - else - notifications.each do |notification| - %li - .media.notification--dropdown-media - - case notification.target_type - - when "Answer" - .pull-left - %i.fa.fa-2x.fa-fw.fa-exclamation - .media-body - .notification--heading - %img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)} - = user_screen_name notification.target.user - answered - = link_to "your question", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.id) - = time_tooltip(notification.target) - ago - .list-group.notification--list - .list-group-item - .media.question-media - .media-body - %h6.notification--list-heading question - .notification--list-content - = markdown notification.target.question.content[0..60] + "#{notification.target.question.content.length > 60 ? '[...]' : ''}" - .list-group-item - .media.question-media - .media-body - %h6.notification--list-heading answer - .notification--list-content - = markdown notification.target.content[0..60] + "#{notification.target.content.length > 60 ? '[...]' : ''}" - - when "Relationship" - .pull-left - %img.img-rounded.notification--dropdown-img{src: notification.target.source.profile_picture.url(:small)} - .media-body - %h6.media-heading.notification--dropdown-user - = user_screen_name notification.target.source - .notification--dropdown-text - = raw t('views.notifications.relationship.body', time: time_ago_in_words(notification.target.created_at)) - - when "Smile" - .pull-left - %i.fa.fa-2x.fa-fw.fa-smile-o - .media-body - .notification--heading - %img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)} - = user_screen_name notification.target.user - smiled + .dropdown-item.media.notification--dropdown-media + - case notification.target_type + - when "Answer" + .pull-left + %i.fa.fa-2x.fa-fw.fa-exclamation + .media-body + .notification--heading + %img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)} + = user_screen_name notification.target.user + answered + = link_to "your question", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.id) + = time_tooltip(notification.target) + ago + .list-group.notification--list + .list-group-item + .media.question-media + .media-body + %h6.notification--list-heading question + .notification--list-content + = markdown notification.target.question.content[0..60] + "#{notification.target.question.content.length > 60 ? '[...]' : ''}" + .list-group-item + .media.question-media + .media-body + %h6.notification--list-heading answer + .notification--list-content + = markdown notification.target.content[0..60] + "#{notification.target.content.length > 60 ? '[...]' : ''}" + - when "Relationship" + .pull-left + %img.img-rounded.notification--dropdown-img{src: notification.target.source.profile_picture.url(:small)} + .media-body + %h6.media-heading.notification--dropdown-user + = user_screen_name notification.target.source + .notification--dropdown-text + = raw t('views.notifications.relationship.body', time: time_ago_in_words(notification.target.created_at)) + - when "Smile" + .pull-left + %i.fa.fa-2x.fa-fw.fa-smile-o + .media-body + .notification--heading + %img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)} + = user_screen_name notification.target.user + smiled + = link_to "your answer", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id) + = time_tooltip(notification.target) + ago + .list-group.notification--list + .list-group-item + .media.question-media + .media-body + %h6.notification--list-heading answer + .notification--list-content + = markdown notification.target.answer.content[0..60] + "#{notification.target.answer.content.length > 60 ? '[...]' : ''}" + - when "CommentSmile" + .pull-left + %i.fa.fa-2x.fa-fw.fa-smile-o + .media-body + .notification--heading + %img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)} + = user_screen_name notification.target.user + smiled + = link_to "your comment", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.comment.answer.id) + = time_tooltip(notification.target) + ago + .list-group.notification--list + .list-group-item + .media.question-media + .media-body + %h6.notification--list-heading comment + .notification--list-content + = markdown notification.target.comment.content[0..60] + "#{notification.target.comment.content.length > 60 ? '[...]' : ''}" + - when "Comment" + .pull-left + %i.fa.fa-2x.fa-fw.fa-comments + .media-body + .notification--heading + %img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)} + = user_screen_name notification.target.user + commented on + - if notification.target.answer.user == current_user = link_to "your answer", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id) - = time_tooltip(notification.target) - ago - .list-group.notification--list - .list-group-item - .media.question-media - .media-body - %h6.notification--list-heading answer - .notification--list-content - = markdown notification.target.answer.content[0..60] + "#{notification.target.answer.content.length > 60 ? '[...]' : ''}" - - when "CommentSmile" - .pull-left - %i.fa.fa-2x.fa-fw.fa-smile-o - .media-body - .notification--heading - %img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)} - = user_screen_name notification.target.user - smiled - = link_to "your comment", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.comment.answer.id) - = time_tooltip(notification.target) - ago - .list-group.notification--list - .list-group-item - .media.question-media - .media-body - %h6.notification--list-heading comment - .notification--list-content - = markdown notification.target.comment.content[0..60] + "#{notification.target.comment.content.length > 60 ? '[...]' : ''}" - - when "Comment" - .pull-left - %i.fa.fa-2x.fa-fw.fa-comments - .media-body - .notification--heading - %img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)} - = user_screen_name notification.target.user - commented on - - if notification.target.answer.user == current_user - = link_to "your answer", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id) - - elsif notification.target.user == notification.target.answer.user - = link_to "their answer", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id) - - else - = link_to "#{notification.target.answer.user.screen_name}'s answer", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id) - = time_tooltip(notification.target) - ago - .list-group.notification--list - .list-group-item - .media.question-media - .media-body - %h6.notification--list-heading answer - .notification--list-content - = markdown notification.target.answer.content[0..60] + "#{notification.target.answer.content.length > 60 ? '[...]' : ''}" - .list-group-item - .media.question-media - .media-body - %h6.notification--list-heading comment - .notification--list-content - = markdown notification.target.content[0..60] + "#{notification.target.content.length > 60 ? '[...]' : ''}" - %li.text-center - %a{href: notifications_path} - %i.fa.fa-fw.fa-chevron-right - Show all new notifications + - elsif notification.target.user == notification.target.answer.user + = link_to "their answer", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id) + - else + = link_to "#{notification.target.answer.user.screen_name}'s answer", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id) + = time_tooltip(notification.target) + ago + .list-group.notification--list + .list-group-item + .media.question-media + .media-body + %h6.notification--list-heading answer + .notification--list-content + = markdown notification.target.answer.content[0..60] + "#{notification.target.answer.content.length > 60 ? '[...]' : ''}" + .list-group-item + .media.question-media + .media-body + %h6.notification--list-heading comment + .notification--list-content + = markdown notification.target.content[0..60] + "#{notification.target.content.length > 60 ? '[...]' : ''}" + %a.dropdown-item.text-center{href: notifications_path} + %i.fa.fa-fw.fa-chevron-right + Show all new notifications diff --git a/app/views/layouts/_profile.html.haml b/app/views/layouts/_profile.html.haml index 9983862f..4fdf6e52 100644 --- a/app/views/layouts/_profile.html.haml +++ b/app/views/layouts/_profile.html.haml @@ -1,41 +1,34 @@ %li.dropdown.profile--image-dropdown %a.dropdown-toggle{href: "#", "data-toggle" => "dropdown"} %img.profile--image-avatar.hidden-xs{src: current_user.profile_picture.url(:small)} - %span.visible-xs + %span.d-none.d-sm-inline.d-md-none = current_user.screen_name %b.caret - %ul.dropdown-menu - %li.dropdown-header.hidden-xs= current_user.screen_name - %li - %a{href: show_user_profile_path(current_user.screen_name)} - %i.fa.fa-fw.fa-user - = t('views.navigation.show') - %li - %a{href: edit_user_registration_path} - %i.fa.fa-fw.fa-cog - = t('views.navigation.settings') - %li.divider + .dropdown-menu + %h6.dropdown-header.hidden-xs= current_user.screen_name + %a.dropdown-item{href: show_user_profile_path(current_user.screen_name)} + %i.fa.fa-fw.fa-user + = t('views.navigation.show') + %a.dropdown-item{href: edit_user_registration_path} + %i.fa.fa-fw.fa-cog + = t('views.navigation.settings') + .dropdown-divider - if current_user.admin? - %li - %a{href: rails_admin_path} - %i.fa.fa-fw.fa-cogs - = t('views.navigation.admin') - %li - %a{href: sidekiq_web_path} - %i.fa.fa-fw.fa-bar-chart - = t('views.navigation.sidekiq') - %li - %a{href: pghero_path} - %i.fa.fa-fw.fa-database - Database Monitor - %li.divider + %a.dropdown-item{href: rails_admin_path} + %i.fa.fa-fw.fa-cogs + = t('views.navigation.admin') + %a.dropdown-item{href: sidekiq_web_path} + %i.fa.fa-fw.fa-bar-chart + = t('views.navigation.sidekiq') + %a.dropdown-item{href: pghero_path} + %i.fa.fa-fw.fa-database + Database Monitor + .dropdown-divider - if current_user.mod? - %li - %a{href: moderation_path} - %i.fa.fa-fw.fa-gavel - = t('views.navigation.moderation') - %li.divider - %li - %a{href: destroy_user_session_path, data: {method: :delete} } - %i.fa.fa-fw.fa-sign-out - = t 'views.sessions.destroy' + %a.dropdown-item{href: moderation_path} + %i.fa.fa-fw.fa-gavel + = t('views.navigation.moderation') + .dropdown-divider + %a.dropdown-item{href: destroy_user_session_path, data: {method: :delete} } + %i.fa.fa-fw.fa-sign-out + = t 'views.sessions.destroy' diff --git a/app/views/moderation/_discussion.html.haml b/app/views/moderation/_discussion.html.haml index 66a41285..2872f42a 100644 --- a/app/views/moderation/_discussion.html.haml +++ b/app/views/moderation/_discussion.html.haml @@ -17,11 +17,10 @@ .btn-group %button.btn.btn-link.btn-sm.dropdown-toggle{data: { toggle: :dropdown }, aria: { expanded: :false }} %span.caret - %ul.dropdown-menu.dropdown-menu-right{role: :menu} - %li.text-danger - %a{href: '#', tabindex: -1, data: { action: 'mod-comment-destroy', id: comment.id }} - %i.fa.fa-trash-o - = t 'views.actions.delete' + .dropdown-menu.dropdown-menu-right{role: :menu} + %a.dropdown-item.text-danger{href: '#', tabindex: -1, data: { action: 'mod-comment-destroy', id: comment.id }} + %i.fa.fa-trash-o + = t 'views.actions.delete' %p.comments--content= comment.content .form-group.has-feedback{name: 'mod-comment-new-group', data: { id: report.id }} %input.form-control.comments--box{type: :text, placeholder: t('views.placeholder.comment'), name: 'mod-comment-new', data: { id: report.id }} diff --git a/app/views/shared/_answerbox.html.haml b/app/views/shared/_answerbox.html.haml index 7439f1d9..03d0b851 100644 --- a/app/views/shared/_answerbox.html.haml +++ b/app/views/shared/_answerbox.html.haml @@ -1,6 +1,6 @@ -.panel.panel-default.answerbox{data: { id: a.id, q_id: a.question.id }} +.card.card-default.answerbox{data: { id: a.id, q_id: a.question.id }} - if @question.nil? - .panel-heading + .card-header .media.question-media - unless a.question.author_is_anonymous %a.pull-left{href: show_user_profile_path(a.question.user.screen_name)} @@ -11,17 +11,15 @@ .btn-group %button.btn.btn-link.btn-sm.dropdown-toggle{data: { toggle: :dropdown }, aria: { expanded: :false }} %span.caret - %ul.dropdown-menu.dropdown-menu-right{role: :menu} + .dropdown-menu.dropdown-menu-right{role: :menu} - if current_user.mod? or a.question.user == current_user - %li.text-danger - %a{href: '#', tabindex: -1, data: { action: 'ab-question-destroy', q_id: a.question.id }} - %i.fa.fa-trash-o - = t 'views.actions.delete' + %a.dropdown-item.text-danger{href: '#', tabindex: -1, data: { action: 'ab-question-destroy', q_id: a.question.id }} + %i.fa.fa-trash-o + = t 'views.actions.delete' - unless a.question.user == current_user - %li - %a{href: '#', tabindex: -1, data: { action: 'ab-question-report', q_id: a.question.id }} - %i.fa.fa-exclamation-triangle - = t 'views.actions.report' + %a.dropdown-item{href: '#', tabindex: -1, data: { action: 'ab-question-report', q_id: a.question.id }} + %i.fa.fa-exclamation-triangle + = t 'views.actions.report' %h6.text-muted.media-heading.answerbox--question-user = raw t('views.answerbox.asked', user: user_screen_name(a.question.user, anonymous: a.question.author_is_anonymous), time: time_tooltip(a.question)) - unless a.question.author_is_anonymous @@ -31,7 +29,7 @@ = pluralize(a.question.answer_count, t('views.general.answer')) .answerbox--question-text = a.question.content - .panel-body + .card-body - if @display_all.nil? .answerbox--answer-text = markdown a.content[0..255] @@ -64,6 +62,6 @@ = link_to(raw(t('views.answerbox.time', time: time_tooltip(a))), show_user_answer_path(a.user.screen_name, a.id)) .col-md-6.col-sm-8.col-xs-6.text-right = render 'shared/answerbox_buttons', a: a - .panel-footer{id: "ab-comments-section-#{a.id}", style: @display_all.nil? ? 'display: none' : nil } + .card-footer{id: "ab-comments-section-#{a.id}", style: @display_all.nil? ? 'display: none' : nil } %div{id: "ab-smiles-#{a.id}"}= render 'shared/smiles', a: a %div{id: "ab-comments-#{a.id}"}= render 'shared/comments', a: a diff --git a/app/views/shared/_answerbox_buttons.html.haml b/app/views/shared/_answerbox_buttons.html.haml index b8de32c4..d6aacc01 100644 --- a/app/views/shared/_answerbox_buttons.html.haml +++ b/app/views/shared/_answerbox_buttons.html.haml @@ -21,25 +21,21 @@ .btn-group %button.btn.btn-default.btn-sm.dropdown-toggle{data: { toggle: :dropdown }, aria: { expanded: :false }} %span.caret - %ul.dropdown-menu.dropdown-menu-right{role: :menu} + .dropdown-menu.dropdown-menu-right{role: :menu} - if Subscription.is_subscribed(current_user, a) - %li - -# fun joke should subscribe? - %a{href: '#', data: { a_id: a.id, action: 'ab-submarine', torpedo: "no" }} - %i.fa.fa-anchor - = t 'views.actions.unsubscribe' + -# fun joke should subscribe? + %a.dropdown-item{href: '#', data: { a_id: a.id, action: 'ab-submarine', torpedo: "no" }} + %i.fa.fa-anchor + = t 'views.actions.unsubscribe' - else - %li - %a{href: '#', data: { a_id: a.id, action: 'ab-submarine', torpedo: "yes" }} - %i.fa.fa-anchor - = t 'views.actions.subscribe' + %a.dropdown-item{href: '#', data: { a_id: a.id, action: 'ab-submarine', torpedo: "yes" }} + %i.fa.fa-anchor + = t 'views.actions.subscribe' - if privileged? a.user - %li.text-danger - %a{href: '#', data: { a_id: a.id, action: 'ab-destroy' }} - %i.fa.fa-trash-o - = t 'views.actions.return' + %a.dropdown-item.text-danger{href: '#', data: { a_id: a.id, action: 'ab-destroy' }} + %i.fa.fa-trash-o + = t 'views.actions.return' - unless a.user == current_user - %li - %a{href: '#', data: { a_id: a.id, action: 'ab-report' }} - %i.fa.fa-exclamation-triangle - = t 'views.actions.report' + %a.dropdown-item{href: '#', data: { a_id: a.id, action: 'ab-report' }} + %i.fa.fa-exclamation-triangle + = t 'views.actions.report' diff --git a/app/views/shared/_comments.html.haml b/app/views/shared/_comments.html.haml index aa22431d..cf0c13c9 100644 --- a/app/views/shared/_comments.html.haml +++ b/app/views/shared/_comments.html.haml @@ -32,21 +32,18 @@ .btn-group %button.btn.btn-link.btn-sm.dropdown-toggle{data: { toggle: :dropdown }, aria: { expanded: :false }} %span.caret - %ul.dropdown-menu.dropdown-menu-right{role: :menu} - %li - %a{href: '#', type: :button, data: { target: "#modal-view-comment#{comment.id}-smiles", toggle: :modal}} - %i.fa.fa-smile-o - = t 'views.actions.view' + .dropdown-menu.dropdown-menu-right{role: :menu} + %a.dropdown-item{href: '#', type: :button, data: { target: "#modal-view-comment#{comment.id}-smiles", toggle: :modal}} + %i.fa.fa-smile-o + = t 'views.actions.view' - if privileged?(comment.user) or privileged?(a.user) - %li.text-danger - %a{href: '#', data: { action: 'ab-comment-destroy', c_id: comment.id }} - %i.fa.fa-trash-o - = t 'views.actions.delete' + %a.dropdown-item.text-danger{href: '#', data: { action: 'ab-comment-destroy', c_id: comment.id }} + %i.fa.fa-trash-o + = t 'views.actions.delete' - unless comment.user == current_user - %li - %a{href: '#', data: { action: 'ab-comment-report', c_id: comment.id }} - %i.fa.fa-exclamation-triangle - = t 'views.acions.report' + %a.dropdown-item{href: '#', data: { action: 'ab-comment-report', c_id: comment.id }} + %i.fa.fa-exclamation-triangle + = t 'views.acions.report' .comments--content = markdown comment.content - if user_signed_in?