Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Using flexbox for graphs, row direction in regulra devices and column…
… for small ones intermine#10
  • Loading branch information
AdrianBZG committed Sep 11, 2018
1 parent dfc9e34 commit 7faeacb
Show file tree
Hide file tree
Showing 4 changed files with 42 additions and 12 deletions.
16 changes: 16 additions & 0 deletions public/stylesheets/hmb-style-main.css
Expand Up @@ -236,6 +236,22 @@ button {
padding: 5px;
}

#graphsBoxBody {
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
}

@media (max-width: 991px) {
#graphsBoxBody {
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
}
}

.smaller {
font-size: 0.7rem;
}
Expand Down
16 changes: 16 additions & 0 deletions src/scss/_global.scss
Expand Up @@ -221,4 +221,20 @@ label {

button{
padding: 5px;
}

#graphsBoxBody {
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
}

@media (max-width: 991px) {
#graphsBoxBody {
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
}
}
13 changes: 6 additions & 7 deletions views/genes.pug
Expand Up @@ -18,16 +18,15 @@ html(lang='en')
.row

.col-xs-12(style="padding-left: 25px; padding-bottom: 15px; padding-right: 25px;")
.card(style="width: 100%; height: 100%;")
.card-header
#graphsBoxBody.card
.card-header(style="width: 100%; height: 100%;")
i.fa.fa-pie-chart
| Graphs
.card-body
.row
#PieChartHolder.col-xs-6(style='float:left; width: 50%;')
canvas#PieChart(width='200px', height='250px')
#PieChart2Holder.col-xs-6(style='float:right; width: 50%;')
canvas#GeneLengthChart(width='200px', height='250px')
#PieChartHolder(style='float:left; width: 50%;')
canvas#PieChart(width='200px', height='250px')
#PieChart2Holder(style='float:right; width: 50%;')
canvas#GeneLengthChart(width='200px', height='250px')


.row.row-centered
Expand Down
9 changes: 4 additions & 5 deletions views/proteins.pug
Expand Up @@ -26,11 +26,10 @@ html(lang='en')
i.fa.fa-pie-chart
| Graphs
.card-body
.row
#PieChartHolder.col-xs-6(style='float:left; width: 50%;')
canvas#PieChart(width='200px', height='250px')
#PieChart2Holder.col-xs-6(style='float:right; width: 50%;')
canvas#GeneLengthChart(width='200px', height='250px')
#PieChartHolder.col-xs-6(style='float:left; width: 50%;')
canvas#PieChart(width='200px', height='250px')
#PieChart2Holder.col-xs-6(style='float:right; width: 50%;')
canvas#GeneLengthChart(width='200px', height='250px')

.row.row-centered

Expand Down

0 comments on commit 7faeacb

Please sign in to comment.