Design-Anpassungen

Customers/Cards_Boxes.aspx

@@ -26,18 +26,66 @@
     <link rel="stylesheet" type="text/css" href="../css/Customers/MasterpageCustomers.css"/>          
     <link rel="stylesheet" type="text/css" href="../css/Customers/CardsBoxes.css"/>
     <link rel="stylesheet" type="text/css" href="../css/navbarsidebar2.css"/>    
+    <style>
+        @media (max-width: 558.98px) {
+    #conovertab {
+        width: 350px;
+        overflow-x: auto;
+    }
+    body {
+        width: 400px;
+    }
+    h1 {
+        font-size: 28px;
+    }
+
+    #tableSearch {
+        max-width: 350px;
+    }
+
+    #containerseiterand {
+        margin-left: 5px;
+        margin-right: 5px;
+        width: 350px;
+    }
+
+    #imgcar {
+        width: 300px;
+        height: 125px;
+    }
+
+    .carousel-inner {
+        width: 600px;
+        height: 125px;
+    }
+
+    .carousel-item {
+        width: 600px;
+        height: 125px;
+    }
+
+    carousel-caption d-none d-md-block {
+        width: 600px;
+        height: 125px;
+    }
+}
+    </style>
 </asp:Content>
 <asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
      <asp:ScriptManager ID="script4" runat="server"></asp:ScriptManager>
      <asp:UpdatePanel ID="panelupdate4" runat="server"><ContentTemplate>
+          <center>
+              
     <div style="height:/*5px*/ 0.390625vh"></div>
      <h1>Karten und Boxen:</h1>
      <h2>Das ist die Übersicht über all Ihre zu den LKWs zugehörigen Boxen:</h2>
          <div class="g-3">
+                  <!-- Große Bildschirme-->   
+            <div class="d-none d-md-block">
                                              <!-- <input class="form-control mb-4" id="tableSearch" type="text"
                                                 placeholder="Einen Begriff eingeben oder den Anfang davon ...">-->
                                              <div id="conovertab" style="overflow-x:auto;"margin-left="-2px"> 
-                                                   <asp:Table class="table table-responsive table-striped table-borderless" id="normaltable" runat="server" EnableViewState="false" BorderWidth="2px">
+                                                   <asp:Table class="table table-responsive table-striped table-borderless" id="normaltable" runat="server" EnableViewState="false" Width="1200px" style="margin-left:-460px" BorderWidth="2px">
                                                     <asp:TableHeaderRow id="tbl_Header_row" runat="server" style="background-color:#043381;color:#fff">                                                        
                                                             <asp:TableHeaderCell ID="tbl_HeaderCellIndexNr" runat="server">Index-Nr</asp:TableHeaderCell>   
                                                             <asp:TableHeaderCell ID="tbl_HeaderCell_LKWs" runat="server">LKW-Nr</asp:TableHeaderCell>
@@ -51,6 +99,28 @@
                                                         </asp:Table>                                                                                
                                            </div> 
                             </div>
+                
+         <!-- Smartphone-->
+         <div class="d-md-none"> 
+              <!-- <input class="form-control mb-4" id="tableSearch" type="text"
+                                                placeholder="Einen Begriff eingeben oder den Anfang davon ...">-->
+                                             <div id="conovertab_M" style="overflow-x:auto;"margin-left="-2px"> 
+                                                   <asp:Table class="table table-responsive table-striped table-borderless" id="Table1" runat="server" EnableViewState="false" BorderWidth="2px">
+                                                    <asp:TableHeaderRow id="TableHeaderRow1" runat="server" style="background-color:#043381;color:#fff">                                                        
+                                                            <asp:TableHeaderCell ID="TableHeaderCell1" runat="server">Index-Nr</asp:TableHeaderCell>   
+                                                            <asp:TableHeaderCell ID="TableHeaderCell2" runat="server">LKW-Nr</asp:TableHeaderCell>
+                                                            <asp:TableHeaderCell ID="TableHeaderCell3" runat="server">Status</asp:TableHeaderCell>
+                                                            <asp:TableHeaderCell ID="TableHeaderCell4" runat="server">Auftragsdatum</asp:TableHeaderCell>                                                            
+                                                            <asp:TableHeaderCell ID="TableHeaderCell5" runat="server">Absender</asp:TableHeaderCell>
+                                                            <asp:TableHeaderCell ID="TableHeaderCell6" runat="server">Empfänger</asp:TableHeaderCell>                                                            
+                                                            <asp:TableHeaderCell ID="TableHeaderCell7" runat="server">Auftrags-Nr</asp:TableHeaderCell>
+                                                            <asp:TableHeaderCell ID="TableHeaderCell8" runat="server">Info</asp:TableHeaderCell>
+                                                        </asp:TableHeaderRow>
+                                                        </asp:Table>                                                                                
+                                           </div>                             
+         </div>
+             </div>
+              </center>
          </ContentTemplate></asp:UpdatePanel>
 </asp:Content>
 

css/Customers/CardsBoxes.css

@@ -1,88 +1,48 @@
-.btn btn-primary {
+@media (min-width: 558.98px) {
+    .btn btn-primary {
         color: #043381;
         background-color: #fff;
-}
+    }
 
-.align-self-xl-start {
+    .align-self-xl-start {
         width: 100%;
-}
+    }
-#normaltable {
-    width: 1500px;
-}
 
-#conovertab {
+    #normaltable {
-    margin-left: 0px;
+        width: 1400px;
-    width: 1700px;
+    }
-}
 
-.carousel-inner {
-    width: 600px;
-}
-
-#btn_resetForm {
-    margin-right: 2px;
-}
-
-#Abstand {
-    height: /*12px*/ 0.936768149882904vh;
-}
-
-#Abstand_lang {
-    height: /*24px*/ 1.873536299765808vh;
-}
-
-#Abstand_laenger {
-    height: /*32px*/ 2.498048399687744vh;
-}
-
-.g-3 {
-    border: /*1.8px*/ 0.0706436420722135vw #808080 ridge;
-    margin-left: 12px
-}
-
-#normaltable {
-    width: 100%;
-}
-
-@media (max-width: 558.98px) {
     #conovertab {
-        width: 350px;
+        margin-left: 0px;
-        overflow-x: auto;
+        width: 1400px;
-    }
-    body {
-        width: 400px;
-    }
-    h1 {
-        font-size: 12px;
-    }
-
-    #tableSearch {
-        max-width: 350px;
-    }
-
-    #containerseiterand {
-        margin-left: 5px;
-        margin-right: 5px;
-        width: 350px;
-    }
-
-    #imgcar {
-        width: 300px;
-        height: 125px;
     }
 
     .carousel-inner {
         width: 600px;
-        height: 125px;
     }
 
-    .carousel-item {
+    #btn_resetForm {
-        width: 600px;
+        margin-right: 2px;
-        height: 125px;
     }
 
-    carousel-caption d-none d-md-block {
+    #Abstand {
-        width: 600px;
+        height: /*12px*/ 0.936768149882904vh;
-        height: 125px;
+    }
+
+    #Abstand_lang {
+        height: /*24px*/ 1.873536299765808vh;
+    }
+
+    #Abstand_laenger {
+        height: /*32px*/ 2.498048399687744vh;
+    }
+
+    .g-3 {
+        border: /*1.8px*/ 0.0706436420722135vw #808080 ridge;
+        margin-left: 12px
+    }
+
+    #normaltable {
+        width: 80%;
     }
 }