dossier: improve header layout on small screens

- A long procedure title can now overflow under the status label
- Better icon placement
This commit is contained in:
Pierre de La Morinerie 2018-08-10 15:32:39 +02:00
parent 18d13d76d8
commit c7ba3cbd59
2 changed files with 30 additions and 25 deletions

View file

@ -2,24 +2,32 @@
@import "constants";
#dossier-show {
h1 {
color: $black;
font-size: 22px;
margin-bottom: 0;
.sub-header {
.label {
float: right;
margin-left: $default-spacer;
}
.icon.folder {
vertical-align: -3px;
.title-container {
margin-bottom: $default-padding * 2;
padding-left: 32px;
.icon.folder {
float: left;
margin-left: -32px;
margin-top: 3px;
}
}
h1 {
color: $black;
font-size: 22px;
margin-bottom: 0;
}
h2 {
color: $grey;
font-weight: bold;
}
}
h2 {
margin-left: 31px;
margin-bottom: $default-padding;
color: $grey;
font-weight: bold;
}
.sub-header .label {
flex-shrink: 0;
}
}

View file

@ -1,14 +1,11 @@
.sub-header
.container
.flex.justify-between.align-baseline
.title-container
%h1
%span.icon.folder
= dossier.procedure.libelle
%h2
Dossier nº #{dossier.id}
= render partial: 'shared/dossiers/status', locals: { dossier: dossier }
= render partial: 'shared/dossiers/status', locals: { dossier: dossier }
.title-container
%span.icon.folder
%h1= dossier.procedure.libelle
%h2 Dossier nº #{dossier.id}
%ul.tabs
%li.active