PDC-IRAP / pdc-web

Commit 69488a562762280b66bb56035c51941078e94882

Authored by hitier
1 parent ee92fad7
Exists in master and in 4 other branches Develop, TEST, dev, othauvin

Styling vertical menu

Showing 2 changed files with 62 additions and 46 deletions   Show diff stats
Inline Side-by-side
app/static/css/style.css
  Diff comments   View file @69488a5
1 1 html {
2   - position: relative;
3   - min-height: 100%;
  2 + position: relative;
  3 + min-height: 100%;
4 4 }
5 5  
6 6 .footer {
7   - position: absolute;
8   - bottom: 0;
9   - width: 100%;
10   - height: 40px;
11   - margin-bottom: 35px;
  7 + position: absolute;
  8 + bottom: 0;
  9 + width: 100%;
  10 + height: 40px;
  11 + margin-bottom: 35px;
12 12 }
13 13  
14 14 .sidebar {
15   - position: fixed;
16   - top: 0;
17   - bottom: 0;
18   - left: 0;
19   - z-index: 100; /* Behind the navbar */
20   - padding: 0;
21   - box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
  15 + position: fixed;
  16 + top: 0;
  17 + bottom: 0;
  18 + left: 0;
  19 + z-index: 100; /* Behind the navbar */
  20 + padding: 0;
  21 + box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
22 22 }
23 23  
24 24 .sidebar .nav-link {
25   - font-weight: 500;
26   - color: #333;
  25 + font-weight: 500;
  26 + color: #333;
27 27 }
  28 +
  29 +#v-bar a:hover {
  30 + background-color: lightgrey;
  31 +}
  32 +
  33 +#v-bar a {
  34 + color: black;
  35 + text-decoration: none;
  36 +}
  37 +
  38 +#v-bar a.disabled {
  39 + /* Make the disabled links grayish*/
  40 + color: lightgrey;
  41 + /* And disable the pointer events */
  42 + pointer-events: none;
  43 +}
28 44 \ No newline at end of file
... ...
app/templates/base_page.html
  Diff comments   View file @69488a5
... ... @@ -23,7 +23,7 @@
23 23 {% endif %}
24 24 </nav>
25 25  
26   - <div class="container-fluid">
  26 + <div id="v-bar" class="container-fluid">
27 27 <div class="row">
28 28 <nav class="col-md-2 d-none d-md-block bg-light sidebar mt-3">
29 29 <div class="sidebar-sticky">
... ... @@ -40,13 +40,13 @@
40 40 Agent
41 41 </a>
42 42 <ul aria-expanded="false" class="collapse" id="agent">
43   - <li><a class="text-muted" ref="#">Liste des agents</a></li>
44   - <li><a class="text-muted" ref="#">Statistiques</a></li>
45   - <li><a class="text-muted" ref="#">Liste des responsabilités</a></li>
46   - <li><a class="text-muted" ref="#">Liste des fonctions</a></li>
47   - <li><a class="text-muted" ref="#">Liste des compétences</a></li>
48   - <li><a class="text-muted" ref="#">Liste des pôles</a></li>
49   - <li><a class="text-muted" ref="#">Liste des emplois types</a></li>
  43 + <li><a class=" " href="#">Liste des agents</a></li>
  44 + <li><a class=" disabled" href="#">Statistiques</a></li>
  45 + <li><a class=" disabled" href="#">Liste des responsabilités</a></li>
  46 + <li><a class=" disabled" href="#">Liste des fonctions</a></li>
  47 + <li><a class=" disabled" href="#">Liste des compétences</a></li>
  48 + <li><a class=" disabled" href="#">Liste des pôles</a></li>
  49 + <li><a class=" disabled" href="#">Liste des emplois types</a></li>
50 50 </ul>
51 51 </li>
52 52 <li class="nav-item">
... ... @@ -55,10 +55,10 @@
55 55 Projet
56 56 </a>
57 57 <ul aria-expanded="false" class="collapse" id="projet">
58   - <li><a class="text-muted" ref="#">Liste des projets</a></li>
59   - <li><a class="text-muted" ref="#">Statistiques</a></li>
60   - <li><a class="text-muted" ref="#">Listes des domaines</a></li>
61   - <li><a class="text-muted" ref="#">Listes des statuts de projets</a></li>
  58 + <li><a class=" " href="#">Liste des projets</a></li>
  59 + <li><a class=" disabled" href="#">Statistiques</a></li>
  60 + <li><a class=" disabled" href="#">Listes des domaines</a></li>
  61 + <li><a class=" disabled" href="#">Listes des statuts de projets</a></li>
62 62 </ul>
63 63 </li>
64 64 <li class="nav-item">
... ... @@ -67,8 +67,8 @@
67 67 Service
68 68 </a>
69 69 <ul aria-expanded="false" class="collapse" id="service">
70   - <li><a class="text-muted" ref="#">Liste des services</a></li>
71   - <li><a class="text-muted" ref="#">Statistiques</a></li>
  70 + <li><a class=" " href="#">Liste des services</a></li>
  71 + <li><a class=" disabled" href="#">Statistiques</a></li>
72 72 </ul>
73 73 </li>
74 74 <li class="nav-item">
... ... @@ -77,12 +77,12 @@
77 77 Chef de service
78 78 </a>
79 79 <ul aria-expanded="false" class="collapse" id="cds">
80   - <li><a class="text-muted" ref="#">Renseigner le statut d'un agent pour un semestre</a></li>
81   - <li><a class="text-muted" ref="#">Affecter un agent à un projet/service</a></li>
82   - <li><a class="text-muted" ref="#">Création agent virtuel</a></li>
83   - <li><a class="text-muted" ref="#">Charge totale des agents</a></li>
84   - <li><a class="text-muted" ref="#">Détails des charges</a></li>
85   - <li><a class="text-muted" ref="#">Graphiques personnalisés</a></li>
  80 + <li><a class=" disabled" href="#">Renseigner le statut d'un agent pour un semestre</a></li>
  81 + <li><a class=" " href="#">Affecter un agent à un projet/service</a></li>
  82 + <li><a class=" disabled" href="#">Création agent virtuel</a></li>
  83 + <li><a class=" disabled" href="#">Charge totale des agents</a></li>
  84 + <li><a class=" disabled" href="#">Détails des charges</a></li>
  85 + <li><a class=" disabled" href="#">Graphiques personnalisés</a></li>
86 86 </ul>
87 87 </li>
88 88 <li class="nav-item">
... ... @@ -92,16 +92,16 @@
92 92 </a>
93 93 <ul aria-expanded="false" class="collapse" id="admin">
94 94  
95   - <li><a class="text-muted" href="#">Nouveau projet</a></li>
96   - <li><a class="text-muted" href="#">Nouveau service</a></li>
97   - <li><a class="text-muted" href="#">Nouvelle compétence</a></li>
98   - <li><a class="text-muted" href="#">Nouvelle fonction</a></li>
99   - <li><a class="text-muted" href="#">Nouveau domaine</a></li>
100   - <li><a class="text-muted" href="#">Nouvelle responsabilité</a></li>
101   - <li><a class="text-muted" href="#">Affecter un responsable de projet</a></li>
102   - <li><a class="text-muted" href="#">Affecter un responsable de service</a></li>
103   - <li><a class="text-muted" href="#">Liste des semestres</a></li>
104   - <li><a class="text-muted" href="#">Nouveau semestre</a></li>
  95 + <li><a class=" disabled" href="#">Nouveau projet</a></li>
  96 + <li><a class=" disabled" href="#">Nouveau service</a></li>
  97 + <li><a class=" disabled" href="#">Nouvelle compétence</a></li>
  98 + <li><a class=" disabled" href="#">Nouvelle fonction</a></li>
  99 + <li><a class=" disabled" href="#">Nouveau domaine</a></li>
  100 + <li><a class=" disabled" href="#">Nouvelle responsabilité</a></li>
  101 + <li><a class=" disabled" href="#">Affecter un responsable de projet</a></li>
  102 + <li><a class=" disabled" href="#">Affecter un responsable de service</a></li>
  103 + <li><a class=" " href="#">Liste des semestres</a></li>
  104 + <li><a class=" disabled" href="#">Nouveau semestre</a></li>
105 105  
106 106 </ul>
107 107 </li>
... ...