Ajout des borduresw
This commit is contained in:
parent
48aad70993
commit
255c47183d
GPG key ID:
C4B28FD2729941CE
6 changed files with 732 additions and 13 deletions
66
assets/button-stepped-border-image.svg
Normal file
66
assets/button-stepped-border-image.svg
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="100"
|
||||
height="100"
|
||||
viewBox="0 0 100 100"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
xml:space="preserve"
|
||||
inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
|
||||
sodipodi:docname="mockup.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#999999"
|
||||
borderopacity="1"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="px"
|
||||
inkscape:zoom="2.7556247"
|
||||
inkscape:cx="1253.2549"
|
||||
inkscape:cy="1447.5847"
|
||||
inkscape:window-width="1703"
|
||||
inkscape:window-height="1071"
|
||||
inkscape:window-x="56"
|
||||
inkscape:window-y="50"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="g4"><inkscape:page
|
||||
x="0"
|
||||
y="0"
|
||||
width="100"
|
||||
height="100"
|
||||
id="page2"
|
||||
margin="0"
|
||||
bleed="0" /></sodipodi:namedview><defs
|
||||
id="defs1" /><g
|
||||
inkscape:groupmode="layer"
|
||||
id="layer2"
|
||||
inkscape:label="Default Mobile"
|
||||
transform="translate(-1295.6909,-1417)"><g
|
||||
id="g7"
|
||||
inkscape:label="button-stepped"><rect
|
||||
style="fill:#ffffff;fill-opacity:0;stroke:none;stroke-width:1.58144;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill"
|
||||
id="rect17-4-3-3"
|
||||
width="100"
|
||||
height="100"
|
||||
x="1295.6909"
|
||||
y="1417" /><rect
|
||||
style="display:inline;fill:#000000;fill-opacity:1;stroke:none;stroke-width:15.4123;stroke-opacity:1"
|
||||
id="rect3-9-4-86-1"
|
||||
width="75.705887"
|
||||
height="99.999954"
|
||||
x="1307.8379"
|
||||
y="1417" /><rect
|
||||
style="display:inline;fill:#000000;fill-opacity:1;stroke:none;stroke-width:15.6491;stroke-opacity:1"
|
||||
id="rect3-5-5-2-2"
|
||||
width="99.999886"
|
||||
height="78.049637"
|
||||
x="1295.6909"
|
||||
y="1427.9751" /></g></g></svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
69
assets/neon-border-image.svg
Normal file
69
assets/neon-border-image.svg
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="100"
|
||||
height="100"
|
||||
viewBox="0 0 100 100"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
xml:space="preserve"
|
||||
inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
|
||||
sodipodi:docname="mockup.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#999999"
|
||||
borderopacity="1"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="px"
|
||||
inkscape:zoom="5.1118834"
|
||||
inkscape:cx="1209.4368"
|
||||
inkscape:cy="1470.8864"
|
||||
inkscape:window-width="1703"
|
||||
inkscape:window-height="1071"
|
||||
inkscape:window-x="56"
|
||||
inkscape:window-y="50"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="g4"><inkscape:page
|
||||
x="0"
|
||||
y="0"
|
||||
width="100"
|
||||
height="100"
|
||||
id="page2"
|
||||
margin="0"
|
||||
bleed="0" /></sodipodi:namedview><defs
|
||||
id="defs1" /><g
|
||||
inkscape:groupmode="layer"
|
||||
id="layer2"
|
||||
inkscape:label="Default Mobile"
|
||||
transform="translate(-1178,-1417)"><g
|
||||
id="g4"
|
||||
inkscape:label="neon-border-image"
|
||||
inkscape:export-filename="assets/neon-border-image.svg"
|
||||
inkscape:export-xdpi="96"
|
||||
inkscape:export-ydpi="96"><rect
|
||||
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:1.58144;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill"
|
||||
id="rect17-4-3"
|
||||
width="100"
|
||||
height="100"
|
||||
x="1178"
|
||||
y="1417" /><path
|
||||
style="fill:#000000;fill-opacity:1;stroke:#ffbf3e;stroke-width:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill"
|
||||
d="m 1178,1419 h 100"
|
||||
id="path17-2-5"
|
||||
sodipodi:nodetypes="cc" /><path
|
||||
style="fill:#000000;fill-opacity:1;stroke:#ff4e00;stroke-width:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill"
|
||||
d="m 1178,1423 h 100"
|
||||
id="path17-9-2-6"
|
||||
sodipodi:nodetypes="cc" /><path
|
||||
style="fill:#000000;fill-opacity:1;stroke:#8800ff;stroke-width:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill"
|
||||
d="m 1178,1427 h 100"
|
||||
id="path17-9-6-6-2"
|
||||
sodipodi:nodetypes="cc" /></g></g></svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
|
|
@ -134,17 +134,60 @@ body > hr {
|
|||
/* SAERCH FORM */
|
||||
|
||||
#search-section {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 100i;
|
||||
border: solid 10px black;
|
||||
border-image: url("../assets/button-stepped-border-image.svg") 16 15 fill;
|
||||
z-index: 100;
|
||||
margin-bottom: 5px;
|
||||
margin-left: 5px;
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
background: black;
|
||||
background-clip: content-box;
|
||||
color: white;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: min-content 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
|
||||
#search-section input {
|
||||
background: black;
|
||||
font-size: 1em;
|
||||
color: inherit;
|
||||
font-family: monospace;
|
||||
border: none;
|
||||
padding: 1ex;
|
||||
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
#search-section button {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 1ex;
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#search-section label {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
padding: 1ex;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
#search-section button img {
|
||||
height: 1.5em;
|
||||
}
|
||||
|
||||
/* PANEL */
|
||||
|
||||
#result-panel {
|
||||
background: black;
|
||||
border-top: 3px white solid;
|
||||
border-image: url("../assets/neon-border-image.svg") 12;
|
||||
border-top: 5.5px white solid;
|
||||
|
||||
color: white;
|
||||
}
|
||||
|
|
|
|||
541
icons/search.svg
Normal file
541
icons/search.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 7.2 MiB |
|
|
@ -18,13 +18,13 @@
|
|||
|
||||
<hr>
|
||||
|
||||
<section id="search-section">
|
||||
<form id="search-area">
|
||||
<form id="search-section">
|
||||
<label for="search-area-query">Rechercher une zone</label><br/>
|
||||
<input type="search" name="query" id="search-area-query" />
|
||||
<button>Rechercher</button>
|
||||
<button title="Rechercher" autocomplete="no">
|
||||
<img src="icons/search.svg" alt="Icone de loupe"/>
|
||||
</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<camp-bidi-panel id="result-panel" ></camp-bidi-panel>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ window.interhackPlaces = places;
|
|||
await MAP.init_places(places)
|
||||
|
||||
// GESTION de la recherche
|
||||
const search_form = document.getElementById("search-area")
|
||||
const search_form = document.getElementById("search-section")
|
||||
search_form.elements["query"].addEventListener("change", () => search_form.requestSubmit())
|
||||
search_form.elements["query"].addEventListener("input", () => search_form.requestSubmit())
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue