modif page, renommage et suppression, du responsive design, modif dans Director, notif toast

3 files changed, 102 insertions, 25 deletions

diff --git a/public/css/foot.css b/public/css/foot.css
index 038d33b..023a0f2 100644
--- a/public/css/foot.css
+++ b/public/css/foot.css
@@ -6,7 +6,7 @@ footer
         background-color: #B7E9FE;
         /*width: 1200px;*/
         margin: auto;
-        padding: 0 20px;
+        /*padding: 0 20px;*/
         
 }
 footer > div
@@ -39,7 +39,7 @@ footer > div
         /*max-width: 45%;*/
         /*margin-right: 10px;*/
         /*margin: 16px 0;*/ /* = p */
-        padding: 10px;
+        padding: 15px;
         list-style: none; /* retirer les puces */
         font-size: small;
         text-align: right;
@@ -69,6 +69,11 @@ footer > div
         margin: 0 3px;
 }*/
 
+.contact
+{
+        padding: 0 15px;
+}
+
 .footer_logo img
 {
         max-width: 288px;
@@ -85,6 +90,7 @@ footer > div
         footer > div
         {
                 flex-direction: column;
+                align-items: center;
         }
 }
 
@@ -95,6 +101,17 @@ footer > div
 }
 
 /* zone admin */
+.admin_buttons_zone
+{
+        margin: 5px;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+}
+.admin_buttons_zone p
+{
+        margin: 0;
+}
 .logged_out
 {
         /*display: none;*/
@@ -107,23 +124,17 @@ footer > div
 }
 .empty_admin_zone
 {
-        height: 32px;
+        height: 70px;
 }
 .logged_in
 {
-        height: 32px;
-        width: 1200px;
+        /*height: 70px;*/
+        width: 100%;
         margin: auto;
         background-color: #ffff00;
         position: fixed;
         bottom: 0px;
 }
-.logged_in > p
-{
-        margin: 5px 0;
-        display: flex;
-        justify-content: center;
-}
 .logged_in button
 {
         margin-left: 5px;
@@ -132,6 +143,7 @@ footer > div
         border: lightgrey 2px outset;
         border-radius: 4px;
         background-color: white;
+        margin: 2px;
 }
 .logged_in button:hover
 {
@@ -139,6 +151,11 @@ footer > div
         background-color: #ffff00;
         border-radius: 4px;
 }
+.modif_mode
+{
+        background-color: #ffae1a; /* orange clair soupe de poisson */
+}
+
 
 .toast {
     visibility: hidden;
diff --git a/public/css/main.css b/public/css/main.css
index 93a7bcf..870082a 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -11,15 +11,25 @@ section > h3
         margin: 0;
         text-align: center;
 }
-section > p /* boutons spéciaux mode admin */
-{
-        /*margin-left: 15px;*/
-}
 .grid_columns
 {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
 }
+@media screen and (max-width: 800px)
+{
+        .grid_columns
+        {
+                grid-template-columns: repeat(2, 1fr);
+        }
+}
+@media screen and (max-width: 550px)
+{
+        .grid_columns
+        {
+                display: block;
+        }
+}
 .galery_photos
 {
         display: flex;
@@ -148,23 +158,35 @@ article a:hover
         flex-wrap: wrap;
         font-size: smaller;
 }*/
-.new_bloc
+.edit_bloc_zone
 {
         background-color: white;
         padding: 10px;
-        margin: 10px 20px;
-
+        margin: 10px 15px;
+        display: flex;
+        justify-content: space-evenly;
+        flex-wrap: wrap;
 }
-.new_bloc p
+.edit_bloc_zone p
 {
         margin: 5px;
 }
+.new_bloc, .modify_bloc
+{
+        /*background-color: white;
+        padding: 10px;
+        margin: 10px 20px;*/
+}
+.new_bloc p
+{
+        /*margin: 5px;*/
+}
 .new_bloc #bloc_title
 {
-        width: 100%;
+        width: 70%;
         max-width: 300px;
 }
-.new_bloc form select, .new_bloc form input[type=submit]
+.new_bloc form select, .new_bloc form input[type=submit], .modify_bloc form input[type=submit]
 {
         color: #ff1d04;
         font-size: medium;
@@ -176,9 +198,18 @@ select:hover
 {
         cursor: pointer;
 }
-.new_bloc form input[type=submit]:hover
+.new_bloc form input[type=submit]:hover, .modify_bloc form input[type=submit]:hover
 {
         background-color: #ffff00;
         border-radius: 4px;
         cursor: pointer;
+}
+.modify_bloc > div
+{
+        display: flex;
+        align-items: baseline;
+}
+.modify_bloc img
+{
+        vertical-align: middle;
 }
\ No newline at end of file
diff --git a/public/css/trombinoscope.css b/public/css/trombinoscope.css
index 357e6b0..cee2666 100644
--- a/public/css/trombinoscope.css
+++ b/public/css/trombinoscope.css
@@ -1,10 +1,39 @@
+/* css personnalissé à cette page,
+.grid_columns utilise un nombre de colonnes spécifique */
 article img
 {
         border-radius: 50%;
 }
-
 .grid_columns
 {
-        /* écrase les 3 colonnes par défaut */
-  grid-template-columns: repeat(4, 1fr);
+        grid-template-columns: repeat(4, 1fr);
+}
+@media screen and (max-width: 900px)
+{
+        .grid_columns
+        {
+                grid-template-columns: repeat(3, 1fr);
+        }
+}
+@media screen and (max-width: 650px)
+{
+        .grid_columns
+        {
+                grid-template-columns: repeat(2, 1fr);
+        }
+}
+@media screen and (max-width: 550px)
+{
+        .grid_columns
+        {
+                display: grid;
+                grid-template-columns: repeat(2, 1fr);
+        }
+}
+@media screen and (max-width: 350px)
+{
+        .grid_columns
+        {
+                display: block;
+        }
 }
\ No newline at end of file