From c0b176ae142624d6a6daa0f65ea6fead448b8b47 Mon Sep 17 00:00:00 2001 From: polo Date: Fri, 3 Mar 2023 23:44:43 +0100 Subject: inversion de positions --- public/css/accueil.css | 544 --------------------------------- public/css/discographie.css | 11 +- public/css/main.css | 555 ++++++++++++++++++++++++++++++++++ public/css/menu.css | 4 +- public/css/pages_articles_simples.css | 8 +- public/icone_descendre.png | Bin 0 -> 8648 bytes "public/icone_fl\303\250che.xcf" | Bin 0 -> 6734 bytes public/icone_monter.png | Bin 0 -> 8655 bytes public/inversion.js | 16 + 9 files changed, 586 insertions(+), 552 deletions(-) delete mode 100644 public/css/accueil.css create mode 100644 public/css/main.css create mode 100644 public/icone_descendre.png create mode 100644 "public/icone_fl\303\250che.xcf" create mode 100644 public/icone_monter.png create mode 100644 public/inversion.js (limited to 'public') diff --git a/public/css/accueil.css b/public/css/accueil.css deleted file mode 100644 index 2a42e29..0000000 --- a/public/css/accueil.css +++ /dev/null @@ -1,544 +0,0 @@ -/* public/accueil.css */ - -/*@font-face -{ - font-family: "you_are_loved"; - src: url('../fonts/you_are_loved.ttf') format('truetype'), - url('../fonts/you_are_loved.eot'), - url('../fonts/you_are_loved.eot?#iefix') format('embedded-opentype'), - url('../fonts/you_are_loved.woff2') format('woff2'), - url('../fonts/you_are_loved.woff') format('woff'); -}*/ - -@font-face /* pour .police_titre */ -{ - font-family: "IMPACTED"; - src: url('../fonts/IMPACTED.TTF') format('truetype'); -} - -.no_underline -{ - text-decoration: none; -} - -body -{ - margin: 0px; - background-color: #326892; -} - -#bloc_page -{ - max-width: 700px; - margin: auto; - background-color: #FFFFFF; - font-family: Sans-serif; - font-size: 100%; -} - -nav -{ - position: fixed; - z-index: 2; - background-color: white; -} - -/* agir sur ul et li directement affecte le ckeditor */ -#ul_menu -{ - margin: 0px; - padding: 5px; - display: flex; - flex-wrap: wrap; - justify-content: center; -} - -#ul_menu li -{ - list-style-type: none; - white-space: nowrap; -} - -li a -{ - text-decoration: none; - color: #666; -} - -.police_titre -{ - font-family: IMPACTED, Arial, sans; - color: #ddc97a; -} - -a:hover:not(.police_titre) /* :not() = sauf */ -{ - color: #000000; -} - -#actuelle -{ - color: #463c3c; - font-weight: bold; -} - -img -{ - vertical-align: bottom; -} - -.boutonSubmitEditeur -{ - margin-top: 5px; -} - -.boutonAnnuler:hover -{ - border: none; -} - -h3 -{ - margin: 5px; -} -.conteneur_article -{ - margin: 3px; -} - -article -{ - font-size: 90%; - margin: 5px 0; -} -.articleAvecEditeur -{ - background-color: #a8b3d9; - padding: 2px 0px; - margin-bottom: 15px; -} - -form -{ - padding-bottom: 14px; - /*border-bottom: 1px black solid;*/ -} - -#courriel -{ - /*padding-top: 30px;*/ - font-size: 90%; -} - -#courriel * -{ - max-width: 220px; - color: black; - text-decoration: none; -} - -#courriel>button /* bouton pour remonter */ -{ - float: right; -} - -#courrielJS -{ - display: inline; - margin: 2px; -} - -.zoneVideAdmin -{ - padding-top: 10px; -} - -#modeAdmin -{ - background-color: orange; - position: fixed; - bottom: 0px; - width: 700px; - z-index: 2; - padding-top: 2px; - font-size: 90%; -} - -#modeAdmin p -{ - text-align: center; - margin: 0px; - padding: 2px; -} -#modeAdmin>p a -{ - text-decoration: none; - color: initial; -} - -#lienModeAdmin -{ - font-size: 90%; - margin-top: 10px; - margin-right: 30px; - text-align: right; - /* enlever la bande bleue en dessous du bloc_page */ - /*margin-bottom: 0;*/ - padding-bottom: 8px; -} - -#lienModeAdmin a -{ - text-decoration: none; - color: black; -} - -.connexionTitre -{ - margin-top: 0px; - text-align: center; -} -.connexionP -{ - margin: 20px; - text-align: center; -} -.avertissement -{ - color: red; - font-size: 90%; - text-align: center; - padding-bottom: 10px; -} - -.connexionFormulaire -{ - margin: 30px; -} - -.connexionFooter -{ - text-align: right; - padding: 5px; -} - -.connexionFooter a -{ - color: #666; -} - -.boutonBackup -{ - /*font-size: initial;*/ /* corrigé par normalize.css */ - margin: 2px; -} -.boutonBackup a -{ - text-decoration: none; - color: initial; -} - -button -{ - padding: 1px; -} - -/* options au survol */ -#options -{ - /*display: none;*/ - display: flex; -} - - -/* PC, y compris vieux écrans 800x600 */ -@media screen and (min-width: 700px) -{ - .police_titre - { - max-width: 550px; - font-size: 250%; - margin-left: 30px; - padding-top: 20px; - } - - /* compensation des cibles de liens # - superposées au "nav" hors flux */ - .articleSansEditeur:target - { - padding-top: 70px; - margin-top: -70px; - } - - nav - { - border-bottom: 1px black solid; - margin: 0px 35px; - max-width: 630px; - } - - li - { - margin: 6px 15px; - } - - header - { - margin: 0px 35px; - padding-top: 92px; - } - - #bienvenue - { - background-image: url("../accueil/bienvenue.png"); - width: 630px; - height: 596px; - } - - #contenu - { - width: 630px; - margin: auto; - padding-bottom: 40px; - } - - #courriel - { - margin: 0px 35px; - } - - .zoneVideAdmin, #modeAdmin - { - /*height: 30px;*/ - height: 76px; - } - - /*#modeAdmin:hover - { - height: 76px; - }*/ -} - -/* "tablettes" et vieux écrans 640x480 */ -@media screen and (max-width: 699px) -{ - #bloc_page - { - max-width: 540px; - font-size: 90%; - } - - .police_titre - { - font-size: 200%; - margin-left: 25px; - } - .police_titre:not(.police_titre_header) - { - padding-top: 20px; - } - - #bienvenue .police_titre - { - font-size: 250%; - top: 0px; - left: 65px; - } - - .articleSansEditeur:target - { - padding-top: 59px; - margin-top: -59px; - } - - nav - { - margin: 0px 30px; - max-width: 480px; - } - - li - { - margin: 4px 10px; - } - - header - { - margin: 0px 30px; - padding-top: 61px; - } - - #bienvenue - { - background-image: url("../accueil/bienvenue_petit.png"); - width: 480px; - height: 463px; - margin: auto; - } - - #contenu - { - width: 480px; - margin: auto; - padding-bottom: 30px; - } - - #courriel - { - margin: 0px 30px; - } - - .zoneVideAdmin, #modeAdmin - { - height: 71px; - } - - #modeAdmin - { - max-width: 540px; - } -} - - /* on grignote les colonnes autour du texte */ -@media screen and (max-width: 539px) -{ - #modeAdmin div - { - max-width: 480px; - margin: 0px; - border: none; - } - #modeAdmin - { - font-size: 90%; - } - .zoneVideAdmin, #modeAdmin - { - height: 66px; - } -} - -@media screen and (max-width: 479px) -{ - #bloc_page - { - max-width: 380px; - font-size: 85%; - } - - .police_titre - { - font-size: 150%; - margin-left: 15px; - } - .police_titre:not(.police_titre_header) - { - /*padding-top: 10px;*/ - } - - #bienvenue .police_titre - { - font-size: 200%; - top: 0px; - left: 25px; - } - - .articleSansEditeur:target - { - padding-top: 56px; - margin-top: -56px; - } - - nav - { - margin: 0px 30px; - max-width: 320px; - } - - li - { - margin: 0px 10px; - } - - header - { - padding-top: 60px; - } - - #bienvenue - { - background-image: url("../accueil/bienvenue_mini.png"); - width: 320px; - height: 316px; - } - - #contenu - { - width: 320px; - margin: auto; - } - - #courriel - { - margin: 0px 20px; - } - - #courriel * - { - max-width: 180px; - } - - #lienModeAdmin - { - margin-right: 20px; - } - - .zoneVideAdmin, #modeAdmin - { - height: 61px; - } - - #modeAdmin - { - max-width: 380px; - } -} - -/* spécialement pour les petits smartphones*/ -@media screen and (max-width: 379px) -{ - .zoneVideAdmin, #modeAdmin - { - height: 76px; - } - - #modeAdmin - { - /*font-size: 95%;*/ - padding: 0px; - } - #modeAdmin>p - { - /*font-size: 90%;*/ - /*margin: 1px;*/ - text-align: left; - } - - #modeAdmin div - { - max-width: 320px; - } - #modeAdmin>div p - { - /*margin: 0px 5px;*/ - } -} - -/* spécial */ -@media screen and (max-width: 320px) -{ - nav - { - margin: auto; - } -} \ No newline at end of file diff --git a/public/css/discographie.css b/public/css/discographie.css index 0362bb4..4d602fa 100644 --- a/public/css/discographie.css +++ b/public/css/discographie.css @@ -45,6 +45,7 @@ aside div z-index: 1; /* placer le menu déroulant au dessus */ /*background-color: #9fa8d0;*/ background-color: #a4afd4; + /*background-color: white;*/ border: 2px #3d4c9d solid; } @@ -60,6 +61,8 @@ aside div #chronologie p a:hover { color: black; + /*background-color: #a4afd4;*/ + background-color: white; } .linkChrono @@ -115,7 +118,8 @@ input padding-bottom: 20px; border-bottom: 1px black solid; } -.boutonAlbum a +/* mêmes règles que .boutonArticle dans main.css */ +.boutonAlbum span { padding: 2px; border: 4px black groove; @@ -132,7 +136,6 @@ input article { margin: 5px 0px; - width: 22%; /*min-width: 300px;*/ } .articleAvecEditeur @@ -230,6 +233,10 @@ a:hover figure figcaption /* annuler le positionnement du contenu */ margin-top: 55px; } + article + { + width: 32%; + } } @media screen and (max-width: 699px) diff --git a/public/css/main.css b/public/css/main.css new file mode 100644 index 0000000..77ab7ff --- /dev/null +++ b/public/css/main.css @@ -0,0 +1,555 @@ +/* public/main.css */ + +/*@font-face +{ + font-family: "you_are_loved"; + src: url('../fonts/you_are_loved.ttf') format('truetype'), + url('../fonts/you_are_loved.eot'), + url('../fonts/you_are_loved.eot?#iefix') format('embedded-opentype'), + url('../fonts/you_are_loved.woff2') format('woff2'), + url('../fonts/you_are_loved.woff') format('woff'); +}*/ + +@font-face /* pour .police_titre */ +{ + font-family: "IMPACTED"; + src: url('../fonts/IMPACTED.TTF') format('truetype'); +} + +.no_underline +{ + text-decoration: none; +} + +body +{ + margin: 0px; + background-color: #326892; +} + +#bloc_page +{ + max-width: 700px; + margin: auto; + background-color: #FFFFFF; + font-family: Sans-serif; + font-size: 100%; +} + +nav +{ + position: fixed; + z-index: 2; + background-color: white; +} + +/* agir sur ul et li directement affecte le ckeditor */ +#ul_menu +{ + margin: 0px; + padding: 5px; + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +#ul_menu li +{ + list-style-type: none; + white-space: nowrap; +} + +li a +{ + text-decoration: none; + color: #666; +} + +.police_titre +{ + font-family: IMPACTED, Arial, sans; + color: #ddc97a; +} + +a:hover:not(.police_titre) /* :not() = sauf */ +{ + color: #000000; +} + +#actuelle +{ + color: #463c3c; + font-weight: bold; +} + +img +{ + vertical-align: bottom; +} + +.boutonArticle span +{ + padding: 2px; + border: 4px black groove; +} +.boutonSubmitEditeur +{ + margin-top: 5px; +} + +.boutonAnnuler:hover +{ + border: none; +} + +h3 +{ + margin: 5px; +} +.conteneur_article +{ + margin: 3px; +} + +article +{ + font-size: 90%; + margin: 5px 0; +} +/* Eviter la superposition d’une entête fixe sur une ancre */ +article:target +{ + padding-top: 71px; + margin-top: -71px; +} +.articleAvecEditeur +{ + background-color: #a8b3d9; + padding: 2px 0px; + margin-bottom: 15px; +} + +form +{ + padding-bottom: 14px; + /*border-bottom: 1px black solid;*/ +} + +#courriel +{ + /*padding-top: 30px;*/ + font-size: 90%; +} + +#courriel * +{ + max-width: 220px; + color: black; + text-decoration: none; +} + +#courriel>button /* bouton pour remonter */ +{ + float: right; +} + +#courrielJS +{ + display: inline; + margin: 2px; +} + +.zoneVideAdmin +{ + padding-top: 10px; +} + +#modeAdmin +{ + background-color: orange; + position: fixed; + bottom: 0px; + width: 700px; + z-index: 2; + padding-top: 2px; + font-size: 90%; +} + +#modeAdmin p +{ + text-align: center; + margin: 0px; + padding: 2px; +} +#modeAdmin>p a +{ + text-decoration: none; + color: initial; +} + +#lienModeAdmin +{ + font-size: 90%; + margin-top: 10px; + margin-right: 30px; + text-align: right; + /* enlever la bande bleue en dessous du bloc_page */ + /*margin-bottom: 0;*/ + padding-bottom: 8px; +} + +#lienModeAdmin a +{ + text-decoration: none; + color: black; +} + +.connexionTitre +{ + margin-top: 0px; + text-align: center; +} +.connexionP +{ + margin: 20px; + text-align: center; +} +.avertissement +{ + color: red; + font-size: 90%; + text-align: center; + padding-bottom: 10px; +} + +.connexionFormulaire +{ + margin: 30px; +} + +.connexionFooter +{ + text-align: right; + padding: 5px; +} + +.connexionFooter a +{ + color: #666; +} + +.boutonBackup +{ + /*font-size: initial;*/ /* corrigé par normalize.css */ + margin: 2px; +} +.boutonBackup a +{ + text-decoration: none; + color: initial; +} + +button +{ + padding: 1px; +} + +/* options au survol */ +#options +{ + /*display: none;*/ + display: flex; +} + + +/* PC, y compris vieux écrans 800x600 */ +@media screen and (min-width: 700px) +{ + .police_titre + { + max-width: 550px; + font-size: 250%; + margin-left: 30px; + padding-top: 20px; + } + + /* compensation des cibles de liens # + superposées au "nav" hors flux */ + .articleSansEditeur:target + { + padding-top: 70px; + margin-top: -70px; + } + + nav + { + border-bottom: 1px black solid; + margin: 0px 35px; + max-width: 630px; + } + + li + { + margin: 6px 15px; + } + + header + { + margin: 0px 35px; + padding-top: 92px; + } + + #bienvenue + { + background-image: url("../accueil/bienvenue.png"); + width: 630px; + height: 596px; + } + + #contenu + { + width: 630px; + margin: auto; + padding-bottom: 40px; + } + + #courriel + { + margin: 0px 35px; + } + + .zoneVideAdmin, #modeAdmin + { + /*height: 30px;*/ + height: 76px; + } + + /*#modeAdmin:hover + { + height: 76px; + }*/ +} + +/* "tablettes" et vieux écrans 640x480 */ +@media screen and (max-width: 699px) +{ + #bloc_page + { + max-width: 540px; + font-size: 90%; + } + + .police_titre + { + font-size: 200%; + margin-left: 25px; + } + .police_titre:not(.police_titre_header) + { + padding-top: 20px; + } + + #bienvenue .police_titre + { + font-size: 250%; + top: 0px; + left: 65px; + } + + .articleSansEditeur:target + { + padding-top: 59px; + margin-top: -59px; + } + + nav + { + margin: 0px 30px; + max-width: 480px; + } + + li + { + margin: 4px 10px; + } + + header + { + margin: 0px 30px; + padding-top: 61px; + } + + #bienvenue + { + background-image: url("../accueil/bienvenue_petit.png"); + width: 480px; + height: 463px; + margin: auto; + } + + #contenu + { + width: 480px; + margin: auto; + padding-bottom: 30px; + } + + #courriel + { + margin: 0px 30px; + } + + .zoneVideAdmin, #modeAdmin + { + height: 71px; + } + + #modeAdmin + { + max-width: 540px; + } +} + + /* on grignote les colonnes autour du texte */ +@media screen and (max-width: 539px) +{ + #modeAdmin div + { + max-width: 480px; + margin: 0px; + border: none; + } + #modeAdmin + { + font-size: 90%; + } + .zoneVideAdmin, #modeAdmin + { + height: 66px; + } +} + +@media screen and (max-width: 479px) +{ + #bloc_page + { + max-width: 380px; + font-size: 85%; + } + + .police_titre + { + font-size: 150%; + margin-left: 15px; + } + .police_titre:not(.police_titre_header) + { + /*padding-top: 10px;*/ + } + + #bienvenue .police_titre + { + font-size: 200%; + top: 0px; + left: 25px; + } + + .articleSansEditeur:target + { + padding-top: 56px; + margin-top: -56px; + } + + nav + { + margin: 0px 30px; + max-width: 320px; + } + + li + { + margin: 0px 10px; + } + + header + { + padding-top: 60px; + } + + #bienvenue + { + background-image: url("../accueil/bienvenue_mini.png"); + width: 320px; + height: 316px; + } + + #contenu + { + width: 320px; + margin: auto; + } + + #courriel + { + margin: 0px 20px; + } + + #courriel * + { + max-width: 180px; + } + + #lienModeAdmin + { + margin-right: 20px; + } + + .zoneVideAdmin, #modeAdmin + { + height: 61px; + } + + #modeAdmin + { + max-width: 380px; + } +} + +/* spécialement pour les petits smartphones*/ +@media screen and (max-width: 379px) +{ + .zoneVideAdmin, #modeAdmin + { + height: 76px; + } + + #modeAdmin + { + /*font-size: 95%;*/ + padding: 0px; + } + #modeAdmin>p + { + /*font-size: 90%;*/ + /*margin: 1px;*/ + text-align: left; + } + + #modeAdmin div + { + max-width: 320px; + } + #modeAdmin>div p + { + /*margin: 0px 5px;*/ + } +} + +/* spécial */ +@media screen and (max-width: 320px) +{ + nav + { + margin: auto; + } +} \ No newline at end of file diff --git a/public/css/menu.css b/public/css/menu.css index 28cba08..4bf5262 100644 --- a/public/css/menu.css +++ b/public/css/menu.css @@ -13,11 +13,11 @@ { font-size: 90%; } -.boutonArticle a +/*.boutonArticle span { padding: 2px; border: 4px black groove; -} +}*/ .sectionActu {} diff --git a/public/css/pages_articles_simples.css b/public/css/pages_articles_simples.css index 9b6d2c3..2f3e901 100644 --- a/public/css/pages_articles_simples.css +++ b/public/css/pages_articles_simples.css @@ -26,14 +26,14 @@ figure } .boutonNouvelArticle { + /* comme "article" dans main.css */ font-size: 90%; } -.boutonArticle a +.boutonArticle span { - padding: 2px; - border: 4px black groove; + position: relative; + bottom: 6px; } - @media screen and (min-width: 700px) { #titre diff --git a/public/icone_descendre.png b/public/icone_descendre.png new file mode 100644 index 0000000..7980297 Binary files /dev/null and b/public/icone_descendre.png differ diff --git "a/public/icone_fl\303\250che.xcf" "b/public/icone_fl\303\250che.xcf" new file mode 100644 index 0000000..7fcf5d6 Binary files /dev/null and "b/public/icone_fl\303\250che.xcf" differ diff --git a/public/icone_monter.png b/public/icone_monter.png new file mode 100644 index 0000000..8e213ec Binary files /dev/null and b/public/icone_monter.png differ diff --git a/public/inversion.js b/public/inversion.js new file mode 100644 index 0000000..20a6871 --- /dev/null +++ b/public/inversion.js @@ -0,0 +1,16 @@ +// public/inversion.js + +// inverser la position de deux "articles" ou albums d'une page +function inversion() +{ + var page = ''; + var action = ''; // monter ou descendre + var fileCode = ''; // fileList[$i]['fileCode'] ?> + var position = ''; // fileList[$i]['position'] ?> + + const xhr = new XMLHttpRequest(); + url = 'index.php?page='+page+'&action='+action+'&file_code='+fileCode+'&position='+position+'#'+fileCode; + url = 'index.php?action=restauration&file_name='+fileInfos.name+'&file_size='+fileInfos.size; + xhr.open("GET", url); + xhr.send(); +} \ No newline at end of file -- cgit v1.2.3