Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

integrations: Fix arrangement of left sidebar `back to list` button. 

I rearranged the elements of the left sidebar in HTML in order to appear
in the order they are displayed and removed the absolute positioning,
because it was not needed if the elements are arranged correctly. I used
`flex` display to arrange them on column.

I removed the styling that positioned the elements absolutely.

Then I tweaked the margins in order to make the elements look good.

Fixes: #12929
This commit is contained in:
Alexandra Ciobica 2019-08-15 22:17:05 +03:00 committed by Tim Abbott
parent d761bbc2ed
commit 84e0327d10
3 changed files with 12 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
static/js/portico/integrations.js
View File

@ -169,7 +169,7 @@ function hide_catalog_show_integration() {
$('#integration-instruction-block .integration-lozenge').remove(); $('#integration-instruction-block .integration-lozenge').remove();
$("#integration-instruction-block") $("#integration-instruction-block")
.append($lozenge_icon) .append($lozenge_icon)
.css('display', 'block'); .css('display', 'flex');
$('.integration-instructions#' + state.integration).css('display', 'block'); $('.integration-instructions#' + state.integration).css('display', 'block');
$("#integration-list-link").css('display', 'block'); $("#integration-list-link").css('display', 'block');

21
static/styles/portico/integrations.scss
View File

@ -262,7 +262,8 @@
.portico-landing.integrations .integration-instruction-block .integration-lozenge { .portico-landing.integrations .integration-instruction-block .integration-lozenge {
width: 125px; width: 125px;
height: 170px; height: 170px;
margin: 0 21px; margin: 0 21px 20px;
order: 1;
} }
.portico-landing.integrations .integration-instruction-block .integration-lozenge .integration-category { .portico-landing.integrations .integration-instruction-block .integration-lozenge .integration-category {
@ -278,8 +279,7 @@
} }
.portico-landing.integrations .integration-instruction-block .categories { .portico-landing.integrations .integration-instruction-block .categories {
position: absolute; order: 2;
top: 230px;
} }
.portico-landing.integrations .integration-instruction-block .categories .integration-category { .portico-landing.integrations .integration-instruction-block .categories .integration-category {
@ -333,10 +333,8 @@
} }
#integration-list-link { #integration-list-link {
position: absolute;
text-align: center;
display: none; display: none;
margin-left: 5px; margin-left: 30px;
} }
#integration-list-link span { #integration-list-link span {
@ -344,6 +342,10 @@
margin-left: 5px; margin-left: 5px;
} }
#integration-instruction-block {
flex-direction: column;
}
/* -- media queries -- */ /* -- media queries -- */
@media (min-width: 768px) { @media (min-width: 768px) {
.integration-instructions { .integration-instructions {
@ -351,8 +353,7 @@
} }
#integration-list-link { #integration-list-link {
top: 200px; margin-top: 15px;
left: 30px;
} }
} }
@ -470,7 +471,7 @@
} }
#integration-instruction-block { #integration-instruction-block {
display: flex !important; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 20px; margin-bottom: 20px;
@ -483,7 +484,6 @@
} }
#integration-instruction-block .integration-lozenge { #integration-instruction-block .integration-lozenge {
order: 1;
border: none; border: none;
display: flex !important; display: flex !important;
@ -534,7 +534,6 @@
} }
#integration-list-link { #integration-list-link {
order: 2;
position: unset; position: unset;
font-size: 22px; font-size: 22px;
} }

2
templates/zerver/integrations/index.html
View File

@ -138,8 +138,8 @@
<div id="integration-instructions-group"> <div id="integration-instructions-group">
<div id="integration-instruction-block" class="integration-instruction-block"> <div id="integration-instruction-block" class="integration-instruction-block">
<a href="/integrations" id="integration-list-link" class="no-underline"><i class="fa fa-arrow-circle-left" aria-hidden="true"></i><span>Back to list</span></a>
<div class="categories"></div> <div class="categories"></div>
<a href="/integrations" id="integration-list-link" class="no-underline"><i class="fa fa-arrow-circle-left" aria-hidden="true"></i><span>Back to list</span></a>
</div> </div>
{% for integration in integrations_dict.values() %} {% for integration in integrations_dict.values() %}