ajout squelette en-tete d'informations
davvalent commited on 2023-03-23 15:22:27
Showing 2 changed files, with 51 additions and 5 deletions.
- css/style.css 027993e..baa5d2a
- index.html 7b24ea2..2c1784b
| ... | ... |
@@ -1,17 +1,21 @@ |
| 1 | 1 |
html, |
| 2 | 2 |
body {
|
| 3 | 3 |
height: 100%; |
| 4 |
+ overflow: hidden; |
|
| 4 | 5 |
} |
| 5 | 6 |
body {
|
| 6 | 7 |
margin: 0; |
| 7 | 8 |
} |
| 8 |
-header {
|
|
| 9 |
+header div#information-header {
|
|
| 10 |
+ display: none; |
|
| 11 |
+} |
|
| 12 |
+header div#application-header {
|
|
| 9 | 13 |
height: 40px; |
| 10 | 14 |
box-shadow: 0 3px 14px rgba(0,0,0,0.4); |
| 11 | 15 |
z-index: 500; |
| 12 | 16 |
position: relative; |
| 13 | 17 |
} |
| 14 |
-header h1 {
|
|
| 18 |
+header div#application-header h1 {
|
|
| 15 | 19 |
margin: 0; |
| 16 | 20 |
font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif; |
| 17 | 21 |
height: 100%; |
| ... | ... |
@@ -19,6 +23,24 @@ header h1 {
|
| 19 | 23 |
box-sizing: border-box; |
| 20 | 24 |
padding-left: 10px; |
| 21 | 25 |
} |
| 26 |
+header div#application-header h1 span {
|
|
| 27 |
+ font-size: 80%; |
|
| 28 |
+ color: gray; |
|
| 29 |
+} |
|
| 30 |
+header div#application-header a#icon {
|
|
| 31 |
+ display: block; |
|
| 32 |
+ position: absolute; |
|
| 33 |
+ right: 0; |
|
| 34 |
+ top: 0; |
|
| 35 |
+ color: #333333; |
|
| 36 |
+ width: 46px; |
|
| 37 |
+ height: 40px; |
|
| 38 |
+ margin-right: 10px; |
|
| 39 |
+ font-size: x-large; |
|
| 40 |
+ padding-top: 5px; |
|
| 41 |
+ padding-left: 9px; |
|
| 42 |
+ box-sizing: border-box; |
|
| 43 |
+} |
|
| 22 | 44 |
main {
|
| 23 | 45 |
height: calc(100vh - 40px); |
| 24 | 46 |
} |
| ... | ... |
@@ -29,7 +51,7 @@ main {
|
| 29 | 51 |
height: 100%; |
| 30 | 52 |
} |
| 31 | 53 |
.controles, |
| 32 |
-header h1 {
|
|
| 54 |
+header div#application-header h1 {
|
|
| 33 | 55 |
font-weight: 900; |
| 34 | 56 |
font-size: 1.5rem; |
| 35 | 57 |
} |
| ... | ... |
@@ -114,7 +136,7 @@ header h1 {
|
| 114 | 136 |
} |
| 115 | 137 |
*/ |
| 116 | 138 |
.rdf-data {
|
| 117 |
- height: 50%; |
|
| 139 |
+ height: calc(50% - 40px); |
|
| 118 | 140 |
} |
| 119 | 141 |
|
| 120 | 142 |
/* glide.js */ |
| ... | ... |
@@ -162,6 +184,7 @@ header h1 {
|
| 162 | 184 |
/* RDF data */ |
| 163 | 185 |
|
| 164 | 186 |
.rdf-data {
|
| 165 |
- overflow: auto; |
|
| 166 | 187 |
cursor: initial; |
| 188 |
+ overflow-x: hidden; |
|
| 189 |
+ overflow-y: auto; |
|
| 167 | 190 |
} |
| 168 | 191 |
\ No newline at end of file |
| ... | ... |
@@ -22,14 +22,37 @@ |
| 22 | 22 |
<link rel="stylesheet" href="css/style.css"/> |
| 23 | 23 |
<!-- <script src="js/window.js"></script> --> |
| 24 | 24 |
|
| 25 |
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/> |
|
| 26 |
+ |
|
| 25 | 27 |
</head> |
| 26 | 28 |
<body> |
| 27 | 29 |
<header> |
| 30 |
+ <div id="information-header"> |
|
| 31 |
+ <p>FOO BAR</p> |
|
| 32 |
+ </div> |
|
| 33 |
+ <div id="application-header"> |
|
| 28 | 34 |
<h1>Plan interactif du Faubourg à m’lasse <span>v0.1</span></h1> |
| 35 |
+ <a href="#" id="icon" onclick="displayInformation()"> |
|
| 36 |
+ <i class="fa fa-bars"></i> |
|
| 37 |
+ </a> |
|
| 38 |
+ </div> |
|
| 29 | 39 |
</header> |
| 30 | 40 |
<main> |
| 31 | 41 |
<div id="map"></div> |
| 32 | 42 |
</main> |
| 33 | 43 |
<script src="js/main.js" type="module"></script> |
| 44 |
+ <script> |
|
| 45 |
+ function myFunction() {
|
|
| 46 |
+ const x = document.getElementById("myLinks");
|
|
| 47 |
+ if (x.style.display === "block") {
|
|
| 48 |
+ x.style.display = "none"; |
|
| 49 |
+ } else {
|
|
| 50 |
+ x.style.display = "block"; |
|
| 51 |
+ } |
|
| 52 |
+ } |
|
| 53 |
+ function displayInformation() {
|
|
| 54 |
+ alert("foobar");
|
|
| 55 |
+ } |
|
| 56 |
+ </script> |
|
| 34 | 57 |
</body> |
| 35 | 58 |
</html> |
| 36 | 59 |