responsive administrador modulo Mi escuela

Front/src/app/modules/Administrador/pages/catalogo-usuarios/catalogo-usuarios.component.css

@@ -222,86 +222,97 @@
 }
 
 @media only screen and (max-width: 600px) {
+  .grid-container {
+    grid-template-columns: repeat(1, 1fr);
+  }
+
+  .responsive {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .centrar {
+    margin-top: 10%;
+    margin-left: 15px;
+    display: flex;
+  }
+
+  .fondo {
+    background-color: #ebac3f;
+    display: inline-block;
+    border-radius: 10px;
+  }
+
+  .content {
+    margin-bottom: 0;
+    margin-top: 0;
+    font-weight: 500;
+    font-size: 24px;
+    color: white;
+    font-family: "Serenity Medium";
+    width: 61%;
+  }
+
+  .container-col {
+    display: flex;
+    flex-direction: column;
+    margin-left: -55px;
+    padding-top: 80px;
+    padding-right: 65px;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .container-search {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    width: 100%;
+  }
+
+  .input {
+    width: 100%;
+  }
+
+  .buttons {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
+    width: 100%;
+  }
+
+  .buttons mat-form-field,
+  .buttons app-button-dialog,
+  .buttons button {
+    width: 100% !important;
+  }
+
+  .green {
+    background-color: #2a6c42;
+    border: none;
+    color: white;
+    cursor: pointer;
+    border-radius: 6px;
+    height: 35px;
+  }
+
+  .table-container {
+    width: 100%;
+  }
+
+  .table-responsive {
+    overflow-x: scroll;
+    white-space: nowrap;
+  }
+  .container-search > div:first-child,
+.container-search .buttons {
+  align-self: flex-start;
+  width: 100%;
+}
+
+
+}
+
+
 
-    .grid-container {
-        grid-template-columns: repeat(1, 1fr);
-    }
-
-    .responsive {
-        display: flex;
-        flex-direction: column;
-    }
-
-    .centrar {
-        margin-top: 10%;
-        margin-left: 15px;
-        display: flex;
-    }
-
-    .fondo {
-        background-color: #ebac3f;
-        display: inline-block;
-        border-radius: 10px;
-    }
-
-    .content {
-        margin-bottom: 0;
-        margin-top: 0;
-        font-weight: 500;
-        font-size: 24px;
-        color: white;
-        font-family: "Serenity Medium";
-        width: 61%;
-
-    }
-
-
-    .container-col {
-        display: flex;
-        flex-direction: column;
-        margin-left: -55px;
-        padding-top: 80px;
-        padding-right: 65px;
-        width: 100%;
-        box-sizing: border-box;
-    }
-
-
-    .container-search {
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        width: 150%;
-    }
-
-    .input {
-        width: 100%;
-    }
-
-    .buttons {
-        display: flex;
-        justify-content: space-around;
-        align-items: center;
-        flex-direction: row;
-    }
-
-    .green {
-        background-color: #2a6c42;
-        border: none;
-        color: white;
-        cursor: pointer;
-        border-radius: 6px;
-        height: 35px;
-    }
-
-    .table-container {
-        width: 150%;
-
-    }
-
-    .table-responsive {
-        overflow-x: scroll;
-        white-space: nowrap;
-    }
-
-}

Front/src/app/modules/Administrador/pages/catalogo-usuarios/catalogo-usuarios.component.html

@@ -15,7 +15,7 @@
         </div>
        <div class="buttons">
             <div class="flex-row items-center">
-                <mat-form-field style="width: 75%; margin-left: 20px; margin-right: 20px; margin-top: 5px;">
+                <mat-form-field >
                     <mat-label>Mostrar:</mat-label>
                     <mat-select value="Activos" (selectionChange)="option($event.value)">
                         <mat-option value="Activos">Activos</mat-option>

Front/src/app/modules/Administrador/pages/categorias-materias/categorias-materias.component.css

@@ -26,17 +26,19 @@
 }
 
 .input {
-    width: 500px;
-    color: rgb(0, 140, 255);
-}
+    width: 100%;
+    margin-right: 20px;
+    margin-left: 20px;
+  }
+
 
 .container-col {
     display: flex;
     flex-direction: column;
     padding-top: 100px;
-    padding-left: 30px;
+    padding-left: 65px;
     padding-right: 65px;
-    width: 100%; 
+    width: 100%;
     box-sizing: border-box;
 }
 
@@ -72,6 +74,10 @@
     cursor: pointer;
 }
 
+.icon {
+    transform: scale(0.8);
+}
+
 .green {
     background-color: #2a6c42;
     border: none;
@@ -83,18 +89,27 @@
 
 .green:hover {
     background-color: #205232;
-    
+
 }
 
 .buttons {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    width: 100% ;
+    width: 100%;
     margin-bottom: 15px;
     padding-left: 20px;
 }
 
+.materia-circle {
+    width: 30px;
+    height: 30px;
+    border-radius: 100%;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+
 /* ---------------modal----------------- */
 
 .icon {
@@ -121,10 +136,22 @@
     font-weight: 600;
 }
 
-.input {
+.grid-container {
+    display: grid;
+    grid-template-columns: auto auto auto auto;
+    gap: 10px 30px;
+  }
+
+  .grid-item {
+    width: auto;
+    transition: transform 0.3s ease;
+
+  }
+
+.input-u {
     width: 100%;
     margin-right: 20px;
-    margin-left: 20px;
+
   }
 
 .responsive {
@@ -134,9 +161,9 @@
 
   .is-invalid {
     color: red;
-  
+
   }
-  
+
   .is-invalid-icon {
     color: rgb(218, 113, 113);
   }
@@ -149,7 +176,7 @@
 
   .yellow {
     background-color: #ebac3f;
-     
+
     border: none;
     color: white;
     padding: 5px 5px;
@@ -169,7 +196,7 @@
 
   .orange {
     background-color: #f56227;
-     
+
     border: none;
     color: white;
     text-align: center;
@@ -188,7 +215,7 @@
 
   .red {
     background-color: red;
-     
+
     border: none;
     color: white;
     text-align: center;
@@ -204,14 +231,8 @@
     background-color: rgb(204, 3, 3);
   }
 
-
-
-  
 @media only screen and (max-width: 600px) {
-    .responsive {
-        display: flex;
-        flex-direction: column;
-      }     
+
 
     /* titulo */
     .centrar {
@@ -239,11 +260,11 @@
         font-family: "Serenity Medium";
     }
 
-
     .container-col {
         display: flex;
         flex-direction: column;
         padding-top: 80px;
+        margin-left: -55px;
         padding-right: 65px;
         width: 100%;
         box-sizing: border-box;
@@ -254,7 +275,7 @@
         display: flex;
         flex-direction: column;
         justify-content: space-between;
-        width: 100%;
+        width: 150%;
     }
 
     .input {
@@ -266,6 +287,8 @@
         justify-content: space-around;
         align-items: center;
         margin-bottom: 10px;
+        flex-direction: column;
+
     }
 
     .green {
@@ -277,10 +300,17 @@
         height: 35px;
     }
 
-    
+    .green {
+        background-color: #2a6c42;
+        border: none;
+        color: white;
+        cursor: pointer;
+        border-radius: 6px;
+        height: 35px;
+    }
 
     .table-container {
-        width: 120%;
+        width: 150%;
     }
 
     .table-responsive {
@@ -288,4 +318,4 @@
         white-space: nowrap;
     }
 
-}
+}

Front/src/app/modules/Administrador/pages/circulares/circulares.component.css

@@ -406,6 +406,76 @@
 
 
 
+@media screen and (max-width: 768px) {
+  .centrar {
+    text-align: center;
+  }
+
+  .fondo {
+    padding: 10px;
+  }
+
+  .content {
+    font-size: 18px !important;
+  }
+
+  .container-col {
+    padding: 10px;
+  }
+
+  .container-search {
+    flex-direction: column !important;
+    align-items: stretch;
+  }
+
+  .container-search mat-form-field,
+  .container-search .buttons {
+    width: 100% !important;
+    margin: 5px 0;
+  }
+
+  .buttons {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    align-items: stretch;
+  }
+
+  .buttons .flex-row {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  mat-form-field {
+    width: 100% !important;
+  }
+
+  .table-container {
+    overflow-x: auto;
+  }
+
+  table {
+    min-width: 600px;
+  }
+
+  .mat-slide-toggle {
+    transform: scale(0.9);
+  }
+
+  .action-edit {
+    width: 40px;
+    height: 40px;
+  }
+
+  .ml-10 {
+    margin-left: 0 !important;
+    margin-top: 10px;
+  }
+
+  .icon {
+    font-size: 18px;
+  }
+}
 
 
 /* -------------------- Modal stats -------------------- */

Front/src/app/modules/Administrador/pages/materias/materias.component.css

@@ -141,17 +141,17 @@
     grid-template-columns: auto auto auto auto;
     gap: 10px 30px;
   }
-  
+
   .grid-item {
     width: auto;
     transition: transform 0.3s ease;
-  
+
   }
 
 .input-u {
     width: 100%;
     margin-right: 20px;
-    
+
   }
 
 .responsive {
@@ -161,9 +161,9 @@
 
   .is-invalid {
     color: red;
-  
+
   }
-  
+
   .is-invalid-icon {
     color: rgb(218, 113, 113);
   }
@@ -176,7 +176,7 @@
 
   .yellow {
     background-color: #ebac3f;
-     
+
     border: none;
     color: white;
     padding: 5px 5px;
@@ -196,7 +196,7 @@
 
   .orange {
     background-color: #f56227;
-     
+
     border: none;
     color: white;
     text-align: center;
@@ -215,7 +215,7 @@
 
   .red {
     background-color: red;
-     
+
     border: none;
     color: white;
     text-align: center;
@@ -318,4 +318,4 @@
         white-space: nowrap;
     }
 
-}
+}