stylisation du popup "ajouter source météo" -> #227

mellisphera · Dec 17, 2021 · b243f76 · b243f76
1 parent 30f65e5
commit b243f76
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 13 deletions.
diff --git a/src/app/dashboard/weather/weather-config/weather-config.component.css b/src/app/dashboard/weather/weather-config/weather-config.component.css
@@ -3,10 +3,9 @@
 }
 
 #weather-table{
-    width: 98%;
+    width: 100%;
     text-align: center;
-    font-size: 16px;
-    min-width: 500px;
+    font-size: 14px;
 }
 
 #weather-table th{
@@ -25,6 +24,20 @@
     vertical-align: middle;
 }
 
+#modal-small{
+    width: 360px;
+}
+
+@media (max-width: 568px) {
+    .tr-add{
+        width: 100%;
+        text-align: left;
+    }
+    #modal-small{
+        max-width: 95%;
+    }
+}
+
 .tr-add:hover{
     background-color: rgb(242, 253, 241);
     cursor: pointer;
@@ -40,9 +53,6 @@
     cursor: pointer;
 }
 
-#modal-small{
-    width: 360px;
-}
 
 .weather-modal-flex{
     display:flex;

diff --git a/src/app/dashboard/weather/weather-config/weather-config.component.html b/src/app/dashboard/weather/weather-config/weather-config.component.html
@@ -76,10 +76,10 @@ <h4 class="modal-title" id="newSourceModalLabel" style="float:left;"></h4>
               </div>
             </div>
           </div>
+          <div>
+            <p class="weather-field-name">{{ 'WEATHER.CONFIG.BEGIN' | translate }} :</p>
+          </div>
           <div class="weather-modal-flex" style="margin-top: 10px;">
-            <div class="weather-modal-flex" style="flex-wrap: wrap;">
-              <p class="weather-field-name">{{ 'WEATHER.CONFIG.BEGIN' | translate }} :</p>
-            </div>
             <div class="weather-modal-flex" style="flex-wrap: wrap;">
               <input type="text" class="weather-input-date" style="margin-left: 10px;" [(ngModel)]="wS.start" [owlDateTimeTrigger]="dtBegin" [owlDateTime]="dtBegin" (ngModelChange)="beginDate()">
               <owl-date-time [pickerType]="'calendar'" #dtBegin></owl-date-time>
@@ -90,11 +90,11 @@ <h4 class="modal-title" id="newSourceModalLabel" style="float:left;"></h4>
                 class="weather-m-h" placeholder="m" style="text-align: center;">
             </div>
           </div>
+          <div>
+            <!--<input id="end-checkbox" type="checkbox" (change)="endCheckbox()" style="margin: 0" checked>-->
+            <p id="end-field" class="weather-field-name">{{ 'WEATHER.CONFIG.END' | translate }} :</p>
+          </div>
           <div id="end-div" class="weather-modal-flex" style="margin-top: 10px;">
-            <div class="weather-modal-flex" style="flex-wrap: wrap;">
-              <!--<input id="end-checkbox" type="checkbox" (change)="endCheckbox()" style="margin: 0" checked>-->
-              <p id="end-field" class="weather-field-name">{{ 'WEATHER.CONFIG.END' | translate }} :</p>
-            </div>
             <div class="weather-modal-flex" style="flex-wrap: wrap;">
               <input type="text" id="end-date" class="weather-input-date" style="margin-left: 10px;" [(ngModel)]="wS.end" [owlDateTimeTrigger]="dtEnd" [owlDateTime]="dtEnd" (ngModelChange)="endDate()">
               <owl-date-time [pickerType]="'calendar'" #dtEnd></owl-date-time>