Merge pull request #652 from sgmap/new-tabs
Redesign the tabs so that they look more like tabs
This commit is contained in:
commit
dd929ef3bd
7 changed files with 64 additions and 89 deletions
|
@ -4,19 +4,53 @@
|
|||
.tabs {
|
||||
li {
|
||||
display: inline-block;
|
||||
margin-right: 40px;
|
||||
}
|
||||
line-height: 36px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
border-radius: 3px 3px 0 0;
|
||||
border: 1px solid transparent;
|
||||
|
||||
a {
|
||||
@include vertical-padding(14px);
|
||||
display: block;
|
||||
color: $black;
|
||||
font-size: 22px;
|
||||
a {
|
||||
display: block;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
color: $black;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: #FFFFFF;
|
||||
border-top: 1px solid $border-grey;
|
||||
border-left: 1px solid $border-grey;
|
||||
border-right: 1px solid $border-grey;
|
||||
|
||||
a {
|
||||
color: $blue;
|
||||
}
|
||||
|
||||
.badge {
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
|
||||
&.selected,
|
||||
&:hover {
|
||||
border-bottom: 2px solid $blue;
|
||||
padding-bottom: 12px;
|
||||
a {
|
||||
color: $blue;
|
||||
}
|
||||
|
||||
.badge {
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
background-color: rgba(0, 0, 0, 0.08);
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
border-radius: 100px;
|
||||
font-weight: bold;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -25,7 +25,7 @@
|
|||
margin-right: 4 * $default-spacer;
|
||||
}
|
||||
|
||||
.header-left-menu {
|
||||
.header-tabs {
|
||||
li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
|
@ -13,57 +13,6 @@
|
|||
margin-bottom: 2 * $default-padding;
|
||||
}
|
||||
|
||||
.dossiers-categories {
|
||||
li {
|
||||
display: inline-block;
|
||||
height: 56px;
|
||||
width: 130px;
|
||||
line-height: 17px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
|
||||
a {
|
||||
color: $black;
|
||||
}
|
||||
|
||||
&::before,
|
||||
&:last-child::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 36px;
|
||||
width: 1px;
|
||||
background-color: $border-grey;
|
||||
margin-right: $default-padding;
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
&:last-child::after {
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-bottom: 2px solid $blue;
|
||||
|
||||
a {
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
|
||||
.dossiers-count {
|
||||
position: relative;
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dossiers-table {
|
||||
margin: (2 * $default-padding) auto;
|
||||
width: 100%;
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
%img{ src: image_url("header/logo-tps.svg") }
|
||||
|
||||
- if gestionnaire_signed_in?
|
||||
%ul.header-left-menu
|
||||
%ul.header-tabs
|
||||
%li
|
||||
= link_to "Procédures", procedures_path, class: "active"
|
||||
|
||||
|
|
|
@ -6,11 +6,11 @@
|
|||
%li
|
||||
= "Dossier n° #{dossier.id}"
|
||||
%ul.tabs
|
||||
%li
|
||||
= link_to "Demande", dossier_path(dossier.procedure, dossier), class: ("selected" if current_page?(dossier_path(dossier.procedure, dossier)))
|
||||
%li
|
||||
= link_to "Instruction", instruction_dossier_path(dossier.procedure, dossier), class: current_page?(instruction_dossier_path(dossier.procedure, dossier)) ? 'selected' : nil
|
||||
%li
|
||||
= link_to "Messagerie", messagerie_dossier_path(dossier.procedure, dossier), class: current_page?(messagerie_dossier_path(dossier.procedure, dossier)) ? 'selected' : nil
|
||||
%li{ class: current_page?(dossier_path(dossier.procedure, dossier)) ? 'active' : nil }
|
||||
= link_to "Demande", dossier_path(dossier.procedure, dossier)
|
||||
%li{ class: current_page?(instruction_dossier_path(dossier.procedure, dossier)) ? 'active' : nil }
|
||||
= link_to "Instruction", instruction_dossier_path(dossier.procedure, dossier)
|
||||
%li{ class: current_page?(messagerie_dossier_path(dossier.procedure, dossier)) ? 'active' : nil }
|
||||
= link_to "Messagerie", messagerie_dossier_path(dossier.procedure, dossier)
|
||||
%li
|
||||
= link_to "Historique", "#"
|
||||
|
|
|
@ -6,31 +6,31 @@
|
|||
|
||||
.width-100
|
||||
%h1= @procedure.libelle
|
||||
%ul.dossiers-categories
|
||||
%ul.tabs
|
||||
%li{ class: (@statut == 'a-suivre') ? 'active' : nil }>
|
||||
= link_to(procedure_path(@procedure, statut: 'a-suivre')) do
|
||||
%span.dossiers-count= @a_suivre_dossiers.count
|
||||
à suivre
|
||||
%span.badge= @a_suivre_dossiers.count
|
||||
|
||||
%li{ class: (@statut == 'suivis') ? 'active' : nil }>
|
||||
= link_to(procedure_path(@procedure, statut: 'suivis')) do
|
||||
%span.dossiers-count= @followed_dossiers.count
|
||||
= t('pluralize.followed', count: @followed_dossiers.count)
|
||||
%span.badge= @followed_dossiers.count
|
||||
|
||||
%li{ class: (@statut == 'traites') ? 'active' : nil }>
|
||||
= link_to(procedure_path(@procedure, statut: 'traites')) do
|
||||
%span.dossiers-count= @termines_dossiers.count
|
||||
= t('pluralize.processed', count: @termines_dossiers.count)
|
||||
%span.badge= @termines_dossiers.count
|
||||
|
||||
%li{ class: (@statut == 'tous') ? 'active' : nil }>
|
||||
= link_to(procedure_path(@procedure, statut: 'tous')) do
|
||||
%span.dossiers-count= @all_state_dossiers.count
|
||||
tous les dossiers
|
||||
%span.badge= @all_state_dossiers.count
|
||||
|
||||
%li{ class: (@statut == 'archives') ? 'active' : nil }>
|
||||
= link_to(procedure_path(@procedure, statut: 'archives')) do
|
||||
%span.dossiers-count= @archived_dossiers.count
|
||||
= t('pluralize.archived', count: @archived_dossiers.count)
|
||||
%span.badge= @archived_dossiers.count
|
||||
|
||||
.container
|
||||
- if @dossiers.present?
|
||||
|
|
|
@ -51,16 +51,6 @@
|
|||
%p
|
||||
= link_to ".button.primary.expand", "#", class: "button primary expand"
|
||||
|
||||
%h1 Onglets
|
||||
|
||||
%ul.tabs
|
||||
%li
|
||||
= link_to "Onglet 1", "#", class: "selected"
|
||||
%li
|
||||
= link_to "Onglet 2", "#"
|
||||
%li
|
||||
= link_to "Onglet 3", "#"
|
||||
|
||||
%h1 Labels
|
||||
|
||||
%span.label .label
|
||||
|
@ -103,12 +93,14 @@
|
|||
.container
|
||||
Titre
|
||||
%ul.tabs
|
||||
%li.active
|
||||
= link_to "Onglet actif", "#"
|
||||
%li
|
||||
= link_to "Onglet 1", "#", class: "selected"
|
||||
= link_to "Onglet inactif", "#"
|
||||
%li
|
||||
= link_to "Onglet 2", "#"
|
||||
%li
|
||||
= link_to "Onglet 3", "#"
|
||||
= link_to "#" do
|
||||
Onglet avec badge
|
||||
%span.badge 2
|
||||
|
||||
.container
|
||||
%h1 Breadcrumbs
|
||||
|
|
Loading…
Reference in a new issue