Cambio do deseño das paxinas de habitacions.
This commit is contained in:
parent
c625004522
commit
337467ab70
GPG key ID:
F8FE83A0B2D932A3
12 changed files with 460 additions and 555 deletions
|
|
@ -1,40 +0,0 @@
|
|||
This InputfieldCKEditor directory is here to provide optional extra configuration options
|
||||
and plugins to the CKEditor Inputfield module.
|
||||
|
||||
|
||||
plugins/
|
||||
========
|
||||
Directory to place additional CKEditor plugins in. You can then activate them
|
||||
from your CKEditor field settings.
|
||||
|
||||
|
||||
contents.css
|
||||
============
|
||||
Example CSS file for the admin editor. To make CKEditor use this file, go to your CKEditor
|
||||
field settings and specify /site/modules/InputfieldCKEditor/contents.css as the regular
|
||||
mode Contents CSS file.
|
||||
|
||||
|
||||
contents-inline.css
|
||||
===================
|
||||
Same as contents.css but for the inline mode editor.
|
||||
|
||||
|
||||
mystyles.js
|
||||
===========
|
||||
Optional configuration for the CKEditor Styles option. To use this file, go to your
|
||||
CKEditor field settings and set the Custom Styles Set to be this file.
|
||||
|
||||
|
||||
config.js
|
||||
=========
|
||||
Custom config file used by all CKEditor instances (except instances configured by their
|
||||
own custom config file, see below...)
|
||||
|
||||
|
||||
config-body.js
|
||||
==============
|
||||
Example of field-specific custom config file. This one applies to a field named "body".
|
||||
Note that these config settings can also be specified directly in your CKEditor field
|
||||
settings in the admin, which many may prefer.
|
||||
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
/**
|
||||
* CKEditor field-specific (body) custom config file for ProcessWire
|
||||
*
|
||||
* Use this file to specify additional config options to a field named "body".
|
||||
* This is here just for example purposes. If you wanted to create a config
|
||||
* specific to some other field, like "sidebar", you would create another file
|
||||
* exactly like this named: config-sidebar.js
|
||||
*
|
||||
* If you wanted to use the same config.js for all of your CKEditor fields,
|
||||
* you would remove this file and just use the config.js file instead. Meaning,
|
||||
* this file completely overrides config.js if the field being edited is named
|
||||
* "body". The regular config.js file is not loaded when this one is loaded.
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
* @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
|
||||
* For licensing, see LICENSE.html or http://ckeditor.com/license
|
||||
*/
|
||||
|
||||
CKEDITOR.editorConfig = function( config ) {
|
||||
// Define changes to default configuration here. For example:
|
||||
// config.uiColor = '#AADC6E';
|
||||
};
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
/**
|
||||
* CKEditor custom config file for ProcessWire
|
||||
*
|
||||
* Use this file to specify additional config options to all CKEditor instances,
|
||||
* except those that have field-specific config files, i.e. config-body.js for
|
||||
* config specific to a field named "body".
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
* @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
|
||||
* For licensing, see LICENSE.html or http://ckeditor.com/license
|
||||
*/
|
||||
|
||||
CKEDITOR.editorConfig = function( config ) {
|
||||
// Define changes to default configuration here. For example:
|
||||
// config.uiColor = '#AADC6E';
|
||||
};
|
||||
|
|
@ -1,121 +0,0 @@
|
|||
/**
|
||||
* contents-inline.css
|
||||
*
|
||||
* CKEditor editor styles for inline mode editor
|
||||
*
|
||||
* See also: contents-inline.scss
|
||||
*
|
||||
* PLEASE NOTE:
|
||||
*
|
||||
* It's possible this file may be out of date since it is in /site/ rather than /wire/,
|
||||
* and the version of this file will reflect whatever version you had when you first
|
||||
* installed this copy of ProcessWire.
|
||||
*
|
||||
* If you intend to use this, you may first want to get the newest copy out of:
|
||||
* /wire/modules/Inputfield/InputfieldCKEditor/contents-inline.css
|
||||
*
|
||||
* Original file copyright (as included with CKEditor):
|
||||
* Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
|
||||
* For licensing, see LICENSE.html or http://ckeditor.com/license
|
||||
*
|
||||
*/
|
||||
|
||||
.InputfieldForm .InputfieldCKEditorInline {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
.InputfieldForm .InputfieldCKEditorInline p,
|
||||
.InputfieldForm .InputfieldCKEditorInline li,
|
||||
.InputfieldForm .InputfieldCKEditorInline dl,
|
||||
.InputfieldForm .InputfieldCKEditorInline td {
|
||||
font-size: 1em;
|
||||
color: #333333;
|
||||
background: white;
|
||||
}
|
||||
.InputfieldForm .InputfieldCKEditorInline a {
|
||||
color: #444444;
|
||||
background: none;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.InputfieldForm .InputfieldCKEditorInline a:hover {
|
||||
color: #222222;
|
||||
background: #ffffdd;
|
||||
}
|
||||
.InputfieldForm .InputfieldCKEditorInline i,
|
||||
.InputfieldForm .InputfieldCKEditorInline em {
|
||||
font-style: italic;
|
||||
}
|
||||
.InputfieldForm .InputfieldCKEditorInline b,
|
||||
.InputfieldForm .InputfieldCKEditorInline strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
.InputfieldForm .InputfieldCKEditorInline strong em,
|
||||
.InputfieldForm .InputfieldCKEditorInline em strong {
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
.InputfieldForm .InputfieldCKEditorInline small {
|
||||
font-size: 0.875em;
|
||||
}
|
||||
.InputfieldForm .InputfieldCKEditorInline pre,
|
||||
.InputfieldForm .InputfieldCKEditorInline code {
|
||||
font-family: Menlo, Monaco, 'Andale Mono', 'Lucida Console', 'Courier New', monospace;
|
||||
}
|
||||
.InputfieldForm .InputfieldCKEditorInline code {
|
||||
display: inline;
|
||||
background: #fff2a8;
|
||||
}
|
||||
.InputfieldForm .InputfieldCKEditorInline ul li,
|
||||
.InputfieldForm .InputfieldCKEditorInline ol li {
|
||||
list-style: disc;
|
||||
display: list-item;
|
||||
margin: 0 0 0 2em;
|
||||
}
|
||||
.InputfieldForm .InputfieldCKEditorInline ol li {
|
||||
list-style: decimal;
|
||||
}
|
||||
.InputfieldForm .InputfieldCKEditorInline blockquote {
|
||||
padding-left: 1em;
|
||||
border-left: 3px solid #ccc;
|
||||
}
|
||||
.InputfieldForm .InputfieldCKEditorInline h1,
|
||||
.InputfieldForm .InputfieldCKEditorInline h2,
|
||||
.InputfieldForm .InputfieldCKEditorInline h3,
|
||||
.InputfieldForm .InputfieldCKEditorInline h4,
|
||||
.InputfieldForm .InputfieldCKEditorInline h5 {
|
||||
color: #222222;
|
||||
font-family: Arial, sans-serif;
|
||||
font-weight: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
.InputfieldForm .InputfieldCKEditorInline h1 {
|
||||
font-size: 2.0em;
|
||||
}
|
||||
.InputfieldForm .InputfieldCKEditorInline h2 {
|
||||
font-size: 1.7em;
|
||||
}
|
||||
.InputfieldForm .InputfieldCKEditorInline h3 {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
.InputfieldForm .InputfieldCKEditorInline h4 {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
.InputfieldForm .InputfieldCKEditorInline h5 {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
.InputfieldForm .InputfieldCKEditorInline h6 {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
.InputfieldForm .InputfieldCKEditorInline table td,
|
||||
.InputfieldForm .InputfieldCKEditorInline table th {
|
||||
padding: 3px;
|
||||
}
|
||||
.InputfieldForm .InputfieldCKEditorInline table th {
|
||||
font-weight: bold;
|
||||
}
|
||||
.InputfieldForm .InputfieldCKEditorInline img {
|
||||
max-width: 100%;
|
||||
}
|
||||
.InputfieldForm .InputfieldCKEditorInline img.cke_anchor {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
|
|
@ -1,169 +0,0 @@
|
|||
/**
|
||||
* contents.css
|
||||
*
|
||||
* CKEditor editor styles for regular (non-inline) editor
|
||||
* See contents-inline.css for inline editor styles.
|
||||
*
|
||||
* Note that this file is not in use unless you configure your editor settings to use it
|
||||
* in the "Custom Editor CSS File (regular mode)" option. As a result, this file is here
|
||||
* primarily as a placeholder and for instructions, though you may certainly modify and
|
||||
* use it as-is.
|
||||
*
|
||||
* PLEASE NOTE:
|
||||
*
|
||||
* It's possible this file may be out of date since it is in /site/ rather than /wire/,
|
||||
* and the version of this file will reflect whatever version you had when you first
|
||||
* installed this copy of ProcessWire.
|
||||
*
|
||||
* If you intend to use this, you may first want to get the newest copy out of:
|
||||
* /wire/modules/Inputfield/InputfieldCKEditor/contents.css
|
||||
*
|
||||
* Original file copyright (as included with CKEditor):
|
||||
* Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
|
||||
* For licensing, see LICENSE.html or http://ckeditor.com/license
|
||||
*
|
||||
*/
|
||||
|
||||
body {
|
||||
/* Font */
|
||||
font-family: sans-serif, Arial, Verdana, "Trebuchet MS";
|
||||
font-size: 14px;
|
||||
|
||||
/* Text color */
|
||||
color: #333;
|
||||
|
||||
/* Remove the background color to make it transparent */
|
||||
background-color: #fff;
|
||||
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.cke_editable {
|
||||
font-size: 14px;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-style: italic;
|
||||
font-family: Georgia, Times, "Times New Roman", serif;
|
||||
padding: 2px 0;
|
||||
border-style: solid;
|
||||
border-color: #ccc;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.cke_contents_ltr blockquote {
|
||||
padding-left: 20px;
|
||||
padding-right: 8px;
|
||||
border-left-width: 5px;
|
||||
}
|
||||
|
||||
.cke_contents_rtl blockquote {
|
||||
padding-left: 8px;
|
||||
padding-right: 20px;
|
||||
border-right-width: 5px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #0782C1;
|
||||
}
|
||||
|
||||
ol,ul,dl {
|
||||
/* IE7: reset rtl list margin. (#7334) */
|
||||
*margin-right: 0px;
|
||||
/* preserved spaces for list items with text direction other than the list. (#6249,#8049)*/
|
||||
padding: 0 40px;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
font-weight: bold;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 0px;
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
img.right,
|
||||
img.align_right,
|
||||
img.align-right {
|
||||
/* RCD */
|
||||
border: 1px solid #ccc;
|
||||
float: right;
|
||||
margin-left: 15px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
img.left,
|
||||
img.align_left,
|
||||
img.align-left {
|
||||
/* RCD */
|
||||
border: 1px solid #ccc;
|
||||
float: left;
|
||||
margin-right: 15px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
img.align_center,
|
||||
img.align-center {
|
||||
/* RCD */
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
img:hover {
|
||||
opacity: .9;
|
||||
filter: alpha(opacity = 90);
|
||||
}
|
||||
|
||||
pre {
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
-webkit-tab-size: 4;
|
||||
tab-size: 4;
|
||||
}
|
||||
|
||||
.marker {
|
||||
background-color: Yellow;
|
||||
}
|
||||
|
||||
span[lang] {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
figure {
|
||||
text-align: center;
|
||||
border: solid 1px #ccc;
|
||||
border-radius: 2px;
|
||||
background: rgba(0,0,0,0.05);
|
||||
padding: 10px;
|
||||
margin: 10px 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
figure > figcaption {
|
||||
text-align: center;
|
||||
display: block; /* For IE8 */
|
||||
}
|
||||
|
||||
code {
|
||||
/* RCD */
|
||||
background: #fff2a8;
|
||||
}
|
||||
|
||||
a > img {
|
||||
padding: 1px;
|
||||
margin: 1px;
|
||||
border: none;
|
||||
outline: 1px solid #0782C1;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
/**
|
||||
* mystyles.js - for ProcessWire CKEditor "Custom Editor Styles Set" option
|
||||
*
|
||||
* Example file for "Custom Editor Styles Set" as seen in your CKEditor field config.
|
||||
* This file is not in use unless you specify it for that configuration item.
|
||||
*
|
||||
* PLEASE NOTE:
|
||||
*
|
||||
* It's possible this file may be out of date since it is in /site/ rather than /wire/,
|
||||
* and the version of this file will reflect whatever version you had when you first
|
||||
* installed this copy of ProcessWire.
|
||||
*
|
||||
* If you intend to use this, you may first want to get the newest copy out of:
|
||||
* /wire/modules/Inputfield/InputfieldCKEditor/mystyles.js
|
||||
*
|
||||
* For a more comprehensive example, see:
|
||||
* /wire/modules/Inputfield/InputfieldCKEditor/ckeditor-[version]/styles.js
|
||||
*
|
||||
*/
|
||||
|
||||
CKEDITOR.stylesSet.add( 'mystyles', [
|
||||
{ name: 'Inline Code', element: 'code' },
|
||||
{ name: 'Inline Quotation', element: 'q' },
|
||||
{ name: 'Left Aligned Photo', element: 'img', attributes: { 'class': 'align_left' } },
|
||||
{ name: 'Right Aligned Photo', element: 'img', attributes: { 'class': 'align_right' } },
|
||||
{ name: 'Centered Photo', element: 'img', attributes: { 'class': 'align_center' } },
|
||||
{ name: 'Small', element: 'small' },
|
||||
{ name: 'Deleted Text', element: 'del' },
|
||||
{ name: 'Inserted Text', element: 'ins' },
|
||||
{ name: 'Cited Work', element: 'cite' }
|
||||
]);
|
||||
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
Directory to place additional CKEditor plugins in. You can then activate them
|
||||
from your CKEditor field settings. Place each plugin in its own directory
|
||||
having the same name as the plugin.
|
||||
|
|
@ -41,6 +41,7 @@
|
|||
grid-column: destacado;
|
||||
}
|
||||
|
||||
|
||||
html, body
|
||||
{
|
||||
height: 100%;
|
||||
|
|
@ -81,7 +82,30 @@ figure
|
|||
|
||||
figure img
|
||||
{
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
figure figcaption
|
||||
{
|
||||
padding: 10px 40px 20px;
|
||||
|
||||
color: rgb(var(--cor_30));
|
||||
font-family: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;
|
||||
font-weight: normal;
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p,
|
||||
figcaption
|
||||
{
|
||||
max-width: 65ch;
|
||||
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
ul,
|
||||
|
|
@ -103,12 +127,6 @@ ol a
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
section h3,
|
||||
section p
|
||||
{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header#cabeceira
|
||||
{
|
||||
grid-template-rows: auto 1fr auto;
|
||||
|
|
@ -316,9 +334,135 @@ nav#migas
|
|||
margin-bottom: var(--separacion);
|
||||
}
|
||||
|
||||
article section
|
||||
main#contido article,
|
||||
article section,
|
||||
div.artigo
|
||||
{
|
||||
margin-bottom: var(--separacion);
|
||||
margin-bottom: calc(var(--separacion) * 2);
|
||||
}
|
||||
|
||||
article#habitacions figure
|
||||
{
|
||||
position: relative;
|
||||
|
||||
width: 100%;
|
||||
height: auto;
|
||||
min-width: 320px;
|
||||
max-width: 480px;
|
||||
max-height: 360px;
|
||||
overflow: hidden;
|
||||
|
||||
margin: 10px 1%;
|
||||
|
||||
padding: 0;
|
||||
|
||||
text-align: center;
|
||||
|
||||
background: rgb(var(--cor_30));
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
article#habitacions figure img
|
||||
{
|
||||
display: block;
|
||||
object-fit: contain;
|
||||
|
||||
position: relative;
|
||||
|
||||
width: 100%;
|
||||
height: auto;
|
||||
min-height: 100%;
|
||||
max-width: 100%;
|
||||
|
||||
background-color: rgb(var(--cor_60));
|
||||
|
||||
opacity: 0.9;
|
||||
|
||||
transition: opacity 0.35s;
|
||||
}
|
||||
|
||||
article#habitacions figure figcaption
|
||||
{
|
||||
padding: 2em;
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.25em;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
article#habitacions figure figcaption,
|
||||
article#habitacions figure figcaption > a
|
||||
{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
article#habitacions figure figcaption::before
|
||||
{
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
right: 30px;
|
||||
bottom: 30px;
|
||||
left: 30px;
|
||||
|
||||
border: 2px solid #fff;
|
||||
box-shadow: 0 0 0 30px rgba(255,255,255,0.2);
|
||||
|
||||
content: '';
|
||||
|
||||
opacity: 0;
|
||||
|
||||
transition: opacity 0.35s, transform 0.35s;
|
||||
transform: scale3d(1.4,1.4,1);
|
||||
}
|
||||
|
||||
article#habitacions figure h2
|
||||
{
|
||||
margin: 20% 0 10px 0;
|
||||
|
||||
color: rgb(var(--cor_30));
|
||||
word-spacing: -0.15em;
|
||||
font-weight: 700;
|
||||
|
||||
background: rgba(255,255,255,0.5);
|
||||
|
||||
transition: transform 0.35s;
|
||||
}
|
||||
|
||||
article#habitacions figure p
|
||||
{
|
||||
padding: 1em;
|
||||
|
||||
letter-spacing: 1px;
|
||||
font-size: 68.5%;
|
||||
|
||||
opacity: 0;
|
||||
|
||||
transition: opacity 0.35s, transform 0.35s;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
article#habitacions figure:hover img
|
||||
{
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
article#habitacions figure:hover figcaption::before,
|
||||
article#habitacions figure:hover p
|
||||
{
|
||||
opacity: 1;
|
||||
|
||||
transform: scale3d(1,1,1);
|
||||
}
|
||||
|
||||
article#habitacions figure:hover h3
|
||||
{
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
section#mantemento img
|
||||
|
|
@ -348,28 +492,6 @@ section[id^="galeria-"] div.swiper-wrapper
|
|||
height: auto;
|
||||
}
|
||||
|
||||
section[id^="galeria-"] figure img
|
||||
{
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
|
||||
background-color: rgb(var(--cor_60));
|
||||
}
|
||||
|
||||
section[id^="galeria-"] figure figcaption
|
||||
{
|
||||
padding: 10px 40px 20px;
|
||||
|
||||
color: rgb(var(--cor_30));
|
||||
font-family: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;
|
||||
font-weight: normal;
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
section[id^="galeria-"] p.controis
|
||||
{
|
||||
display: flex;
|
||||
|
|
@ -475,6 +597,112 @@ section[id^="imaxe-"] div.artigo
|
|||
align-self: start;
|
||||
}
|
||||
|
||||
section[id^="reixa-"],
|
||||
div[id^="reixa-"]
|
||||
{
|
||||
display: grid;
|
||||
align-items: center;
|
||||
gap: var(--separacion);
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
section[id^="reixa-"] img,
|
||||
div[id^="reixa-"] img
|
||||
{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
section[id^="reixa-"] div.modal,
|
||||
div[id^="reixa-"] div.modal
|
||||
{
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
padding: var(--separacion);
|
||||
|
||||
background-color: rgb(0,0,0);
|
||||
background-color: rgba(0,0,0,0.9);
|
||||
}
|
||||
|
||||
section[id^="reixa-"] div.modal figure,
|
||||
div[id^="reixa-"] div.modal figure
|
||||
{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
section[id^="reixa-"] div.modal img,
|
||||
div[id^="reixa-"] div.modal img
|
||||
{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
section[id^="reixa-"] div.modal figcaption,
|
||||
div[id^="reixa-"] div.modal figcaption
|
||||
{
|
||||
display: block;
|
||||
|
||||
height: 40px;
|
||||
width: 80%;
|
||||
max-width: 700px;
|
||||
|
||||
margin: auto;
|
||||
|
||||
padding: 10px 0;
|
||||
|
||||
text-align: center;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
section[id^="reixa-"] .modal-pechar,
|
||||
div[id^="reixa-"] .modal-pechar
|
||||
{
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 35px;
|
||||
|
||||
color: #f1f1f1;
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
section[id^="reixa-"] .modal-pechar:hover,
|
||||
div[id^="reixa-"] .modal-pechar:hover,
|
||||
section[id^="reixa-"] .modal-pechar:focus,
|
||||
div[id^="reixa-"] .modal-pechar:focus
|
||||
{
|
||||
color: #bbb;
|
||||
text-decoration: none;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
section[id^="reixa-"] img.modal-imaxe,
|
||||
div[id^="reixa-"] img.modal-imaxe,
|
||||
section[id^="reixa-"] figcaption,
|
||||
div[id^="reixa-"] figcaption
|
||||
{
|
||||
animation-name: zoom;
|
||||
animation-duration: 0.6s;
|
||||
}
|
||||
|
||||
footer#pe
|
||||
{
|
||||
padding-block: 1.5rem;
|
||||
|
|
@ -577,11 +805,32 @@ footer#pe p#desenrolo span
|
|||
background-color: rgb(var(--cor_10));
|
||||
}
|
||||
|
||||
.centrado
|
||||
.centrado,
|
||||
.align_center
|
||||
{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.flexible
|
||||
{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--separacion);
|
||||
}
|
||||
|
||||
.linna
|
||||
{
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.noscroll
|
||||
{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.visually-hidden
|
||||
{
|
||||
position: absolute;
|
||||
|
|
@ -616,6 +865,12 @@ footer#pe p#desenrolo span
|
|||
|
||||
@media (min-width: 640px)
|
||||
{
|
||||
section[id^="reixa-"],
|
||||
div[id^="reixa-"]
|
||||
{
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
footer#pe div#info
|
||||
{
|
||||
grid-template-columns: auto var(--separacion) auto 1fr auto;
|
||||
|
|
@ -704,6 +959,12 @@ footer#pe p#desenrolo span
|
|||
grid-column: 1 / 3;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
section[id^="reixa-"],
|
||||
div[id^="reixa-"]
|
||||
{
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px)
|
||||
|
|
@ -744,4 +1005,15 @@ footer#pe p#desenrolo span
|
|||
{
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
article#habitacions figure
|
||||
{
|
||||
width: calc(50% - (var(--separacion) * 2));
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoom
|
||||
{
|
||||
from {transform:scale(0)}
|
||||
to {transform:scale(1)}
|
||||
}
|
||||
|
|
@ -1,22 +1,31 @@
|
|||
<?php namespace ProcessWire;
|
||||
|
||||
/** @var Page $page API variable */
|
||||
|
||||
$menu = '';
|
||||
$contido = '';
|
||||
/** @var Page $page */
|
||||
/** @var Pages $pages */
|
||||
/** @var Config $config */
|
||||
/** @var Sanitizer $sanitizer API variable */
|
||||
/** @var WireInput $input API variable */
|
||||
/** @var User $user API variable */
|
||||
/** @var Languages $languages API variable */
|
||||
/** @var SiteConfig $configuracion */
|
||||
/** @var HomePage $inicio */
|
||||
|
||||
if($configuracion['mantemento']['activo'] && !$user->isLoggedin())
|
||||
{
|
||||
$session->redirect($inicio->url);
|
||||
$session->redirect($inicio->url);
|
||||
}
|
||||
else
|
||||
{
|
||||
|
||||
$menu = renderMenu($inicio->children);
|
||||
|
||||
$contido .= renderMigasPan($page) . "\n";
|
||||
$contido .= '<article id="' . $page->name .'" class="container">' . "\n";
|
||||
$contido .= '<h2 class="visually-hidden">' . ucfirst($page->title) . '</h2>' . "\n";
|
||||
$contido .= getSeccions($page->seccions) . "\n";
|
||||
$contido .= '</article>' . "\n";
|
||||
$menu = renderMenu($inicio->and($inicio->children));
|
||||
?>
|
||||
<main id="contido" class="completo">
|
||||
<nav id="migas" aria-label="<?=_x("Breadcrumb", "Breadcrumb");?>">
|
||||
<?=renderMigasPan($page);?>
|
||||
</nav>
|
||||
<article id="habitacion">
|
||||
<h1><?=ucfirst($page->title);?></h1>
|
||||
<?=getSeccions($page->seccions);?>
|
||||
</article>
|
||||
</main>
|
||||
<?php
|
||||
}
|
||||
|
|
@ -1,9 +1,14 @@
|
|||
<?php namespace ProcessWire;
|
||||
|
||||
/** @var Page $page API variable */
|
||||
|
||||
$menu = '';
|
||||
$contido = '';
|
||||
/** @var Page $page */
|
||||
/** @var Pages $pages */
|
||||
/** @var Config $config */
|
||||
/** @var Sanitizer $sanitizer API variable */
|
||||
/** @var WireInput $input API variable */
|
||||
/** @var User $user API variable */
|
||||
/** @var Languages $languages API variable */
|
||||
/** @var SiteConfig $configuracion */
|
||||
/** @var HomePage $inicio */
|
||||
|
||||
if($configuracion['mantemento']['activo'] && !$user->isLoggedin())
|
||||
{
|
||||
|
|
@ -11,18 +16,19 @@ if($configuracion['mantemento']['activo'] && !$user->isLoggedin())
|
|||
}
|
||||
else
|
||||
{
|
||||
|
||||
$menu = renderMenu($inicio->children);
|
||||
|
||||
$contido .= renderMigasPan($page) . "\n";
|
||||
$contido .= '<article id="inicio" class="container">' . "\n";
|
||||
$contido .= '<h2 class="visually-hidden">' . ucfirst($page->title) . '</h2>' . "\n";
|
||||
$contido .= getSeccions($page->seccions) . "\n";
|
||||
$contido .= '<div class="row g-4 py-5 row-cols-1 row-cols-lg-2 justify-content-center clearfix">' . "\n";
|
||||
if(count($page->ligazon_imaxe))
|
||||
{
|
||||
$contido .= getSeccions($page->ligazon_imaxe) . "\n";
|
||||
}
|
||||
$contido .= '</div>' . "\n";
|
||||
$contido .= '</article>' . "\n";
|
||||
$menu = renderMenu($inicio->and($inicio->children));
|
||||
?>
|
||||
<main id="contido" class="completo">
|
||||
<nav id="migas" aria-label="<?=_x("Breadcrumb", "Breadcrumb");?>">
|
||||
<?=renderMigasPan($page);?>
|
||||
</nav>
|
||||
<article id="habitacions" class="flexible linna">
|
||||
<h1 class="visually-hidden"><?=ucfirst($page->title);?></h1>
|
||||
<?=getSeccions($page->seccions);?>
|
||||
<?php if(count($page->ligazon_imaxe)): ?>
|
||||
<?=getSeccions($page->ligazon_imaxe);?>
|
||||
<?php endif; ?>
|
||||
</article>
|
||||
</main>
|
||||
<?php
|
||||
}
|
||||
|
|
@ -39,4 +39,24 @@ const swiper_galeria = new Swiper(".galeria",
|
|||
prevEl: ".swiper-button-prev",
|
||||
},
|
||||
freeMode: false,
|
||||
});
|
||||
|
||||
document.addEventListener("click", function (e)
|
||||
{
|
||||
if(e.target.classList.contains("reixa-item") && window.matchMedia("(min-width: 768px)"))
|
||||
{
|
||||
document.body.classList.toggle('noscroll', true);
|
||||
document.querySelector(".modal").setAttribute('aria-hidden', false);
|
||||
document.querySelector(".modal").style.display = 'block';
|
||||
document.querySelector(".modal-imaxe").src = e.target.src;
|
||||
document.querySelector(".modal-imaxe").alt = e.target.alt;
|
||||
document.querySelector(".modal-descripcion").textContent = e.target.alt;
|
||||
}
|
||||
|
||||
if(e.target.classList.contains("modal-pechar") && window.matchMedia("(min-width: 768px)"))
|
||||
{
|
||||
document.body.classList.toggle('noscroll', false);
|
||||
document.querySelector(".modal").setAttribute('aria-hidden', true);
|
||||
document.querySelector(".modal").style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
|
@ -104,7 +104,7 @@ function getSeccions($seccions)
|
|||
switch ($seccion->seccion_tipo->value)
|
||||
{
|
||||
case 'texto':
|
||||
$saida .= renderTexto($seccion, true);
|
||||
$saida .= renderTexto($seccion);
|
||||
break;
|
||||
case 'imaxe':
|
||||
$saida .= renderImaxe($seccion);
|
||||
|
|
@ -305,6 +305,75 @@ function renderGaleria($seccion)
|
|||
return $saida;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param array|PageArray $seccion
|
||||
* @return string
|
||||
*/
|
||||
|
||||
function renderReixa($seccion)
|
||||
{
|
||||
$saida = '';
|
||||
$reixa = '';
|
||||
$modal = '';
|
||||
|
||||
foreach($seccion->imaxes as $imaxe)
|
||||
{
|
||||
$reixa .= '<img class="reixa-item" src="' . $imaxe->url . '" alt="' . $imaxe->description . '">';
|
||||
}
|
||||
|
||||
$modal .= '<div class="modal" tabindex="-1" aria-labelledby="reixa-modal-label" aria-hidden="true" style="display: none;">';
|
||||
$modal .= '<i class="modal-pechar icon-x"></i><span class="visually-hidden">' . _x('Close menu', 'Close the menu'). '</span>';
|
||||
$modal .= '<figure>';
|
||||
$modal .= '<img class="modal-imaxe">';
|
||||
$modal .= '<figcaption class="modal-descripcion"></figcaption>';
|
||||
$modal .= '</figure>';
|
||||
$modal .= '</div>';
|
||||
|
||||
if($seccion->titular)
|
||||
{
|
||||
$saida .= '<section id="reixa-' . $seccion->id . '">';
|
||||
$saida .= '<h2>' . $seccion->titular . '</h2>';
|
||||
$saida .= $reixa;
|
||||
$saida .= $modal;
|
||||
$saida .= '</section>';
|
||||
}
|
||||
else
|
||||
{
|
||||
$saida .= '<div id="reixa-' . $seccion->id . '">';
|
||||
$saida .= $reixa;
|
||||
$saida .= $modal;
|
||||
$saida .= '</div>';
|
||||
}
|
||||
|
||||
return $saida;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param array|PageArray $seccion
|
||||
* @return string
|
||||
*/
|
||||
|
||||
function renderTexto($seccion)
|
||||
{
|
||||
$saida = '';
|
||||
|
||||
if($seccion->titular)
|
||||
{
|
||||
$saida .= '<section id="texto-' . $seccion->id . '">';
|
||||
$saida .= '<h2>' . $seccion->titular . '</h2>';
|
||||
$saida .= $seccion->artigo;
|
||||
$saida .= '</section>';
|
||||
}
|
||||
else
|
||||
{
|
||||
$saida .= '<div id="texto-' . $seccion->id . '" class="artigo">';
|
||||
$saida .= $seccion->artigo;
|
||||
$saida .= '</div>';
|
||||
}
|
||||
|
||||
return $saida;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param array|PageArray $seccion
|
||||
* @return string
|
||||
|
|
@ -351,6 +420,27 @@ function renderImaxe($seccion)
|
|||
return $saida;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param array|PageArray $seccion
|
||||
* @return string
|
||||
*/
|
||||
|
||||
function renderLigazonImaxe($seccion)
|
||||
{
|
||||
$saida = '';
|
||||
|
||||
$saida .= '<figure>' . "\n";
|
||||
$saida .= '<img src="' . $seccion->imaxe->url . '" alt="' . $seccion->imaxe->description . '" loading="lazy">';
|
||||
$saida .= '<figcaption>' . "\n";
|
||||
$saida .= '<h2>' . $seccion->titular . '</h2>' . "\n";
|
||||
$saida .= '<p>' . _x('See details', 'see details') . '</p>' . "\n";
|
||||
$saida .= '<a href=' . $seccion->ligazon_interna->url . '></a>' . "\n";
|
||||
$saida .= '</figcaption>' . "\n";
|
||||
$saida .= '</figure>' . "\n";
|
||||
|
||||
return $saida;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -393,72 +483,6 @@ function renderMapaDoSitio($paxinas, $profundidade = 0, $clase = 'nav')
|
|||
return $saida;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* @param array|PageArray $seccion
|
||||
* @return string
|
||||
*/
|
||||
|
||||
function renderReixa($seccion)
|
||||
{
|
||||
$saida = '';
|
||||
|
||||
$saida .= '<section class="container">' . "\n";
|
||||
$saida .= '<h3 class="visually-hidden">' . (($seccion->titular) ? $seccion->titular : 'Reixa') . '</h3>' . "\n";
|
||||
$saida .= '<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3">' . "\n";
|
||||
foreach($seccion->imaxes as $imaxe)
|
||||
{
|
||||
$saida .= '<figure class="col py-3">' . "\n";
|
||||
$saida .= '<img class="reixa-item" src="' . $imaxe->url . '" alt="' . $imaxe->description . '">' . "\n";
|
||||
$saida .= '</figure>' . "\n";
|
||||
}
|
||||
$saida .= '</div>' . "\n";
|
||||
|
||||
$saida .= '<div class="modal fade" id="reixa-modal" tabindex="-1" aria-labelledby="reixa-modal-label" aria-hidden="true">' . "\n";
|
||||
$saida .= '<div class="modal-dialog modal-dialog-centered modal-lg">' . "\n";
|
||||
$saida .= '<div class="modal-content">' . "\n";
|
||||
$saida .= '<div class="modal-header">' . "\n";
|
||||
$saida .= '<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>' . "\n";
|
||||
$saida .= '</div>' . "\n";
|
||||
$saida .= '<div class="modal-body">' . "\n";
|
||||
$saida .= '<figure class="col">' . "\n";
|
||||
$saida .= '<img class="modal-img" src="' . $imaxe->url . '" alt="' . $imaxe->description . '">' . "\n";
|
||||
$saida .= '<figcaption class="modal-label">' . $imaxe->description . '</figcaption>' . "\n";
|
||||
$saida .= '</figure>' . "\n";
|
||||
$saida .= '</div>' . "\n";
|
||||
$saida .= '</div>' . "\n";
|
||||
$saida .= '</div>' . "\n";
|
||||
$saida .= '</div>' . "\n";
|
||||
$saida .= '</section>';
|
||||
|
||||
return $saida;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* @param array|PageArray $seccion
|
||||
* @return string
|
||||
*/
|
||||
|
||||
function renderTexto($seccion, $centrado = false)
|
||||
{
|
||||
$saida = '';
|
||||
|
||||
if($seccion->titular)
|
||||
{
|
||||
$saida .= '<div class="row text-start ' . (($centrado) ? 'text-md-center' : '') . '">' . "\n";
|
||||
$saida .= '<h3 class="fw-semibold">' . $seccion->titular . '</h3>' . "\n";
|
||||
$saida .= '</div>' . "\n";
|
||||
}
|
||||
$saida .= '<div class="row text-start ' . (($centrado) ? 'text-md-center ' : '') . 'mb-5">' . "\n";
|
||||
$saida .= $seccion->artigo . "\n";
|
||||
$saida .= '</div>' . "\n";
|
||||
|
||||
return $saida;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param array|PageArray $seccion
|
||||
* @return string
|
||||
|
|
@ -495,26 +519,7 @@ function renderBoton($seccion)
|
|||
return $saida;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param array|PageArray $seccion
|
||||
* @return string
|
||||
*/
|
||||
|
||||
function renderLigazonImaxe($seccion)
|
||||
{
|
||||
$saida = '';
|
||||
|
||||
$saida .= '<figure class="col effect-ming">' . "\n";
|
||||
$saida .= '<img src="' . $seccion->imaxe->url . '" alt="' . $seccion->imaxe->description . '">' . "\n";
|
||||
$saida .= '<figcaption>' . "\n";
|
||||
$saida .= '<h3>' . $seccion->titular . '</h3>' . "\n";
|
||||
$saida .= '<p>' . _x('See details', 'see details') . '</p>' . "\n";
|
||||
$saida .= '<a href=' . $seccion->ligazon_interna->url . '></a>' . "\n";
|
||||
$saida .= '</figcaption>' . "\n";
|
||||
$saida .= '</figure>' . "\n";
|
||||
|
||||
return $saida;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param array|PageArray $seccion
|
||||
|
|
|
|||
Loading…
Reference in a new issue