Restructure MVC into public/src layout
Co-authored-by: LeOSW42 <673670+LeOSW42@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
675
public/views/css/d.poi.css
Executable file
675
public/views/css/d.poi.css
Executable file
@@ -0,0 +1,675 @@
|
||||
/*********************************/
|
||||
/** Common **/
|
||||
/*********************************/
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#sticky {
|
||||
position: relative;
|
||||
min-height: 0;
|
||||
top: 65%;
|
||||
z-index: 10;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#sticky * {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
@keyframes fadeinfadeout {
|
||||
0% {color: #444;}
|
||||
50% {color: #999;}
|
||||
100% {color: #444;}
|
||||
}
|
||||
#slide-icon {
|
||||
position: absolute;
|
||||
left: 400px;
|
||||
top: -35px;
|
||||
color: #000;
|
||||
font-size: 60px;
|
||||
color: #555;
|
||||
animation-name: fadeinfadeout;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#mapid {
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
section.archive > * {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Comments of a poi */
|
||||
|
||||
|
||||
#new_comment {
|
||||
clear: both;
|
||||
margin: 30px auto 0 auto;
|
||||
width: 90%;
|
||||
background: #efefef;
|
||||
border: 1px solid #ccc;
|
||||
border-bottom: 3px solid #ccc;
|
||||
}
|
||||
#new_comment_label {
|
||||
background: #ccc;
|
||||
padding: 15px 10px;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
#new_comment_label p {
|
||||
margin: 0;
|
||||
}
|
||||
#new_comment_label input {
|
||||
display: none;
|
||||
margin: 5px;
|
||||
float: right;
|
||||
padding: 5px 10px;
|
||||
position: relative;
|
||||
top: -7px;
|
||||
width: 140px;
|
||||
}
|
||||
#new_comment_form {
|
||||
display: none;
|
||||
}
|
||||
#new_comment_form textarea {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
font-size: 14px;
|
||||
width: calc(100% - 20px);
|
||||
}
|
||||
|
||||
#new_comment_label.sent {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
section article {
|
||||
margin: 30px auto 0 auto;
|
||||
width: 90%;
|
||||
background: #efefef;
|
||||
border: 1px solid #ccc;
|
||||
border-bottom: 2px solid #ccc;
|
||||
border-bottom-right-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
}
|
||||
section .comment_title {
|
||||
background: #ccc;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
section .delete_link {
|
||||
font-variant: small-caps;
|
||||
font-weight: 500;
|
||||
padding: 4px 0;
|
||||
float: right;
|
||||
}
|
||||
|
||||
section .icon {
|
||||
border: 1px solid #999;
|
||||
border-radius: 3px;
|
||||
margin: 0 3px 0 3px;
|
||||
padding: 4px 0;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
width: 28px;
|
||||
background: #ccc;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
section .icon.avatar {
|
||||
padding: 0;
|
||||
height: 28px;
|
||||
}
|
||||
section .comment_content {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
section article.comment_archive {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/*********************************/
|
||||
/** Editor page **/
|
||||
/*********************************/
|
||||
|
||||
form.form input, form.form textarea, #locale {
|
||||
font-size: 16px;
|
||||
padding: 10px;
|
||||
}
|
||||
form.form input, form.form textarea, form.form input[type=radio]:checked+label, #locale {
|
||||
background: #ddd;
|
||||
border-bottom: 2px solid #ccc;
|
||||
}
|
||||
|
||||
form.form h1 input {
|
||||
flex: 2 !important;
|
||||
font-size: 18px;
|
||||
}
|
||||
form.form h1 {
|
||||
padding: 10px 0;
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
#locale {
|
||||
flex: 1;
|
||||
margin: 10px 5px 0 5px;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.flex_line {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.flex_line > :first-child {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
.flex_line > :last-child, .last-child {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
.flex_line input[type=number], .flex_line input[type=text] {
|
||||
flex: 1;
|
||||
margin: 10px 5px 0 5px;
|
||||
}
|
||||
.noarrow::-webkit-inner-spin-button,
|
||||
.noarrow::-webkit-outer-spin-button,
|
||||
.noarrow {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: textfield;
|
||||
appearance: textfield;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
form.form input[type=submit] {
|
||||
width: auto;
|
||||
display: block;
|
||||
margin: 10px auto;
|
||||
border-bottom: 2px solid blue;
|
||||
}
|
||||
|
||||
form.form input[type=radio] {
|
||||
position: absolute;
|
||||
float: left;
|
||||
opacity: 0%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
}
|
||||
form.form input[type=radio]+label {
|
||||
margin-top: 10px;
|
||||
font-size: 13px;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
vertical-align: middle;
|
||||
border-bottom: 2px solid transparent;
|
||||
}
|
||||
form.form input[type=radio]+label img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
#specific_form .threecb:after {
|
||||
font-family: "Font Awesome 5 Free";
|
||||
font-weight: 400;
|
||||
vertical-align: middle;
|
||||
padding: 3px 8px 2px 4px;
|
||||
margin: 2px 10px;
|
||||
display: inline-block;
|
||||
width: 21px;
|
||||
background: #ddd;
|
||||
font-size: 25px;
|
||||
border-radius: 100px;
|
||||
}
|
||||
#specific_form .threecb.check:after {
|
||||
content: "\f058"; /* check */
|
||||
}
|
||||
#specific_form .threecb.uncheck:after {
|
||||
content: "\f057"; /* cross */
|
||||
}
|
||||
#specific_form .threecb.intermediate:after {
|
||||
content: "\f059"; /* question */
|
||||
}
|
||||
#specific_form input {
|
||||
margin: 2px 10px;
|
||||
}
|
||||
#specific_form textarea {
|
||||
margin: 5px 0;
|
||||
display: block;
|
||||
width: calc(100% - 20px);
|
||||
height: 100px;
|
||||
}
|
||||
#specific_form .flex_line {
|
||||
align-items: center;
|
||||
}
|
||||
#specific_form .flex_line input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#abstract {
|
||||
text-align: center;
|
||||
color: #555;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
form.form input[type="checkbox"] {
|
||||
display:none;
|
||||
}
|
||||
|
||||
form.form input[type="checkbox"] + span:before {
|
||||
font-family: "Font Awesome 5 Free";
|
||||
font-weight: 400;
|
||||
vertical-align: middle;
|
||||
padding: 2px 5px 2px 4px;
|
||||
margin-right: 10px;
|
||||
display: inline-block;
|
||||
width: 21px;
|
||||
background: #ddd;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
form.form input[type="checkbox"] + span:before {
|
||||
content: "\f0c8"; /* check-empty */
|
||||
}
|
||||
|
||||
form.form input[type="checkbox"]:checked + span:before {
|
||||
content: "\f14a"; /* check */
|
||||
}
|
||||
|
||||
#permalink_container {
|
||||
position: relative;
|
||||
margin: 2px 0;
|
||||
}
|
||||
#permalink {
|
||||
width: calc(100% - 194px);
|
||||
padding-left: 184px;
|
||||
}
|
||||
#permalink_label {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
opacity: 0.8;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/*****************************************
|
||||
Controls of the map
|
||||
*****************************************/
|
||||
|
||||
|
||||
|
||||
/* General */
|
||||
|
||||
.leaflet-control-container {
|
||||
position: absolute !important;
|
||||
width: 850px !important;
|
||||
height: 100%;
|
||||
left: calc(50% - 425px) !important;
|
||||
font-family: "Fira Sans", "Open Sans",Helvetica,Arial,sans-serif !important;
|
||||
}
|
||||
.leaflet-fullscreen-on .leaflet-control-container {
|
||||
position: absolute !important;
|
||||
width: 100% !important;
|
||||
left: 0 !important;
|
||||
}
|
||||
|
||||
.leaflet-bottom.leaflet-left {
|
||||
bottom: 35% !important;
|
||||
margin-bottom: -50px !important;
|
||||
}
|
||||
.leaflet-fullscreen-on .leaflet-bottom.leaflet-left {
|
||||
margin-bottom: 15px !important;
|
||||
margin-left: 15px !important;
|
||||
bottom: 0 !important;
|
||||
}
|
||||
|
||||
.leaflet-bottom.leaflet-right {
|
||||
bottom: 35% !important;
|
||||
margin-bottom: -50px !important;
|
||||
}
|
||||
.leaflet-fullscreen-on .leaflet-bottom.leaflet-right {
|
||||
margin-bottom: 15px !important;
|
||||
margin-right: 15px !important;
|
||||
bottom: 0 !important;
|
||||
}
|
||||
|
||||
.leaflet-control {
|
||||
clear: none !important;
|
||||
padding: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
color: #c1c1c1 !important;
|
||||
}
|
||||
.leaflet-right .leaflet-control {
|
||||
margin: 0 0 0 15px !important;
|
||||
}
|
||||
.leaflet-left .leaflet-control {
|
||||
margin: 0 15px 0 0 !important;
|
||||
}
|
||||
|
||||
.leaflet-control a, .leaflet-control button {
|
||||
display: inline-block !important;
|
||||
float: none !important;
|
||||
border: none !important;
|
||||
background-color: #212121 !important;
|
||||
border-radius: 0 !important;
|
||||
color: #c1c1c1 !important;
|
||||
border-right: 1px #3e3e3e solid !important;
|
||||
}
|
||||
.leaflet-control a:last-child, .leaflet-control button:last-child {
|
||||
border-right: none !important;
|
||||
}
|
||||
|
||||
/* Zoom */
|
||||
|
||||
.leaflet-control-zoom-in, .leaflet-control-zoom-out {
|
||||
font-size: 10px !important;
|
||||
}
|
||||
.leaflet-disabled {
|
||||
background-color: rgba(33, 33, 33, 0.8) !important;
|
||||
opacity: 0.8 !important;
|
||||
}
|
||||
|
||||
/* Fullscreen */
|
||||
|
||||
.leaflet-control-fullscreen a {
|
||||
background: #212121 !important;
|
||||
}
|
||||
.leaflet-control-fullscreen a:before {
|
||||
content: "\f065";
|
||||
font-family: "Font Awesome 5 Free";
|
||||
font-weight: 900;
|
||||
background: none !important;
|
||||
}
|
||||
.leaflet-fullscreen-on .leaflet-control-fullscreen a:before {
|
||||
content: "\f066";
|
||||
font-family: "Font Awesome 5 Free";
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
/* Baselayers */
|
||||
|
||||
.leaflet-control-layers a {
|
||||
background: #212121 !important;
|
||||
width: 26px !important;
|
||||
height: 26px !important;
|
||||
line-height: 26px !important;
|
||||
text-align: center !important;
|
||||
border-right: none !important;
|
||||
}
|
||||
.leaflet-control-layers a:before {
|
||||
content: "\f5fd";
|
||||
font-family: "Font Awesome 5 Free";
|
||||
font-weight: 900;
|
||||
background: none !important;
|
||||
}
|
||||
.leaflet-control-layers-expanded a {
|
||||
display: none !important;
|
||||
}
|
||||
.leaflet-control-layers-list {
|
||||
padding: 3px 8px !important;
|
||||
color: white !important;
|
||||
background: #212121 !important;
|
||||
width: inherit !important;
|
||||
}
|
||||
|
||||
/* Scale */
|
||||
|
||||
.leaflet-control-scale-line {
|
||||
height: 30px !important;
|
||||
top: 2px !important;
|
||||
position: relative !important;
|
||||
background: #212121 !important;
|
||||
color: #c1c1c1 !important;
|
||||
text-align: center !important;
|
||||
border: none !important;
|
||||
font-size: 12px !important;
|
||||
line-height: 30px !important;
|
||||
}
|
||||
.leaflet-control-scale {
|
||||
opacity: 0.8 !important;
|
||||
}
|
||||
|
||||
#elevation_icon {
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
top: 18px;
|
||||
right: 34px;
|
||||
}
|
||||
|
||||
#elevation_icon i {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/*****************************************
|
||||
View page
|
||||
*****************************************/
|
||||
|
||||
.poi-icon-wrapper {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
/* Tooltip */
|
||||
.poi-icon-wrapper[data-tooltip]:hover::after {
|
||||
content: attr(data-tooltip);
|
||||
position: absolute;
|
||||
left: 40px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: rgba(255, 255, 255, 0.9); /* blanc transparent */
|
||||
color: #000;
|
||||
padding: 6px 10px;
|
||||
border-radius: 6px;
|
||||
font-size: 15px; /* demandé */
|
||||
border: 1px solid blue; /* bordure fine noire */
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
/* Petite flèche */
|
||||
.poi-icon-wrapper[data-tooltip]:hover::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 32px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
border: 6px solid transparent;
|
||||
border-right-color: blue; /* même couleur que la bulle */
|
||||
z-index: 9999;
|
||||
filter: drop-shadow(0 0 0.5px #000); /* bordure subtile sur la flèche */
|
||||
}
|
||||
|
||||
/* Fiche d'identité POI */
|
||||
.poi-idcard {
|
||||
width: 100%;
|
||||
padding: 20px 15px;
|
||||
background: rgba(200, 220, 255, 0.25);
|
||||
border-bottom: 1px solid #bbb;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* Ligne principale : coordonnées + type */
|
||||
.poi-id-main {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 19px; /* demandé */
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Coordonnées */
|
||||
.poi-id-coords {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.poi-id-coords a {
|
||||
color: #0055aa;
|
||||
text-decoration: none;
|
||||
}
|
||||
.poi-id-coords a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.poi-id-elev {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* Type */
|
||||
.poi-id-type {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
/* Label discret */
|
||||
.poi-id-label {
|
||||
font-weight: 500;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
/* Dates en petit */
|
||||
.poi-id-dates {
|
||||
font-size: 15px; /* demandé */
|
||||
color: #555;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
/* Mobile */
|
||||
@media (max-width: 700px) {
|
||||
.poi-id-main {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
}
|
||||
.poi-id-dates {
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
/*****************************************
|
||||
* CHAMPS GÉNÉRIQUES
|
||||
*****************************************/
|
||||
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
.field > label {
|
||||
font-weight: 600;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
/*****************************************
|
||||
* TEXTES LONGS (t_)
|
||||
*****************************************/
|
||||
|
||||
.field-t .field-value {
|
||||
padding: 10px 12px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
/*****************************************
|
||||
* NOMBRES ET LIENS EN LIGNE (n_ et l_)
|
||||
*****************************************/
|
||||
|
||||
/* Label + valeur sur une seule ligne */
|
||||
.field-n,
|
||||
.field-l {
|
||||
flex-direction: row;
|
||||
align-items: baseline;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
/* On enlève le padding bas qui faisait “bloc” */
|
||||
.field-n,
|
||||
.field-l {
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
/* Valeur inline */
|
||||
.inline-value {
|
||||
display: inline-block;
|
||||
font-size: 15px;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
/* Liens */
|
||||
.inline-value a {
|
||||
color: #1a5ad7;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
}
|
||||
.inline-value a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
||||
/*****************************************
|
||||
* Booleans grid in poi view
|
||||
*****************************************/
|
||||
|
||||
.bool-grid {
|
||||
margin: 20px 0 0 0;
|
||||
padding: 20px 15px;
|
||||
background: rgba(200, 220, 255, 0.25);
|
||||
border-top: 1px solid #bbb;
|
||||
}
|
||||
|
||||
.bool-row {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: 1fr;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.bool-row.labels {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.bool-label {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.bool-row.values {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.boolean-pill {
|
||||
display: inline-block;
|
||||
padding: 8px 12px;
|
||||
border-radius: 20px;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.bool-row {
|
||||
grid-auto-flow: row;
|
||||
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user