From b08e34c112a774f43d8bcf015ba48ee723ebcb74 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Benjamin=20B=C3=A4dorf?= Date: Wed, 26 Jan 2022 13:19:35 +0100 Subject: [PATCH 1/5] Fix news headline avatar alignment --- app/views/homescreen/blocks/_news.html.erb | 20 ++---- .../grids/widgets/news/news.component.html | 68 ++++++++++--------- .../global_styles/content/_autocomplete.sass | 9 +++ frontend/src/global_styles/content/_news.sass | 7 +- .../global_styles/content/_widget_box.sass | 46 +++++++------ 5 files changed, 83 insertions(+), 67 deletions(-) diff --git a/app/views/homescreen/blocks/_news.html.erb b/app/views/homescreen/blocks/_news.html.erb index c5aebfb7a4..17fd5c63df 100644 --- a/app/views/homescreen/blocks/_news.html.erb +++ b/app/views/homescreen/blocks/_news.html.erb @@ -2,20 +2,14 @@ <% unless @news.empty? %> diff --git a/frontend/src/app/shared/components/grids/widgets/news/news.component.html b/frontend/src/app/shared/components/grids/widgets/news/news.component.html index ca366fdb97..8090daf854 100644 --- a/frontend/src/app/shared/components/grids/widgets/news/news.component.html +++ b/frontend/src/app/shared/components/grids/widgets/news/news.component.html @@ -1,5 +1,7 @@ - +
- - +
    -
  • -
    - -
    - - : - - -
    -
    - -
    -
    -

    -
    +
  • + +
    + : +
    +
    +

\ No newline at end of file diff --git a/frontend/src/global_styles/content/_autocomplete.sass b/frontend/src/global_styles/content/_autocomplete.sass index c75d1fd2e3..c88d9509f4 100644 --- a/frontend/src/global_styles/content/_autocomplete.sass +++ b/frontend/src/global_styles/content/_autocomplete.sass @@ -182,9 +182,18 @@ mark.ui-autocomplete-match .ng-dropdown-panel z-index: 9500 !important +// This is such a big selector because we need to overwrite the ng-select defaults, +// which comes with a 3-class selector by default. +.ng-dropdown-panel .ng-dropdown-panel-items div.ng-option + display: flex + .ng-option font-size: 14px line-height: 22px + + .op-avatar + margin-right: 8px + .work-package-table--container .ng-dropdown-panel z-index: auto !important diff --git a/frontend/src/global_styles/content/_news.sass b/frontend/src/global_styles/content/_news.sass index ad4aff07ee..a20864528a 100644 --- a/frontend/src/global_styles/content/_news.sass +++ b/frontend/src/global_styles/content/_news.sass @@ -40,17 +40,16 @@ font-size: 0.8rem color: var(--gray-dark) display: block - padding: 5px 0 5px 40px + padding: 5px 0 5px 0px line-height: 1.25 .news-author-avatar line-height: 1 + .op-avatar - margin-right: 5px - float: left + margin-right: 10px .news--project - display: inline @media screen and (max-width: 679px) .news-author diff --git a/frontend/src/global_styles/content/_widget_box.sass b/frontend/src/global_styles/content/_widget_box.sass index 0e6555d93e..ead3e4fcb1 100644 --- a/frontend/src/global_styles/content/_widget_box.sass +++ b/frontend/src/global_styles/content/_widget_box.sass @@ -133,13 +133,9 @@ $widget-box--enumeration-width: 20px text-transform: uppercase font-weight: bold -.widget-box--additional-info - font-style: italic - margin-bottom: 0.5rem - .widget-box--arrow-links list-style: none - margin: 0.5rem 0 1rem 20px + margin: 0.5rem 0 1rem 0 &:last-child margin-bottom: 0 @@ -152,24 +148,36 @@ $widget-box--enumeration-width: 20px font-size: 0.6rem color: var(--content-icon-link-color) width: $widget-box--enumeration-width - margin-left: -20px - .-widget-box--arrow-multiline - &:before - line-height: 2 - float: left +.widget-box--arrow-multiline + display: grid + grid-template-columns: auto auto 1fr + grid-template-rows: auto auto auto + margin-bottom: 10px + + &:before + grid-column: 1/2 + grid-row: 1/3 + align-self: center + justify-self: center - &:after - clear: both - content: "" - display: table +.widget-box--avatar + grid-column: 2/3 + grid-row: 1/3 - > div - float: left - margin-bottom: 10px - //necessary for correct alignment even with long texts - width: calc(100% - #{$widget-box--enumeration-width}) +.widget-box--project + grid-column: 3/4 + grid-row: 1/2 +.widget-box--author + grid-column: 3/4 + grid-row: 2/3 + +.widget-box--additional-info + grid-column: 2/4 + grid-row: 3/4 + font-style: italic + margin-bottom: 0.5rem @include breakpoint(680px down) .widget-boxes From 243e14903f6dbc84600646f060ef6f0f5509467c Mon Sep 17 00:00:00 2001 From: bsatarnejad Date: Wed, 26 Jan 2022 15:44:42 +0100 Subject: [PATCH 2/5] handle text overflow in op-autocompleter --- .../op-autocompleter/op-autocompleter.component.html | 2 +- .../op-autocompleter/op-autocompleter.component.sass | 4 +--- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/frontend/src/app/shared/components/autocompleter/op-autocompleter/op-autocompleter.component.html b/frontend/src/app/shared/components/autocompleter/op-autocompleter/op-autocompleter.component.html index e6ff642099..dba8c71fb4 100644 --- a/frontend/src/app/shared/components/autocompleter/op-autocompleter/op-autocompleter.component.html +++ b/frontend/src/app/shared/components/autocompleter/op-autocompleter/op-autocompleter.component.html @@ -170,7 +170,7 @@ class="op-autocompleter--option-principal-avatar" size="mini" > - {{ item.name }} + {{ item.name }} diff --git a/frontend/src/app/shared/components/autocompleter/op-autocompleter/op-autocompleter.component.sass b/frontend/src/app/shared/components/autocompleter/op-autocompleter/op-autocompleter.component.sass index 5f3e1747ec..89a8173998 100644 --- a/frontend/src/app/shared/components/autocompleter/op-autocompleter/op-autocompleter.component.sass +++ b/frontend/src/app/shared/components/autocompleter/op-autocompleter/op-autocompleter.component.sass @@ -52,6 +52,4 @@ &--option-principal &-wrapper display: flex - - &-avatar - margin-right: 5px \ No newline at end of file + overflow: hidden \ No newline at end of file From 3c004313d6f85d0e3b45f9d8f1fe8d0de871ecb9 Mon Sep 17 00:00:00 2001 From: bsatarnejad Date: Thu, 27 Jan 2022 14:46:00 +0100 Subject: [PATCH 3/5] make option label aligned to the top instead of baseline --- frontend/src/global_styles/content/_autocomplete.sass | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/frontend/src/global_styles/content/_autocomplete.sass b/frontend/src/global_styles/content/_autocomplete.sass index c88d9509f4..076b259df7 100644 --- a/frontend/src/global_styles/content/_autocomplete.sass +++ b/frontend/src/global_styles/content/_autocomplete.sass @@ -182,10 +182,8 @@ mark.ui-autocomplete-match .ng-dropdown-panel z-index: 9500 !important -// This is such a big selector because we need to overwrite the ng-select defaults, -// which comes with a 3-class selector by default. -.ng-dropdown-panel .ng-dropdown-panel-items div.ng-option - display: flex +.ng-option-label + vertical-align: top .ng-option font-size: 14px From e772f94cfab58d2d27ea93573752c05dba9ee7fc Mon Sep 17 00:00:00 2001 From: bsatarnejad Date: Wed, 9 Feb 2022 07:21:37 +0100 Subject: [PATCH 4/5] remove unnecessary styles --- app/views/homescreen/blocks/_news.html.erb | 2 +- .../shared/components/grids/widgets/news/news.component.html | 2 +- frontend/src/global_styles/content/_news.sass | 3 --- 3 files changed, 2 insertions(+), 5 deletions(-) diff --git a/app/views/homescreen/blocks/_news.html.erb b/app/views/homescreen/blocks/_news.html.erb index 17fd5c63df..e567987054 100644 --- a/app/views/homescreen/blocks/_news.html.erb +++ b/app/views/homescreen/blocks/_news.html.erb @@ -4,7 +4,7 @@ <% @news.each do |news| %>
  • <%= avatar(news.author, class: 'widget-box--avatar news-author-avatar hidden-for-mobile') %> -
    +
    <%= link_to_project(news.project) + ': ' %> <%= link_to h(news.title), news_path(news) %>
    diff --git a/frontend/src/app/shared/components/grids/widgets/news/news.component.html b/frontend/src/app/shared/components/grids/widgets/news/news.component.html index 8090daf854..1c4ade0fd2 100644 --- a/frontend/src/app/shared/components/grids/widgets/news/news.component.html +++ b/frontend/src/app/shared/components/grids/widgets/news/news.component.html @@ -25,7 +25,7 @@ [hideName]="true" class="widget-box--avatar news-author-avatar hidden-for-mobile" > -
    +
    Date: Fri, 11 Feb 2022 08:32:54 +0100 Subject: [PATCH 5/5] display "inline-flex" has a default alignment on the baseline which cause misalignments between avatars with images and fallback avatars --- frontend/src/global_styles/content/_avatar.sass | 1 - frontend/src/global_styles/content/_principal.sass | 1 + 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/global_styles/content/_avatar.sass b/frontend/src/global_styles/content/_avatar.sass index a1fc8a386b..a438e7cd38 100644 --- a/frontend/src/global_styles/content/_avatar.sass +++ b/frontend/src/global_styles/content/_avatar.sass @@ -24,7 +24,6 @@ width: var(--user-avatar-mini-width) min-width: var(--user-avatar-mini-width) height: var(--user-avatar-mini-height) - margin-right: 10px -5px line-height: var(--user-avatar-mini-height) font-size: 10px diff --git a/frontend/src/global_styles/content/_principal.sass b/frontend/src/global_styles/content/_principal.sass index 105e413965..8c622ffa03 100644 --- a/frontend/src/global_styles/content/_principal.sass +++ b/frontend/src/global_styles/content/_principal.sass @@ -1,6 +1,7 @@ .op-principal display: inline-flex align-items: center + vertical-align: middle &--avatar flex-grow: 0